Google PageSpeed 最適化ガイドPageSpeed Insights で 100 点を獲得する方法 (およびブログのパフォーマンスを高速化する方法)

Web サイトの読み込み速度は、ブログでのユーザー エクスペリエンスの大きな部分を占めます。 そのため、そもそもブログを始める場合、成功するには高速なウェブサイトが不可欠です。 入力: 私の友人で有能な開発者、Andy Feliciotti によるこのGoogle PageSpeed 最適化ガイド。

Google はまた、PageSpeed スコアを使用して速度に基づいて Web サイトをランク付けします。 あなたのウェブサイトが Google の PageSpeed テストで 100 点満点を取るのは簡単なことではありません。 しかし、私は助けに来ました！ ブログや e コマース サイトをお持ちの場合でも、Google PageSpeed スコアを 100 にする方法を順を追って説明します。

Google PageSpeed Optimization: PageSpeed Insights で 100 点を獲得する方法

1. Google PageSpeed とは何ですか?
2. Google PageSpeed が重要な理由
3. ウェブサイトの速度をテストする方法
4. Google PageSpeed のベスト プラクティス
5. Google PageSpeed の最適化とインサイトに関するよくある質問

開示:以下のリンクの一部はアフィリエイト リンクであり、追加料金なしでコミッションを獲得することに注意してください。 私が個人的に使用した製品とサービスのみを推奨し、支持していることを理解してください. あなたが私のアフィリエイト リンクの 1 つを使用すると、会社は私に報酬を与えます。これは、私がこのブログを運営し、私の詳細なコンテンツを読者 (あなたのような) に無料で提供するのに役立ちます。

今日からブログを始める準備はできましたか?

Forbes , IncとEntrepreneurで取り上げられた私の究極のガイドであるブログの開始方法 (サイド) をご覧ください。

まず、Google PageSpeed の基本について説明し、次にブログの高速化について説明します。

Google PageSpeed とは何ですか?

ページ速度は、Web サイトのコンテンツがユーザーのブラウザーに到達するまでにかかる時間です。

サイトにアクセスするユーザーはコンテンツを待つ必要がないため、これは非常に重要です。 Google で質問に対する回答を見つけてリンクをクリックし、ページがまったく読み込まれずにあきらめてしまうという気持ちはわかります。 Google もこれを知っています。 これが、サイトの速度が主要なランキング要因である理由です。 サイトの速度をテストする最も一般的なツールは、Google PageSpeed Insights ツールです。 これは、ページ速度に関して Google がサイトについてどう考えているかを正確に知るための最良の方法です。

注目すべき Google PageSpeed メトリクス:

• Largest Contentful Paint (LCP):ユーザーが知覚するページ読み込み速度の測定。 主に、スクロールせずに見えるコンテンツの読み込みが完了したとき。
• 最初の入力遅延 (FID):ユーザーが Web サイトを操作できるようになるまでの遅延の秒単位の測定値。
• Cumulative Layout Shift (CLS):ページのレイアウトが「ずれ」なくなるまでの秒数。 たとえば、画像の読み込みにより、サイトのレイアウトが変わる可能性があります。 これは重要です。ユーザーは、サイトの読み込みが完了する前にサイト上の要素をクリックする可能性があり、シフトによって別の要素をクリックする可能性があるからです。
• First Contentful Paint (FCP):画面に何かがレンダリングされる時間の測定。
• Interaction to Next Paint (INP): Interaction to Next Paint は、ページで行われたユーザー インタラクションのレイテンシを観察します。 たとえば、ユーザーがアコーディオンをクリックし、開くときに予期しない遅延が発生した場合です。
• Time to First Byte (TTFB):ブラウザがサーバーから応答を受信するまでの時間の測定。

これらの用語は、Google Search Console (Core Web Vitals レポート)、PageSpeed Insights、および Chrome ユーザー エクスペリエンス レポートで頻繁に使用されます。

ページ速度が重要な理由

ページの速度は、ブログのトラフィック量と収益に直接影響するため、重要です。

調査によると、サイトの速度はコンバージョン率に直接影響します。 Portent のデータによると、ページの読み込み速度が 5 秒に対して 1 秒の場合、コンバージョンはほぼ 50% 低下します。 サイトの読み込み時間は Google のランキングに影響するだけでなく、コンバージョン率にも影響します。

Google 検索結果での位置付けから顧客の忍耐力まで、サイトのページ読み込み時間は、ユーザー エクスペリエンスのあらゆる側面に影響を与えます。 ユーザーは主にモバイル デバイスを使用しているため、サイトの読み込みはキロバイトごとに意図的に行う必要があります。

ユーザーがページの読み込みを待つ時間が長ければ長いほど、直帰率も高くなります。 サイトの速度は Google の SERP に影響を与えるだけではなく、ほとんどの検索エンジンはページの速度を考慮に入れています。 これが、今日の Web で高速にロードされるサイトを持つことが不可欠である理由です。

幸いなことに、最新のツールを使用していて、何をすべきかを知っていれば、高速なサイトを作成するのはそれほど難しくありません.

ウェブサイトの速度をテストする方法

Google PageSpeed に慣れていない場合、これは、サイトの読み込み速度を判断するために Google がサイトで実行する一連のテストです。 Google のユーザーが検索結果をクリックすると、読み込みが速いことを期待します。 これが、Google が Google PageSpeed Insights テストを作成した理由です。

これにより、Web サイトの所有者は、Web サイトの速度を低下させている原因とその修正方法を正確に把握するためのツールを利用できます。 さらに、Google の検索エンジン アルゴリズムでウェブサイトを正しくランク付けするためのデータを Google に提供します。

このツールの使用は、Web サイトの URL を入力して [分析] をクリックするのと同じくらい簡単です。 テストはすぐに実行され、多くの重要な指標が提供されます。 さらに、ローカル テストを実行する場合は、Google のオープンソースの Lighthouse を使用して、ブラウザーで同様の結果を生成できます。

ウェブサイトのパフォーマンスを確認するもう 1 つの場所は、Google アナリティクスのページ タイミング レポートを使用することです。

おそらく、この記事で聞くすべてを修正する必要はありませんが、最も一般的な PageSpeed の問題とその修正方法について説明します。

PageSpeed のベスト プラクティス: 一般的な Google PageSpeed の問題とその修正方法

このセクションのアドバイスの多くは、WordPress ブログを持っていることを前提としています。 また、開発者が問題を手動で修正するための詳細な手順も含めました。

WordPress サイトの読み込み速度を改善するために私が見つけた断然最良の方法は、 WP-Rocketを使用することです。 WP-Rocket は有料のプラグインですが、箱から出してすぐに多くのベスト パフォーマンス プラクティスを実行できるため、それだけの価値があります。 ほとんどのページ速度の問題を修正するために、WP-Rocket が役立つかどうかを強調し、利用可能な場合は無料の代替手段を提供します.

WordPress のテーマは、Web の重要な要素においても大きな役割を果たします。

サーバーの応答時間を高速化

優れた Google PageSpeed スコアには、サーバーの応答時間が短いことが不可欠です。 基本的に、サーバーの応答時間は、Web サイトのサーバーがユーザーの Web ページを生成するのにかかる時間です。 これは、PageSpeed レポートに警告が表示されている場合に修正する最も簡単な方法の 1 つです。 この問題を解決する最も一般的な方法は、ページ キャッシュを使用することです。 これは、サイトがキャッシュから Web ページを提供することを意味するため、サーバー自体はほとんどまたはまったく処理する必要がありません。

• ページ キャッシングを有効にする:ユーザーがサイトからページを要求した場合、ページをレンダリングして提供する必要があります。 このプロセスは、ページ キャッシュを使用して完全にスキップできます。 基本的に、ユーザーがサイトのページにアクセスすると、次のユーザーのためにキャッシュに保存されるため、すぐに返すことができます。 多くの WordPress ホスティング会社にはページ キャッシュが組み込まれていますが、サーバーの応答時間が長い場合は、有効になっていない可能性があります。 最高の WordPress ページ キャッシング ソリューションには、 WP-Rocket 、W3 Total Cache、および Cache Enabler が含まれます。 ページ キャッシュのもう 1 つの一般的なオプションは、CloudFlare の WordPress 向け自動プラットフォーム最適化を使用することです。 これは CloudFlare の
• 最新のスタックを使用する: Web ホストが使用する PHP と MySQL のバージョンは、ページ速度に大きな影響を与えます。 高品質の Web ホスティング会社は、これについてカバーする必要があります。 あなたが開発者である場合、これは最新バージョンの PHP およびデータベース ソリューションを最新の状態に保つことを意味します。

圧縮を有効にする

サイトは、ユーザーのブラウザに送信する前に、Brotli (Chrome でサポートされている新しい) または GZIP 圧縮を使用してコンテンツとページ サイズを圧縮できます。 ユーザーのブラウザは圧縮されたコンテンツを自動的に処理するため、これらの圧縮方法はサイトの表示には影響しません。

ほとんどの人気のある WordPress ホスティング会社は、自動的に圧縮を適用します。 サイトで圧縮方法が有効になっていることを確認したい場合は、オンラインの GZIP 圧縮テストを使用できます。

WP-Rocket、WP Super Cache (設定で有効にする必要があります)、W3 Total Cache (設定で有効にする必要があります) など、人気のあるパフォーマンス WordPress プラグインは自動的に GZIP 圧縮します。 WP-Rocket は、誰も設定せずに Apache を使用している場合、サイトに GZIP 圧縮を自動的に適用します。

開発者向け:サーバーで Brotli または GZIP 圧縮を有効にするには、Apache または Nginx のどちらを使用しているかを知る必要があります。 これは、Apache で Brotli を有効にするためのガイドと、Nginx で Brotli を有効にするためのガイドです。 サーバー構成を扱う代わりに、CloudFlare の使用を選択することをお勧めします。 CloudFlare は無料で、ユーザーのブラウザーがサポートするものと自動的に提供されるコンテンツに応じて、GZIP および Brotli 圧縮を適用します。

CSS、HTML、JavaScript を縮小する

HTML、CSS、JavaScript はすべて、ページの読み込み速度に影響します。 ほとんどの開発者は、コードを作成する際に、タブ、スペース、およびその他の重要でないコードを含めて、人間が判読できるようにします。 これらの使用されていない文字がすべて加算され、サイトの速度がわずかに低下する可能性があります。

幸いなことに、これらのアセットはすべて、ユーザー エクスペリエンスに影響を与えることなく簡単に縮小できます。 WP-Rocket は、CSS と JavaScript の縮小オプションを備えたファイル最適化ページを提供します。 さらに、WP-Rocket でページ キャッシングが有効になっている場合、HTML 縮小がページに適用されます。 無料のオプションは、Autoptimize プラグインを使用して CSS/JS/HTML を縮小することです。

JavaScript を縮小すると、機能に問題が発生する可能性があるため、有効にするときに必ずテストしてください。

開発者向け: 開発者がワークフロー中にファイルを圧縮できるようにする開発者ツールはたくさんあります。 Clean CSS のような Node.js パッケージをワークフローに追加して、作業中に圧縮ファイルを圧縮できます。 さらに、小規模なプロジェクトには、CSS、JS、さらには HTML を圧縮するオンライン ツールが多数あります。 WordPress を使用している場合は、はるかに少ない労力で同じ結果が得られるので、プラグインの使用をオプトインすることをお勧めします。

未使用の CSS を減らす

未使用の CSS を削除するのは難しい場合があります。 ページ スタイルに使用されていないページの CSS ルールは、未使用の CSS と見なされます。 ほとんどのフレームワーク、テーマ、およびプラグインは、未使用の CSS でサイトを離れます。

たとえば、WordPress のテーマに連絡先ページのスタイルを含めることができますが、サイトの他のすべてのページでは使用されていませんが、スタイルシートにはまだ存在しています。

幸い、WordPress を使用している場合は、未使用の CSS を自動的に削減するプラグインがいくつかあります。 WP-Rocket と Perfmatters は、使用されていない CSS をブログから削除するのに非常に役立ちます。 これらのプラグインはページをロードし、ページを正しく表示するために必要な CSS のみが含まれていることを確認し、CSS ファイルを小さくします。

開発者向け:このプロセスを手動で行うために、開発者は WordPress サイトからスタイルシートをデキューする作業を行うことができます。 これにより、テーマのスタイルシートに追加する CSS を手動で選択できます。 サイトで使用されていない CSS を見つけるためのオンライン ツールもありますが、大規模なサイトでは使用できない可能性があります。

ブラウザのキャッシュを利用する

ユーザーがサイトの複数のページにアクセスする場合、同じリソースを使用する可能性があります。 多くの場合、画像、CSS、および JavaScript はサイト全体で共有されます。 ここでブラウザ キャッシングの出番です。後で使用するためにアセットを保存するようにユーザーのブラウザに指示できます。 WordPress のほとんどのパフォーマンス プラグインは、すぐに使用できるブラウザー キャッシュ ルールを追加します。

開発者向け: Apache または Ngnix を使用しているかどうかに応じて、サーバー構成を追加して、ユーザーのブラウザーに特定のコンテンツをキャッシュするように指示できます。 通常、これらのブラウザー キャッシュ メソッドは、CSS、JS、および画像に適用されます。

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

Web ブラウザーが Web サイトのコードを読み取ると、何をダウンロードしてレンダリングするかが決定されます。 <head> タグ内の JavaScript および CSS ファイルは、レンダリングをブロックするリソースと見なされます。 ブラウザがページをユーザーに返そうとするとき、停止してファイルをダウンロードする必要があり、全体的にページのレンダリングが遅れます。

サイトにレンダリングをブロックするリソースがある場合、Google PageSpeed Insights は、最大のファイルと潜在的な節約を示します。

幸いなことに、WordPress のほとんどのパフォーマンス プラグインは、JavaScript と CSS を遅延またはインライン化するのに役立ちます。 WordPress プラグインは、必須ではないスタイルシートと JS を移動して、ページの下部にロードするのにも役立ちます. WP-Rocket、Autoptimize (無料)、および Perfmatters はすべて、レンダリングをブロックするアセットを排除する役割を果たします。

開発者向け:開発者は複数のブラウザー機能を利用して、アセットの読み込みを改善できます。 これには、スクリプトで defer 属性を使用すること、CSS/JS をフッターに移動すること、重要な CSS のみをヘッダーに含めることが含まれます。 レンダリング ブロック リソースに関する Google のガイド。

画像を効率的にエンコード

画像圧縮アルゴリズムは、品質を損なうことなく画像を圧縮するという驚くべき結果をもたらします。

通常、JPG および PNG 画像は、エクスポート時に追加の圧縮を使用できます。 Imagify、ShortPixel、および Smush はすべて、画像を自動的に圧縮するための優れた WordPress プラグインです。 基本的に、これらのプラグインは画像をアップロードするときに画像を圧縮し、ページの読み込み速度を高速化します. 画像に適用する圧縮率を選択することもできます。

画像を圧縮するには処理能力がかかるため、これらのプラグインの多くは大量の画像に対して料金が発生します。 ShortPixel は、コンテンツ配信ネットワークと API を使用してクラウド上の画像を圧縮するプラグインも提供しています。 サイトで既に CloudFlare を使用している場合は、Pro プランにサインアップして、その場で画像を最適化できます。

開発者向け: Image Compressor などのオンライン ツールや Pichi などのデスクトップ アプリなど、画像を最適化するツールはたくさんあります。 画像を大規模に圧縮する必要がある可能性が高いため、画像を自動的に圧縮する CDN を使用することをお勧めします。 私の個人的なお気に入りは CloudFlare Pro (月額 20 ドル) プランで、webp 画像を自動的に圧縮し、さらにはサーバーに送信します。 サイトのロゴなどのグラフィックに SVG を使用することもできます。 また、実際の写真には JPEG ファイルを使用し、グラフィックには SVG/PNG ファイルを使用することをお勧めします。 写真に PNG ファイルを使用すると、ファイルが不必要に大きくなります。

適切なサイズの画像

不適切なサイズの画像の例として、幅 800 ピクセルの div 内の 2000 ピクセル x 2000 ピクセルの大きな画像があります。 800px しか表示されないため、ブラウザーは理由もなく大きな画像をロードする必要がありました。 これにより、ページの読み込み速度が遅くなり、ユーザー エクスペリエンスが低下します。 ほとんどのよく設計された WordPress テーマには、この問題はありません。

開発者向け: WordPress テーマを開発している場合、テーマの幅に正しく一致するようにデフォルトの WordPress 画像サイズを設定できます。 画像サイズを変更した後、WordPress のサムネイルを再生成する必要があります。 Retina ディスプレイ用の画像を提供する場合は、srcset 属性を使用する必要があることに注意してください。 WordPress には、高ピクセル密度のディスプレイに画像を表示するための組み込み関数もあります。

オフスクリーン イメージの保留

Web サイトに画像が含まれている場合、Web サイトが読み込まれると、スクロールしなければ見えない位置にあるものも含め、すべてが読み込まれます。 画像は表示可能であるため、これはリソースとネットワークの使用の無駄です。 幸いなことに、すべての主要なブラウザーが遅延読み込みをサポートするようになったため、画面外の画像を延期することがこれまでになく簡単になりました。

デフォルトでは、WordPress は loading=”lazy” 属性を画像に適用してオフスクリーン画像を自動的に延期するため、このエラーは表示されない可能性があります。 WP-Rocket は、画像、iFrame、および YouTube の埋め込みにも遅延読み込みを適用します。 または、無料の a3 Lazy Load プラグインを使用して、画面外の要素に遅延読み込みを適用することもできます。 サイトに多くの画像ファイルと gif がある場合、これはページの読み込みを改善するための重要な側面です。

開発者向け:画像に遅延読み込みを追加する最も簡単な方法は、loading="lazy" 属性を <img> タグに含めることです。 コンテンツを遅延ロードするための JavaScript ライブラリも多数あります。

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

Web フォントが導入されたとき、フォントが読み込まれる前にテキストを非表示にするのが一般的でした。 ユーザーはすぐにあなたのサイトを読み始めたいので、これは大したことではありません。 CSS の最適化が有効になっている場合、WP-Rocket は Web フォントの表示を自動的に最適化します。 無料の WordPress プラグイン Swap Google Fonts Display も、WordPress サイトの Google Fonts に正しいパラメーターを追加します。

開発者向け: Google フォントを使用していると思われますが、これはこの調査結果を解決するのに非常に簡単です。 「&display=swap」クエリ文字列を Google フォント URL に追加するだけです。 詳細は Google から。

複数のページ リダイレクトを避ける

サイトに多数のリダイレクトがある場合、ページの読み込み速度がゆっくりと向上します。 たとえば、ホームページ / が /home.html に移動すると、ユーザーへの応答が遅くなります。 リダイレクトにつながる CSS または JS ファイルがある場合、このエラーが表示されることがあります。

もう 1 つの例は、ヘッダー ナビゲーションの URL がリダイレクトする URL に移動する場合です。 WordPress を使用している場合、サイトにフラグが立てられる可能性はほとんどありません。

Google PageSpeed の最適化とインサイトに関するよくある質問

Google PageSpeed に関するよくある質問は次のとおりです。 足りないものがある場合は、この記事の最後にあるコメントで質問してください。

ブログの Google PageSpeed 最適化に関する最終的な考え

Google PageSpeed の最適化を成功させるためのこれらのヒントが、ブログのパフォーマンスを改善し、時間の経過とともにオーガニック トラフィックの増加につながることを願っています。 Web が進化し、ツールが使いやすくなるにつれて、WordPress サイトの高速化はますます簡単になります。

Google PageSpeed スコアを改善するためにできることはたくさんありますが、合格テストを受けることをお勧めします。

テストに合格する (90 以上のスコア) ことは、Google のオーガニック検索結果の上位にコンテンツをランク付けする上で大きな役割を果たします。 ただし、100 点満点を達成することは、Web 標準が変化するにつれて終わりのない作業になる可能性があることを忘れないでください。そのため、90 点以上の範囲にとどまるように努力すれば、問題ありません。

今日からブログを始める準備はできましたか?

Forbes , IncとEntrepreneurで取り上げられた私の究極のガイドであるブログの開始方法 (サイド) をご覧ください。