ページ表示速度（ページスピード）の測定、改善、SEOでのポイント

ページ表示速度は、サイトを訪れるユーザーの満足度に大きく影響します。たかが数秒の差と侮ることなかれ。遅い場合だと、表示前にそっぽを向かれ離脱されるなんてこともザラにあります。逆に、表示速度を改善することで、より閲覧しやすいサイトと認識され、ユーザー体験の向上とともにアクセス数が上昇するケースがあるのも事実です。
結果的にSEOでも優位に作用します。

本記事では、ページスピードについて、測定方法や遅くなる原因究明を踏まえたうえで、改善に有効な施策まで紹介。おそらく、気になる方も少なくないと思われる「Core Web Vitals（コア ウェブ バイタル）」の話なども取り上げます。

とにもかくにも、ページ表示速度（ページスピード）は、Webサイトを制作、運用していくなかで無視できない大事な要素です。
したがって、おさえておくべき基礎知識はもちろん、目新しい情報を収集でき次第、拙稿にて随時載せるようにします。
ぜひ、定期的にチェックしてみてください。

※この記事は、2021年6月に更新しています。

ページ表示速度アップの前に知っておきたい仕組みのこと

はじめに、Webページが表示されるまでの仕組みをお伝えします。
たとえば、ユーザーがブラウザにURLを入力しそのサイトにアクセスした時、一体何が起きているのでしょうか。

まず、そのURLにたどり着くためにはIPアドレスが必要です。いうなれば、サーバの在りかを探すことになります。
DNSリクエストが送信され、GoDaddyなどのドメインネームプロバイダーに通信し、IPアドレスにはアクセスするわけですが、それがいわゆるURLを示すサーバです。
そして、そこからHTMLを受け取ります。ブラウザはHTMLを読み込み、ある仕組みに変換します。それがDOM（ドム、ドキュメントオブジェクトモデル）です。
これでページの読み込みは完了かといったら、そうはいきません。
むしろここからがポイントです。
通常、Webはサーバ内にあるいくつかのリソース（画像、動画、CSS、JavaScript）をリクエストし、取得し、処理します。
この段階でページを読み込むスピードは減速し、すなわちページ表示速度という指標が打ち立てられるのです。
詳しくは後述しますが、遅延の際によくいわれる「画像が重い」「ファイルサイズが大きい」「プラグインのせい」……等々の原因も元を辿れば上述した仕組みに行き着きます。

ページ表示速度によって生まれるメリット、デメリット

ページスピードが速いとどのような利点が生まれるのか。はたまた遅いとどのような支障をきたすのか。
とりわけ制作者側にみられる現象で、思考回路が作業一辺倒になりがちだと、こうした頓珍漢な質問をぶつけてしまう恐れがあります。
ユーザーがWebサイトにアクセスしてページがなかなか表示されなければ違和感を抱くのは当然。大抵はストレスが溜まるものと考えるのが自然です。一方ですぐに表示され、スクロールや入力などもスムーズに操作できたからといって、特段お得な気分にはならないと思われます（笑）。おそらく、それが当たり前のぐらいの感覚の人がほとんどでしょう。
つまり、ページ表示速度にメリット・デメリットをわざわざ引っ張り出そうとすること自体、実は野暮なことなのです。

そうはいってもやはり、具体的にそのメカニズムを知りたい方もいらっしゃるかもしれません。
ユーザーに加え検索エンジンもどのようにジャッジするのかは最低限の知識としておさえておきたいところです。
そういうわけで、いわゆるUXやSEOの観点から紐解いてみましょう。

ページ表示速度とUXの関係

表示速度が遅いことは機会損失につながります。それはユーザー体験の損失といってもいいでしょう。ダイレクトにUXが低下してしまうため、集客等に注力しているのであれば痛手となります。いくらコンテンツが充実していても即座に離脱されるとなれば、内容を強化した意味を失うわけです。ページを開いても読み込み状態のまま待たされるユーザーの気持ちを察してください。ちなみに短気な筆者は途端にイライラし始めます（苦笑）。
と、余談はさておき、ユーザーはすぐに閲覧できるほかのサイトへ移ろうと考えるのが自然。そうやってせっかく接点を持てた顧客を、まさに一瞬で失うパターンも少なくありません。
いずれにせよ、多くのユーザーは自分の求めている情報をいかにスピーディーかつ快適に得られるかを重視しています。ゆえに、ページスピードの遅さは、ユーザー離れの致命的な原因になり得るでしょう。

ページ表示速度とSEOの関係

さて、影響は検索結果にも及びます。そう、SEOです。
繰り返し伝えるようにページの表示速度は、ユーザー行動に大きく関わります。良質なサイトとして評価されるには、直帰率や離脱率を抑えていく必要があると思いますが、これが高いとどうでしょう。もちろん知名度や話題性などがあれば、ページランクの蓄積も相まって上位に君臨できるかもしれません。が、そうでなければなかなか難しいと考えます。
ページが重い、遅いは悪です。表示速度が非常に重要であることは、ユーザーのみならずロボット（検索エンジン）にだってお見通し。どうしたって注力せざるを得ないですね。

注目のランキング指標「Core Web Vitals（コア ウェブ バイタル）」

先般、Googleはユーザー体験向上のため、Web Vitals というコンセプトをランキング要因に組み込む旨、アナウンスしています。
Googleが提供する解析ツール「サーチコンソール」では、すでにこの指標について判定可能です。拡張セクションの中の“ウェブに関する主な指標”でレポートされる仕組みとなっています。

Core Web Vitalsが定義する3つの指標はそれぞれ以下の通り。
Largest Contentful Paint （LCP）…ページで最も大きな要素が読み込まれるまでの時間に当たります。対象となるのは主に画像や動画でしょう。記事のみのコンテンツであれば本文もしくが見出しがその的になると考えられます。
First Input Delay （FID）…操作入力が開始可能になるまでの待機時間を表します。 クリックやタップも該当。つまりはインタラクティブ性です。
Cumulative Layout Shift （CLS）…コンテンツの移動を示すスコアです。表示されるレイアウトが安定されるまでを測ります。

数値に問題がある際は、早い段階で改善へ向けた動きをとりましょう。UXの健全性は（ユーザーはもちろんのこと）Googleが望むものといえます。
ツール等駆使しながら、まさしくページの最適化につなげてください。
今後、確実に取り組まなければならない課題です。

さらに詳しく知りたい方はこちらの記事へ
「Core Web Vitals（コア ウェブ バイタル）」の対策、改善方法

ページスピードの検索順位への影響度合い

ページスピードが検索順位へどの程度影響を与えるのか、実際のところは不確かに思えます。しかし、前述の「Core Web Vitals（コア ウェブ バイタル）」が明確な指標としてあらわれたことで、さながら脅威のごとく、その強度が増進される印象を持たれている方も少なくないでしょう。
そうしたなか、Google 検索チームの社員がポッドキャストで配信する番組『Search Off the Record』の「What if speed was a ranking factor…?」の回で貴重なお話をされていました。

ポイントは、HTTPS（SSL化）がランキング指標に組み込まれたときと同じ経緯を辿ったことです。
つまり、「HTTPS アルゴリズム」がそうであったように、当初はそれなりに強い影響力を与える設計で進めていたところ、やはりコンテンツの重要度が薄まってはいけないと考え、テスト段階で徐々にその配分を減らしたのだといいます。結果、相対評価において他の要素で均衡していた場合の優劣（判断）材料に落ち着くことになったようです。
SEOに携わる人のあいだや界隈では、「tie breakerタイ ブレーカー）」とも呼ばれています。スポーツ競技でお馴染みのタイブレーク方式、つまり同点決勝の際に採用される項目というわけです。
そのように聞くと、当面は比較的小さい、弱いランキング要素と捉える向きがあるかもしれません。確かにランキングの変動が顕著にみられるかといったら想像しにくいです。とはいえ、検索ワード次第では似通ったコンテンツがひしめき合っていることを考えるとページスピードが速ければ、SEOにおいて大きなアドバンテージになり得るでしょう。

そうこう踏まえて、色々と予想や見解を示したくなるところですが、とりあえずしばらくは、事前にできることを簡易的に行いつつ、実際にアルゴリズムが動き出すまでは状況、様子を見守っていくスタンスが（コストとのバランスも加味したうえで）無難ではないかと考えます。

ページの表示速度を測定・確認する方法

ページの表示速度が重要だということは説明しましたが、実際のスピードを調べるにはどうすれば良いのでしょうか。もちろん、自身でサイトにアクセスした体感をもとに、程度を判定するのも悪くはありませんが、ページの読み込みには使用している機器（PC・スマホなど）のスペックや通信状態など、個々の通信環境も多かれ少なかれ影響します。そのため、はっきりと審判を下すにはやや曖昧。そこで、おすすめしたいのが測定ツールでのチェックです。代表的なものは「PageSpeed Insights」や「Test My Site」が挙げられます。いずれも入力スペースに測定したいページのURLを入力するだけで、そのページスピードのスコアが示されるというものです。ありがたいことに、表示速度を上げるための改善ポイントまで示してくれます。重宝される方が多いのも納得です。
加えて、Googleアナリティクスといったアクセス解析ツールでも分析結果として確認可能です。サイト単位で調べられるため、複数のページの結果を同時にみることができ、平均含めて一目瞭然で比較が可能になります。

なお、一説によるとユーザーがスムーズだと感じる表示タイムの目安は2秒までだそう。言い換えれば、表示に3秒以上かかってしまえば遅いページだと認識される可能性が高いということです。閲覧開始ページのみならず回遊遷移の際も同様。
当たり前ですが、全てのページにおいて快適なスピードを提供する必要があります。

無料で測定できる主なチェックツール「PageSpeed Insights」

「PageSpeed Insights」は、Googleが提供する計測ツールです。パソコン、モバイル両方のデバイスに対応。Webページのコンテンツを一度に解析し、一回でそれぞれの評価スコアと改善方法を確認できます。

（直接スコアに影響しないとはいえ）ページの読み込み速度を短くするために提示される項目、注意喚起は、たとえば、以下の通りです。

• 適切なサイズの画像
• 効率的な画像フォーマット
• レンダリングを妨げるリソースの除外
• 使用していない JavaScript の削除
• JavaScript の最小化
• 使用していない CSS を削除してください
• テキスト圧縮の有効化
• 最新ブラウザに従来の JavaScript を配信しないようにしてください

それぞれクリックすると（アコーディオン形式）、さらに具体的な対策内容を知ることができます。

無料で測定できる主なチェックツール「Test My Site」

「Test My Site」は、モバイルサイトの速度をテストするためにGoogleが提供しているチェックツールです。
同業他社平均との比較や、月ごとの変化についても一瞥して確認できます。下部にスクロールすると、改善方法や個別のページ診断も可能です。詳細なレポートを知りたい場合は、メールで取り寄せる形で作成してもらってもいいでしょう。
シンプルすぎるUIも含めて、一つひとつのアドバイスがわかりやすく親切に感じられるはずです。

ページ表示速度が遅くなる理由

ページ表示速度が遅くなるのは、なぜなのでしょうか。考え得る主な原因をピックアップしました。

コンテンツが多い

サイトにはさまざまなコンテンツが盛り込まれています。文章だけでなく、画像や動画など、ページをわかりやすく見応えのあるものにするため、ユーザーにとって充実したページになるべく多くの工夫が凝らされています。しかし、それらが原因となり遅延が生じてしまう場合もあります。一体どういうことか。各コンテンツのデータ量が膨らんでいるため、その分ページが開かれるには多くの通信が必要となり、結果全ての内容が表示されるまで時間を要してしまうのです。

HTMLやCSSに無駄が多い

WEBページを作る際は、HTMLやCSSなどのプログラミング言語が用いられます。複数の階層で複雑に設置されるため、直接ページに現れない無駄なプログラムが生まれることもあります。これがまさに原因です。ページ読み込みの際、余計に時間がかかってしまいます。

JavaScriptが多い

JavaScriptはWEBサイトの動作にバリエーションを持たすことができる便利なプログラミング言語です。JavaScriptを使用することで、WEB上でさまざまなアクションが可能になります。一方、メリットして扱える分、多用すれば負荷もかかります。データが蓄積されると重くなり、表示に遅延が生じるため注意が必要です。

画像が重い

ページの中に画像を設置している場合も気を付けなければいけません。表示速度が遅くなる原因としてもはや定番です。
画像が少しずつダウンロードされる様子を、イライラしながら待ったあの経験。きっと筆者だけではないはずです（苦笑）。

ページにアクセスが集中している

これはページ自体に問題があるというよりは、アクセス数に対しサーバのスペックが釣り合っていないことが原因です。アクセスが集中した際、サーバが通信を捌ききれないと、重みに耐えきれず不安定のままページの読み込みに支障をきたします。あるいはサーバダウンで閲覧不可能になるため、事前に対策を練ることが必要です。

ページ表示速度を改善するための方法

前章で説明したページの表示速度が遅くなる原因を踏まえて、改善に有効な方法をご紹介します。

HTTP/2に対応したレンタルサーバを利用する

HTTP/2に対応したレンタルサーバを利用することで、クライアントとサーバの間の通信が効率化します。結果、コンテンツ自体の伝送速度アップにも寄与します。
なお、前提としてサイトがSSL化対応していなければなりません。

HTTP/2とは？

コンテンツの数を整理し減らす

多数のコンテンツを詰め込み、ユーザーにとってできる限り有益なページを作りたいと考えること自体は大賛成です。しかし、ページスピードの遅さゆえ、ユーザーに不満を感じさせ、あまつさえ離脱されるようなことになれば、本末転倒。せっかく用意した力作コンテンツも全て無駄になってしまいます。そこでおすすめしたいのが、整理整頓、調整です。ページに設置されているコンテンツを洗い出しましょう。特段必要のないもの、コンバージョンへの貢献度が低いもの等あれば、思い切って削るのも一つの手です。

HTML・CSS・JavaScriptを見直し無駄をなくす

ページを構築するHTML・CSS・JavaScriptの見直しは必須です。無駄をなくすことで道（とページ）は開けます。意味のない改行やスペース、インデントなども表示速度を遅くさせる要因です。一つひとつは些細なことかもしれませんが、積み重なれば大きな影響を及ぼします。なお、CSSやJavaScriptのファイルが複数ある場合、できる限りまとめることで、省エネとスピードアップが期待できます。軽量化されると同時にフォルダ管理のしやすさに寄与し、更新面でのメリットも生まれるでしょう。

画像の解像度や種類を変更しサイズダウンに努める

画像はページを見やすくするための大事なファクター。過剰に設置するのは考えものですが、全く無しにすることも現実的ではありません。そこで、画像を設置する場合は、サイズダウンできるような工夫を加えましょう。例えば、画像形式にこだわるやり方です。WEBで公開されている画像の形式には、「JPEG」「GIF」「PNG」など、さまざまな種類があり、それぞれに特徴があります。JPEGは、写真をはじめ多くの色数が必要な画像に適した形式です。逆に色数の少ないイラストなどを保存すると、サイズが大きくなる傾向にあります。この場合はGIFがおすすめです。比較的小さいサイズ形式で保存してください。

画像と形式の相性を確認し、最適化することによってサイズダウンが図れ、ひいてはページの表示速度アップにつながります。また、画像の寸法をコンパクトにするのも良いでしょう。ページ内を見たとき、無意味に大きな画像はないでしょうか。本当にその大きさでなければいけないのでしょうか。必要最低限の大きさに圧縮することも有効な手段です。再三述べている通り、重たい画像はページの読み込み時間を長くします。この最たる要因を見直すだけで改善が見込めるでしょう。

ブラウザキャッシュを用いる

WEB上にはキャッシュという機能があります。ブラウザ上で行われる一時的なデータ保存により、1度訪れたことのあるページに再度アクセスするとき、以前の訪問時よりスムーズにアクセスできる仕組みです。ブラウザキャッシュを利用すれば、さらにページを素早く表示させることができるでしょう。方法としては、「.htaccess」というファイルに指定のコードを入力するだけなので非常に簡単です。

サーバのスペックを上げる

ページをアップしているサーバのスペックを上げることで、ページの表示速度を上げるという方法もあります。もし、アクセスが増加したことによりページの読み込みが不安定になり表示速度を遅くしているのであれば、現状より容量が大きくスペックの高いサーバに変更してみてください。通信の高速化に伴い、スピードアップが可能になります。

サーバが落ちてしまい、復旧までユーザーを呼び込むことができないとなると大きなダメージです。表示速度以前に、サーバに対する不安は早めに解消しておくことをおすすめします。

AMPでページスピード高速化

モバイルページを高速に表示させるための手法としてAMP（Accelerated Mobile Pages）と呼ばれるフレームワークの活用が挙げられます。
これは、大まかに「AMP HTML」「AMP JS」「AMP Cache」の3つの要素から構成されるものです。
JavaScriptの制限やWebサイトをいちいち読み込ませることなく保存上のキャッシュだけでコンテンツを返す（表示させる）など極力負荷を軽減する仕様となっています。
このように、リソースサイズを静的に規定するAMPによって、読み込み時間を省くことが可能です。
サイトの構造が複雑になりすぎるとうまく機能しないケースもありますが（過去にはECサイトやポータルサイトで露見されました）、ニーズは高くさまざまな媒体で活用されています（代表的なメディアは食べログ、マイナビニュースなど）。

PWAの導入でUX向上

PWA（Progressive Web Apps）とは、ずばり、アプリさながらのページスピードを可能とするWebサイトの機能です。
仕組み上（実装されるのは’/service-worker.js’）、キャッシュによって高速化を実現。
オフラインでもサイトを利用できるため、データサイズやインターネット環境に悩まされることなく、スムーズな閲覧に寄与します。
当然、UX向上につながるといってもいいでしょう。

なお、その他のメリットとして、ダウンロード無しであること、プッシュ通知の配信が可能になること（許諾は必要）が挙げられます。

ージ表示速度を改善し多くのユーザーを呼び込もう

今以上にもっと多くのユーザーにページを閲覧してもらうためには、表示速度の確認と改善は重要です。スピードを遅くしている理由はここまでお伝えしてきたようにいくつもの要因が存在します。ページやサイト全体を分析したうえで、適した改善方法を探っていきましょう。
そういうわけで、本記事を参考に、ページ表示速度の見直しを図り、よりユーザーの満足度の高いサイト作りへアプローチしてみてください。