JavaScript を少なくする

JavaScript ファイルを最小化すると、ペイロード サイズとスクリプトの解析時間を抑えることができます。Lighthouse レポートの [改善案] セクションには、未圧縮のすべての JavaScript ファイルと、これらのファイルを圧縮した場合に削減できる キビバイト(KiB)が示されます。

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

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

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

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

Drupal

[Administration] > [Configuration] > [Development] ページで [Aggregate JavaScript files] が有効になっていることを確認します。

Joomla

スクリプトを連結、圧縮、圧縮することで、サイトを高速化できる Joomla 拡張機能が多数用意されています。この機能を提供するテンプレートもあります。

Magento

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

対応

ビルドシステムで JS ファイルが自動的に圧縮される場合は、アプリケーションの本番環境ビルドをデプロイしていることを確認してください。これは、React デベロッパー ツール拡張機能で確認できます。

WordPress

スクリプトを結合、軽量化、圧縮してサイトの動作を速くする、さまざまな WordPress プラグインがあります。可能な場合は、ビルドプロセスで事前に軽量化しておくこともおすすめします。

リソース