Google Core Web Vitalsスコアを改善する方法

投稿日:

(2020年8月23日)

Webページパフォーマンスの次の時代

私が働いてから数か月が経ちました私の会社所有のウェブサイトでウェブページのパフォーマンスを改善するための戦略について、そして正直に言うと、皆さんと共有するのは本当に興味深い作品です。

ウェブページのパフォーマンスに取り組むことは新しいことではないことを理解しています物事や人々はあなたのページの読み込み速度を上げるためにたくさんのアイデアやトリックを思いついた。しかし今ではそれだけでは十分ではなく、次のレベルに踏み出す必要があるようだ!!

As SEO(検索エンジン最適化)の重要性を知っておく必要があります。ウェブページの結果をGoogleの結果の最初のページだけでなく、同じ最初のページの上部に表示するのは本当に大変なことです。簡単に言えば、今後、Google Core WebVitalsがGoogle検索結果のSEOランキングに最も大きく貢献することを保証します。

短い& Google Core WebVitalsの簡単な説明

今年の第1四半期に導入されたCoreWeb Vitalsは、ウェブページの速度、応答性、視覚的安定性に関連する一連の指標です。

GoogleはこれらをコアWebバイタルとして定義しています:

  • 最大のコンテンツフルペイント:ページのメインコンテンツの読み込みにかかる時間。理想的なLCP測定は、 2.5秒以上です。
  • 最初の入力遅延:ページがインタラクティブになるまでにかかる時間。理想的な測定値は、 100 ms 未満です。
  • 累積レイアウトシフト:ビジュアルページコンテンツの予期しないレイアウトシフトの量。理想的な測定値は、 0.1未満です

この一連の指標は、サイトの所有者が、読み込み、インタラクティブ性、視覚的な安定性に関して提供しているユーザーエクスペリエンスを測定できるようにします。

全体として、今後、ページのパフォーマンスは次のようにランク付けされます。

ページのパフォーマンス指標として考慮される指標の完全なリスト。

次のセクションでは、基本的に、ページの読み込みパフォーマンスとCWVスコアを改善するためのアイデアや方法について説明します。

コアウェブバイタルスコアを改善するためのヒント

以下の方法をいくつか紹介します。これにより、Core Web Vitalsのスコアが大幅に向上し、ページ全体のパフォーマンスも向上しました。

  1. ブラウザとCDNキャッシュを効果的に活用する(FIDとLCPを改善します)
    これは非常に単純なアプローチですFIDおよびLCPスコアを改善するためのch。 静的アセットがCDNから提供されていることを確認してください(AWSの場合はCloudfrontにキャッシュできます)。したがって、これにより、リソースをブラウザにすばやく取り込むことができます。 2回目の読み込みを改善するには、クライアント側に到達したアセットがブラウザにキャッシュされていることを確認してください。
    cache-control: max-age=120 —返されたリソースが120の間有効であることを意味します数秒後、ブラウザは新しいバージョンをリクエストする必要があります。
    動的ページをキャッシュすることもできます。アプリケーションの動作に基づいて適切なTTL値を持つCDN。
  2. メディアと広告に正確なサイズの属性またはサイズを設定します(CLSを改善します)
    これはCLSスコアを向上させるために非常に重要なことです。画像またはメディアタグに適切なheight:XXpx; width: YYpxが設定されていることを確認してください。繰り返しますが、これは少なくともスクロールせずに見える範囲のコンポーネントにとって非常に重要です。これに対する1つの近道は、画像の正確な高さを取得するためのアイデアが不足している場合は、height:auto;として設定できることです。これは私にとって本当に役に立ちました。メディアとは別に、サイトに広告が表示される場合は、ページ内のコンポーネントを上下に押すとCLSスコアが確実に低下するため、適切なサイズの適切な広告スロットを設定してください。したがって、広告にも注意してください!
  3. デバイスタイプに基づいて適切な解像度の画像を遅延読み込みします(LCPを改善します)
    これは本当にあなたにとって素早い勝利です! Webページで使用して、ページ上のすべての画像を遅延ロードすることができる遅延読み込みパッケージが世界中にたくさんあります。これにより、ブラウザでページをレンダリングするための全体的なページの重みと読み込み時間が短縮されます。もう1つの重要な点は、デバイスの種類に基づいて、ロードする画像の解像度を事前に定義することです。異なるデバイスタイプで同じ解像度の画像をロードしないでください。
  4. WebページでSSRとCSRを効果的に使用します(FID & LCP)
    Googleが優れたSEO値を取得するために、サーバーサイドレンダリング(SSR)ページを宣伝および推奨していることを知っておく必要があります。 SEOとページの読み込みパフォーマンスとのトレードオフ。ページのコンテンツが大きすぎて、サーバーでページ全体をレンダリングすることにした場合、ページだけでなくページ全体の読み込みにも間違いなく時間がかかります。重みも高くなります。簡単に言うと、折り目の上に表示されるページコンポーネントに対してSSRレンダリングを実行し、折り目の下に表示されるクライアント側から残りのコンポーネントをレンダリングすることをお勧めします。このようにして、ユーザーはページを折り畳みの上にロードし、ページの残りの部分はユーザーエクスペリエンスを妨げることなく非同期にレンダリングします。
  5. コードを使用&を分割すると、アセットがチャンクに分割されます(FID & LCPが改善されます)
    アプリケーションに巨大な(100Kbを超えるものはすべて巨大な)アセット(特にJSファイル)を含めることは常に良い考えではありません。したがって、「webpack」などのパッケージを使用して、重いアセットを小さなチャンクに分割し、アセットを非同期的にロードすることをお勧めします。ブラウザに(h2プロトコルを有効にしている場合)。コード分割機能を利用して、ページコンポーネントを1つのHTMLファイルにパックするのではなく、個別のファイルに分割することもできます。
  6. Brotli圧縮を使用してすべての静的アセットを圧縮します(LCPを改善します)
    Brotliを使用して静的アセットを圧縮することをお勧めします。これにより、より優れた共同作業が可能になります。市場の他のライブラリと比較したインプレッション率。同時に、圧縮率の高いBrotliを使用すると、DevOpsパイプラインジャーニーでのビルドとパッケージ化の時間が確実に長くなることを覚えておいてください。私にとっては、ページの読み込みパフォーマンスの点でより良い値が得られているため、アプリケーションのビルド時間を犠牲にしても問題ありませんでした。
  7. APIリクエストを最適化して応答コンテンツ(FID & LCPを改善)
    これは、ここで各バイトが重要であるため、考慮することが非常に重要です。ページのパフォーマンス。戻って、ページにデータを入力するためのAPIリクエスト&の応答を確認することを後悔しないと思います。ページに必要なデータのみを取得していることを確認してください。 API応答からレンダリングされます。間違いを犯す可能性のあるもう1つのばかげたことは、API呼び出しが、パブリックエンドポイントやインターネットを介してではなく、内部で呼び出されることです。これは、時間の点で常にコストがかかるためです。 APIが同じサブネットまたは少なくとも同じネットワークでホストされている場合、インターネット経由でAPIを呼び出しています!
  8. ページ/ドキュメント全体を縮小しますサイズ(LCPを改善)
    理想的には、ランディングページが重い場合(80Kbを超えるページを重いものとして分類します)、これは間違いなくLCPスコアに大きく影響しますこれにより、ページのフェッチとダウンロードの速度が比例して向上します。したがって、サーバー側から未使用の大きなデータチャンクを取得していないことを確認し、ページのレンダリングに必要なデータのみをロードしてください。
  9. NEXT-GEN画像形式を使用(LCPを改善)
    JPEG 2000、JPEG XR、およびWebPは、古いJPEGおよびWebPと比較して優れた圧縮および品質特性を備えた画像形式です。 PNGの対応物。画像をJPEGやPNGではなくこれらの形式でエンコードすると、画像の読み込みが速くなり、携帯電話のデータ消費量が少なくなります。市場に出回っているあらゆる種類のツールを使用して、画像をNEXT-GEN形式の画像に変換できます。また、JPEGからWebPへのリアルタイムの画像変換を実行してブラウザで提供できるランタイム画像サービスを構築することもできます。
  10. ネイティブブラウザでサポートされているフォントへのフォールバックを有効にする(FIDを改善)
    フォントが証明されているブラウザでサポートされているデフォルトのフォントでない限り、アプリケーションで使用されているカスタムフォントの読み込みがブラウザで遅れると、パフォーマンススコアが実際に低下する可能性があります。この場合、読み込みにフォールバックアプローチを使用するのが簡単です。ブラウザでデフォルトでサポートされているフォントを使用したフォント。以下は、他のフォントでフォールバックアプローチを使用する場合のサンプルコードスニペットです。
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

上記のすべてのヒントは、アプリケーションに段階的に実装できます。また、Core WebVitalsのスコアが実際のユーザーから進化する前に説明しました。 データであり、「ラボ」データからのものではありません。 したがって、スコアの改善を反映するには時間がかかります。これは、反映するのにほとんど28日かかります。 GoogleのPageSpeedツールを引き続き使用できます— https://developers.google.com/speed/pagespeed/insights/ でCWVスコアを取得できます。

あなたの作品のすべての成功を助け、願っています! 乾杯!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です