ウェブサイトの読み込み時間とGoogleコアバイタルを改善する10の方法
公開: 2021-08-15コアWebバイタルとは
今年の初めに、Googleは、特定のWebサイトの安定性、速度、および応答性を定義する一連の新しい基準を導入しました。 3つの主な基準は次のとおりです。
- 累積レイアウトシフトは、Webページの構造がシフトして位置を変更する量を定義します。 このためのベンチマークは0.1です。
- 最大のコンテンツフルペイントは、ページのメインコンテンツの読み込みにかかる時間を測定します。 最良の結果は2.5秒以下である必要があります。
- First Input Delayは、Webページが開いてから最初にインタラクティブになるまでの時間です。 最も一般的に求められる時間枠は約100ミリ秒です。
これらの基本的な用語を念頭に置いて、CoreVitalsを使用してWebサイトを可能な限り高速かつ効率的にする方法を見てみましょう。
1.CDNとブラウザキャッシュを最適化する
この方法を使用すると、FIDスコアとLCPスコアを非常に迅速に改善する必要があります。 CDNから静的アセットを提供するか、AWSのCloudfrontなどのサービスにキャッシュします。 この後、ブラウザは必要な結果をはるかに迅速に取得します。
さらに、動的ページは、アプリケーションの動作に応じて、正しいTTL値がすでに適用されているCDNにキャッシュできます。
2.すべての広告とメディアに正確なサイズを使用する
CLSスコアに関する限り、これは最も重要な要素の1つです。 画像またはタグ付けされたアセットに特定の高さを設定していることを常に確認してください。これは、特に折り畳みレベルのコンポーネントにとって非常に重要です。 時間に追われている場合は、いつでも高さを自動に設定して、ピンチで十分に機能するおおよそのサイズを取得できます。
広告もCLSを考慮に入れているため、広告の高さとサイズを徹底的にチェックして、誤って表示されてコンテンツがずれないようにする必要があります。 これには、CLSが一貫して影響を受けている場合、広告サービスプロバイダーに連絡するか、いくつかの異なるオプションを探し回る必要がある場合があります。
WordPressプラットフォームを使用している場合は、 Ewwwのようなプラグインを検討することをお勧めします。このプラグインは、Webpで画像を自動的に配信し、遅延読み込みなどの機能を有効にして、ページの読み込み時にすべての画像の読み込みを遅らせることができます。
3.使用しているデバイスのタイプに基づいて、適切な解像度の画像をレイジーな方法でロードします
この手法は、信じられないほど迅速に結果を生成するため、最初に検討する必要があります。 遅延読み込みパッケージを使用して、驚くべきことに、サイト上のすべての画像を遅延読み込みすることで、主にページの重みを減らし、できるだけ早く読み込むようにすることで、LCPにプラスの影響を与えます。
また、サイトの表示に使用されているデバイスのタイプに基づいて、各アセットの解像度を設定することも重要です。 解像度を万能としてロードすると、小型または性能の低いデバイスではサイトの速度が大幅に低下し、LCPに最悪の影響を及ぼします。
4.SSRとCSRをスマートな方法で使用する
Googleは、価値のあるSEOパフォーマンスを刺激するために、スコアの高いサーバーサイドレンダリング（SSR）ページを奨励および宣伝することに常に熱心です。 ただし、SEOとページ読み込みパフォーマンスのバランスを考慮する必要があります。 コンテンツが多すぎるページは、サーバー側をロードしてサイトの一般的なパフォーマンスを低下させるのに時間がかかる可能性があります。
SSRを改善するために、実際のコンテンツはフォールドより上に保持する必要がありますが、他のサイト機能は保持する必要があります。 この非同期読み込みスタイルでは、読み込みとレンダリングのスコアからかなりの時間がかかります。
5.コードを分割してすべてを分解する
アセット（特にJSファイル）に最も重要なファイルサイズを使用することは、一般的に悪い考えです。 代わりに、h2プロトコルを許可し、それを利用してアセットを個別に非同期で再度ロードする必要があります。
また、1つの巨大なHTMLファイルを使用する代わりに、サイトを複数の小さなファイルに分割して、読み込みの負担を軽減することができます。
6. Brotli圧縮技術を使用して、静的アセットを縮小します
圧縮に関しては、Brotliが読み込み速度の点で最良のオプションのようです。 ただし、圧縮率を高くすると、DevOpsの観点からパッケージ時間とビルド時間が長くなります。
しかし、結局のところ、サイトの読み込み時間は最も重要な要素であり、何よりも優先する必要があります。
7.応答コンテンツとAPIリクエストを可能な限り効率的にします
間違いなく、読み込み速度の点で最も重要な要素は、ほんのわずかな変更であっても、APIで大規模な結果をもたらす可能性があります。 最適化のために、APIの応答と要求を頻繁にチェックする必要があります。
また、データパラメータを定義し、多くの時間と労力を節約するために必要なものだけを使用してください。 APIにネットワークを選択することも、慎重に検討する価値があります。間違ったサブネットでホスティングすると、所要時間が大幅に長くなる可能性があるためです。
8.ページとドキュメントの全体的なサイズを縮小します
重いコードランディングページ（75kbを超えるものは深刻である可能性が高い）は、ロード時間とフェッチ時間を大幅に増加させるため、非常に望ましくありません。
冗長データのビットを見逃しやすいので、常にコード側で物事をクリーンに保つようにしてください。
9.ビデオサムネイルをプレースホルダー画像に置き換えます
多くのサイト視聴者はビデオコンテンツに関与しないことを好むため、この場合、再生されていないビデオにサムネイルをロードすることはリソースの浪費です。
リソースを節約してサイトの速度を上げるには、プレースホルダー画像または空白のビデオスペースを選択することをお勧めします。
10.利用可能な最速のサーバーを選択します
これは明らかな要因のように思えるかもしれませんが、それでも言うには耐えられます。 最高のサーバーインフラストラクチャに投資することは、例外なくサイト全体の速度に直接影響するため、通常は優れたアイデアです。
もう少しお金を使うことで、全体的にかなりの時間を節約できます。 Cloudflareは、コストのかかるサーバーリソースなしで、コスト効率よくサイトを最適化できる優れたDNSレベルのツールです。
結論
上記のヒントは、より良いページスピードスコアとコアバイタルを達成するための正しい軌道に乗ることができます。 ただし、肥大化したプラットフォームやテーマに気付く場合があります。これは、新しい、よりクリーンで、より軽量なサイトを作成するための最善の行動を意味することがよくあります。
これらすべての用語に頭を悩ませている、またはサイト全体を再加工して速度を上げるというアイデアに頭を悩ませているとします。 その場合、既存のサイトを最適化するための最善の行動方針を提案したり、コアバイタル向けに最適化されたコードベースを備えた新しいサイトへの進化を提案したりするWebデザインの専門家によるサイトレビューを検討することをお勧めします。