PageSpeed Insights: サイトの速度を高く保つ方法

Web サイトを運営している場合は、Google PageSpeed Insights について聞いたことがあるでしょう。これは、モバイル デバイスとデスクトップ デバイスの両方で Web ページのパフォーマンスを測定する Google の無料ツールです。しかし、ハイスコアを獲得することは、多くの場合、勝てないゲームのように感じることがあります。

今日は、PageSpeed Insights の詳細なレビューを行い、スコアを下げる可能性のあるすべての問題を検討し、Web サイトを最適化する方法を正確に説明します。

なぜサイトの速度がそれほど重要なのでしょうか？

技術的な問題を見る前に、なぜ気にする必要があるのかについて話しましょう。サイトの速度は単なる虚栄心の指標ではありません。それはあなたのビジネスに直接影響します。

まず、速度はSEOの主要なランキング要素です。Googleは、ページのランキングを決めるためにCore Web Vitalsを使用していると公式に発表しています。サイトの読み込みに時間がかかりすぎると、Google が検索結果を押し下げます。

第二に、速度はユーザーエクスペリエンスとコンバージョン率に影響を与えます。ほとんどのユーザーは、ページが表示されるまでに 3 秒以上かかる場合、ページを放棄します。高速なサイトは訪問者のエンゲージメントを維持し、製品を購入したり記事を読んだりする可能性を大幅に高めます。

PageSpeed Insights メトリクスの理解

PageSpeed Insights に URL を入力すると、ラボ データとフィールド データの 2 種類のデータが得られます。

フィールドデータは、実際のユーザーがサイトをどのように体験するかを示します。Chrome ユーザー エクスペリエンス レポート（CrUX）を使用して 28 日間にわたって収集されます。これがSEOにとって本当に重要なことです。ラボデータは管理された環境で収集され、問題のデバッグに役立ちます。

注目すべき主な指標は次のとおりです:

• 最初のコンテンツフルペイント（FCP）: ブラウザが最初のテキストまたは画像をレンダリングするのにかかる時間。
• 最大のコンテンツフルペイント（LCP）: コンテンツの最大のブロックが表示されるまでにかかる時間。
• 累積レイアウトシフト（CLS）: ロード時にページレイアウトがどれだけシフトするかを測定します。
• 次のペイント（INP）へのインタラクション: ユーザーが何かをクリックまたはタップした後にページがどれだけ早く応答するか。

スコアを台無しにするよくある問題

悪いスコアを取るのは簡単です。それを修正するには、根本原因を見つける必要があります。PageSpeed Insights 診断レポートで表示される最も一般的な問題は次のとおりです。

1。レンダリングをブロックするリソース

これは、JavaScript または CSS ファイルがページの読み込みを完全にブロックしている場合に発生します。ブラウザがユーザーに何かを表示する前に、ブラウザを停止し、ファイルをダウンロードして解析する必要があります。修正方法: 重要でないすべての JavaScript を延期するか、非同期でロードする必要があります。CSS の場合、重要な CSS を抽出し、ターゲットにインライン化します、 その後、残りを非同期でロードします。

2。最適化されていない巨大な画像

通常、画像は Web ページの総重量の大部分を占めます。小さなロゴ用に 5MB の画像をアップロードすると、すべての速度が低下することが保証されます。修正方法: 常に WebP などの最新の形式を使用して画像を圧縮します。も使用する必要がありますloading="lazy"属性により、折り目の下の画像はユーザーが下にスクロールしたときにのみ読み込まれます。レイアウトのずれを防ぐために、画像タグの幅と高さを常に明示的に設定してください。

3。未使用のJavaScriptが多すぎる

最新の Web サイトでは、重いライブラリやサードパーティのスクリプトがロードされることがよくありますが、使用されるコードはほんの一部です。ブラウザは依然としてすべてをダウンロードして評価する必要があり、貴重な処理時間がかかります。修正方法: 未使用のプラグインを削除し、コードを分割してみてください。実際に必要なスクリプトをその特定のページにのみロードします。

4。サーバーの応答時間が遅い

最初のバイトまでの時間（TTFB）は、ホスティング サーバーが最初の HTML を返すまでにかかる時間を測定します。サーバーが遅い場合は、他のすべての最適化はあまり重要ではありません。修正方法: 高速Webホストを使用する。サーバー側キャッシュを実装し、コンテンツ配信ネットワーク（CDN）を使用して、物理的にユーザーに近いサーバーからサイトにサービスを提供します。

このツールは、どこで間違いを犯したかを正確に示し、正確なスクリーンショットも表示するため、優れています。したがって、これらのエラーを段階的に修正するだけで、SEO が向上します。

たとえば、当社の Web サイトでは。jpg 画像を。webp 画像に変換することが提案されました。

しかし100% に達できない場合は動揺しないでください、 それは実際には本当に難しいです。あなたのウェブサイトが複雑で、多くの画像、いくつかの特定のjsライブラリが必要な場合は、– もう最適化するものは何もない、なぜ私のスコアがまだ80-90% なのかと思うかもしれません？これは絶対に正常です。Web サイトが “グリーン ゾーン” にある場合、それはすでに良い兆候です。さらに、別の時間に速度をテストすると、結果が数パーセント ポイント – 変化せずに – 変化する可能性もあります。
ただし、リスト内のすべてのエラーを確認して修正することで、パフォーマンスを最大化するよう努める必要があります。

翻訳スクリプトがスピードを高く保つ理由

Web サイトに新しいウィジェットを追加するときは、パフォーマンスに細心の注意を払う必要があります。翻訳プラグインが PageSpeed スコアを破壊することは非常に一般的です。多くの場合、クライアント側で大規模な言語データベースをロードし、JavaScript の遅延を大量に実行し、表示する言語がわかっている間にレンダリングをブロックします。

私たちはパフォーマンスを厳密に念頭に置いて翻訳スクリプトを構築しました。当社のソリューションが軽量化され、パフォーマンス速度への影響が最小限に抑えられる理由は次のとおりです:

• 小さなペイロード制限: 私たちのコアスクリプトは信じられないほど小さいです。大規模なサードパーティ ライブラリをバンドルすることはありません。ページサイズに数キロバイトしか追加されません。
• 非同期読み込み: スクリプトは非同期で実行されるように設計されています。メインコンテンツのレンダリングをブロックすることはありません。
• グローバル CDN 配信: スクリプトと翻訳されたテキストをグローバル ネットワークから配信します。これは、データが訪問者まで可能な限り最短距離を移動することを意味します。
• ネイティブ DOM インジェクション: ページを非表示にしたり、レイアウトシフトを作成したりする代わりに、スクリプトは翻訳された文字列をシームレスにネイティブに挿入します。これはミリ秒で実行されるため、累積レイアウト シフトは完全にゼロのままになります。

技術的なフットプリントを可能な限り小さく保つことで、苦労して獲得した SEO ランキングやユーザー エクスペリエンスを犠牲にすることなく、Web サイトを完全に翻訳できるようにします。