Webコンサルタントの松崎です。
前回の「常時SSLの対応|自分でできるSEOチェック」に続き、SEOチェックポイントの第2回は「ページの表示速度」について詳しく解説します。また、SEOセルフチェックの基本については「Webサイトが集客できない理由 - 10の自己診断法」でも紹介していますので、是非あわせてご覧ください。
なぜページ表示速度がSEOで重要なのか
インターネットが高速化し、スマートフォンが普及した現在、ユーザーの「待てる時間」は驚くほど短くなっています。
Googleの調査によれば、モバイルサイトの読み込みが3秒を超えると、53%のユーザーがそのページを離れてしまうというデータがあります。つまり、せっかく良質なコンテンツを用意していても、表示が遅ければ半数以上の人に見てもらえない可能性があるのです。
Googleはこの「速度」を非常に重視しており、2018年7月にはモバイル検索のランキング要素として正式に採用しました。さらに2021年からは「コアウェブバイタル(Core Web Vitals)」という指標を導入し、ページ速度に関する要素をさらに詳細に評価するようになりました。
表示速度が遅いホームページのデメリット
ページ表示速度が遅いと、多くのデメリットが発生します。
1. ユーザー体験の低下
現在のインターネットユーザーは気になっている情報に素早くアクセスしたいと考えています。
でも、ページの表示が遅いと、その都度ストレスが溜まり、見ているホームページに対する印象も悪くなってしまいます。特にスマートフォンでは、通信環境も様々なため、よりページ表示速度の重要性が高まります。
数秒の遅れが、ユーザーの離脱率(ページを見ずに去ってしまう割合)を大幅に上昇させるという結果も数多く発表されています。Amazonでは、ページ読み込み時間が100ミリ秒(0.1秒)増えるごとに売上が1%減少するという調査結果もあり、ビジネスへの直接的な影響も無視できません。
2. 検索順位への悪影響
Googleは公式に「ページ速度」を検索ランキングの要素の一つとして採用していることを明言しています。
特に最近は「コアウェブバイタル」という速度に関連する指標群がSEOにおいて重要性を増しています。
コアウェブバイタルとは、ページの読み込み速度(LCP)、インタラクティブ性(INP)、視覚的安定性(CLS)を測定する指標のセットです。Googleはこれらの指標を「良好」と評価されたページを検索結果で優遇する傾向があります。つまり、表示が速いだけでなく、操作に素早く反応し、読み込み中にレイアウトがユーザーの意図に反してずれないページが高く評価されます。
表示速度の遅いホームページは、同じ内容でも速度の速いホームページに比べて検索結果で下位に表示される可能性が高くなります。特に競合の多いキーワードでは、この差が顕著に現れてしまいます。実際に、ページ速度を改善したことで検索順位が上昇したという例も聞かれます。
3. クロール効率の低下
検索エンジンの「クローラー」と呼ばれるプログラムがホームページを巡回する際も、表示速度は影響します。
遅いホームページではクローラーの巡回効率が下がり、新しいコンテンツのインデックス(検索エンジンのデータベースへの登録)が遅れることも考えられます。
4. 広告パフォーマンスの低下
ホームページにWeb広告を掲載している場合、表示速度はさらに重要です。
遅いページでは広告の表示も遅れ、クリック率や収益に悪影響を及ぼします。特にGoogleの広告プラットフォームでは、ランディングページの速度がクオリティスコアに影響し、広告の表示順位やクリック単価にも影響する可能性があります。
ページ表示速度を測定する方法
自分のホームページがどれくらいの速度で表示されているかを知ることは、SEO改善の第一歩です。
いくつかの無料で使える測定ツールとその使い方を紹介します。
1. Google PageSpeed Insights
最も広く使われているページ速度が測定できる無料ツールの一つです。
Googleが提供しているため、SEOの観点からも最も信頼性の高い指標を得ることができます。
【使い方】
1. PageSpeed Insightsにアクセス
2. 測定したいページのURLを入力
3. 「分析」ボタンをクリック
レポートでは、モバイルとデスクトップ両方の速度スコアが100点満点で表示されます。
60点以下は「要改善」、90点以上が「良好」と考えられています。
また、実際のユーザーデータに基づく「フィールドデータ」と、シミュレーションによる「ラボデータ」の両方が表示されるため、実環境でのパフォーマンスも確認できます。※ただし、「フィールドデータ」に関しては一定以上のアクセスがあるホームページしか、そのデータが表示されません。
表示される分析結果は、スコアだけでなく具体的な改善点も示してくます。
「診断」セクションには優先度順に改善すべき項目が表示されるので、これをチェックしながら改善を進めるとよいです。ただし、改善には一定以上の知識やスキルが必要となりますので、正しい制作がきちんとできる制作会社に依頼するのが良いです。ただ作るだけの制作会社では対応が難しいですので、依頼する場合はお気をつけください。
2. Google Search Console
すでにGoogle Search Consoleを導入している場合、「エクスペリエンス」セクションの「コアウェブバイタル」レポートでホームページ全体の表示速度の状況を確認できます。
こちらは実際のユーザーデータに基づく測定結果で、問題のあるURLをグループ化して表示してくれるため、優先的に改善すべきページが一目でわかります。測定結果は「良好」「改善が必要」「不良」の3段階で評価されます。
コアウェブバイタルとは
少し前述していますが、2021年からGoogleが正式に検索ランキングの要素として採用した「コアウェブバイタル」は、ページ速度とユーザー体験に関する3つの重要な指標で構成されています。
これらをきちんと理解して改善することで、より効果的な速度最適化が可能になります。
1. LCP(Largest Contentful Paint):最大視覚コンテンツの表示時間
ページの主要コンテンツが表示されるまでの時間を測定する指標です。
ユーザーが「このページは役に立ちそうだ」と判断できる最も大きな要素(大きな画像やテキストブロックなど)が表示されるまでの時間です。
良好とされる基準 → 2.5秒以内
LCPを改善するには、サーバーレスポンスの高速化、レンダリングをブロックするJavaScriptやCSSの最適化、画像の最適化などが効果的です。特に、ヒーロー画像(ページトップの大きな画像)やメインコンテンツの読み込みを優先させることが重要です。
2.INP(Interaction to Next Paint):入力遅延時間
ユーザーが最初にページを操作してから(ボタンをクリックするなど)、ブラウザがその操作に応答するまでの時間です。
2024年3月以降、FIDはINP(Interaction to Next Paint)に置き換えられました。INPはページ全体でのユーザー操作の応答性をより適切に測定します。
良好とされる基準 → INPは200ミリ秒以内
この指標を改善するには、長時間実行されるJavaScriptの最適化、サードパーティスクリプトの遅延読み込み、メインスレッドの負荷軽減などが効果的です。
3. CLS(Cumulative Layout Shift):累積レイアウトシフト
ページの読み込み中にレイアウトが不安定に変化する度合いを示す指標です。
例えば、読んでいる途中でボタンや広告が突然表示されて、テキストの位置がずれるような体験はCLSが悪い例です。
良好とされる基準 → 0.1以下
CLSを改善するには、画像やメディア要素にサイズを明示する、広告やiframeのスペースを事前に確保する、動的コンテンツの挿入方法を工夫するなどが効果的です。
ページ表示速度を改善するためのポイント
ページ速度の測定結果に基づき、いくつかのポイントを意識して改善を進めましょう。
技術的な知識が必要な部分もありますが、基本的な部分は専門家でなくても対応できるものもあります。
1. 画像の最適化
多くのホームページでは、画像がページサイズの大部分を占めています。
以下の方法で画像を最適化しましょう。
【適切なサイズと形式】
表示サイズに合わせた画像サイズを使用しましょう。
1000ピクセル幅で表示する部分に2000ピクセル幅の画像を使うのは無駄です。また、写真はJPEG、透明部分が必要なイラストはPNG、シンプルなアイコンはSVG形式が適しています。
最近では、WebP形式が普及しており、従来のJPEGやPNGよりも小さいファイルサイズで同等の画質を実現できます。WordPressなどのCMSでは、プラグインを使って自動的にWebP変換できるものもあります。
【圧縮ツールの活用】
TinyPNGやImageOptimなどの圧縮ツールを使うと、画質をほとんど落とさずにファイルサイズを大幅に削減できます。WordPressならSmush、EWWW Image Optimizerなどのプラグインも便利です。
【遅延読み込み】
画面下部にある画像は、スクロールして見える位置に来た時に読み込むように設定することで、初期表示速度を向上させることができます。HTMLの`<img>`タグに`loading="lazy"`属性を追加するだけで、多くの現代的なブラウザでは対応可能です。
### 2. JavaScript・CSSの最適化
ブラウザがJavaScriptやCSSを解析・実行する時間も、表示速度に大きく影響します。
【不要なスクリプトの削除】
使用していないプラグインや機能を削除しましょう。
特にWordPressなどのCMSでは、不要なプラグインが多くのJavaScriptを読み込んでいることが多々あります。
【minifyと圧縮】
JavaScriptやCSSファイルから不要な空白や改行、コメントを削除する「minify(縮小化)」と、データを圧縮して転送する「Gzip圧縮」を適用することで、ファイルサイズを大幅に削減できます。WordPressならW3 Total Cacheなどのキャッシュプラグインで設定することが可能です。
【レンダリングブロッキングリソースの最適化】
「レンダリングブロッキング」とは、ブラウザがページを表示する前に読み込み・実行する必要があるリソースのことです。CSSは基本的にレンダリングブロッキングリソースですが、「重要なCSS」だけを最初に読み込み、残りは後で読み込むという「クリティカルCSS」の手法も効果があります。
JavaScriptは`defer`や`async`属性を使って非同期読み込みすることで、ページ表示をブロックせずに読み込むことができます。
3. サーバーレスポンスの改善
サーバーが最初のバイトを返すまでの時間(TTFB: Time To First Byte)も重要な要素です。
【高品質なホスティングの利用】
格安のレンタルサーバーは多くの場合、リソースを多数のユーザーで共有しているため、パフォーマンスが低下しがちです。アクセス数が多いホームページでは、より高品質なホスティングプランや専用サーバーの利用を検討する価値があります。
【キャッシュの活用】
サーバーサイドのキャッシュを利用することで、毎回データベースへのクエリを実行する必要がなくなり、応答速度が向上します。WordPressなどのCMSでは、キャッシュプラグインの導入が効果的です。
【CDN(コンテンツデリバリネットワーク)の利用】
CDNは世界中に分散したサーバーネットワークで、ユーザーに最も近いサーバーからコンテンツを配信することで読み込み速度を向上させます。Cloudflare、Fastly、AWS CloudFrontなどが代表的なCDNサービスです。
4. モバイル表示の最適化
スマートフォンからのアクセスが主流となっている現在、モバイル表示の最適化は欠かせません。
【レスポンシブデザインの適用】
画面サイズに応じてレイアウトが自動調整されるレスポンシブデザインを採用しましょう。これにより、別途モバイル用のページを用意する必要がなくなります。
【タップターゲットのサイズ最適化】
スマートフォンでは、ボタンやリンクなどのタップ可能な要素は最低44x44ピクセル以上のサイズが推奨されています。小さすぎるとユーザーが操作しづらく、誤タップの原因にもなります。
【フォントサイズの最適化】
モバイル画面でも読みやすいフォントサイズを設定しましょう。一般的に16ピクセル以上のサイズが推奨されています。
継続的な計測と改善が重要
ページ表示速度の最適化は一度行えば終わりではなく、継続的に計測と改善を繰り返すことが重要です。新しいコンテンツやデザイン更新のたびに速度への影響を確認し、必要に応じて調整していきましょう。
PageSpeed Insightsでは80点以上を目指すとよいでしょう。
しかし、スコアだけにこだわりすぎず、実際のユーザー体験を最優先に考えることが大切です。技術的な最適化だけでなく、シンプルで使いやすいデザインを心がけることも、結果的に表示速度の向上につながります。
ページ表示速度の改善は、SEO効果だけでなく、コンバージョン率(成約率)の向上やユーザー満足度の向上にも直結します。「待たせない」ホームページは、ユーザーに良い印象を与え、リピーターの増加にもつながります。
より詳しいホームページの診断方法については、「Webサイトが集客できない理由 - 10の自己診断法」をご覧ください。また、専門的な対応が必要な場合は、当社のWebコンサルティングサービスもご検討いただければ幸いです。
ページ表示速度の最適化は、実はずいぶん昔から言われていることなんです。しかし、ほとんどの制作会社ではその取り組みが行われていません。理由は、難易度が高いこと、対応しなくてもお客様にわからないことがあげられます。なので、ページ表示速度の取り組みを行うときは依頼する制作会社をしっかりと選ばなければなりません。なんちゃってな対策を行われ、ほとんど効果も出ずに費用だけ請求されるなんてことにもなりかえねませんので、ご発注の際はお気をつけください。
ページ表示速度を改善したい、SEOにしっかりと取り組みたいと思われている方、まずはお悩みをお聞かせください。
初回相談は無料です。
いつでもお気軽にお問い合わせください。