一般的に失敗するPageSpeed監査とその修正方法
公開: 2022-04-10この記事では、WPRocketを使用してWordPressWebサイトを最適化する方法について説明します。 このプラグインを使用して、最も一般的に失敗するPageSpeed監査に合格する方法を段階的に見ていきます。 この記事は、最も一般的な監査で失敗するように、最も一般的でない監査で失敗するように注文しましたが、この投稿の左側にある目次を使用して、すばやくナビゲートできます。
ウェブサイトが適切に最適化されていない場合、Googleはウェブサイトのパフォーマンスを向上させるために追求できる機会のリストを提供します。 さらに、合格または不合格の監査のリストが提供されます。 監査に失敗した場合、監査に対処するための最善の方法に関する推奨事項が提供されます。
GooglePageSpeedで100点満点中100点を獲得することは必須ではありません。 ただし、速度はGoogle検索のランキング要素であるため、ウェブサイトをすばやく読み込むことができることが重要です。 さらに、ウェブサイトの高速化がコンバージョン率とバウンス率の低下につながる理由を説明する統計がたくさんあります（Googleを検索するだけです）。 あなたは間違いなくあなたのスピードインデックスのために2.0の下で得点したいと思っています。
速度が重要である理由がわかったので、Webサイトの最適化にWPRocketを選択した理由を見ていきましょう。
WP Rocketを使用して、すべてのWordPressWebサイトを最適化します。 これには、代理店として構築したWebサイトだけでなく、SpeedOpp（プロのWordPress速度最適化）を使用して最適化サービスを実行するときに作業するWebサイトも含まれます。 WP Rocketを選択する理由は、業界で最速であり、実装も非常に簡単で簡単だからです。
誤解しないでください。これは非常に強力なツールであり、理解と使用が簡単になるように設計されているため、時間を大幅に節約できます。 これはプレミアムプラグイン（$ 49 /年）ですが、シンプルで、最速のWebサイトにつながります（これをテストしました）。
それでは、失敗する可能性のある個々のページ速度監査の実際の最適化チュートリアルに取り掛かりましょう。 WordPressウェブサイトのレポートを生成するときにGooglePageSpeedが提供する最も一般的な機会について説明します。 これらの機会と監査は、灯台レポートにも記載されています。 入りましょう。
レンダリングをブロックするリソースを排除する
これはおそらく、WordPressWebサイトで発生する最も一般的なエラーです。 Webサイトを最適化するために何もしていない場合は、レンダリングブロッキングリソースが横行しています。 Googleの機会は、レンダリングブロッキングリソースを排除する必要があることを示唆しています。
まず、レンダリングブロッキングリソースとは何ですか？ 詳細についてはこちらをご覧くださいが、要するに、これらはWebサイトの読み込み時間を遅くするスクリプトまたはファイルです。 特定の種類のファイルが特定のマネージャーに読み込まれると、ブラウザーはそのファイルを読み込むためのWebページのレンダリングを停止し、それを読み取ってから、Webページのレンダリングを続行します。 複数のレンダリングブロックリソースがあると、合計してWebサイトの速度が大幅に低下します。
WP Rocketアドレスは、3つの方法でブロッキングリソースをレンダリングします。 まず、プラグインをWebサイトにインストールすると、キャッシュが自動的に生成されます。
2つ目は、このツールがアクティブ化できる2つの設定を提供し、JavaScriptとCSS期間の配信を最適化して、WPRocketダッシュボードの[ファイル最適化]タブに移動します。
そのページで、次の2つの設定をアクティブ化できます。
- CSS配信の最適化-これは非常に強力ですが、自動機能です。 それは2つのステップで起こります。 まず、WP RocketはすべてのCSSを識別し、Webサイトの読み込みに必要です。 これはクリティカルパスCSSと呼ばれ、初期ビューポートをロードするために必要です。 次に、追加のCSSをすべて非同期でロードし、レンダリングブロックの側面を削除します。
- JavaScriptの読み込みを延期-JavaScriptの読み込みを延期すると、JavaScriptのレンダリングブロックの側面が削除されます。
また、CSSファイルとJavaScriptファイルをマージして縮小することもお勧めします。 これにより、個々のファイルがすべて1つの大きなファイルに結合され、HTTPリクエストの量が減り、ブロッキングリソースがレンダリングされます。
未使用のCSSを延期する
CSS配信を最適化することにより、未使用のCSSを延期します。 未使用のCSSは、ページの最初のビューポートをロードするときに必要のないCSSです。
WP Rocket-> File Optimizationに移動し、「CSS配信の最適化」機能をアクティブにします。 これは、レンダリングブロッキングリソースの排除で説明したのと同じ「CSS配信の最適化」設定です。
早くて簡単でしたね。
CSSを縮小し、JavaScriptを縮小する
WordPress Webサイトは、複数のプラグインとテーマを使用しているため、通常、これら2つの監査に失敗します。 それには何の問題もありません。WPRocketを使用してWordPressでCSSとJavaScriptをマージし、縮小するのはかなり簡単で簡単です。
まず、ミニファイとは、WordPressWebサイトのJavaScriptスクリプトとCSSファイルを構成するコードから空白と未使用の文字を削除することです。 先に進んでこれを手動で行うことができますが、WPRocketが自動的にこれを行います。
WP Rocketの[ファイル最適化]タブで、最小化されたCSSと最小化されたJavaScriptをオフにします。 HTMLの縮小、CSSファイルのマージなど、このタブにある追加の機能があります。
ファイルを縮小するとき、WPRocketはこれが物事を壊す可能性があることを警告します。 これは、WordPress Webサイトが依存する基になるコードを変更するため、有効な警告です。 何かが壊れた場合は、設定のチェックを外すだけで、すべてが通常に戻ります。
キーリクエストのプリロード
99％の確率で、プリロードキーリクエストの監査に失敗した場合、それはフォントに関係しています。 これは、プリロードタグを含めずにサードパーティのフォントを呼び出すElementorページビルダーやその他のプラグインに特に当てはまります。 幸いなことに、これは非常に簡単に修正できます。
この監査に失敗すると、プリロードされていないファイルについてGoogleが警告します。 フォントファイルの場合は、関連するURLをGoogleからWPRocketにコピーして貼り付けるだけです。 フォントをプリロードするための入力フィールドは、WPRocketの[プリロード]タブにあります。
外部ファイルとDNS要求をプリフェッチすることもできます。 これは、プリロードフォント入力のすぐ上のプリロードセクションにあります。
画面外の画像を延期する
この監査に失敗した場合は、ページの読み込み時にすべての画像を読み込んでいることを意味します。 訪問者が画像までスクロールして表示しなくても、転送データが読み込まれ、Webサイトの読み込みが遅くなります。
画面外の画像を延期するには、画像を遅延読み込みするだけです。
WP Rocketの[メディア]タブで、画像、iframe、およびビデオの遅延読み込みをアクティブにします。 ウェブサイトに多数のYouTube動画がある場合、それらがページの速度に深刻な影響を与えている可能性があります。 ウェブサイトにYouTube動画を埋め込んでいる場合は、ハイフレームと動画の遅延読み込みを有効にすることをお勧めします。
これは、レンダリングがJavaScriptをブロックしているため、YouTubeプレーヤーの読み込みに時間がかかるためです。 ユーザーがビデオにスクロールしたときにビデオをロードすることで、この問題を完全に取り除くことができます。
YouTube動画の遅延読み込みを有効にした後、YouTubeiframeをプレビュー画像に置き換えることもできます。 これは、WordPress Webサイトで多数のYouTube埋め込みを実行している場合に、非常に有益なもう1つのことです。
プレーヤーをプレビュー画像に置き換えると、ユーザーが特にプレビュー画像をクリックしない限り、ビデオとプレーヤーは読み込まれません。 これは、必要なデータのみをロードすることを意味し、それぞれのWebページのロード時間を大幅に改善します。
サーバー応答時間の短縮（TTFB）
WP Rocketでこのメトリックを改善するために何もできない場合でも、これを記事に含めると考えました。
サーバーの応答時間（1バイト目までの時間とも呼ばれます）を短縮することは、通常、ホスティングが不十分であることを意味します。 特に、共有ホスティング（Bluehost、GoDaddy、HostGator…）を使用している場合、サーバーの応答時間は常に非常に遅くなります。
サーバーの応答時間を改善する最善の方法は、よりプレミアムなホストに移行することです。 これは必ずしも高価である必要はありません。 共有ホスティングと同じコストでプレミアムホストに移行することについて、いくつかの詳細な記事を作成しました。
時間を1バイトに短縮するための推奨事項は、既存のWordPressホストからCloudwaysに切り替えることです。 彼らは月額たったの10ドルの費用であなたのウェブサイトをエンタープライズレベルのクラウドホスティングでホストすることを可能にする計画を持っています。 クレジットカード番号を入力せずに、3日間無料でプラットフォームを試すことができます（Webサイトのコピーを移行することもできます）。 割引コード「ISOTROPIC」を使用すると、ホスティングの最初の月が30％オフになることもあります。