Webサイトの表示速度とは、WebサイトのURLにアクセスしてから、ページが表示されるまでの速度を指します。

Webサイト制作の際にも、表示速度は見落とされがちな部分ですが、表示速度が遅いと様々なデメリットがあり、検索順位にも影響することがあります。

「自社サイトの表示速度を確認するにはどうしたらいい？」

「表示速度を改善するにはどうしたらよいか分からない」という方に向けて、

本記事では、表示速度を計測するツール、各ツールにおける主な指標、改善方法などをご紹介します。

Webサイトの表示速度の重要性

まずは、Googleの発表しているデータをもとに、表示速度の重要性について抑えておきましょう。

Webサイトの表示速度が遅いと、主に下記のようなデメリットがあります。

表示速度が遅い場合のデメリット：ユーザーの離脱率が上昇する

閲覧しようと思ったWebサイトの読み込みが遅く、そのサイトを見るのを諦めた、という経験がある方も多いのではないでしょうか。

Googleが紹介している上記の図では、ページの読み込み時間が1〜3秒の場合、離脱率は32%、1〜5秒の場合は90%、1〜6秒の場合は106%、1〜10秒の場合は123%上昇することが報告されています。
引用：https://www.thinkwithgoogle.com/

つまり、離脱率が上昇することにより、結果的に問い合わせや商品購入といったコンバージョンの損失にも繋がってしまうことになるのです。

表示速度が遅い場合のデメリット：検索順位にも影響を受ける

Webサイトの表示速度はユーザーの利便性に大きく関連し、検索順位にも影響があると考えられています。

Googleが発表している「検索エンジン最適化（SEO）スターターガイド」および「Google 検索セントラルブログ」では、下記のように紹介されています。

まず確認しておくべき基本的な点を以下にまとめます。
所有するウェブサイトが Google に表示されているか？
ユーザーに質の高いコンテンツを提供しているか？
所有するローカル ビジネスが Google に表示されているか？
ウェブサイトのコンテンツにどのデバイスからでも速く簡単にアクセスできるか？
所有するウェブサイトは安全か？
引用：検索エンジン最適化（SEO）スターターガイド

ページの読み込み速度をモバイル検索のランキング要素に使用します。
読み込み速度はこれまでもランキングシグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで2018年7月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
引用：ページの読み込み速度をモバイル検索のランキング要素に使用します

このようにWebサイトの表示速度は、アクセスしたユーザーの離脱率や、UX（ユーザー体験）、SEOにも影響を及ぼす重要なポイントといえます。

Webサイトの表示速度を計測できるツール紹介

では次に、実際にWebサイトの表示速度を計測するためのツールをご紹介していきます。

Google PageSpeed Insights

Google PageSpeed Insightsは、Googleが提供している表示速度計測ツールです。

「ウェブページのURLを入力」にURLを入力し、分析をクリックすることで、表示スピードがパフォーマンススコアとして、点数で表示されます。

また、上にある携帯電話もしくはデスクトップをクリックすれば、それぞれのデバイスにおける表示パフォーマンスを確認することができます。

なお、パフォーマンスは3段階で評価されており、

0～49（赤）：悪
50～89（オレンジ）：改善が必要
90～100（緑）：良

というように分けられています。

ただし、100 というスコアを達成するのは非常に難しく、Googleからもアナウンスがありますが完璧を求める必要はありません。

理由としては、「PageSpeed Insights」のサーバーが海外に設置されており、物理的に距離がある日本のWebサイトは点数が低くなりがちであるためです。

また、このスコアは世界順位を表したスコアであり、もし90点であれば世界全体で100人中10位相当のスピードということになり、そこまでの高評価を得るのは至難の業と言えます。

「PageSpeed Insights」を利用する場合は、まずは50点程度を目指すべき目安としましょう。

Lighthouse

Lighthouse（ライトハウス）は、Googleが提供しているWebサイトを分析・診断するための、Google Chrome拡張機能です。

「Lighthouse」では、Performance、Accessibility、Best Practices、SEO、Progressive Web App、といった4項目に分かれた採点が可能になっています。

先ほどご紹介した「PageSpeed Insights」の場合はパフォーマンスのみの評価になるため、「Lighthouse」の方がより精密に問題点を確認することができるでしょう。

Google PageSpeed Insights・Lighthouseでの主な指標

「Google PageSpeed Insights」および「Lighthouse」では、Webサイトの表示速度は主に下記の指標で評価されます。

まずは、それぞれの項目の意味を理解しておきましょう。

・First Contentful Paint

First Contentful Paint（FCP）は、Webサイトのコンテンツや画像が初めて表示されるまでにかかった時間を指します。

・Speed Index

Speed Indexは、ページの読み込み時間を指します。Webサイトが完成に近い状態で表示されるまでの時間が短いほど、評価が高くなります。

・Largest Contentful Paint

Largest Contentful Paint（LCP）は、ユーザーがWebサイトにアクセスしてから、メインコンテンツが表示されるまでの読み込み時間を指します。

・Time to Interactive

Time to Interactive（TTI）は、ユーザーがWebページを操作できるようになるまでの時間を指します。

・Total Blocking Time

Total Blocking Time（TBT）は、クリックや入力といったユーザー操作への応答がブロックされている時間のことを指します。

・Cumulative Layout Shift

Cumulative Layout Shift（CLS）とは、レイアウトのずれがない視覚的な安定性がある状態かどうかの指標です。

では、これらの項目に対して具体的にどのような改善方法があるのか、主な例をご紹介します。

Webサイトの表示速度を改善する方法

①画像を最適化させる

画像は、Webサイトのデータ量の大部分を占めることがあり、これらを最適化することで、パフォーマンスが改善することも少なくありません。

まずはWebサイトの中に不要な画像がないか、大きすぎるサイズの画像がないか、確認することから始めましょう。

なお、「Google PageSpeed Insights」や「Lighthouse」で、提案される改善方法として次世代フォーマットへの切り替えがあります。

WebPへの切り替えは、速度が速くなるというメリットがある一方で、対応していないブラウザやバージョンがあるという懸念があります。

そのため、Webサイトの制作会社としっかり相談をして検討をおこなってください。

画像の最適化するためのおすすめツール

Squoosh

「Squoosh」は、Googleが提供している無料の画像圧縮ツールで、ブラウザで画像を圧縮・最適化することができるWebアプリです。

「Compress」のプルダウンメニューから、圧縮・最適化方法を選択し、JPEG形式であれば「MozJPEG」、PNG形式であれば「OxiPNG」を選択することができます。

また、中央のスライダーを動かすと、圧縮後（右側）と圧縮前（左）の比較をすることも可能です。

TinyPNG

「TinyPNG」は、画像を圧縮して容量を軽くしてくれる、無料のサービスです。

WebP、PNG、または JPEG ファイルをドロップすれば、最大20枚の画像、それぞれ最大 5 MBまで圧縮することができます。

圧縮方法は、ブラウザ上に画像ファイルをドロップするだけなので、非常に簡単です。

どのようなツールを使うとしても、圧縮のよって元の画像より画質が劣化してしまうため、圧縮後には必ず画質のチェックをおこないましょう。

②ブラウザキャッシュの有効期間を長くする

キャッシュの有効期間を長く指定することで、一度読み込んだ情報をブラウザ側で保持し、サイト表示を速くするよう働きかけることが可能です。

具体的には、WordPressの.htaccessファイルを編集する必要があるため、専門的な知識がある技術者に設定を依頼しましょう。

③外部ファイルの縮小

ファイル内にある余分な余白、改行、インデントは、数が積み重なると容量を圧迫する可能性があるため、それらを削除することも対策の一つになるでしょう。

また、先ほどご紹介した画像と同様、使っていないファイルなどがある場合はこちらも削除しておくことがおすすめです。

④動画データの最適化

動画データは、アニメーションGIFからMP4といった動画形式に変換する改善方法があります。

また、Youtubeを使った動画の埋め込みでも表示速度が遅くなる場合があるため、そういった際には、jQueryやWordpressのプラグインを使うという方法もあります。

こちらも専門的な知識が必要になるため、技術者に設定を依頼しましょう。

⑤Wordpressのプラグインの見直し

WordPress内で導入しているプラグインの見直しは、適宜おこないましょう。

使用していないプラグインが有効になっているだけで、表示速度に影響が出る恐れがあります。

WordPressのプラグインは必要最低限にし、不要なものはなるべく削除するように心掛けましょう。

またプラグインとして使ってる箇所を、プラグインではなく開発会社の方で直接実装して速度改善するというケースもあります。

⑥サーバースペックの向上

サーバーにかかっている負荷が大きすぎる際には、サーバーの契約内容を見直して、スペックの切り替えを検討してみましょう。

サーバーの処理速度を上げることで、その分サイトの表示速度が速くなる可能性があります。

おわりに

Webサイトの表示速度は、アクセスしたユーザーの離脱率や、UX（ユーザー体験）、SEOにも影響を及ぼす重要な要素です。

この記事で紹介した「Google PageSpeed Insights」や「Lighthouse」を使って、改善項目の確認・改善をおこなうことで、ユーザーにとってストレスのない使いやすいWebサイトを目指していきましょう。

クランチタイマーでは、Jamstackといった新しい技術スタックを活用しており、高速なWebサイトへのアップデート化のご提案も可能です。

自社サイトの表示速度を改善したい方は、ぜひお気軽に弊社までご相談ください。