
株式会社ドーモ(DOMO)で表示スピード研究会に所属している西澤と申します。
表示スピード改善の重要性と改善方法についてお話しさせていただきます。
この記事の目次
ウェブサイトの表示スピードがコンバージョンに直結する
ページの表示が遅くてサイトを離脱した経験はないでしょうか?
統計上のデータでもGoogleから「表示速度が1秒から3秒へ落ちると直帰が32%上昇する」という調査結果が報告されています。つまり、1秒表示が遅くなるだけで多くの訪問者が去ってしまうということです。
実際のお店に例えるなら、お店の入口の自動ドアが開くのが遅すぎてお客様が帰ってしまった、こんな状況ではないでしょうか。
Googleは「コアウェブバイタル」で評価している
Googleはサイトの「ページエクスペリエンス」を重要視しています。ページエクスペリエンスを簡単にいうと、ページの使いやすさです。ページエクスペリエンスの内容(評価指標)は過去にアップデートされてきましたが、最新のアップデートで評価の対象になったのが「コアウェブバイタル」という指標です。
「コアウェブバイタル」は、Googleが2020年に発表し、2021年6月から検索順位の決定要素に組み込まれた評価指標です。2021年6月のアップデート時点ではスマートフォンからの検索のみが対象となっていましたが、2022年2月からPCからの検索も適用されました。
この「コアウェブバイタル」の評価が低いと、Googleからのマイナス評価となり、検索結果もランクダウンしてしまいます。SEO改善のために、コアウェブバイタル対策をしましょう。
コアウェブバイタルの3つと指標
コアウェブバイタルには大きな3つの評価指標があります。
LCP(Largest Contentful Paint)
そのページで最もファイルサイズが大きいコンテンツが表示されるまでの時間です。
ページが最初にロードを開始して、LCPが2.5秒以内であることが理想。
FID(First Input Delay)
ユーザーが最初にページ内でアクション(例:クリックやタップ、テキスト入力など)を行うことができるまでの時間です。FIDは、100ミリ秒であることが理想。
※シミュレーション計測は不可能なため、TBT(Total Blocking Time)を参照するように提言されています。
CLS(Cumulative Layout Shift)
視覚の安定性を測る指標で、ページレイアウトの意図せぬズレを発生させている場合のチェックです。
例として、ページを開いた際に意図しないところで突然画像が現れ、読んでいたテキスト全体が下へずれてしまうという状況です。CLSスコアが0.1未満となるのが理想。
コアウェブバイタルを「PageSpeed Insights」でチェック
Googleが提供している無料のPageSpeed Insightsを使って簡単に確認することができます。
■PageSpeed Insights
https://pagespeed.web.dev/

測定対象のURLを入力し「分析」をクリックすると、測定結果が表示されます。測定の結果、改善が必要な事項としてよく出る3つの課題があります。
- 次世代フォーマット
- 効率的な画像フォーマット
- 適切なサイズの画像
次世代フォーマットとは、WebP や AVIF などの画像形式です。PNG や JPEG より圧縮率が高く、ファイルサイズを軽くすることができます。画像を最適化すると、読み込み時間を短縮しモバイルデータ量を抑えることができます。必要以上に大きい画像を使っている場合には、小さくするといった改善が必要です。
【次世代画像フォーマットのデメリット】
WebP形式はWebサイトにアップロードするには最適な形式といえますが、その一方、汎用的に使用されるjpgからWebPの変換する作業が必要です。次世代フォーマットのうち、AVIFは対応ブラウザが2022年8月現在少ない状況です。現状ではWebP形式のみが現実的な選択肢でしょう。
コアウェブバイタルを悪化させてしまう原因
①デザインに重視した制作
サイトに表示させるものは、ついデザインや見た目を重視しがちです。デザインを重視した結果ページが重たくなってしまうことがあります。
②サイトリリース後のページ追加
例えばWordPressなどのCMSを使ってサイトの更新をする際によくあることとして、Photoshopなどのツールで画像の最適化をせず、撮影したファイルサイズの大きい画像をそのままアップしていることがあります。
③ノウハウがない
次世代フォーマットはまだ広く知られていません。コアウェブバイタルはSEOにとって重要ですが、「次世代フォーマットを知らない」という方もまだまだ多くいらっしゃる状況です。
コアウェブバイタル対策をするためのツール
コアウェブバイタル対策するには、画像を最適化していく必要があります。Googleが提供するブラウザ上で画像の圧縮できる無料Webツールがあります。
■Squoosh
https://squoosh.app/

サイトの画面に、編集したい画像をドラッグ&ドロップすると編集が可能です。サイズの変更からWebP形式への変換まで行えます。ウェブサイトに画像をアップする前にこの方法をとってみてください。
自動で画像を最適化するなら「Cloudflare」
ウェブサイト内に存在しているすべての画像を最適化するのは時間と手間がかかります。有料にはなりますが、「Cloudflare」というCDNを導入すると一気に解決させることも可能です。導入すれば、サイト内の画像すべて自動で最適化をしてくれます。
Cloudflareは他社のCDNに比べて安いプランがあるのが魅力ですが、安いプランは設定をすべて自分で行う必要があります。弊社DOMOはCloudflareの導入サポートをしていますので、Cloudflareご利用の際はぜひご連絡ください。
■Cloudflare
https://www.cloudflare.com/ja-jp/
■Cloudflare プロ、ビジネスの導入なら、ドーモの実装サービスにおまかせ
https://cloudflare.domore.co.jp/service/
合わせて読みたい