TIPS 2019.4.11

【WebクリエイターのためのSEO】SEOで評価を落とさないためにサイトの高速化が必要なわけ

現在のSEOにおいては、これまでの外部サイトのリンク数やコンテンツの量だけではなく、そのWebサイトに来訪したユーザーの体験の質を重視するようになってきています。ユーザーの体験の質とは、記事コンテンツであれば読了率や滞在時間、予約サイトなどであれば予約がスムーズにできることなど、サイトによって異なるものもあります。一方でWebサイトの表示速度などの高速化はどのWebサイトでも向上を図る価値があるものです。
今回はSEOで評価を落とさないためのサイトの高速化について説明していきます。

Googleにおけるスピードアップデートとは？

2018年7月にGoogleはWebサイトのページ読み込み速度をモバイル検索のランキング要素として利用する、スピードアップデートの導入をしました。サイトの高速化については、デバイスに関わらずユーザーの体験に影響が大きいですが、特にすき間時間で利用することの多いスマートフォンからのアクセスの方が影響が大きいため、モバイルの検索ランキングのみに利用されているものと考えられます。

ただし今回のアップデートは全てのサイトを対象とするものであるものの、とても低速なページのみが影響を受けるアップデートとGoogle側は発表しています。ですので、現時点で一定の速度があるWebサイトが高速化をしても評価が上がるというものではありません。裏を返せば基本的な対処を行っていれば、大きなリスクはないアップデートと言えます。

ではWebページの表示速度について、どのような観点で見ていくことが必要なのでしょうか？ここからは少し技術的な話が多くなりますが、噛み砕いて解説していきます。

Webページが表示される仕組み

ブラウザでWebページを開く際は、ブラウザとWebサーバーで随時やりとりをしながら、Webページを表示していきます。かんたんに言うと、ブラウザからWebサーバーへページのリクエストをして、その返ってきた結果を処理してブラウザにはページが表示されます。プロセスは大きく以下の3つに分類されます。

（１）レンダリング処理
　　　・・・ブラウザ側で返ってきたデータを解読する
（２）ネットワーク処理
　　　・・・ブラウザ側とサーバ側でのデータを運ぶ
（３）サーバー処理
　　　・・・サーバー側でWebページの構成する情報を作成する

（１）〜（３）の処理の対処については、Webサイトにより多くの取り組みが検討できます。レンダリング処理であればCSSの読み込ませ方や読み込みの非同期化、ネットワーク処理であれば画像やテキストの圧縮、サーバー処理はサーバーごとの処理分離やサーバー増強が代表的な施策です。この点はプロダクトオーナーやデザイナー、エンジニアがしっかりと話し合って対策を検討することが必要です。

一方で上記の基本的なプロセスを飛ばす施策として、「キャッシュ活用」という手法があります。この点については次項でもう少し詳しく見てみましょう。

キャッシュ活用の高速化技術

キャッシュとは過去に利用したデータを一定期間保存して再利用する仕組みを指し、キャッシュを利用することでサーバー側のファイル作成を不要にしたり、ブラウザ側からサーバー側へリクエストを不要にしてネットワーク通信をなくすことすらできます。キャッシュはその保存場所によって、以下の２つに分類されます。

（１）ブラウザキャッシュ
ブラウザ側で過去に取得したデータをデバイスに保存します。保存されているデータと同一なものが必要になる場合に、Webサーバーにリクエストせず、ブラウザキャッシュを参照してページ表示が可能になります。

（２）サーバーキャッシュ
過去にWebサーバー側で作成したファイルをWebサーバーに保存します。ブラウザからのリクエストに対し、過去に作成したファイルを使って、ブラウザにデータを返すことが可能になるため、サーバー側でのファイル作成処理が不要になります。

表示速度はどのように計測するか

これまでの取り組みを実際に行った後には、表示速度の高速化を検証する必要があります。表示速度の計測方法としては、以下２種類の計測手法があります。それぞれに特徴があるため、使い分けをして計測していきましょう。

（１） PageSpeed Insights
PageSpeed Insightでは実際のユーザーデータから表示速度を測定することが可能です。ですので非常に客観性の高い結果を得ることが可能です。一方で基本的には速度結果およびその最適化についての提案のみしか得ることができません。また実際のユーザーデータは「Google Chromeを利用していて調査データ利用に同意したユーザー」になあるため、十分なユーザー閲覧データがない場合は結果が表示されないこともあります。

（２）LIghthouse
LighthouseはGoogle Chrome上の測定ツールです。コマンドラインやChrome DevToolsの利用などいくつか利用方法がありますが、Google Chromeの拡張機能を利用するのがわかりやすいです。LIghthouseではPageSpeed Insightsと異なり、調査結果が5項目で表示されます。具体的には「Performance」「Progressive Web App」「Accessibility」「Best Practice」「SEO」の5項目です。
LighthouseはPageSpeed Insightsと異なり、詳細な分析ができるため、今後速度計測の主流はLighthouseに移行していくものと想定されています。一方で現時点では英語表記でかつ結果は端末スペックやネットワーク状況などテスト環境に依存します。当面は２つを状況に応じて使い分けていきましょう。

Webサイトの高速化はユーザー体験評価の高まりから、今後もさらに重要性が増していきます。技術的な観点が多い分野ではありますが、Webサイトの体験の質を決める非常に重要な要素です。Google側でも発信やアップデートの多い領域になるので、しっかりキャッチアップしていきましょう。