CDNでPageSpeed Insightsのスコアを上げよう！SEOで取り組みたい表示速度改善

マーケターの皆さまは、日々SEO対策に取り組んでおられる方も多いかと思います。キーワードのチェックや、それに伴うコンテンツの質向上など、SEO対策についてさまざまなことを実施しているのに、あと一歩順位が上がらない…そんなお悩みはありませんでしょうか。

その原因はもしかしたら、ページ表示速度の問題かもしれません。
ページ表示速度の向上には、「PageSpeed Insights」というツールが使えます。

この記事では、PageSpeed Insightsの各スコアの意味と読み方、スコアの改善方法を解説します。

PageSpeed Insightsとは、Googleが無料で提供する、ページ表示速度を調査できるツールです。（https://pagespeed.web.dev/）
ページ表示速度を調べたいURLを入力するだけで、そのページの表示速度に対するGoogleの評価を確認することができます。また、速度改善の方法を提案する機能もあります。

PageSpeed Insightsのスコアとは？計測結果の見方

PageSpeed Insightsのスコアは合計0～100点で表現され、数値が大きいほど良いスコアとなります。スコアが低くページの表示速度が遅いと判断された場合は、Googleの検索順位にも悪影響が出ている可能性があります。つまり、PageSpeed Insightsのスコアを改善することもSEO対策のひとつなのです。

評価対象となる項目は複数ありますが、どれもユーザーにストレスなくサイトを閲覧してもらうために大事な要素であるため、PageSpeed Insightsのスコア改善はユーザー体験（UX）向上のためにも対応が必要です。

ページ表示速度の遅さに苛立っているユーザーページ表示速度はSEO、ひいてはユーザーの心理に影響します。

読み込みの速さは、Googleのサイト評価の指標群であるコアウェブバイタルのひとつに数えられます。
コアウェブバイタルとは、優れたUXを提供するための指標で、下記の3つで構成されています。

　・LCP（Largest Contetful Paint）：読み込みパフォーマンスの指標。ページの読み込み開始から
　　 2.5 秒以内が「良好」と判定されます。
　・FID（First Input Delay）：インタラクティブ性の指標。100 ミリ秒未満が「良好」と判定されます。
　・CLS（Cumulative Layout Shift ）：視覚的安定性の指標。0.1 未満が「良好」となります。
　　※2024年3月以降はFIDに代わってINP（Interaction to Next Paint：ユーザーの操作への反応速度）が
　　　コアウェブバイタルの1つとなります。

コンテンツが優れているページがあればそちらのほうが検索順位は上がりますが、同程度のコンテンツの場合はコアウェブバイタルの指標が重要となって順位が決まるとされています。Googleはモバイルフレンドリーであることを推奨しており、特にモバイルの場合の指標が大切です。

またある調査によると、スマホでネットショッピングをする際、応答速度が遅くて利用をやめた経験があると答えたユーザーの数は半数を超えていました。実際にサイトを見ていて、ページがなかなか表示されないと別のサイトへ移動してしまう方も多いのではないでしょうか。
このように表示速度はユーザー心理に影響し、離脱率や直帰率、CVRなどの各指標にも影響があらわれる可能性があります。

PageSpeed Insightsのスコアを上昇させることは、SEO対策のひとつとして取り組むべき施策なのです。

PageSpeed Insightsではどのような情報が得られるのでしょうか。計測される項目について、簡単にご紹介します。

「実際のユーザーの環境で評価する」（フィールドデータ）

指定されたURLを6つの指標を用いて評価し、合格／不合格を判定します。指標に用いられているのはコアウェブバイタルであるLCP、FID、CLSと、FCP（コンテンツの初回表示時間）、INP、TTFB（最初のバイトが到着する時間）です。指標の計測には過去28日間における、さまざまな端末やネットワーク条件下で利用しているユーザーのパフォーマンスデータが用いられています。

「パフォーマンスの問題を診断する」（ラボデータ）

「パフォーマンスの問題を診断する」という項目では、下記4つのスコアと分析結果が示されます。

・パフォーマンス

複数の指標から換算したパフォーマンススコアです。スコアの数値と評価は下記の通りです。

　・0 ～ 49: 低い
　・50 ～ 89: 要改善
　・90〜100: 良い

またパフォーマンスが「低い」場合には赤のアイコン、「要改善」の場合はオレンジのアイコン、「良い」場合には緑のアイコンが表示されます。

ほかにページ分析を踏まえ、ページの表示時間を改善するための提案も見ることが可能です。改善案は、たとえば「画像フォーマットの最適化」や「JavaScriptの削減」などで、改善された場合に短縮できる時間（秒数）も推定で記載されます。

・ユーザー補助

Webサイトのユーザー補助機能（アクセシビリティ／使いやすさ）を判定するスコアです。「画像要素にalt属性を設定していない」「背景色と前景色に十分なコントラスト比がない」など、アクセシビリティ向上のための改善案も提示されます。

・おすすめの方法

Webページのコードにおける、セキュリティに関する分析結果とスコアが示されます。監査対象となる項目は「HTTPSを使用している」「CSP が XSS 攻撃を防げるよう設定されている」などです。

・SEO

ページが検索エンジン最適化のための基本的な推奨事項に則っているかどうかを判定し、スコアと分析結果、推奨される事項が表示されます。

アップさせる方法では、PageSpeed Insightsのスコアを上げるには、どのような対策をすれば良いのでしょうか。

たとえばコンテンツ表示速度に関するスコアが悪かった場合、すぐに実行できる対策としては、下記のようなものが挙げられます。

JavaScript、CSSの見直し

不要なJavaScriptやCSSを読み込んでいると、読み込みや解析で余計な時間がかかってしまうため、それらを削除するだけでも効果があります。また、JavaScriptについては、ページ表示に関わらないものは読み込み場所を変更する（遅らせる）といった対策もできます。

画像ファイルを圧縮する

サイズの大きい画像や高画質な画像は、容量が大きくページの表示速度に影響します。
そのため、ページ内の画像は、できるだけ容量を小さくしましょう。画像を書き出す際にできる限り画質を落とすという対策の他に、画像圧縮サービスでファイルサイズを落とす方法があります。画像圧縮サービスは無料で利用できるサービスも公開されており、施策として試しやすいでしょう。

次世代フォーマット（WebP、AVIF）での画像の配信

画像を圧縮してもまだサイズが大きい場合には、画像のフォーマットを変換するという手があります。画像のサイズを小さくするのにおすすめのフォーマットは、Googleが開発したWebP（ウェッピー）とAVIFです。
WebPとは、画質はそのままにファイルサイズを軽量化できる画像の次世代フォーマットのことです。画像をWebPに変換することでページ表示速度の向上が期待できます。

WebPはGoogle ChromeやSafari、Edge、Firefoxなど主要なブラウザで表示させることが可能です。

また、次世代フォーマットであるAVIFも推奨されています。AVIF は 圧縮率が高く、同じ画質設定で比較すると他のファイル形式よりもファイルサイズが小さくなります。AVIFは2024年2月時点で、Chrome、Firefox、Opera、Safari でサポートされています。

ブラウザのキャッシュを活用する

ブラウザのキャッシュとは、表示したWebページのデータを一定期間保存することです。このブラウザのキャッシュが無効化されていたり、保存期間が極端に短かったりするとページの表示速度に影響します。
ブラウザキャッシュを活用すると、再訪問時に最初からデータを読み込まずに済むため、速度上昇が見込めます。
また、ブラウザのキャッシュの有効期限は少なくとも1週間以上が望ましいとされています。

サーバーの応答時間（TTFB）を短くする

サーバーからHTMLを読み込むのに時間がかかると、ページの表示に時間がかかってしまいます。
サーバーの応答時間（TTFB）を短くするには、サーバーで使われているプログラミング言語をバージョンアップする、サーバー自体をアップグレードするといった改善方法があります。

動画をWebM形式に変換する

WebMはGoogleが提供している動画ファイル形式です。圧縮効率が良く、MP4よりも動画のファイルサイズを抑えられます。ほとんどのHTML5環境のブラウザで対応しています。

CDNを導入する

CDNにより、ページ表示速度の改善につながります。CDNを導入することで、オリジンサーバーへのアクセスを大幅に減らし、負荷を軽減できます。

CDNは、具体的にどのようにページ表示速度の改善につながるのでしょうか。CDNについてもう少し詳しく見ていきましょう。

CDNとは

CDN（Content Delivery Network・コンテンツ配信ネットワーク）では、オリジナルのWebサイトの代わりに、世界中に分散した配信拠点からコピー（キャッシュ）したコンテンツを配信します。

CDN導入のメリット

CDNはSEO対策・セキュリティ対策の両面で導入のメリットがあります。

CDNを導入すれば、HTMLページやJavaScriptファイル、スタイルシート、画像や動画といったコンテンツを高速で配信することが可能です。またCDNを導入すれば複数の配信拠点のコンテンツに分散してアクセスされるため、オリジンサーバーの負荷を軽減できます。表示遅延を防いだ結果、PageSpeed Insightsのスコアの上昇が見込めるのです。

これらのメリットから、セールなどの突発的なアクセスが発生するECサイトや、動画など大容量のコンテンツを配信するサイトなどでは、CDN導入が検討される傾向にあります。

ページ表示速度の改善が重要と言われても、それらの対策でどの程度PageSpeed Insightsのスコアが上昇するかわからないし、そもそも大変そう…と思うかもしれません。

そこで、弊社独自で調査をいたしました！さまざまな対策を施した場合、最も効果のあったサイトではトータルスコアが「＋207%」まで上昇したという結果が出ています。（※弊社の［Solution CDN］というCDNサービスを利用した［PageSpeed Insightsシミュレータ］で計測）

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

多くのサイトでPageSpeed Insightsのスコアが上昇したことを確認でき、平均で「＋143%」の上昇が見られました。また、すでに対策しているサイトでも、施策内容をチューニングすることでさらに効果が出たというパターンもありました。

参考コラム：【最大207%アップ】SEO対策で重要な PageSpeed Insights のスコアが上昇した方法とは

人気のWebサイトや期間限定のキャンペーンサイトの場合、サイトへ大量のアクセスが集中しサーバー処理の遅延が起こることも珍しくないでしょう。そのままアクセス集中の状態が継続すると、いずれサーバーダウン（サイトダウン）が起こり、サービスを提供できなくなる可能性があります。

サーバーダウンによってサービスが提供できない状況が続くと、そのサービスのユーザーからの信頼を失ってしまいます。ひいてはサイトに訪問されなくなり、ほかのライバル企業へとユーザーが流れてしまうでしょう。そうならないためには、CDNの導入などサーバーダウンを予防する対策が必要です。さらにCDNは、セキュリティ対策としても機能します。特にサーバーに大量のアクセスを行うことでサーバーダウンを狙う「DDoS攻撃」に対して有効です。CDNは大量のアクセスがあっても複数の配信拠点に負荷を分散できるため、サーバーダウンを防げます。

アクセリアでは、3つのCDNサービスをご用意しています。国内専用でアクセリア自社開発のDuraSite-CDN、アクセリアの運用サービスと世界最大級のCDNサービスであるCloudflare（クラウドフレア）を組み合わせた［Solution CDN］、コストパフォーマンスを最大化する​［Brokering CDN］から、お客様の環境や目的に合わせてお選びいただくことが可能です。
それぞれ優秀なエンジニアによって導入・運用を支援しています。

Java Scriptで導入できる［Brokering CDN］

Brokering CDNは、アクセリアが厳選したCDNを独自の技術により統合し、低価格・高機能・高パフォーマンスを可能としたCDNサービスです。標準でStaticコンテンツ配信に必要⼗分な機能を備えており、必要な機能はオプションで追加することも可能です。実装方法には2種類あり、DNSを利⽤するDNSベースの実装⽅法と、［Brokering CDN］⽤のJavaScriptをHTML上に設置するブラウザベースの実装⽅法があります。

CDN導入の効果を無料でシミュレーションいたします

効果のほどを確認してみたい！
効果があるのはわかったから、効率が良い対策から始めたい！

という方は、ぜひ無料の［PageSpeed Insightsシミュレータ］をご活用ください。このシミュレータは、SEOに適した設定を施した［Solution CDN］経由の通信と、現在公開されているサイトの通信を比較してレポートします。

サイト側では設定変更の必要は無く、お申し込みだけで測定が可能です。

測定結果はレポートを作成してお送りしますので、具体的な改善ポイントや、どの程度PageSpeed Insightsのスコア上昇が見込めるかお手元で確認できます。

測定方法や結果の詳細については、別記事で紹介していますので、そちらもご参照ください。

参考コラム：CDNでPageSpeed Insightsのスコアを上げよう！SEOで取り組みたい表示速度改善

関連コラム▶
　CDNとは？CDNの基本からメリット・デメリット、業者選定のポイントを解説
　【最大207%アップ】SEO対策で重要な PageSpeed Insights のスコアが上昇した方法とは
　ECサイトの売上アップに必要な「速度」とは