Lighthouseスコア100への道③：圧縮は基本のキ！JS/CSSのGzip圧縮と画像WebP化

2025.07.07 : Yamamoto Naoki

Coding

これまでWebフォントの最適化、プリロードの活用と、ページの表示速度を上げるためのテクニックを解説してきました。シリーズ最終回となる今回は、パフォーマンスチューニングの最も基本的かつ重要な要素、「ファイルサイズの削減」に焦点を当てます。

ダウンロードするデータ量が少なければ少ないほど、サイトの表示は速くなります。このシンプルな原則を実現するための2大施策、「テキストリソース（JS/CSS）の圧縮」と「画像の最適化（WebP）」をマスターし、Lighthouseスコア100への最後のピースを埋めましょう！

パート1：JS・CSSをとことん圧縮する技術

Webサイトを構成するJavaScriptやCSSファイル。これらは開発者が読みやすいように、インデント、空白、改行、コメントなどが含まれています。しかし、これらの文字はブラウザがコードを実行する上では全く不要で、ファイルサイズを無駄に増やすだけの存在です。

この無駄をなくすためのステップが「Minify（最小化）」と「サーバー転送圧縮（Gzip/Brotli）」です。

ステップ1：Minify（最小化）で不要な文字を削ぎ落とす

Minifyとは、コードの機能はそのままに、不要な空白、改行、コメントなどを削除し、変数名を短くするなどして、ファイルサイズを極限まで小さくする処理です。

手動で行う場合

オンラインのMinifyツール（例: Toptal JavaScript Minifier, CSS Minifier）にコードを貼り付ければ、簡単に圧縮版のコードを生成できます。

自動で行う場合

現代のWeb開発では、ViteやWebpackといったビルドツールを使うのが一般的です。これらのツールは、本番用にビルドする際に自動的にJS/CSSのMinify処理を行ってくれるため、開発者が意識することはほとんどありません。WordPressでも、パフォーマンス最適化プラグインの多くがMinify機能を提供しています。

Minifyを行うだけでもファイルサイズはかなり削減できますが、これだけでは不十分です。真の力は次の転送圧縮にあります。

ステップ2：Gzip/Brotli圧縮で転送量を劇的に減らす

Minifyされたファイルも、サーバーからブラウザに転送される際にはただのテキストデータです。この転送プロセスでデータを圧縮するのが、サーバーサイドの圧縮技術「Gzip」や「Brotli」です。

Gzip: 最も普及している圧縮方式。テキストファイル内で繰り返し現れる文字列を効率的に圧縮し、ファイルサイズを**50%〜70%**程度も削減できます。
Brotli: Googleが開発したより新しい圧縮方式。Gzipよりもさらに高い圧縮率を誇りますが、Gzipほど普及はしていません。モダンブラウザはほぼ対応しています。

これらの圧縮は、対応しているサーバーとブラウザの間で自動的に行われます。サーバーはファイルを圧縮して送り、ブラウザはそれを受け取って展開してから使用します。開発者もユーザーも、このプロセスを意識する必要はありません。必要なのは、サーバー側でこの圧縮を有効にすることだけです。

有効化の方法（Apacheサーバーの場合）

多くのレンタルサーバーで採用されているApacheでは、.htaccessファイルに以下の記述を追加することでGzip圧縮を有効にできます。

<ifModule mod_deflate.c>
  # 圧縮を有効にする
  SetOutputFilter DEFLATE

  # 古いブラウザ向けの互換性設定
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

  # 画像などは圧縮しない（効果が薄い、または逆効果）
  SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|webp)$ no-gzip dont-vary

  # 圧縮対象のMIMEタイプを指定
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>

確認方法

Chromeのデベロッパーツールを開き、「Network」タブでCSSやJSファイルを選択します。「Headers」タブの「Response Headers」内に content-encoding: gzip または content-encoding: br という項目があれば、圧縮が正しく機能しています。

パート2：次世代画像フォーマット「WebP」で画像を軽量化

Webサイトで最もファイルサイズを占める要素は、多くの場合「画像」です。高画質な画像をそのままアップロードすると、それだけでページの読み込み速度は致命的に遅くなります。

そこで活躍するのが、Googleが開発した次世代画像フォーマット「WebP（ウェッピー）」です。
（AVIFもありますが、それまたは次の機会に。）

WebPのすごいところ

高い圧縮率： 同じ画質のJPEGと比較して約25〜35%、PNG（透過あり）と比較すると**約26%**もファイルサイズを小さくできます。
多機能： JPEGのような非可逆圧縮、PNGのような可逆圧縮（画質劣化なし）と透過（アルファチャンネル）の両方に対応しています。アニメーションGIFの代替にもなります。
ブラウザ対応： 現在、IEを除くほぼ全てのモダンブラウザでサポートされています。

WebPの導入方法

WebPを導入するには、「画像の変換」と「HTMLでの出し分け」の2つのステップが必要です。

画像をWebPに変換する
- オンラインツール： Squoosh.app のようなWebアプリを使えば、ドラッグ＆ドロップで簡単に画像をWebPに変換できます。
- 画像編集ソフト： Photoshop用のプラグインや、WebPに対応したグラフィックソフトもあります。
- WordPressプラグイン： 「EWWW Image Optimizer」や「Converter for Media」といったプラグインを導入すれば、画像をアップロードする際に自動でWebP版を生成してくれます。
HTMLで<picture>タグを使って出し分ける WebPに未対応の古いブラウザのために、従来のJPEGやPNGも用意し、ブラウザが対応状況に応じて最適な画像を読み込めるように記述します。これには<picture>タグを使います。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="画像の代替テキスト">
</picture>

この記述により、ブラウザは上から順に解釈し、自身がサポートしている最初の<source>の画像を読み込みます。これにより、モダンブラウザのユーザーには軽量なWebPを、古いブラウザのユーザーには従来の画像を提供でき、互換性を保ちながらパフォーマンスを向上させることができます。

まとめ：地道な「ダイエット」がスコアを押し上げる

今回は、サイトパフォーマンスの土台となるファイルサイズの削減について解説しました。

JS/CSS： 「Minify」で贅肉を削ぎ落とし、「Gzip/Brotliサーバー圧縮」で転送時の体重を減らす。
画像： 高圧縮・高機能な「WebP」を積極的に採用し、<picture>タグで古いブラウザにも配慮する。

これらの施策は派手さはありませんが、サイト全体の表示速度を底上げし、Lighthouseの「適切なサイズの画像」「テキスト圧縮の有効化」といった項目をクリアするために不可欠です。

3回にわたってお届けした「Lighthouseスコア100への道」。Webフォント、プリロード、そしてファイル圧縮。これらの最適化を一つひとつ丁寧に行うことで、ユーザー体験は飛躍的に向上し、Lighthouseのスコアも着実に100に近づいていくはずです。ぜひ、あなたのサイトで実践してみてください。