静的ファイルの最適化 ーCDNだけでは軽くならないという事実

Webサイトの表示や応答が遅い場合、CDN登場以前はサーバーの性能やモバイル回線のスピードを疑い、そこに対策するしかありませんでした。それが今では、効果的な対処方法の筆頭として、CDNを導入することで高速化を図るのが一般的となってきました。

しかし、ただCDNを導入しただけでは、期待したほど速くならないこともあります。それは、画像、CSS、JavaScript、フォントなどが重く、表示を遅くしていることがあるからです。この中で、特に原因が分かりやすいのは画像です。たとえば、撮影した高解像度の写真をそのまま掲載しようとしていたり、PC画面用の大きな画像をスマートフォン向けにもそのまま配信していたり、カルーセルを使って高画質な画像を何枚も並べていたりすると、表示速度は遅くなってしまいます。

いくら見た目がきれいな画像でも、ユーザーがWeb表示を待たされてしまうようでは、離脱が増え、ブランディング的にも好ましくない状況となるでしょう。

重要なのは、CDNを使えば重い画像そのものが自動的に軽くなるわけではない、ということを認識することです。ここでは、特に画像などの静的ファイルの表示を高速化するための手法について、さまざまな角度から見ていきます。

Webサイトは、複数のファイルを組み合わせて表示している

まず、Webページが、どのような仕組みでブラウザーに表示されるのか、基本的な流れを確認しておきましょう。ブラウザーはHTMLを読み込み、その中に含まれる画像、CSS、JavaScript、フォントなど、複数のファイルを、記述されたURLを参照してサーバーから取得し、それらのパーツを組み立ててひとつのページを表示します。そのため、サーバーからページのHTMLがすぐに返ってきたとしても、その後に読み込むファイルが重ければページ全体の表示は遅くなります。

たとえば、以下のような場合が考えられるでしょう。

• メインビジュアルの画像が大きい
• 使っていないJavaScriptを大量に読み込んでいる
• 複数のWebフォントを読み込んでいる
• 外部サービスのタグやスクリプトを多く含んでいる

表示速度の改善に寄与する対策としては、サーバーなどのバックグランドの速度向上よりも、フロントエンドへの対処が効果を発揮する割合が高く、SOASTA（現Akamai）によれば、全体の6割に達するという報告もあります。利用者が実際にダウンロードしているファイル全体を調べる必要がありますが、多くの要因はフロントエンドにあると考えられます。無駄な対策を防ぐ上でも、まずはスピード計測を行い、どこに問題があるかを特定するようにしましょう。

※ HTML（HyperText Markup Language）とは、Webページの構造を作るための言語です

※ CSS（Cascading Style Sheets）とは、Webサイトの見た目（スタイル）を整えるためのファイルです

※ JavaScriptとは、Webサイトに動きや処理を加えるためのプログラミング言語です

※ SOASTAは、WebサイトやWebアプリケーションの負荷テスト、性能分析、リアルユーザーモニタリングをクラウドベースで実行し提供する企業です（2017年にAkamai社により買収、統合）

品質を維持しながら画像を軽くする

画像の表示を速くするために「最適化」すると聞くと、すなわち画質を落とすことだと思われるかもしれません。しかし最適化の目的は、必要な表示品質を保ちながら、ユーザーに対して過剰なデータを送らないことです。

たとえば、スマートフォンで小さく表示する画像に、何千ピクセルもある元画像をそのまま送る必要はありません。表示する場所に合わせて画像サイズを調整すれば、転送するデータ量を減らせます。

画像形式も重要です。JPEGやPNGだけでなく、WebPやAVIFといった形式を使うことで、表示品質を保ちながらファイルサイズを小さくできる場合が多いのです。

画像の最適化において考えるべき要点は以下の通りです。

• 必要な大きさにする
• 適切な形式へ変換する
• 必要以上の画質や容量にしない
• 端末や表示領域に合った画像を届ける

Cloudflareも、端末や用途に合わせて画像をリサイズしたり、圧縮方式や、形式を変換して配信する仕組みを提供しています。

※ WebPとは、Web向けに圧縮効率を高めた画像形式です

※ AVIFとは、高い圧縮効率を持つ画像形式です

※出典： Cloudflare Docs: Images

CDNと画像最適化では役割が違う

CDNの役割は、あくまでファイルを利用者に近い場所から届けることです。それに対して画像の最適化は、配信する画像そのものを適切なサイズや形式に変換することです。

たとえばファイルサイズが5MBの画像があるとしましょう。CDNを利用することで、その画像を遠くのオリジンサーバーではなく、利用者に近いエッジから配信できます。しかしその際に、5MBという画像そのものの大きさが自動的に500KBになるわけではありません。何もしなければ5MBのままです。

一方、画像を軽く（ファイルサイズを小さく）したとしても、そのファイルを毎回遠いオリジンサーバーから取得していたのでは、通信距離による遅延は残ります。画像の表示を高速化するには、画像自体を軽くするという操作に加えて、できるだけ近くから届ける、ということも必要となります。

以前の記事でも触れたように、Cloudflareでは、画像、CSS、JavaScriptなどの静的ファイルは、標準でキャッシュ対象となっています。それにより、オリジンサーバーからではなく、Cloudflareのネットワーク上にあるエッジサーバーから配信するようになります。ただし、それだけで安心せず、画像そのものの最適化も組み合わせて考えることが重要なのです。

※出典： Cloudflare Docs: Default Cache Behavior

Cloudflare Imagesで、必要な画像を必要なサイズ、形式で届ける

Cloudflareには、画像を最適化する「Cloudflare Images」と呼ばれる一連の機能が備わっています。Cloudflare Imagesの「Transformations」に含まれる機能を利用することで、画像を最適化したり、変換したりする操作を容易に実行することが可能となります。そのような操作には、以下のものが含まれます。

• 画像サイズの変更
• 切り抜き
• 画質の調整
• 画像形式の変換
• 端末や用途に合わせた画像配信

たとえば、ひとつの商品画像ファイルから、PC向け、スマートフォン向け、サムネイル向けなど、自動的に用途に応じた画像サイズに変換してから配信できます。Webサイトの制作時に、あらかじめ用途別に何種類もの画像を用意して管理する方法もありますが、Cloudflare側で必要なサイズへ変換することで、制作、運用を簡略化できる場合があります。

とはいえ、Cloudflare Imagesを使えば画像管理の問題がすべて解消する、というわけではありません。そもそも不要な画像を大量に掲載していたり、似たような画像を何度もアップロードしていたり、元画像の管理方法が統一されていない、といったような状況では、期待したような効果が得られない場合もあるでしょう。こうした問題は制作、運用側であらかじめ整理しておく必要があります。

なお、Cloudflare Imagesでは、Cloudflareによってキャッシュされた画像に適用することも、別の場所に保存された画像をCloudflareで変換してから配信することも可能です。必要に応じて、これら２通りの方法を使い分け、柔軟な構成を実現することができるようになっているのです。

※出典： Cloudflare Docs: Cloudflare Images: Remote images (transformations)

CSSやJavaScriptは、画像とは違う方法で軽くする

静的ファイルの高速化機能の対象は、画像だけにとどまりません。CSSやJavaScriptといったテキストベースのファイルは、データ圧縮することで転送量を減らすことが可能です。

Cloudflareは、ユーザーへのコンテンツ配信の際に、Gzip、Brotli、Zstandardといった圧縮機能を利用することができます。ただし、実際に使われる圧縮方式は、加入しているプランや設定、ユーザーのブラウザーの種類などによっても異なります。

ただし、必要なデータの圧縮と、不要なコードの削減は、まったく別の問題です。JavaScriptのプログラム自体を圧縮して送ることができるとしても、その中に実際には使われないコードが大量に含まれていたりすれば、それによって生じるムダが解消されることはありません。

まずは、不要なファイルを読み込まないようにする。必要なファイルは、できるだけ軽くする。そして、それらを効率よく届ける。このような順番で考えるべきでしょう。

※ Gzip、Brotli、Zstandardとは、データを圧縮して転送量を減らす方式です

※出典： Cloudflare Docs: Content Compression

外部サービスの重さはCloudflareでは解決できない

近年のWebサイトでは、サイトに含まれる独自のデータ以外に、以下のような外部サービスのファイルを読み込むことが一般的になっています。

• アクセス解析
• 広告タグ
• チャットツール
• SNS埋め込み
• 動画サービス
• マーケティングツール

Cloudflareの通常のキャッシュは、自社サイト内に置かれていて、Cloudflareを経由して配信するコンテンツが対象です。別ドメインから読み込む外部ファイルについては、自社のCloudflareキャッシュによって自動的に高速化されるわけではありません。

そのため、ページ内に多くの外部タグを含むような場合には、いくらCloudflareの設定を見直しても、軽量化、高速化を実現することはできません。まずは、そのようなタグが、そもそも必要なのかを根本から見直すところから始めましょう。

マーケティング部門が良かれと思って追加したツールが、いつの間にかページを重くし、結果的にユーザーの離脱を招いているケースも珍しくありません。高速化はエンジニアだけの仕事ではありません。マーケティング部門を含めた協働作業により、ビジネス上のトレードオフの判断が不可欠なのです。

※出典： Cloudflare Docs Get started with Cache

他社と比べて画像高速化の考え方はどう違うのか

画像や静的ファイルを高速化する手段は、Cloudflareだけが備えているというわけではありません。たとえば、AWSのCloudFront、Fastly、Cloudinaryなどでも画像配信を高速化することが可能です。

こうした他社の手段と、Cloudflareの違いを理解するには、単純な速度比較だけでなく、画像配信だけを改善したいのか、それとも画像の管理、加工まで行いたいのか、あるいはWebサイト全体の配信基盤を改善したいのか、といった様々な要求を含めて総合的に比較する必要があります。

Cloudflareでは、CDNやキャッシュとCloudflare Imagesを、同じCloudflareのプラットフォーム上で組み合わせることが可能です。画像配信を高速化するための専用の仕組みを後から追加するというより、Webサイト全体の配信基盤をCloudflareに置き、その中に画像を最適化する機能も含める、という考え方なのです。

AWSにはDynamic Image Transformation for Amazon CloudFrontというソリューションがあります。これは、CloudFrontによる配信キャッシュと、AWS LambdaやAmazon ECSなどによる画像変換処理を組み合わせて利用するものです。すでにAWSを中心にシステムを構築していて、その上にAWSの各サービスを追加して必要な機能を構成したい、という場合には有力な選択肢となるでしょう。

またFastlyには、「Image Optimizer」という機能があります。これは、画像をFastlyのネットワーク上でリアルタイムに変換し、リサイズ、切り抜き、画質調整、形式変換などの処理を加えて最適化した画像をキャッシュするというものです。。

一方Cloudinaryは、画像や動画そのものの管理、加工、配信を中心にしたサービスです。画像変換だけでなく、メディアライブラリで素材を管理しながら、多様な加工やCDN配信を行える点に特徴があります。

Cloudflareも含め、今挙げた４種のサービスが、どのような場合に適しているかを整理しておきましょう。

• Cloudflare
  • Webサイト全体の配信基盤と画像最適化を統合したい場合
• AWS
  • AWSの各サービスを組み合わせ、独自の構成を構築したい場合
• Fastly
  • CDN上での画像変換や配信制御を、エンジニア主導で細かくチューニングしたい場合
• Cloudinary
  • 画像・動画そのものの管理、高度な加工、配信に特化したい場合

どれが一番優れているかは、一概には決められません。自社の課題がどこにあるのか。画像変換なのか、メディア管理なのか、CDNなのか、Web基盤全体なのか、といったところから、まず整理することが重要です。

※出典： AWS Dynamic Image Transformation for Amazon CloudFront

※出典： Fastly Image Optimizer

※出典： Cloudinary Image Transformations

制作時に重いファイルを作り続ければ、問題は戻ってくる

いったんCloudflareを導入して配信を最適化しても、その後、制作や更新のたびに重いファイルが追加され続ければ、Webサイトは再び重くなってしまいます。

それを防ぐためには、以下のような運用上のルールが必要となってくるでしょう。

• 用途に合った画像サイズで制作する
• 公開前にスマートフォンでも確認する
• 不要なJavaScriptや外部タグを定期的に見直す
• 重いPDFや動画をそのまま掲載しない
• 誰が外部サービスを追加したか分かる状態にする
• 制作規定を作り、ファイルサイズや容量を制限する

制作会社が変わるたびに画像の作り方が変わる、マーケティングツールを追加するたびにタグが増える、といった状況では、いったん高速化を実現できたとしても、その効果を維持するのが難しくなります。

画像、静的ファイルの高速化は、技術的な設定だけでなく、制作、運用の設計でもある、ということに尽きるでしょう。

DOMOの視点

Cloudflareは届け方を改善できる。しかし、作り方までは自動で直してくれない

DOMOとして画像、静的ファイルの高速化に取り組む際には、必ずしもCloudflareの設定から始める必要はないと考えます。

まず確認したいのは、次のようなページのどれが事業としての成果に近いかです。

• 広告LP
• 商品ページ
• 採用ページ
• 問い合わせにつながるページ
• 資料ダウンロードページ

事業として重要なページが遅いのであれば、その原因がどこにあるのかを確認します。

• 画像なのか
• JavaScriptなのか
• 外部タグなのか
• フォントなのか
• オリジンサーバーなのか

当然ながら、原因によって打つべき手も変わってきます。

Cloudflareが得意とするのは、キャッシュやCDN、画像変換、圧縮などによって、コンテンツを効率よく届けることです。一方で、不要な画像を減らすこと、使っていないJavaScriptを整理すること、不要な外部タグを減らすことは、制作、開発、マーケティング側で判断する必要があります。

「作る」、「軽くする」、「届ける」、この3つを分けて考えることで、Cloudflareに任せられる部分と、自社で改善できる部分が見えてくるでしょう。

まとめ

画像・静的ファイルの高速化の施策は、単にCDNを導入することではありません。主に、次の３つの領域の対策が必要となります。

• 作る（制作、運用）： 不要な外部ファイルを読み込まない、用途に合ったサイズの画像をアップロードする
• 軽くする（最適化）： Cloudflare Imagesなどで、画像やコードを自動的に圧縮・変換する
• 届ける（配信）： CDNのキャッシュを活用し、ユーザーに近い場所から効率よく届ける

Cloudflareでは、CDNによるキャッシュ配信、Cloudflare Imagesによる画像変換、コンテンツ圧縮などを組み合わせ、まとめて効果を発揮することが可能です。一方で、元画像が必要以上に大きい、不要なJavaScriptが多い、外部タグが増え続けているといった問題まで、自動的に解決できるわけではありません。

一方、画像配信の高速化だけが目的なら、AWS、Fastly、Cloudinaryなども選択肢になるでしょう。まず課題を特定し、それが作り方、軽量化、届け方のどこにあるのかを切り分けるところから始めることが重要です。

覚えておきたい用語

• 静的ファイル： 画像、CSS、JavaScript、フォントなど、多くの利用者に同じ内容を配信しやすいファイル
• 画像最適化： 画像のサイズや形式などを調整し、見た目を保ちながらデータ量を減らす取り組み
• CDN： Content Delivery Networkの略で、データを利用者に近い拠点から配信する仕組み
• キャッシュ： 取得したデータのコピーを一時保存し、次回以降すばやく返す仕組み
• WebP： Web向けに圧縮効率を高めた画像形式
• AVIF： 高い圧縮効率を持つ画像形式
• Cloudflare Images： Cloudflareが提供する画像の保存・変換・最適化・配信サービス
• Transformations： Cloudflare Imagesで画像のサイズや形式などを変換する機能
• Gzip： Webで広く利用されているデータ圧縮方式
• Brotli： Webコンテンツの転送に利用される圧縮方式
• Zstandard： 高速な圧縮・展開を特徴とする圧縮方式