ページ表示速度とSEOへの影響・対策
Googleの検索ページでサイト名をクリックし、そこからすべてのコンテンツが表示されるまでのスピードはSEOにも大きく影響します。
つまり、表示速度の遅いサイトは、現在のGoogleの基準だと検索順位を上げられないのです。
今回はそんな、ページ表示速度についてのトピックです。
ページ表示速度がSEOへ与える影響
ページ表示速度がSEOの指標とされたのは2010年頃のこと。それまでは、ページの表示が遅くても、検索ランキングに影響を与えることはありませんでした。
最近であれば、2018年7月に実施された「Googleスピードアップデート」が有名です。
これを機に、ページ表示が極端に遅いサイトは、検索結果のランキングを大きく落とす結果になりました。
公式のアナウンスを読み解く限り、Googleがページ表示速度を評価するのは、「ユーザー体験」の向上にあると考えられます。
実際に、サイトに訪れたユーザーの53%は、表示に3秒以上かかるサイトから離脱しているというデータがあります。さらに、ページ速度が1秒から7秒になった場合、直帰率が113%上昇するというデータも公開されています。
このように、検索→アクセスのスピードが速いことはUX（ユーザーエクスペリエンス）の上で有利である、という結論につながります。
UXを重視するGoogleがこの結果を重んじるのは当然と言えるでしょう。
Googleが評価対象とする表示速度関連の項目
Googleは「サイト速度について」というページにおいて、以下の表示速度に関する項目を測定すると明言しています。
なお、測定値はGoogleアナリティクスのカスタム速度レポート画面にて確認ができます。
加えて、速度を改善（最適化）するための提案も表示されるので、ぜひ参考にしましょう。
サイト上でサンプルに設定したページビューの表示時間
Googleはユーザーの1%（最大10,000PV）のアクセスデータをサンプルに、速度を計測します。
なお、国やブラウザなどのセグメント分けがなされるため、サイトオーナーは自分のサイトの表示時間をさまざまな角度から確認できます。
ちなみに、公開されたばかりのサイトでPVが少ないなどの場合はサンプルが収集できず、速度レポートが正しく表示されません。
数値が0になっているときは、その可能性を疑ってみましょう。
トラッキングの対象にしている個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間
検索ユーザーがサイトへアクセスした際の、画像の表示時間やボタンのクリックの反応時間（ボタンクリックから次のアクションまでの時間）などが計測されます。
画像の表示時間は言わずもがな。反応時間についても、ページが開かれた後でユーザーは何らかのアクションを起こすものですから、その感覚が長ければ、「ページ表示に時間がかかっている」と見なされます。
ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間
そもそもブラウザがページを表示するのは、HTMLやCSS、JavaScriptなどのコードをブラウザが読み取り、それに従って描写を行うからです。
ブラウザが理解しにくかったり、エラーが発生したりしている場合、この描写速度が遅くなります。
Googleはサンプルユーザーから収集したデータで、ブラウザのドキュメント解析時間も計測しています。
ドキュメント解析が遅いということは、それだけページ表示に時間がかかっている、と結論付けているのです。
ページ表示速度の改善方法 3選
それでは、具体的にページ表示速度を改善する方法を見ていきましょう。
第1ステップは現在の表示速度をチェックすることです。
運営しているサイトがどのような問題を抱えているのかを把握することが、改善の第一歩につながります。
具体的には、以下のようなツールがGoogleから提供されているため、利用してみましょう。
また、前述した「Googleアナリティクス」の速度レポートも強力です。すでにトラッキングを開始しているのであれば、こちらも必ず確認しましょう。
表示速度をチェックした際に、結果が芳しくない場合は改善を検討します。以下から、具体例をご紹介します。今回は比較的簡単で、かつ初心者でも着手しやすいものをピックアップしました。
画像の最適化
たとえば、大きな画像をコードによって縮小表示させているような状態なら、画像のリサイズを行いましょう。
それだけで画像データの容量が小さくなり、ページ表示速度の改善につながります。
ただし、単に画像を縮小しただけだと画質が悪くなり、思っていたデザインにならない可能性があります。
この場合は、画質を保ちながら画像を圧縮する方法を試してみましょう。
ファイル形式によっても圧縮率は大きく異なります（JPEG 2000、JPEG XR、WebP などがおすすめ）ので、可能であればすべての画像を差し替えてください。
なお、WordPressの場合はアップロード済みのファイルを一括で最適なフォーマットへ変換できるプラグインがあります。
すでに大量の画像をアップロードしている場合は、こうしたツールの利用もおすすめです。
CSS・JavaScriptの最適化
魅力的なサイト作りの上で、デザインを司るCSSや動的な要素を追加できるJavaScriptの利用は、今や当たり前のものとなっています。
しかし、CSSやJavaScriptの容量が大きすぎるせいでサイト表示のスピードを低下させているケースも少なくありません。もしくは、エラーなどが起こっている可能性もあります。
サイト速度改善を行うのであれば、この点も調査対象にしましょう。
不要なCSS やJavaScriptのチェック
まずはHTMLを開き、不必要なCSSやJavaScriptが読み込まれていないかを確認してください。
読み込むファイル数が少なければ少ないほど、原則的にはページ表示が高速になります。
もしもサイトに関係のないファイルが読み込まれているようなら、該当のコードを削除します。たとえばHTMLからJavaScriptを読み出す場合ですと、以下のような記述が用いられています。
| <script type=”text/javascript” src=”JavaScriptのファイル名.js”></script> |
コードのミニファイ化
不要なコードの確認が済んだら、次にCSSやJavaScriptのミニファイ化（圧縮）に着手しましょう。
これはコード上に含まれる余分なスペースや改行、インデントを削除してファイル容量を減らす作業です。
目には見えないスペースや改行、インデントも、ブラウザにとってはデータであることに変わりありません。これらが多く含まれていれば、その分だけ容量が大きくなるのです。
なお、ミニファイ化を手作業で行うのは労力が大きいので、「Online JavaScript/CSS Compressor」などのツールを用いるのがおすすめです。半自動的に、ファイルサイズを小さくしてくれます。
なお、ミニファイ化をするとファイルサイズが小さくなる分、可読性が低くなります。今後の改修などのことも考えて、オリジナルは必ずバックアップしておきましょう。
ブラウザキャッシュの活用
ChromeをはじめとするWebブラウザには、「ブラウザキャッシュ」と呼ばれる機能が搭載されています。
これは、表示したサイトのデータをパソコンへ一時的に保存できるというもので、再訪の際にそのデータを再利用することで、初回よりもページ表示速度を速くできるというものです。
とは言え、とくに難しい作業ではありません。サーバ上に配置されている「.htaccess」ファイルに対し、以下の記述を追加するのみです。
これによって、キャッシュの有効期限が1週間以上になります。
|
<IfModule mod_headers.c> <IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 2 weeks”
ExpiresByType text/js “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType image/jpg “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/svg+xml “access plus 1 weeks”
ExpiresByType application/pdf “access plus 1 weeks”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType application/x-font-ttf “access plus 1 weeks”
ExpiresByType application/x-font-woff “access plus 1 weeks”
ExpiresByType application/x-font-opentype “access plus 1 weeks”
ExpiresByType application/vnd.ms-fontobject “access plus 1 weeks”
</IfModule>
</IfModule> |
まとめ
ページの表示速度改善は、こだわるとかなり深い知識とテクニックが必要になる分野です。
今回ご紹介したのはフロントサイドと呼ばれる分野の改善方法ですが、実際にはサーバサイドで行う対策も多々存在します。
しかし、これまでに何の対策もしてこなかったのであれば、今回ご紹介した改善方法だけでも、大きな違いを感じられるでしょう。ぜひお試しください。
【株式会社セレクト・ワン】
東京本社：03-5953-7160
株式会社セレクト・ワンの社員によってオススメ情報を執筆している【編集チーム】です。”初心者の方にもわかりやすく”をモットーに、記事を読んだら直ぐに実践できるWEBマーケティング関連の情報を紹介しています。
また、弊社の実績や導入事例から見る・コンテンツマーケティング・SEO対策・WEB制作など、様々な最新情報やノウハウも発信していきます。
