インターネットの発展に伴い、ウェブサイトの速度はユーザー体験にとってますます重要になってきています。海外の研究によれば、読み込み時間が1秒増えるたびに、ウェブサイトの離脱率やコンバージョン率が大幅に低下します。Googleもこの現象に対応し、ウェブサイトの速度をSEO指標の一つとして挙げています。したがって、ウェブサイトの速度を最適化することは、皆さんが最適化しなければならない領域となっています。もしまだどこから始めればいいかわからないなら、ここが良いスタート地点になるでしょう。
Googleの3つのウェブサイト速度指標
Core Web Vitals（コアウェブバイタルズ）は、Googleが提唱するウェブページのユーザー体験を測定するための重要な指標のセットです。それは3つの主要な指標で構成されています。以下では、これらの指標について詳しく説明します。
◼LCP（Largest Contentful Paint）：
LCPは、「ページ内の最大の画像やテキストブロックのレンダリングに必要な時間」を表します。LCPはページの読み込みが開始されてから2.5秒以内に完了することが推奨されています。想像すると、ウェブサイトのコンテンツが遅すぎると、ユーザーはウェブサイトに問題があると思い、待つことを諦める可能性があります。そして、「最大の画像、テキストブロック」を見つけるためには、後ほど紹介するPageSpeed Insigntsツールを参照すると詳細な説明があります。
◼CLS（Cumulative Layout Shift）：
CLSは、「ページ要素/ブロックが読み込み過程で移動する程度を測定する」ものです。CLSの値は0から1の間で、良好なCLS値は0に近いほど良いです。テキストで説明すると理解しにくいかもしれませんので、以下のweb.devが提供するビデオを見てみてください。あなたも同じ問題に遭遇したことがあるのではないでしょうか。その結果、誤って他のブロックの内容をクリックしてしまったことがあります。
ソース：web.dev
◼FID（First Input Delay）：
*Googleは2023年5月に、この指標は2024年3月にINPに置き換えられると発表しました*
FIDは、「ユーザーが初めてウェブページと対話する（例えばボタンやリンクをクリックする）から、ウェブページがその対話に応答するまでの時間」を表します。良好なFID時間は100ミリ秒以内です。
◼INP（Input Delay）：
*Googleは2023年5月に、この指標は2024年3月にFIDを置き換えると発表しました*
INPはインタラクションの遅延を測定する指標で、ユーザーがウェブページと対話する（例えばボタンをクリックする）から、ウェブページがその対話に応答するまでの時間を測定します。良好なINP時間は50ミリ秒以内であるべきです。
俗に言う”LAGはイライラさせる”というのは、FID指標を測定する上での重要なポイントで、応答速度が遅いとユーザーの操作が困難になり、場合によっては何度もクリックすることでデータが重複して出力されるなどの問題が発生する可能性があります。
4つのウェブサイト速度測定ツールの推奨
PageSpeed Insignts
SEOの競争力を強化するために、Googleが提供する速度測定ツールを利用するのは非常に合理的な方法の一つです。PageSpeed Insigntsの上部に速度を測定したいページを入力すると、Googleは2つのレポートを提供します。
まず、以下の画像の1つ目のレポートは、過去28日間のユーザーの実際の体験を示しています。したがって、ウェブサイトにアクセスするユーザーの数が一定の数に達していない場合、データが不足しているため提供できない場合があります。
2つ目のレポートはLighthouseが提供するデータで、固定のデバイスやネットワーク速度などの実験的な条件でウェブサイトの速度をテストします。したがって、すべての変数を固定した状態では、最適化の結果をテストする必要がある場合に非常に適しています。
そして、Lighthouseが提供するレポートの後には、ウェブサイトの最適化に関する提案があります。私たちは問題点を見つけるだけでなく、このセクションを利用して、ウェブサイトの動作プログラムやLCP画像の位置などの情報を理解することができます。
Google Search Console
Google Search Consoleも、ウェブサイトの速度を理解するための良いツールです。「コアウェブ体験指標」レポートでは、上記の3つの速度指標の問題が発生しているページをすばやく把握することができます。
速度の最適化が完了したら、問題を開いて「修正された項目を検証する」をクリックして、Googleにこれらのページで同じ問題が存在するかどうか再検証するようにリマインドしてください。
GTmetrix
GTmetrixは非常にシンプルで明快なフローチャートを提供しており、ウェブサイトの読み込み順序や各指標の計算時間をよりよく理解することができます。ウェブサイトの速度最適化に初めて触れる管理者にとって、下部で提供される提案を参考にしながら学ぶのは非常に良い学習方法になるでしょう。
Layout Shift GIF Generator
他の速度測定ツールを利用すると、CLSのデータだけを得ることができるかもしれませんが、画面の移動状況やどのブロックが設定ミスを起こしているかを知ることはできません。この場合、Layout Shift GIF Generatorを利用してページの状況を視覚化し、問題点を見つけて修正することができます。
ウェブサイトの速度を改善する方法
◼画像の圧縮
画像が多いウェブサイトにとって、画像の品質を下げずに無損失圧縮を行ってファイルサイズを減らすことは非常に賢い方法です。大きな画像ファイルはより多くのネットワークリソースと読み込み時間を必要としますが、画像の圧縮はこれらの要求を減らし、LCP（Largest Contentful Paint）、FCP（First Contentful Paint）といった重要な指標を最適化することができます。
◼ホスト企業の変更
ウェブサイトのホストの性能は、サーバーの応答時間（TTFB）と全体的な読み込み速度を決定します。そして、ホスト企業の選択は基本的には”安定した性能”、”ホストの場所”、”短時間で提供できる帯域幅”、”ホストのセキュリティ”などの面から考えます。もしPageSpeed Insigntsを利用してTTFBが0.8秒を超えていることがわかった場合、ホストを最適化する必要があるかもしれません。
◼専門のエンジニアに修正してもらう
ウェブサイトの遅さは、ウェブサイトのソースコードが長すぎたり、実行するプログラムが多すぎることが大きな原因となる可能性があります。専門のエンジニアは、ウェブサイトのコードを最適化することができます。これには、ブラウザのキャッシュの使用、HTTPリクエストの削減、CSSとJavaScriptファイルの最小化、非重要なリソースの遅延読み込みなどの手段が含まれます。
ただし、コードの修正は非常に大規模なプロジェクトであり、事前に最適化できるコード/ブロックを確認することが重要な課題の一つとなります。
◼プラグインの使用
コンテンツ管理システム（CMS）は、速度を最適化するためのプラグインを提供しています。例えば、WordpressのConverter for Mediaは、画像のサイズを迅速に削減するのに役立ちます。他のプラグインには、ウェブページのキャッシュ処理、リソースの圧縮、JavascriptとCSS表の結合などが含まれることがあります。ただし、プラグインを使用する際は選択に注意し、それらがウェブサイトの他の要素と互換性があり、セキュリティや機能の問題を引き起こさないことを確認する必要があります。
これだけ読んでいただければ、ウェブサイトの速度に関連する問題についてある程度理解していただけたと思います。私の記事が気に入った方や、今後SEOに関する情報を知りたい方は、私のウェブサイトをフォローしていただければ幸いです。様々な知識を皆さんと共有するために努力してまいります：）
Last Updated on 2月 4, 2024 by 己見室
