【ITニュース解説】🚀 How Much Faster Does Your Site Load If You Compress Images?

Webサイトのパフォーマンス、特に読み込み速度は、サイトを訪れるユーザーの体験だけでなく、検索エンジンでの表示順位にも大きな影響を与える重要な要素だ。多くのシステムエンジニア志望者がWebサイトの高速化に取り組む際、JavaScriptのコード最適化やフレームワークの選択といった複雑な技術に目を向けがちだが、実はもっとシンプルで劇的な効果をもたらす改善策が存在する。それが、Webサイトで使用されている画像の圧縮である。

ある開発者の経験によると、かつてはJavaScriptバンドルのサイズをわずか10KB削ることに心血を注いでいた。しかし、自身のWebサイトで使用している画像に目を向けたとき、そのサイズがパフォーマンスの「サイレントキラー（静かなる殺人者）」となっていることに気づいたという。未圧縮の画像は見た目には問題なく表示されるが、そのデータサイズはWebサイトの他のコンテンツ、例えばHTMLやCSS、JavaScriptの合計よりもはるかに大きい場合があるのだ。この状況に対し、開発者は画像圧縮が実際にどの程度の違いを生み出すのかを検証する簡単なテストを行った。そしてその結果は、想像以上に大きなものだった。

テストは、典型的なランディングページを用いて行われた。このページには、6枚のヒーロー画像（サイトの主要なビジュアルとなる大きな画像）と12枚のサムネイル画像（小さなプレビュー画像）が含まれていた。各画像は平均して約500KBのサイズで、JPEG形式とPNG形式が混在していた。これらの画像が合計されることで、ページの総データサイズは約6.8MBにも達していた。このテストは、一般的なスマートフォンユーザーが利用するような、速度が制限された4G回線での状況を再現するため、Google Lighthouseというツールを使って実施された。LighthouseはWebサイトの品質を評価するツールで、パフォーマンス、アクセシビリティ、SEOなど様々な項目でスコアを算出し、改善点を提示してくれる。

画像が一切圧縮されていない状態でのテスト結果は、以下のようになった。ユーザーがコンテンツを初めて見始めるまでの時間を示すFCP（First Contentful Paint）は4.3秒、ページ内の最も大きなコンテンツが表示されるまでの時間を示すLCP（Largest Contentful Paint）は6.2秒だった。そして、ページの総データサイズは約6.8MBであった。この数値は、Webサイトの読み込みにかなりの時間がかかっていることを示しており、ユーザーは忍耐を強いられるような体験だったと言える。

次に、開発者はすべての画像を画像圧縮ツールに通して圧縮処理を行った。この処理により、元々約500KBあったヒーロー画像は1枚あたり約120KBまで削減され、サムネイル画像も1枚あたり約30KBまで大幅にサイズダウンした。これらの圧縮された画像をWebサイトに適用した結果、ページの総データサイズは驚くべきことに約1.1MBまで減少した。

画像圧縮後のWebサイトのパフォーマンスは劇的に向上した。FCPは1.2秒に短縮され、LCPも1.8秒と非常に速くなった。ページの総データサイズが約1.1MBにまで削減されたことで、ユーザーは驚くほど快適な体験を得られるようになったのだ。

圧縮前後での変化を比較すると、その効果は明らかだった。ページの総データサイズは、約6.8MBから約1.1MBへと、実に84%も削減された。これにより、ページの読み込み時間も約70%短縮されたのである。さらに、Webサイトのパフォーマンスを総合的に評価するLighthouseスコアは、圧縮前の56点から圧縮後には93点へと、大きく飛躍した。これは単なる「微細な最適化」ではなく、Webサイトのパフォーマンスが「昼と夜ほども違う」劇的な改善であったと言える。

この結果から得られる重要な教訓はいくつかある。第一に、GoogleがWebサイトのパフォーマンスを非常に重視しているということだ。Googleは「Core Web Vitals（コアウェブバイタル）」という指標をSEO（検索エンジン最適化）のランキング要因として直接的に用いており、これにはFCPやLCPといったユーザー体験に直結する要素が含まれる。つまり、Webサイトの読み込みが速く、ユーザーが快適に利用できるほど、検索結果での表示順位が上がりやすくなるのだ。

第二に、ユーザーは高速なWebサイトを求めているということだ。多くの統計が示すように、Webサイトの読み込みに3秒以上かかると、半数以上のユーザーが待つことをやめて他のサイトへ移動してしまう、いわゆる「離脱」が発生する。現代のユーザーは即座に情報を得られることを期待しており、遅いWebサイトは機会損失につながる。

第三に、Webサイトの運営者にとっても、高速なページは大きなメリットをもたらす。ユーザーの満足度が高まれば、サイトの滞在時間が長くなり、リピート訪問にもつながる。Eコマースサイトであれば売上の向上に、広告収入に依存するサイトであれば広告表示回数の増加と収益の向上に直結する可能性がある。Lighthouseスコアが赤色の低い点数から緑色の高い点数へと変化するのを見るのは、新しいフレームワークの導入や複雑なシステム改善を行うよりも、はるかに大きな達成感と満足感をもたらすだろう。

システムエンジニアを目指す初心者がWebサイトのパフォーマンス改善に取り組む際、複雑なWebpackの設定ファイルをいじったり、どの状態管理ライブラリを使うべきか議論したりする前に、まず手をつけるべきは画像の圧縮である。これは、最も手軽に、そして最も大きなパフォーマンスの向上をもたらす方法だ。画像圧縮ツールは数多く存在し、中にはファイルをドラッグ＆ドロップするだけで簡単に処理できるものもある。このような小さな調整が、Webサイト全体のパフォーマンスに計り知れないほどの大きな成果をもたらすことを、この経験は示している。