Pagespeed InsightsでGoogleスピードテストに合格する方法

ページが読み込まれるまで何年も待ちたい人はいますか? 特にモバイルで。 Google スピード テストのスコアが高いことは、サイトにとって非常に重要です。

現在、ページの速度と Core Web Vitals は非常に重要であり、特に WordPress サイトでは、ページや Web サイトの読み込み時間が遅くなる理由はありません。

Web サイトの速度テストを使用してサイトの平均読み込み時間が 3 ～ 5 秒を超える場合は、トラフィックが失われています。 読者は待機せずに白い画面を見るため、直帰率が高くなります。

ウェブサイトのパフォーマンスは重要な SEO 要素であり、検索エンジンのランキングとコンバージョン率を向上させるのに役立ちます。 実際、Google は現在、キーワードとページをランク付けするための Core Web Vitals モバイル優先度を持っています。

あなたのブログがスピードアップしていることを確認する方法

多くの要因が速度テストのテスト結果に影響を与えます。

速度テストを提供するインターネット サービスは、国や都市によって異なります。

インターネット接続をテストした場合、ダウンロードとアップロードの速度は、サービス プロバイダーと、インターネットと Wi-Fi 接続のチェックの効率に依存することがわかります。

ただし、Pagespeed Insights を使用した Google Speed Test を使用すると、ダウンロード速度の概要とサイト訪問者のサイトのパフォーマンスを把握できます。

100点を取ることが常に主な目的であると考える必要はありません。 Web パフォーマンスの完璧さを追求するために多くの時間を浪費する可能性があります。 しかし、グリーン スコアを取得するのは比較的簡単で、サイトのパフォーマンスが良好であることを意味します。

Just Publishing Advice には多くの機能、ウィジェット、画像が組み込まれていますが、サイトの速度に関しては非常に高いスコアを獲得しています。 ここでは、そのサイトのパフォーマンスを簡単に見てみましょう。

次世代形式の画像を使用しない場合、Google は結果を減らすため、通常、モバイル スコアは少し低くなります。

現時点では、サイト上のすべての画像を JPEG 2000、JPEG XR、または WebP 画像ファイルに置き換える必要があるため、これはどのブログにとっても非常に大きな作業です。 ほとんどのブロガーは、この警告を無視して、引き続き JPEG および PNG 画像ファイルを使用できます。

サイトの速度パフォーマンスをテストする方法

Google の速度テストでは、サイトの速度の適切なおおよその測定値が得られます。

また、Google アナリティクスでページの平均読み込み時間を確認することもできます。 しかし、サイトのパフォーマンスを詳細に分析するために必要な情報は得られません。

そのためには、より優れた SEO ツールが必要です。

ラボ データがすべて緑色であれば問題ありません。 ただし、評価がオレンジ色または赤色の場合は、何らかの措置を講じる必要があります。

取得するトラフィックの量に応じて、Core Web Vitals の評価が表示される場合と表示されない場合があります。

これは、Chrome ブラウザーからの実際のユーザー速度データを測定します。

レポートを生成するのに十分なトラフィックがあるかどうかは、合格または不合格のテストです。

これらのレポートは、サイトのパフォーマンスをどこで改善できるかについてのガイダンスを提供します。

しかし、Google のページ速度テスト ツールは、問題を追跡して修正するのにあまり役に立ちません。

問題を解決する方法を見つける

サイトの速度を確認するより良い方法は、GTMetrix を使用することです。

これはオープン ソースであり、Google Pagespeed スコアと Yahoo の YSlow を使用しており、Google よりもはるかに多くの情報を提供します。

パフォーマンスの監視と速度の測定を行う場合、確認する必要があるタイミングが 2 つあります。

ほとんどのテスト サービスは Fully Loaded Time を使用してサイトのパフォーマンスを測定しますが、これは最も重要な統計ではありません。

サイト速度の最も正確な実際の尺度は、ドキュメント オブジェクト モデル (DOM) の読み込み時間です。

Web ページがユーザーに対してアクティブになるのは、サイトの読み込みプロセスのポイントです。

私にとって、これは Web ページの実際の速度を測定する際に最も重要な統計です。

以下の画像では、完全にロードされた時間が 1.9 秒であるのに対し、DOM がロードされた時間はわずか 1.3 秒であることがわかります。

以下に別のビューを示します。 矢印でマークされた赤い線は、DOM がロードされたポイントです。

最初のユーザー ビューで不要な要素が後で読み込まれることがわかります。

後で読み込まれる要素は通常、遅延読み込みされる画像と、ページのパフォーマンスを向上させるために必要になるまで延期される JavaScript ファイルです。

サイトをチェックするときは常に、DOM の読み込み時間に細心の注意を払ってください。DOM の読み込み時間は、ユーザーにとってのサイトの速度をより正確に測定するためです。

また、インターネットの速度は刻一刻と変化するため、テストを 2 ～ 3 回実行してください。

たとえば、1 時間ほど、またはそれ以上の結果を平均することで、より良いアイデアを得ることができます。

すべてのインターネット速度テストにはこの自然な変動があるため、ランダムに悪い結果が 1 つ出ても心配する必要はありません。

他の速度テスト サイトでも確認できます。

あなたのサイトが Google と GTMetrix から緑の評価を獲得していない場合、問題を解決してサイト訪問者と検索エンジンを満足させる 11 のシンプルで迅速かつ簡単な方法を次に示します。

1. まず、サイドバーの雑然としたものを片付けます

最初にすべきことは、サイドバーを確認することです。 これらすべてのウィジェットと広告が必要ですか? 実際、サイドバーは本当に必要ですか?

あなたのページは一等地と考えるべきです。

本来の目的をほとんど果たさず、サイトの速度を低下させる要素によって、サイト上でどれだけの貴重な領域が浪費されているでしょうか?

雑然とした Web ページは、気を散らすものが多すぎるため、読むのも困難です。

ほとんどのサイドバー要素は読み込み速度を向上させるため、削除できる要素が多いほど良いです。

2. 外部サイトに依存するページ上のコンテンツを避ける

Web ページの速度を低下させ、Google の速度テストに失敗する最悪の犯罪者の 1 つは、Facebook の「いいね」ボタンです。

ページがロードされる前に、ページは Facebook を待機する必要があります。 これは、ほとんどのソーシャル メディア ウィジェットと共有ボタンに共通の問題です。

ページの読み込み時間が最大 2 秒以上長くなるものもあります。

ソーシャル メディアでの共有が必要な場合は、軽量のプラグインを探してください。

サイトの要素を遅くする可能性があるその他のインターネット サービスには、Amazon の広告やウィジェット、大きなバナーの Google 広告などがあります。

Google Adsense をお持ちの場合は、大きなバナー広告の代わりに記事内広告を使用し、広告のバランスを 70 ～ 80% 程度に設定してください。

Adsense について読むかもしれないこととは反対に、記事内広告を使用すると、サイトに大きな負荷がかかることはありません。

これは、GTmetrix によって測定された Google 広告を含む当サイトのページです。

ロード時間への影響は最小限です。

2 つの広告がある場合、完全に読み込まれる時間はわずか 2 秒強で、DOM の読み込みは 1.6 秒で完了します。

また、広告の読み込みが遅れています。つまり、ページが表示される前にページが Google で待機していないことを意味します。

3. 遅い JavaScript ファイルをチェックする

サイトにあるすべての要素は、読み込みに時間がかかります。

多くのプラグイン、ウィジェット、およびアドオンでサイトをいっぱいにすると、速度が大幅に低下します。

これは、本当に緊急の注意が必要な Web サイトの GTMetrix 評価です。 12.4 秒でページをロードするのは、今日では最悪です。

GTMetrix を使用して、サイトの速度を低下させているすべての要素を見つけることができます。

すべての GET の横にある + 記号をクリックして、サイトの速度を低下させている原因と、修正、削除、または最適化する必要があるものを見つけます。

上記のようなサイトは、3 つの非常に簡単な対策を講じることで迅速に改善できます。

以下の3点で、キャッシュの追加、CSSとJavascriptの縮小化と集約、画像の遅延読み込みについて説明します。

以下で推奨する 3 つのプラグインはすべて無料です。

4. W3 Total Cache をインストールする

WP Super Cache や WP Fastest Cache など、WordPress 用の非常に優れたキャッシュ プラグインが多数あります。

しかし、すべてのサイトで W3 Total Cache を 10 年以上使用しています。

これらすべてのプラグインでブラウザのキャッシュを活用するために使用できる設定は多数ありますが、設定して使用する必要があるのは 2 つだけです。

Total Cache の設定は次のとおりです。 しかし、それらはすべてのキャッシュ プラグインで似ています。

ブラウザとページキャッシュを有効にするだけです。

これら 2 つの設定は、ヘッダー、フッター、サイドバー要素、メニューなど、変更されないサイトの要素をキャッシュすることにより、サイトを高速化します。

5.自動最適化をインストールする

ほとんどのキャッシュ プラグインは、Javascript と CSS を縮小および集約することもできます。

それらはすべて非常にうまく機能しますが、セットアップが非常に複雑になるものもあります。

私はこの作業を行うために Autoptimize を使用しています。これは、より迅速で、セットアップが簡単で、はるかに効率的であるためです。 実際、1分もかからずにセットアップできます。

すべての CSS および Javascript ファイルのサイズを縮小し、それらを 1 つの CSS ファイルと 1 つの Javascript ファイルに集約します。

これらの 2 つのファイルは、一部のサイトの Google 速度テストでしばしば問題となるレンダー ブロッキングが発生しないようにロードされます。

縮小と集約は、サイトの速度に大きな違いをもたらします.

以下は、すべてのサイトで使用する設定です。

Autoptimize のもう 1 つのボーナスは、サポートが素晴らしいことです。

6. a3 レイジー ロードをインストールする

ユーザーが Web サイトにアクセスするとき、ページがアクティブになり、訪問者が使用できるようになる前に、Web ページにあるすべての画像を読み込む必要があります。

遅延読み込みを使用することにより、ユーザーの画面に表示されていないすべての画像は、スクロールするときにのみ読み込まれます。

これを行うと、DOM が完全に読み込まれた後に画像が読み込まれるため、サイトの速度に大きな違いが生じます。

a3 Lazy Load に決定する前に、いくつかの異なるプラグインを試しました。 パフォーマンスと使いやすさで勝っています。

インストールしたら、デフォルト設定を使用するか、いくつかの微調整を行うことができます。

プラグインは、すべての画像、動画、iFrame を遅延ロードします。

7.WPロケットをインストールする

上記の 3 つの無料オプションをオールインワン オプションに置き換える場合は、WP Rocket ですべてを実行できます。

3 つのプラグインを使用してセットアップする代わりに、WP Rocket を使用してページとブラウザーのキャッシュを設定し、Javascript と CSS を最小限に抑え、画像を遅延ロードすることができます。

データベースを最適化することもでき、Cloudflare との統合を提供します。

WP Rocket は経済的なオールインワン ソリューションで、わずかな労力で数分でサイトを超高速にします。

8. 画像のサイズを変更する

大きな画像がサイトの速度を遅くすることはありません。 ただし、Web ページに合わせてサイズ変更されていない画像は、サイトの速度を大幅に低下させる可能性があります。

画像をアップロードする前に、常に必要なサイズに画像のサイズを変更する必要があります。

全幅の画像が必要な場合は、ブログ ページの幅に合わせてサイズを調整する必要があります。

このサイトは幅 750px、サイドバー 300px です。 幅が 750px を超える画像は、サイトの速度を低下させます。

ただし、メディアの詳細ボックスでその場で画像のサイズを調整しないでください。 ページサイズは縮小されません。

ご覧のとおり、この画像の幅は 1218px です。 大きいサイズを選択すると、画像が収まります。

しかし実際には、ページは 1218 ピクセルのフルサイズの画像をロードし、サイトの速度が遅くなります。

WordPress の[画像の詳細]ボックスを使用して画像のサイズをゆっくりと変更しないでください。

アップロードする前に必ず画像のサイズを変更してください。フルサイズがページ上の画像の実際のサイズになります。

9. 画像を最適化する

Smush は、非可逆圧縮を使用して画像を縮小するための人気のあるプラグインです。 無料版を使用していますが、問題なく動作します。

ただし、自分のサイトに画像をアップロードする前に、もう 1 つの手順を実行します。 ImageOptim という小さなデスクトップ アプリを使用しています。

ご覧のとおり、ロッシーは画像を約 80% 削減します。

残念ながら、Mac ユーザーのみが利用できます。 Windows ユーザーの場合は、オンライン イメージ オプティマイザを使用して同じ結果を得ることができます。

画像を減らす方法については、以前の記事を読むこともできます。

10.Cloudflare CDNを使用する

コンテンツ配信ネットワーク (CDN) を使用する必要がありますか?

場合によります。 CDN は静的ファイルを世界中のサーバーに保存して、サイトの読み込みを少し速くします。 サイトの訪問者が遠くにいる場合は、これが役に立ちます。

しかし、サイトが主にローカル トラフィックを獲得している場合は、あまり役に立ちません。

Just Publishing Advice はヨーロッパでホストされていますが、トラフィックの大部分は米国からのものです。 したがって、CDN を使用することは理にかなっています。

たとえば、サイトがオーストラリアでホストされていて、英国と米国からのトラフィックが多い場合は、CDN の使用を検討することをお勧めします。

Cloudflare は人気があり、効率的で、無料です。 したがって、それは良い選択です。

ただし、サイトに展開するには少し技術的な能力が必要です。

WordPress で Cloudflare をセットアップする方法の詳細については、ハウツー ガイドの記事を参照してください。

11. 週に一度チェックする

上記の対策でサイトを改善したら、定期的なチェックを行う必要があります。

ブログでは常に状況が変化するため、パフォーマンスに注意を払うことが重要です。

ほとんどの場合、Pagespeed Insights と GTMetrix を使用します。

ただし、世界中の 25 か所でサイトのパフォーマンスを確認するために実行できる無料の Web サイト速度テストがもう 1 つあります。

Dot-Com Tools はサイトの速度をリアルタイムでテストするため、サイトのレートを確認できます。

これは非常に優れたテスト ツールであり、CDN が価値があるかどうかを検討している場合のガイドです。

テストするときは、完全に読み込まれたページの最大速度を 3 秒にすることを Google が推奨していることに注意してください。

WordPress では、この記事の最適化の提案を使用すれば、これは非常に簡単に実現できます。

概要

このガイドに記載されているすべてを行う必要がありますか?

速度に関する限り、WordPress は通常、すぐに使用できます。

しかし、遅いテーマを使用し、多くのプラグインを追加し、大きな画像を使用している場合、サイトの読み込み速度が悪い場合は、いくつかの作業を検討する必要があります.

別の原因として、ホスト サーバーの信頼性が低い、または遅いことが考えられます。 プロバイダーを変更する必要がある場合、高速ホストの費用は月額わずか数ドルです。

Google の速度テストで赤字だった場合は、早急に何らかの作業を行う必要があります。

ヒントの 1 つは、Twenty Seventeen などのデフォルトの WordPress テーマを有効にして、もう一度テストすることです。 ほとんどのテーマはレスポンシブになりましたが、一部の古いテーマではサイトの速度が遅くなる可能性があります.

テーマに問題がなければ、上の画像のようなサイトを改善するための最優先事項は次のとおりです。

1. キャッシュ プラグインをインストールします。

2.自動最適化をインストールする

3. レイジーローダーをインストールする

この 3 つの手順を実行すると、サイトのパフォーマンスがすぐに向上します。

画像については、Smush をインストールしてから一括最適化を行うことも大いに役立ちます。

WordPress サイトの速度が遅く、Google の速度テストに失敗する理由はありません。

この記事に記載されている 10 のステップを展開すると、サイトはモバイルとデスクトップの Pagespeed Insight テストに簡単に合格します。