私のページには、およそ75kb程度のjqueryライブラリが含まれていることがよくあります。最近、オンラインで見つけたjavascriptライブラリ/プラグインをさらに追加する必要性を検討しています。さらに25kbを追加することを検討しています。そうすることで、サイズを追加するとサイトの読み込み時間が長くなるのではないかと心配しています。不要な読み込み時間を追加しないように、考慮すべき「経験則」の上限サイズはありますか?
5 に答える
私のルールは常に、必要なものだけを使用することです。
何もせずにアプリケーションの目標を達成できる場合は、それを使用しないでください。重要な機能セットが重いライブラリに依存している場合は、それを使用してください。
もちろん、何があっても、JSファイルがサーバーによってgzip(または同等のもの)で圧縮されていることを常に確認し、縮小されたファイルも使用してください。
最後に、聴衆を念頭に置くことが重要です。分析を適切に使用すると、ユーザーがページの読み込み時間を許容しているかどうかがわかります。
できるだけ小さくし、使用する予定のないライブラリにリンクしないこと以外に、私が提案できる一般的なルールはありません。
一般的なライブラリを使用している場合は、GoogleLibrariesAPIなどの一般的なサードパーティのライブラリをリンクします。エンドユーザーの多くは、そこからリンクするライブラリバージョンを既にブラウザにキャッシュしていて、読み込み時間を改善している可能性があります。
サイズに制限はありませんが(必要に応じて1GBでもかまいません)、通常はできるだけ小さくします。
スクリプトを最適化するためのヒント:
縮小-これは、変数名の短縮、空白の削除などを意味します。ディーンエドワーズの/packer/はその一例です。Google ClosureCompilerもお勧めしますが、コード構造が変わるため、ポストプロダクションフェーズ用に予約しておきます。
マージ-スクリプトをコンパイルして、少なくとも1つのファイルにのみ含まれるようにします。これにより、後で大量のHTTPリクエストを節約できます。
必要なものだけを使用する-たとえば、jQueryの一部しか必要ない場合は、独自のjQueryを(ドキュメントのどこかに)展開するオプションがあります。この別の例はjQueryUIで、選択したUI機能をロードするオプションがあります。
「経験則」についてはよくわかりませんが、次の質問を自問する必要があります。
たとえば、他の誰かにjQueryのようなライブラリをホストさせる方がはるかに優れています。これにより、自分のサーバーがコンテンツの提供のみを処理できるようになります。
しかし、何よりも、サイトの機能に必要な最小限のものだけが含まれています。
ライブラリが提供する機能がわからないため、見積もりを行うことは困難です。ただし、jQuery と比較することはできます。30 kb のファイルで非常に多くのクロス ブラウザー機能を提供します。
ページに追加するすべてのファイルは、転送に時間がかかります。キャッシュ、縮小化、CDN などで削減できます。また、すべての JavaScript ファイルを 1 つにバンドルするアプローチもあります。これにより、リクエスト数が減り、パフォーマンスが大幅に向上します。