SEO、ユーザービリティの両側面から見て、Web ページが表示される速度は非常に重要です。
ここでは、Webページの表示速度を向上させるためのさまざまなツールや方法を、俯瞰的に紹介していきます。

  • コアウェブバイタルの改善によってページ速度とユーザーの離脱を回避
  • ツールで表示速度や問題個所を確認できる
  • データ量や通信回数を削減すると効果的

表示速度の重要性

Googleは2012年に、Webページの表示速度が検索結果での表示順位を決める要因の1つであることを公表しました。表示順位に対する影響は、外部リンクなどの要因に比べると小さいですが、Webページの表示速度の向上は、ユーザーへのストレス軽減によるページ回遊率や成約率の向上、サーバーの負担減による運用コストの削減など、さまざまなメリットをもたらします。

一般に、表示が遅れるごとにコンバージョン率、顧客満足度が大幅に低下し、表示に3秒以上かかるWebページでは4割以上のユーザーが離脱するといわれています。表示速度の最適化は、モバイル端末などの通信速度が遅い端末からのアクセスに対しては、とくに顕著な効果を発揮するでしょう。

またページ速度を含めて、話題のコアウェブバイタルについても理解をしておくとさらにSEO対策に有効です。

コアウェブバイタルとは？

ざっくりいうと、ページの読み込み速度が速い方がユーザーに親切でいいよねってことです。

コアウェブバイタルとはウェブページのUXに関する重要な指標で、｢LCP｣、｢FID｣、｢CLS｣の3つの指標から成り立っています。また、2021年の5月から「コアウェブバイタル」が正式にGoogle検索のランキング要因になるようです。モバイルフレンドリーやHTTPSなどとあわせて「ページエクスペリエンスシグナル」としての導入です。

SEOの観点で見ると、同じようなコンテンツや内容の充実度のサイトが複数ある時に、上位表示へ最後の決め手となるのがこの「コアウェブバイタル」になるようです。
ページ速度が速い方が上位になるため、日ごろからSEOに向けて作業をする必要はありますが、改めて今のうちからコアウェブバイタルの改善や細かな作業を重ねてよりよいページを準備しておきましょう。
コアウェブバイタルの説明画像

LCPとは

「最大コンテンツの描画」を意味し、ユーザーの認識としてのページ表示速度を測る指標です。ブラウザの表示範囲内で最も大きなコンテンツが表示されるまでの時間を指します。
最も大きなコンテンツとは、主にページの画像や動画の初期表示画像や背景画像のある要素などそのページでメインとなるコンテンツのことです。
数値は秒で表し、値が小さいほどUXが良いとされます。主にこの要素がこの後お話しする表示速度の最適化につながる部分になります。

FIDとは

「初回入力遅延」を意味し、ユーザーが第一印象として感じるサイトのインタラクティブ性（クリックしたり、スマホでタッチをした時の反応ややり取りのこと）や反応速度を測る指標です。
ユーザーが最初にページ内でクリックやテキストを入力したり、何かアクションを行った際に、ブラウザがその操作反応するのにかかった時間を表します。
数値はミリ秒で表し、値が小さいほどUXがよいとされます。

CLSとは

累積レイアウト変更を意味し、視覚要素の安定性を示す指標です。
ユーザーが意図せぬレイアウトのずれがどれくらい発生したかを独自「レイアウトシフトスコア」で表します。
皆さんも、このような経験をしたことはないでしょうか？

・ページが表示されて読んでいたら、遅れて画像や広告が表示されて文章が下にずれて「あれ？」ってなる
・リンクをタップしようとしたら予期せず現れた広告によってリンクのバナーや文章がずれて誤って広告をタップしてしまった

などそういった体験がユーザーに少ないほど良いという考え方です。

表示速度の確認方法

Webページの表示速度にはさまざまな要素が絡んでいるため、何を最適化するべきかはWebサイトや環境によって異なります。まず、いくつかのツールを使用して、表示速度がどの程度であり、どの部分に改善の余地があるのかを特定する必要があります。ここでは、それらを調べるためのツールを紹介します。

Page Speed Insights

Page Speed Insightsの説明画像
URLを入力すると、表示速度の低迷要因をチェックし、採点してくれるツールです（https://developers.google.com/speed/pagespeed/insights/）。スマートフォンへの対応についてもテストできます。ただし、具体的な表示時間が確認できないため、現在の状況をおおまかに把握するために使うとよいでしょう。

Google Search Console

サーチコンソールで見るCWVの指標の説明画像

サーチコンソールの「ウェブに関する主な指標」の欄からレポートを開くと改善指標が確認できます。
Page Speed Insightsと併せてこちらでも確認しておきましょう。

Googleアナリティクス

アクセス解析ツールのGoogleアナリティクスでも、Webページの表示速度が確認できます。「行動」→「サイトの速度」→「ページ速度」の順にクリックすると、各ページが表示されるまでに平均で何秒かかったかが確認できます。

Pingdom Website Speed Test

どのリソースをどれだけの時間をかけて読み込んだかを確認できるツールです（http://tools.pingdom.com/fpt/）。その結果、ファイルの圧縮や、リソースの最適化を検討することが可能となります。

GTmetrix

PageSpeed Insightsよりも詳細に、どこが表示速度のボトルネックになっているかを調査できるツールです（https://gtmetrix.com/）。ブラウザキャッシュやリソースの圧縮など、サーバー側の改善項目も詳細に確認可能です。

表示速度を最適化する方法

Webページの高速化には、大きく分け２種類の概念があり、フロントエンド側での高速化と、バックエンド側での高速化です。

SEOにおけるフロントエンドとは、HTML、CSS、JavaScriptなど、WebページのWebブラウザへの表示に関する部分です。フロントエンドの領域では、ある程度HTMLが記述できるなら誰でも高速化することが可能で、それに対して、サーバー側を意味するバックエンドでは、ある程度サーバーの専門的な知識が求められます。そのため本書では、フロントエンド側での高速化に絞って説明を行います。

サーバーとの通信量の削減

Webページを開くということは、サーバーからデータをダウンロードするということです。当然ながら、データの量が少ないほど、表示速度の改善が期待できます。

もっとも容易なデータの削減方法は、画像ファイルの圧縮です。画像ファイルの圧縮による画質の悪化が懸念されがちですが、通常の画像ファイルには、Webページには不要なほど高画質なデータが含まれていることが多いです。こうした不要なデータを圧縮することで、かなりのデータを削減することができます。さらに、人の目にはわからない程度の画像の圧縮を行うことでも効果的にデータを削減できる。このようなデータの削減では、「Kraken.io（https://kraken.io/web-interface）」というツールが便利です。
Kraken.ioというツールの説明画像

また、HTMLをはじめ、CSSやJavaScriptも不要なデータを削減することが可能です。具体的には、不要な改行やインデントを削除することによってデータ量を削減できます。

サーバーとの通信回数の削減

1つのWebページが表示される際、開くファイルの数だけサーバーとの通信が発生します。具体的には、HTML、画像、CSS、JavaScriptなどのファイルの数だけ通信が発生します、つまり、ファイルの数をまとめたり削減したりすることによって通信回数を削減すれば、表示速度の改善が期待できるということになります。

具体的な改善方法としては、まず小さなCSSや小さなJavaScriptを外部化せずにHTML内にまとめておくことです。また、複数のアイコンなどを1つの画像にまとめ、CSSで個々のアイコンの座標を指定して表示させる「CSS Sprite」という技術を利用する方法でも、ファイル数を削減することができます。

CSSやJavaScriptの読み込み順の改善

CSSやJavaScriptなどを読み込む順番によっても、Webページの表示速度は左右されます。たとえばHTMLの<head>タグ内にJavaScriptが記述されていた場合、JavaScriptの処理が終了するまでは、以降のHTMLの記述が読み込まれません。

この場合、<body>タグを閉じる</body>の直前にJavaScriptの記述を配置することにより、コンテンツを表示してからJavaScriptの処理を実行させることが可能です。
Webページ全体のダウンロードにかかる最終的な時間は変わらないが、JavaScriptの処理が終了してからコンテンツを表示するか、コンテンツを表示してからJavaScriptの処理を開始するかでは、ユーザーの体感する表示速度は大幅に異なるため、効果的な施策です。

ただし、アクセス解析に使用するコードや、HTMLコード内でデータの読み出しに使うJavaScriptなど、読み込みの順番で
不具合が発生するJavaScriptも存在するため、動作確認は徹底しましょう。

画像フォーマットの最適化

速度改善において、画像の最適化は欠かせません。
画像のフォーマットといえば、「jpg」「png」「gif」などが代表的ですが、最近では次世代の画像フォーマットなるものが現れ、「Webp」や「JPEG 2000」や「JPEG XR」などが代表的です。従来より3割近く軽量化が可能で、注目を浴びていますが、「JPEG 2000」「JPEG XR」は対応ブラウザがまだ少ないのと、処理速度が遅くなるというデメリットがあるため現時点では「Webp」が一番扱いやすそうです。

コーディングの部分ではなかなか改善に向けて着手するのが難しく感じる部分も多いと思いますが、画像のフォーマット変換についてはそれほど難しくなく、一番指標の改善にも表れやすいと思うので、フリーツールのsquooshなどを使って画像変換して、対応してみてください。