JavaScript を少なくする

JavaScript ファイルを最小化すると、ペイロード サイズとスクリプトの解析時間を短縮できます。Lighthouse レポートの [最適化] セクションには、圧縮されていないすべての JavaScript ファイルと、圧縮されたファイルを KiB 単位で削減できる可能性があるリストが表示されます。

Lighthouse Minify JavaScript の監査のスクリーンショット

JavaScript ファイルを圧縮する方法

圧縮とは、空白や、サイズを小さくしても完全に有効なコードファイルを作成するうえで不要なコードを削除するプロセスです。Terser は一般的な JavaScript 圧縮ツールです。webpack v4 には、圧縮されたビルドファイルを作成するためのこのライブラリ用のプラグインがデフォルトで含まれています。

スタック固有のガイダンス

Drupal

[Administration] > [Configuration] > [Development] ページで、[Aggregate JavaScript files] を有効にしていることを確認してください。また、追加のモジュールを使用してより高度な集計オプションを設定し、JavaScript アセットを連結、軽量化、圧縮してサイトを高速化することもできます。

Joomla

さまざまな Joomla 拡張機能を使用すると、スクリプトを連結、軽量化、圧縮して、サイトを高速化できます。この機能を提供するテンプレートも用意されています。

Magento

Terser を使用して、静的コンテンツのデプロイからすべての JavaScript アセットを圧縮し、組み込みの圧縮機能を無効にします。

対応

ビルドシステムが JS ファイルを自動的に圧縮する場合は、アプリケーションの製品版ビルドをデプロイしていることを確認します。これは React Developer Tools 拡張機能で確認できます。

WordPress

さまざまな WordPress プラグインは、スクリプトを連結、軽量化、圧縮することで、サイトを高速化できます。可能であれば、事前にビルドプロセスを使用してこの圧縮を行うこともできます。

関連情報