web-dev-qa-db-ja.com

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

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

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

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

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

javascriptperformancefront-endgantry
8
Toni Marie

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

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

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

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

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

個人的には、速度の最適化に関しては、使用する拡張機能を非常に折衷的にするようにしています。 Iresearchおよびexperiment各タスクの最も効率的で高品質なもの、そしてコア内で手動で達成できることがある場合は、常に拡張機能を使用しないようにしてください。

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

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

あなたの手作業

私はreviewして、それらがアセットファイルをロードする方法を確認する必要があるすべての拡張機能を提案し、それが必要のないページへのロードは避けてください。例：可能であれば、テンプレートのオーバーライドを作成して、アセットファイルの読み込みを自分で制御することもできます。

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

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

最適化ツール

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

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

[〜＃〜]キャッシュ[〜＃〜]
また、 Jot Cache を使用して、キャッシュをより適切に制御します。コアキャッシュ。

[〜＃〜] cdn [〜＃〜]
[〜＃〜] cdn [〜＃〜]を使用して静的コンテンツを配信することが次のツールです-私は JoomlaのNoNumber CDN

[〜＃〜] htaccess [〜＃〜]
最後に、htaccesstocompressとExpireヘッダーをファイルに追加します。

9
FFrewin

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

5
Anibal

この無料のオンラインサービスを試して、javascript http://www.online-code.net/minify-js.html を圧縮し、cssを縮小してみてください http：//www.online- code.net/minify-css.html なので、Webページのサイズが小さくなります。このツールは無料で使用できます。jsファイルとcssファイルをアップロードするだけで、後でミニファイルをダウンロードできます。

0
tonytong