JavaScript を少なくする
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
JavaScript ファイルを最小化すると、ペイロード サイズとスクリプトの解析時間を短縮できます。Lighthouse レポートの [最適化] セクションには、圧縮されていないすべての JavaScript ファイルと、圧縮されたファイルを KiB 単位で削減できる可能性があるリストが表示されます。
JavaScript ファイルを圧縮する方法
圧縮とは、空白や、サイズを小さくしても完全に有効なコードファイルを作成するうえで不要なコードを削除するプロセスです。Terser は一般的な JavaScript 圧縮ツールです。webpack v4 には、圧縮されたビルドファイルを作成するためのこのライブラリ用のプラグインがデフォルトで含まれています。
スタック固有のガイダンス
Drupal
[Administration] > [Configuration] > [Development] ページで、[Aggregate JavaScript files] を有効にしていることを確認してください。また、追加のモジュールを使用してより高度な集計オプションを設定し、JavaScript アセットを連結、軽量化、圧縮してサイトを高速化することもできます。
Joomla
さまざまな Joomla 拡張機能を使用すると、スクリプトを連結、軽量化、圧縮して、サイトを高速化できます。この機能を提供するテンプレートも用意されています。
Magento
Terser を使用して、静的コンテンツのデプロイからすべての JavaScript アセットを圧縮し、組み込みの圧縮機能を無効にします。
対応
ビルドシステムが JS ファイルを自動的に圧縮する場合は、アプリケーションの製品版ビルドをデプロイしていることを確認します。これは React Developer Tools 拡張機能で確認できます。
WordPress
さまざまな WordPress プラグインは、スクリプトを連結、軽量化、圧縮することで、サイトを高速化できます。可能であれば、事前にビルドプロセスを使用してこの圧縮を行うこともできます。
関連情報
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2019-05-02 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2019-05-02 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2019-05-02 UTC。"],[],[]]