JavaScriptの圧縮

Silktideは、ページがダウンロードするスクリプトファイルが圧縮されているかどうかをチェックします。圧縮とは、コードを読む人にしか必要のない空白、コメント、長い名前を削除するよう書き換えることです。圧縮されていないスクリプトは必要以上に大きく、ページの読み込みを遅くします。

圧縮によって、コードの動作が変わることはありません。たとえば、次のようになります。

// 圧縮前: 読みやすいが、サイズが大きい
function calculateTotalPrice(itemPrice, quantity) {
    return itemPrice * quantity;
}

// 圧縮後: 動作は同じで、サイズはわずか
function c(a,b){return a*b}

重要な理由

JavaScriptは、ページがダウンロードするデータの中で最も大きなものになることが多く、画像とは異なり、ページを完全に操作できるようになる前に処理する必要もあります。圧縮されていないスクリプトは、通常半分以下に縮小できます。この削減効果は、キャッシュされていないページを訪問者が訪れるたびに繰り返し発生するため、スマートフォンの利用者や通信速度の遅い接続を使う利用者ほど大きな影響を受けます。

圧縮は自動で行え、動作も変えないため、本番環境のスクリプトが圧縮されていないのは、ほとんどの場合見落としが原因です。ビルド工程が実行されていないか、開発用ファイルを誤ってデプロイしている可能性があります。

修正方法

1. サイトのビルド工程で圧縮を有効にします。現在のビルドツールにはすべて圧縮機能が含まれており、通常は本番ビルドでデフォルトにより有効になっています。
2. サイトにビルド工程がない場合は、CMSを確認します。多くのCMSには、スクリプトを自動的に圧縮する設定やプラグインがあります。
3. 最後の手段として、ファイルをアップロードする前にスタンドアロンの圧縮ツールにかけます。読みやすい元ファイルは残しておきます。編集するのは元ファイルで、公開するのは圧縮後の出力ファイルです。
4. 報告されたファイルが第三者のものである場合は、圧縮版が提供されていないか確認します。多くの場合、提供されています。

Silktideによるテスト方法

1. 速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
2. ページがダウンロードする各スクリプトファイルを調べ、圧縮した場合にどれだけ小さくなるかを推定します。
3. 意味のある削減可能サイズがある各ファイルを報告し、合計サイズに基づいてページを評価します。削減可能サイズが約50 KBある場合は低く評価され、250 KB以上ある場合は不良と評価されます。

トラブルシューティング

ファイルはすでに圧縮されているように見える

圧縮ツールによって圧縮の強さは異なるため、軽く圧縮されたファイルにも、まだ大きな削減余地がある場合があります。このチェックでは、ファイルをどれだけ小さくできるかを報告します。通常、最新の圧縮ツールにかけることで、その差を解消できます。

デバッグのために読みやすいコードが必要

読みやすいソースファイルをプロジェクト内に保持し、ソースマップを使ってデバッグします。ソースマップを使うと、訪問者には圧縮版を提供しながら、ブラウザーの開発者ツールで元のコードを表示できます。読みやすいデバッグを行うために、読みやすいコードを配信する必要はありません。

詳細情報

• JavaScriptを圧縮する（Chromeドキュメント）
• ソースマップ（web.dev）
• CSSの圧縮
• Web Vitals