フロントエンドの負荷を最適化するには、JSを適切に組み合わせて圧縮するにはどうすればよいですか?


8

エンタープライズクライアント用の私のWebサイトには、ロード時にダウンロードされる約90個のアセットがあり、35個ほどがJSファイルです。Joomla用に作成された「最適化」拡張機能でさえ、私を31程度のJSファイルにまで減らし、悪用されているように見えるものではなく、結合されたcss / jsのみを圧縮します。

私はいくつかの最適化された無料のプラグインを試してみました、そしてそれらが私の読み込み時間に対してほとんど何もしないだろうなら、私は有料のものにお金を使うのをためらいます。

私のテンプレートは多くのカスタマイズが施されたRocketthemeベースであり、ガントリjs、ブートストラップjs、ビデオプレーヤーがjsファイルを使用するようないくつかの拡張機能があり、それらは単なる拡張ではなく拡張ごとにいくつかに広がっているようです1。

フロントエンドの負荷のこの部分を改善するために何が機能し、何が機能しないのですか?

回答:


9

これらすべてのファイルを処理するのは簡単ではありません。これらすべてを結合、縮小、圧縮すると、おそらく問題が発生します。満足のいく最適化レベルに到達するには、多くの努力とテクニックの組み合わせが必要です。

高速読み込みサイトを実現するための私の全体的なアプローチ。

高速なウェブサイトが不可欠です。Webサイトの速度の最適化は、通常は開発の最後に行われますが、最初から検討する必要があります。それは適切なテンプレートから始まります。

また、すべての拡張機能をインストールし、あらゆる種類の豪華なモジュールを使用すると、おそらく重いWebサイトになり、後で軽量化するのが非常に困難になります。

折衷的に-最小限にとどめる

個人的には、速度の最適化に関しては、使用する拡張機能を非常に折衷的にするようにしています。私は各タスクで最も効率的で高品質なものを調査して実験し、コア内で手動で達成できることがある場合は、拡張機能を使用しないように常に努めます。

また、あまり重要ではない豪華なフロントエンド機能を使用することに決めた場合、それが原因でWebサイトの速度を最適化する際に問題が発生する場合は、通常、それを破棄するか、豪華な機能を実装する別の方法を見つけます。

私はまた、通常、多くの異なる好みを満たすために多くの追加機能が付いているので、商用テンプレートの使用を避けようとします。テンプレートを作成し、必要なものだけを含めることを好みます。

あなたの手作業

アセットファイルをロードする方法を確認するために必要なすべての拡張機能を確認することをお勧めします。たとえば、必要のないページでの拡張機能のロードを回避できる場合、たとえば、独自に制御できるようにテンプレートのオーバーライドを作成できます。アセットファイルの読み込み。

必要はないが、まだロードされている拡張機能があるか、それらがどのように機能するかについて最適な設定がない場合があります
たとえば、JCE Mediaboxは、特定のメニュー項目にのみロードされるオプションを提供します。

また、ファイルを1つにマージできるかどうかも確認してください。たとえば、どのモジュールにもcssを読み込ませないでください。テンプレートのcssファイルとマージしてみてください。

最適化ツール

CSS / JAVASCRIPTの圧縮と制御
最適化ツール/プラグインに関しては、JCH Optimizeプラグインにかなり満足しています。それは無料ですが、数ドルをサポートする商用バージョンもあります。適切に調整すると、素晴らしい結果が得られ、開発者はサポートが必要な場合に非常に役立ちます。

有用であることが証明されているかもしれないもう1つのツールは、JQuery Easyプラグインです。さまざまなjavascriptファイルの読み込みをより適切に整理および制御し、それらが互いに競合し、JCH_Optimizeプラグインによる最適化をより簡単にする場合に役立ちます。

CACHE
私はまた、使用Jotのキャッシュを多くの拡張がコアキャッシュの問題を持っているので、キャッシュのより良好な制御を持っています、。

CDN
使用CDNを静的なコンテンツを配信するためには、次のツールです-私が使用してJoomlaのためNONUMBER CDNを

HTACCESS
最後に、htaccessを使用してファイルにExpireヘッダー圧縮および追加することで得られる大きな利点。


5

30個以上のJSファイルの簡単な解決策はありません。


私は「回答」として上の完全な提案をクリックしましたが、Gantryベースのテンプレートと拡張機能を使用しているため、JCHオプティマイズよりもRokBoosterの方がはるかにうまく機能したことにも注意してください。ありがとうございました!両方をクリックできるといいのですが。
Toni Marie

参考になったことを嬉しく思います
Anibal 2014年

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.