画像の表示速度を高速に！CDNでできる画像最適化

Webサイトの表示速度が遅いとユーザーの満足度は低くなる傾向にあり、アクセス数やコンバージョン数が上昇しない原因にもなり得ます。そのため、Webサイト運営者、特にECサイトの運営者にとってサイト表示速度の遅さは優先的に解決すべき問題と言えるでしょう。

Webサイトの表示速度を改善する方法はいくつも存在しますが、ECサイトなどの画像を多く使用しているサイトにおいて特に行っておきたいのが、画像の最適化です。当ページでは、画像最適化の重要性とその方法をご紹介します。

Webサイトの表示速度が遅いと、どのようなことが起こるのでしょうか。

コアウェブバイタルの指標が悪化する

コアウェブバイタルとは、UX（ユーザーエクスペリエンス）の向上およびSEO評価の向上につながる重要な指標です。Google検索結果の順位決定ではコンテンツの内容が重視され、優れたコンテンツがGoogle検索の上位にあらわれます。そのなかでコンテンツの質が同程度の場合は、コアウェブバイタルの指標が優れているほうが検索結果で優位になると言われています。

コアウェブバイタルを構成する指標は3つあり、そのひとつに「LCP（Largest Contentful Paint）」があります。これはページが読み込まれてからページ内の大きなコンテンツが表示されるまでのユーザーの待機時間を表す指標です。画像ファイルはページ内でも大きなコンテンツであるため、画像の表示速度はLCPに影響してきます。特にECサイトは多くの画像ファイルを表示する傾向にあり、容量の大きな画像が大量に配信され表示遅延を招くと、LCPの数値が顕著に悪化してしまいます。そのためコアウェブバイタルの改善には、画像の表示速度の見直しが必要となるのです。

コアウェブバイタルの詳細や改善、および計測方法については下記記事をご参照ください。

参考コラム：コアウェブバイタルのスコアの確認方法と計測ツール4つをご紹介

ユーザーの満足度が低下する

ページの表示速度の遅さは、SEOの観点だけでなくUXおよびユーザーの心理面にも影響することが分かっており、「モバイルサイトの読み込みに 3 秒以上かかると53％のユーザーは離脱する」というGoogleの調査結果があります。知りたいこと・やりたいことを検索して訪れたWebサイトで表示が遅いとなると、ユーザーは読む気がなくなってしまい、ページを閉じる可能性は否めません。心理的にも「使えないサイト」「信頼できないサイト」という印象が残るでしょう。

参考：Mobile site load time statistics ｜Think with Google

画像を最適化するにはいくつか方法があります。

手動で圧縮をかける

画像をアップロードする際にひとつひとつの画像にツールを使い、画像サイズや容量などを圧縮し、最適化するという方法があります。確実な方法ではありますが、Webサイトのすべての画像に対して手動で最適化の処理を行うため、非常に手間になってしまいます。

サーバで加工する

サーバ側でImageMagickなどのツールを用いて、画像を一括して最適化する方法もあります。手動で行うときのような手間は減りますが、サーバへ負荷をかけるため、サーバを強化するためのコストがかかる可能性があります。

CDNを導入する

CDNサービスのなかには、画像の最適化を自動で行う機能を備えているものがあります。画像最適化に関しては有料となる場合もありますが、画像処理の最新技術を適用できるほか、アクセス集中を防ぐ・セキュリティ対策になるなど、画像処理以外にも複数のメリットがあります。
画像も含め、Webページ全体の表示速度を向上させたいのであれば、CDNサービスを利用するのがおすすめです。

ここで、CDNについての概要とサービスについてご紹介します。

CDNとは

CDN（Content Delivery Network：コンテンツ配信ネットワーク）は、世界中に設置したWebサイトのキャッシュサーバを用いて、コンテンツ配信の高速化を図る仕組みです。

Webサイトのコンテンツは分散した複数の配信拠点にコピー（キャッシュ）を置き、キャッシュサーバがオリジナルのWebサイト（オリジンサーバ）の代わりにコンテンツを届けます。複数のキャッシュサーバでコンテンツを配信するため、サーバの負荷を下げることができ、アクセス集中による表示遅延やサーバダウンを防ぐことが可能です。またWebサイトにアクセスしようとするユーザーの近い拠点でコンテンツを配信できるため、配信速度が速くなります。

CDNについて、詳しくは下記記事をご参照ください。

参考コラム：CDNとは？CDNの基本からメリット・デメリット、業者選定のポイントを解説

画像処理を備えたCDNサービス

同じCDNサービスを謳っているもののなかでも、画像処理に関しては大きく分けて2種類あります。

ひとつはCDNサービスの機能の一部に画像処理に関する機能を有している形式です。Cloudflare（クラウドフレア）やAkamaiなどがこれにあたります。もうひとつは、画像処理や動画保存・配信に特化したCDNサービスです。画像専用CDNには、Cloudinary、imgixといったサービスがあります。

CDNサービスの画像最適化の仕組みを、Cloudflareを例に挙げてご紹介します。

Cloudflare Imagesの画像最適化

Cloudflareは、画像処理の機能として「Cloudflare Images」を備えています。Cloudflare Imagesとは画像の保存・最適化・配信をするサービスです。
多くの画像変換・保存サービスでは、さまざまなデバイス・ブラウザからアクセスされることを考慮して、異なるサイズとフォーマットの画像を複数作成します。対してCloudflare Imagesでは、必要に応じたサイズ変更・最適化を都度行うという仕組みをとっています。

価格

Cloudflare ImagesはCloudflareの有償サービスであり、画像格納10万点あたり$5、画像配信10万点あたり$1で利用可能です。

Cloudflare Imagesについて、詳しくは下記記事をご参照ください。

参考コラム：Cloudflare Imagesとは

画像変換のための手順

ユーザーが行う手順は任意の画像をCloudflare Imagesにアップロードし、画像変換に関する数値やステータスを入力するだけです。画像をアップロードするだけで、すべての工程をCloudflare Images上で完結することができます。

画像変換の具体的な手順については、下記記事をご参照ください

参考コラム：Cloudflare Imagesを利用した画像変換の手順を解説【画像アップロードで完了】

アクセリアでは、CDNサービスのひとつとして、「Solution CDN」を提供しています。
Solution CDNはアクセリアの運用サービスとCloudflareを組み合わせたサービスです。画像の最適化処理を含む多数の機能により、Webサイトのパフォーマンス向上を実現します。
また、DDoS対策をはじめとするセキュリティ対策もご提供。サイト表示速度の改善に加えて、よりセキュアなサイト運用もCloudflareだけで行うことが可能です。

アクセリアでは世界的なCDNであるCloudflareの導入や運用を、経験豊富な日本人エンジニアが丁寧にサポートします。企業の課題やご要望に最適な運用方法をご提案しますので、サイトの表示速度にお悩みの際はお気軽にご相談ください。

Solution CDNについて、詳しく知りたい方は下記ページをご参照ください。
Cloudflare導入・運用支援サービス 【Solution CDN】

画像の表示速度が遅い場合に起こるデメリットと、CDNでできる画像最適化についてご紹介しました。CDNでは画像最適化のみならず、サーバ負荷の軽減やセキュリティ対策も行えるため、Webサイトのパフォーマンス向上に対して大きなメリットがあると言えるでしょう。

また多くの画像変換ツールやCDNには無料の試用期間があります。アクセリアが提供する【Solution CDN】も1カ月のトライアル期間を設けているので、サイトの画像表示速度に悩んでいる場合はぜひお試しください。