私がこれを書いている理由

私は現在いくつかのウェブサイトを運営していますが、始めて以来、私のパフォーマンスは非常に浮き沈みがあります。私は時々それが実に煩わしいと感じたことがあります。ローカルではすべてがうまく機能しているように見えますが、サーバー分析を確認すると、特定の国では速度がひどいことがわかりました。

それは常にどちらかのように見えましたCLSまたはLCPそれが私にとっての問題でした。そこで、私は自分の経験を共有し、他の人、特に同じことを経験している人がこの問題を理解できるように手助けしたいと考えました。それとも、これに問題があり、独自の視点や解決策を持っているのでしょうか?ぜひお聞きしたいです。

によると検索エンジンジャーナル, これら 2 つの指標を最適化すると、サイトの可視性とユーザー満足度が大幅に向上します。理論的には素晴らしいように思えますが、実際にそれらを修正することは別の話です。私が学んだことを順に説明していきます。

CLS と LCP とは正確には何ですか?

私自身の葛藤に入る前に、これらが実際に何であるかを説明しましょう。なぜなら、Google Search Console でこれらの頭字語を初めて見たとき、それらが何を意味するのか分かりませんでした。

累積レイアウトシフト (CLS)ページレイアウトが読み込み中にどれだけ飛び回るかを測定します。ボタンをタップしようとするとページ全体が切り替わってしまい、間違ったものをクリックしてしまうことはありませんか?それは CLS の問題です。ユーザーとしては非常にイライラするものであり、検索エンジンからもペナルティを受けることが判明しました。

最大のコンテンツフルペイント (LCP)ページ上に表示される最大の要素の読み込みにかかる時間を測定します。通常、それはヒーロー画像または大きなテキストのブロックです。 LCP が遅い場合、訪問者は半分読み込まれたページを見つめることになり、多くの人がそのまま離れてしまいます。

これらは両方とも Google の範疇に当てはまりますコアウェブバイタル、検索ランキングに直接影響します。そのため、たとえコンテンツが素晴らしいものであっても、CLS や LCP のスコアが低いと足かせになる可能性があります。

CLS および LCP 向けに Web サイトを最適化する

🖼️

画像の寸法を設定する
画像の幅と高さを指定する

📢

責任を持って広告を使用する
広告の予期しないサイズ変更を回避する

⚡

重要なリソースをプリロードする
重要なコンテンツが迅速に読み込まれるようにする

🔄

動的コンテンツを最小限に抑える
ロード中に変更されるコンテンツを制限する

📊

パフォーマンスを定期的に監視する
ツールを使用して CLS および LCP スコアを追跡する

私のCLSの悪夢

CLS は私が最初に遭遇した問題でした。ページは問題ないように見えましたが、スコアはひどいものでした。いろいろ調べた結果、主な原因が見つかりました。

寸法のない画像:画像の幅と高さを設定していませんでした。ブラウザにはどのくらいのスペースを確保すればよいのかがわからなかったため、画像が読み込まれるとすべてが変化してしまいました。
フォントの読み込みが遅い:ページのレンダリング後にカスタムフォントが読み込まれていたため、代替フォントが新しいフォントに置き換わるため、すべてのテキストがジャンプしてしまいました。これは微妙でしたが、合計されました。
動的コンテンツ:ページが読み込まれた後にコンテンツを挿入し、その下にあるものをすべて押し下げるコンポーネントがいくつかありました。

CLS の問題のほとんどは驚くほど簡単に修正できました。すべての画像とメディアの明示的なサイズの定義を開始しました。フォールバックがすぐにレンダリングされるように、フォントの読み込みにフォント表示スワップを追加しました。そして、動的に読み込まれるコンテンツ用に CSS を使用してスペースを予約しました。

のようなツールGoogle PageSpeed Insightsここで大きな助けになりました。どの要素がレイアウトのずれを引き起こしているのかを正確に示すので、推測する必要はありません。

その後、LCP 問題が発生しました

物事が片付いたと思ったそのとき、LCPスコアフラグを立て始めた。イライラしたのは、英国ではサイトの読み込みが速かったのに、他の国では分析の速度がひどいことだった。それが LCP の特徴です。ユーザーがどこにいるか、サーバーからどのくらい離れているかに大きく依存します。

私が見つけた主な問題は次のとおりです。

最適化されていない大きな画像:私のヒーロー画像が大きすぎました。フル解像度の写真を圧縮せずにアップロードしていました。
サーバーの応答時間:CDN がなければ、サーバーから遠く離れたユーザーは最初の応答を何年も待つことになります。
レンダリングをブロックする JavaScript:ヘッドに読み込まれているスクリプトがあり、完了するまでページのレンダリングがブロックされていました。

としてバックリンコの研究示されているように、LCP スコアが良いサイトはエンゲージメントが著しく向上し、直帰率が低くなります。これらの問題を修正し始めると、自分の分析で違いが分かるようになりました。

実際に私の LCP に役立ったもの

私はすべての画像を圧縮し、可能な場合には WebP 形式を使用し始めました。また、必須ではないスクリプトを移動して非同期で読み込むか、完全に延期しました。私のサイトは Vercel でホストされており、エッジネットワーク関連の多くを処理しますが、従来のホスティングを使用している場合は、CDN国際交通に大きな違いをもたらす可能性があります。

CDN はサイトのコピーを世界中の場所に保存するため、単一オリジンサーバーではなく、訪問者に近い場所から訪問者にサービスを提供できます。特定の地域で速度の低下が見られる場合、それは最初に検討する価値のあることの 1 つです。

厄介な部分 - 本当に「修正」されることはありません

これが誰もあなたに教えてくれないことですCLSとLCP。一度修正して次に進むわけではありません。新しい機能や新しい画像を追加したり、レイアウトを変更したりするたびに、スコアが再び変化する可能性があります。それは現在も続いていることなのです。

Google Search Console ですべてが緑色になる数週間があったのに、新しいコンポーネントを 1 つ追加すると、突然 CLS に再びフラグが立てられました。それはまったく面倒なことですが、私は今では、重要な変更が起こるたびに自分の Core Web Vitals をチェックすることを学びました。

CLS と LCP がユーザーエクスペリエンスに与える影響

0.1秒

ユーザー許容度

32%

直帰率の増加

コンバージョン率の低下

コアウェブバイタル

SEOランキングの重要性

によるレポート金融ブランドWeb サイトの速度が遅いと、収益損失に直接つながる可能性があることが強調されています。それは、たとえ退屈に感じても、それを続けるのに十分なモチベーションになります。

私を最も助けてくれたツール

同じ問題に対処している場合は、私が実際に使用して役立つツールを以下に示します。

Googleサーチコンソール：ここで私は初めて自分の問題に気づきました。 Core Web Vitals スコアがページごとに分類されて表示され、注意が必要なものが正確にわかります。
ページスピードに関する洞察:変更を加えた後、これをすべてのページで実行します。漠然としたアドバイスではなく、具体的で実行可能な推奨事項を提供します。Shopify の Web パフォーマンスガイドも優れたコンパニオンリソースです。
Web Vitals 拡張機能:この Chrome 拡張機能は、自分のサイトを閲覧すると、CLS、LCP、その他の指標をリアルタイムで表示します。開発中は常にオンにしておきます。

パフォーマンスの問題を特定したら、Google検索AIランキングツール改善が実際に検索の可視性の向上につながっているかどうかを確認します。ランキングに貢献しない場合、スコアを修正する必要はありません。

あなたがこのような状況に直面している場合の私のアドバイス

あなたのパフォーマンスが私と同じように浮き沈みがある場合、私は次のように提案します。

パニックにならない。CLS と LCP の問題は非常に一般的です。すべてが間違っているわけではありません。これらの指標は機密性が高いだけです。
分析を国ごとに確認してください。あなたのサイトはあなたにとっては速いかもしれませんが、他の場所の訪問者にとっては遅いかもしれません。 CDN を使用すると、これをすぐに解決できます。
まず画像を修正してください。私の経験では、最適化されていない画像と欠落した寸法が CLS および LCP の問題のほとんどの原因です。
変更するたびにテストします。重要な更新を行うたびに PageSpeed Insights を実行する習慣をつけましょう。
我慢して。Google Search Console データの更新には数日から数週間かかる場合があります。ダッシュボードがまだ変更されていないからといって、修正が機能しないと考えないでください。

私はまだ勉強中であり、この問題に取り組んでいます。私のスコアは以前よりも良くなりましたが、完璧とは言えません。うまくいった解決策を見つけた場合は、ぜひそのことについてお聞きしたいと思っています。また、パフォーマンスデータを視覚化してみることもできます。無料のオンラインチャートメーカー時間の経過とともに改善を追跡します。

結論は次のとおりです。CLSとLCP消えていない。これらは SEO にとって重要であり、ユーザーエクスペリエンスにとっても重要であり、私のように Web サイトを運営している場合は、常に注意を払う必要があります。しかし、それらは修正可能であり、あらゆる改善には価値があります。