目次
目次
この文書はFramerを学ぶ日本のユーザーが日本語の資料の不足で困っていることを解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使う皆様に少しでも貢献できれば幸いです。
LighthouseとCore Web Vitalsの違い
GoogleのLighthouseは、ウェブサイトの性能、アクセシビリティ、ベストプラクティス、SEOなどを自動でチェックするデバッグツールです。一方、Core Web Vitalsは実際のユーザーがChromeを使って訪問した際に収集されたデータに基づいて計測されます。
つまり、Googleの検索順位に直接影響を与えるのはLighthouseのスコアではなく、Core Web Vitalsのデータです。Core Web VitalsのデータはGoogle Search Consoleで確認でき、最近の28日間の平均値が反映されるため、最適化後も結果が反映されるまで時間がかかることがあります。
Lighthouse: リアルタイムシミュレーションによるデバッグツール
Core Web Vitals: 実際のユーザー体験データ（検索順位に反映）
Lighthouseのスコアにあまり執着しなくてもいい理由
Lighthouseは2016年モデルのMotorolaデバイスを基準にシミュレーションするため、自動再生の高画質動画やインタラクションが多い要素は低いスコアを引き起こす可能性がありますが、実際にはほとんど使用されないデバイスなので心配する必要はありません。
例として、apple.comもモバイルLighthouseスコアはわずか56点です。 したがって、ビデオやアニメーションを利用したデザインをする際、Lighthouseのスコアが少し低くても必ずしも悪いわけではありません。
ただし、過度の使用は避けるべきです。
Lighthouseの主要な性能指標3選
Lighthouseは複数の性能指標を総合してスコアを算出します。この中で私たちが直接影響を与えられる項目は次の3つです。
1. LCP (Largest Contentful Paint)
サイトに表示される多くのコンテンツがロードされるまでの時間を測定します。例としてヘッダー画像、メニューフォント、自動再生ビデオなどの要素が含まれます。Note : ウェルカムアニメーションや遅れて表示されるクッキーバナーなどの要素はLCPを遅らせる可能性があります。Lighthouseを活用してどの要素がLCPに影響を与えるのかを把握し、デザインをロード時間に最適化しましょう。
2. TBT (Total Blocking Time)
ページのロード中にJavaScriptによって発生する遅延時間を測定します。0.05～0.1秒以上実行されるスクリプトはユーザー体験に影響を与える可能性があり、TBTはこの遅延を全て合算します。Note : TBTを削減するには、不要な分析または広告スクリプトを削除するのがよいです。高いTBTは検索順位に影響を与えず、Core Web Vitalsには含まれません。
3. CLS (Cumulative Layout Shift)
ロード中の予期しないページ移動現象を測定します。（例: 広告が突然表示されてテキストの位置が変わる場合）Framerのサイトは技術的にCLSがほとんど0に近いため、安定したレイアウトを維持しやすいです。
Lighthouseスコアを上げるポイント
HTTP/3を利用して速度向上: サーバーで使用するHTTPプロトコルのバージョンも速度に影響を与えます。（FramerはデフォルトでHTTP/3をサポートしているので別途設定なくしても高速を享受できます）
外部サービススクリプトは本当に必要なものだけ: Google AnalyticsやYouTubeの埋め込みのように外部から読み込むスクリプトはサイトの容量を大幅に増やすことができます。JavaScriptの1行がページ性能を半分に下げる可能性があるため、本当に必要な場合にのみ最小限追加するのが良いです。
SEOを向上させたいなら、Core Web Vitalsをまず考慮しよう
検索順位を向上させたい場合、単にLighthouseのスコアを上げることに集中するのではなく、実際のユーザー体験に基づいて測定されるCore Web Vitalsの指標を最適化することがはるかに効果的です。
Googleは実際のChromeユーザーが感じた速度データを順位決定に直接活用するため、ユーザーが迅速でスムーズにサイトをナビゲートできるように設計することが最も重要です。
本記事はFramer公式ブログの「Guide to Lighthouse scores」を翻訳・アレンジしたコンテンツです。
