Google PageSpeed Insights で 100 に到達する方法 (WordPress)

ウェブサイトを高速化するためのツールがあれば素晴らしいと思いませんか? あります！ Google PageSpeed Insights はその名の通り、遅いウェブサイトの問題を解決する無料のサービスです。 この記事では、それが何であるか、どのように機能するか、WordPress でとらえどころのない Google PageSpeed Insights 100 / 100 スコアに到達する方法について説明します.

Google PageSpeed Insights とは?

Google PageSpeed Insights は、ウェブサイトの速度とユーザー エクスペリエンスを測定するためのオンライン ツールです。 デスクトップとモバイルでのサイトの読み込み時間を測定し、サイトのパフォーマンスに関するさまざまな指標を表示します。 メトリックが最適でないと判断された場合、ツールはメトリックを改善する方法を提案します。

Google PageSpeed Insights にアクセスし、URL を入力して、[分析] をクリックするだけです。 Google は、モバイルとデスクトップの両方でサイトを判断します。 どちらか一方よりもスコアが高いことに気付くかもしれません。

Google は以前、Web ページの総合スコアを 100 点満点で与えていましたが、今はそうではありません。

代わりに、Google はCore Web Vitalsと呼ばれる 3 つの統計を測定します。 これらは：

• Largest Contentful Paint (LCP) : サイトのメイン コンテンツの読み込み速度。 優れたユーザー エクスペリエンスを得るには、これを2.5 秒以下にする必要があります。
• First Input Delay (FID) : ユーザー入力に対するサイトの応答性。 FID は100 ミリ秒以下にする必要があります。
• Cumulative Layout Shift (CLS) : Web ページの視覚的な安定性を測定します。 0.1以下のCLSスコアが望ましい。

さらに、Google は次のことを測定します。

• First Contentful Paint (FCP) : Web ページが画面上でレンダリングを開始するのにかかる時間。 良好な FCP スコアは1.8 秒以下です。
• Interaction to Next Paint (INP) : ユーザーの操作に対するページの応答性を測定します。 本当に応答性の高い Web サイトの INP は200 ミリ秒以下です。
• Time to First Byte (TTFB) : サーバー要求後にデータの最初のバイトが送信されるまでにかかった時間。 0.8 秒以下の TTFB が理想的です。

その下の [パフォーマンスの問題を診断] セクションで、Google PageSpeed Insights はパフォーマンス、アクセシビリティ、ベスト プラクティス、SEO の 4 つのスコアを提供します。 90 以上は良いスコア、50 から 89 は改善できることを示し、50 未満は悪いスコアです。

その下には、Google のオポチュニティと診断があります。 これらは、パフォーマンス スコアを間接的に向上させる方法です。 パフォーマンス メトリックは、サイトの速度に最も影響を与えます。

Web サイトのパフォーマンスを改善する方法に入る前に、Web サイトの速度が重要な理由を見てみましょう。

なぜウェブサイトの速度が重要なのですか?

Web サイトの速度は、ユーザーと消費者の行動に大きな影響を与えます。

モバイル ランディング ページを完全に読み込むのにかかる平均時間は 22 秒です[1] 。

ページの読み込み時間が1 秒から 3 秒になると、直帰の確率は32% 増加します[2] 。

モバイル サイトの読み込みに 3 秒以上かかると、訪問の 53% が放棄されます[3] 。

明らかに、e コマース サイトを運営している場合、遅いサイトはコンバージョンの減少につながります。これに対処する必要があります。 サイトの読み込みに時間がかかると、コンバージョン率が低下します[4] :

• 2.4 秒で読み込まれたページのコンバージョン率は 1.9% でした
• 3.3 秒で、コンバージョン率は 1.5% でした
• 4.2 秒で、コンバージョン率は 1% 未満でした
• 5.7 秒以上で、コンバージョン率は 0.6% でした

高い PageSpeed Insights スコアと実際のページ速度

Google は、ラボ データ (管理された条件下で収集された) とフィールド データ (野生の実際のユーザーから収集された) の両方から PageSpeed Insights スコアを計算します。

実際のページ速度をテストするには、GTmetrix や Pingdom の速度テストなどのオンライン ツールを使用できます。

これらのツールを使用すると、さまざまな場所でサイトをテストできます。

GTmetrix で、テキサス州サンアントニオのテスト サーバーのページ読み込み時間が 666 ミリ秒であることがわかります。これは非常に良いスコアです。

香港では、ページの読み込み時間が少し長く、1.4 秒です。

Pingdom はまた、ワシントン DC でのテストでは 850 ミリ秒の高速な読み込み時間を示していますが、日本の東京では 1.06 秒の遅い読み込み時間を示しています。

Uptrends ツールを使用すると、モバイルとデスクトップ全体でテストできます。 これは、フランスのパリの WP Shout サイトを iPad Air で実行した結果です。読み込み時間は 1.9 秒です。

したがって、Google PageSpeed Insights スコアと実際のページ速度には相関関係があるようです。

WordPressで理想的なGoogle PageSpeed Insights 100スコアを取得する方法

高い Google PageSpeed Insights スコアが重要な理由がわかったので、それを改善する方法を見てみましょう。

Google PageSpeed Insights スコアを改善する方法

1.画像を最適化する

Web 用に画像を最適化することは、パフォーマンス スコアを改善する簡単な方法です。

Optimole などの画像圧縮プラグインが必要です。

このプラグインは、画像をより小さなファイル サイズに圧縮できるため、読み込みが速くなります。 既存の画像だけでなく、すべての新しい画像のアップロードにも使用できます。 Optimole の優れている点は、CDN を介して画像を配信することで、さらに迅速な配信が可能になることです。

また、画像を JPG や PNG ファイルよりもサイズが小さい WebP 形式に変換することもできます。 これは、画像を次世代形式で提供するという推奨事項に合格するのに役立ちます。 さらに、最大幅を設定することで、大きな画像のサイズを変更できます。

Image 要素に明示的な幅と高さの機会がないことを満たすために、画像に幅と高さの属性が指定されていることを確認してください。

Optimole プラグインには遅延読み込みも含まれており、ユーザーが下にスクロールしたときにのみ画像や動画を読み込みます。 これは、以下に示すオフスクリーン画像の延期の機会に役立ちます。

画像ファイルのサイズを縮小するもう 1 つの方法は、SVG 画像を使用することです。 SVG はベクター ファイルであるため、ファイル サイズに影響を与えずに簡単にサイズを変更できます。 これらは WordPress でネイティブにサポートされていませんが、SVG Support や Safe SVG などのプラグインを使用してメディア ライブラリに追加できます。

2.過度のDOMサイズを避ける

DOM とはDOM は Document Object Model の略で、ページのすべての HTML 要素、属性、およびテキストを含むツリー状の構造です。

DOM のサイズを小さくするための 2 つの戦略は、長い Web ページを小さなセクションに分割することと、CSS の {display:none;} 宣言で DOM ノードを非表示にしないことです。

DOM サイズを大きくする要因の 1 つは、ページ ビルダーの使用です。 ページ ビルダーは、ページ上の <div> 要素の数を増やす傾向があります。

Elementor を使用している場合、バージョン 3.0 以降、いくつかの HTML ラッパーが削除され、DOM のサイズが小さくなりました。

または、Chris Lema が行ったように、ページ ビルダーの代わりに Gutenberg を使用することもできます。

この投稿では、過剰な DOM サイズを回避するためのヒントをさらに見つけることができます。

3. JavaScript と CSS を最適化する

CSS および JS ファイルを縮小および圧縮して、パフォーマンスを向上させることができます。 縮小は CSS または JS ファイルからすべてのスペースを削除しますが、GZIP 圧縮は { などの繰り返し文字を削除します。

CSS または JS を縮小できる WordPress プラグインには、Autoptimize (無料) と WP Rocket (有料) があります。

縮小するとサイトが壊れる可能性があるため、縮小するプラグインには、問題がある場合に縮小オプションからファイルを除外するオプションがあります。

WP Rocket には、CSS ファイルと JS ファイルを 1 つのファイルに結合して、リクエストを減らすオプションもあります。 ただし、Web サーバーが HTTP/2 を使用している場合は、これを行う必要はありません。 サーバーが HTTP/2 を実行しているかどうかをテストして、最初に確認できます。

ほとんどのキャッシュ プラグインで GZIP 圧縮を有効にできます。 Web サーバーが Apache または LiteSpeed の場合、プラグインは .htaccess ファイルに直接書き込むか、コピーして貼り付ける行を提供できます。 NGINX または IIS を使用する場合、Hummingbird はこれらのサーバーで圧縮を有効にする構成も提供します。

サイトに使用されていない CSS または JS がある場合は、それを削除します。 Chrome DevTools を使用して、未使用の CSS と JS を見つけることができます。これは、プラグインに由来する可能性が最も高いものです。

また、Rapidload の CSS Saver を使用して、Web サイトから失われる可能性のある CSS を確認することもできます。

4. レンダリングをブロックするリソースを排除する

レンダリングをブロックする CSS および JS は、Web ページの最初のペイントをブロックするというフラグが立てられるファイルです。

Autoptimize プラグインはこの問題を解決し、その結果、First Contentful Paint と Largest Contentful Paint のスコアを改善します。

5. サーバーの初期応答時間を短縮する

サーバーの応答時間は、使用するテーマとプラグイン、使用している Web ホスティングの種類など、いくつかの要因によって異なります。

使用しない余分なプラグインを削除するか、Astra などの軽量テーマに切り替えることを検討してください。

ホスティングについては、共有 Web ホスティングよりもマネージド WordPress ホスティングをお勧めします。 管理された WordPress ホストには、サービスの一部としてサーバーの最適化が含まれています。

6. Web フォントの読み込み中にテキストが表示されたままになるようにするWeb フォントの読み込み中にテキストが表示されたままになるようにする

Web フォントを使用している場合、Google の推奨により、ページの読み込み中にページのテキストが非表示になるのを防ぐことができます。

font-display: swap; を追加することをお勧めします。 スタイルシートの @font-face 宣言に。

以下のスクリーンショットは、Asset CleanUp プラグインを使用してこのプロパティを追加する方法を示しています。

7. リクエスト数を少なくし、転送サイズを小さくする

Google PageSpeed Insights は、Web サーバーによって要求されたファイルの数と、これらのファイルのサイズを記録します。

ここに大きな数がある場合は、次の方法でそれらを減らすことができます。

• 画像とメディア ファイルの最適化。 アニメーション GIF の代わりにビデオ ファイルを使用することをお勧めします。
• CSS と JS の最適化
• フォントとサードパーティ スクリプトの最適化
• HTML ファイルのサイズを縮小する

8. 重要なリクエストの連鎖を避ける

クリティカル リクエストは、ページの読み込みに不可欠なリクエストです。 たとえば、ロゴは重要な要求になる可能性があります。

長いチェーンや大量のダウンロードを含むチェーンは、Web サイトの速度に悪いと見なされます。 これらは、First Contentful Paint と Largest Contentful Paint に影響を与えます。

Google によると、重要なリクエストの連鎖を避けるには、次のことを行う必要があります。

• 重要なリソースの数を最小限に抑えます。削除する、ダウンロードを延期する、非同期としてマークするなどです。
• 重要なバイト数を最適化して、ダウンロード時間 (往復回数) を減らします。
• 残りの重要なリソースが読み込まれる順序を最適化します。すべての重要なアセットをできるだけ早くダウンロードして、クリティカル パスの長さを短くします。

これは次の方法で実行できます。

• それらを参照する HTML で「link rel="preload" を使用して、主要なリクエスト、画像、およびフォントをプリロードします。
• CSS と JavaScript の最小化。
• レンダリングをブロックするリソースを排除します。

WP Rocket などのプラグインを使用して、これらのタスクを実行できます。

9. 長いメイン スレッド タスクを避け、メイン スレッドの作業を最小限に抑える

長いメイン スレッド タスクは、ユーザーの対話時間を遅らせる JavaScript タスク (50 ミリ秒以上) です。

メインスレッドの作業を最小限に抑えるということは、JS の解析、コンパイル、および実行にかかる時間を短縮することを意味します。

次の方法で、JavaScript タスクの長さと時間を短縮できます。

• 肥大化したプラグインの使用を最小限に抑える
• フォントと分析スクリプトをローカルでホストする
• JS と CSS の縮小または延期
• 背景画像の遅延読み込み

WordPress でメインスレッドの作業を最小限に抑えるためのヒントについては、次の記事を参照してください。

10. レイアウトの大幅な変更を避ける レイアウトの大幅な変更を避ける

レイアウト シフトは累積レイアウト シフト メトリックに寄与し、ページ ジャンプの印象をユーザーに与えます。

この問題は次の方法で解決できます。

• メディアに寸法を追加する
• フォントのプリロード
• ニュースレターの登録フォームなどの動的コンテンツの最適化

詳細については、WordPress での累積的なレイアウト シフトの修正に関するこのガイドをお読みください。

11. サードパーティ コードの影響を軽減する

サードパーティ スクリプトとは、Google アナリティクス トラッキングや YouTube 埋め込みなど、他の場所でホストされているスクリプトです。

可能であれば、スクリプトをローカルでホストするようにしてください。 YouTube でこれを行うことはできませんが、分析コードとフォントをローカルでホストできます。

Local Google Fonts プラグインを使用して、独自のサーバーで Google Fonts をホストできます。

WordPress のローカル Google アナリティクス - 外部リクエスト プラグインをキャッシュすると、Google アナリティクスがローカルでホストされます。

12. CDN を使用する

コンテンツ配信ネットワークは、Web コンテンツを保存してユーザーに提供するサーバーのリモート ネットワークです。

CDN は、静的ファイル (HTML、CSS、JavaScript など) をキャッシュし、近くの場所からユーザーに提供することで、サイトの速度を向上させることができます。 これにより、最初のコンテンツ ペイントと最大のコンテンツ ペイントのスコアを下げることができます。

WP ShoutではCloudflare CDNを使用しています。 無料で始めることができます。

CDN を使用する理由と最適なオプションについて詳しく説明します。

Google PageSpeed Insights 100 スコアを取得する方法に関する結論

サイトの速度を決定するプレイには、かなりの数の要因があることがわかりました。 これらのヒントは、完璧なスコアを達成するのに役立ちます。

ただし、スコア 100 にこだわる必要はありません。スコア 90+ は依然として非常に優れています。 サイトのパフォーマンスの最適化に関する David の投稿を読んで、スコアを改善するために私たちが何をしたかを確認してください。