WordPressでレンダリングブロックリソースを排除する方法（非常に簡単）
レンダリングをブロックするリソースはブロガーにとって大きな悩みの種です。Google はそれらを削除するよう警告し続けています。それらを削除する方法は多数ありますが、ここではコーディングを必要としない非常に簡単な方法を紹介します。
速いブログやウェブサイトを持つことは非常に重要です。 あなたが検索エンジンで上位にランク付けしたいなら、それは重要です。 あなたのウェブサイトが非常に遅い場合、それは間違いなくあなたのSEOを傷つけます。
また、遅いWebサイトはバウンス率を高くする可能性があり、それは多くの点であなたのブランドを技術的に傷つけます。 遅いウェブサイトは収入とコンバージョンに影響を与える可能性があります。
ほとんどのユーザーはせっかちです。サイトの読み込みに時間がかかりすぎると、サイトを放棄して、より高速な代替サイトに移動します。 これは、潜在的な顧客または収益の増加要因です。
ウェブサイトの速度向上を試みていて、Google PageSpeed Insightsなどのテストツールを使用している場合、レンダリングを妨げるリソースを削除するようにという警告が表示される可能性が高いです。
この記事では、レンダリングブロックリソースを簡単に削除する方法を学習します。
レンダリングブロックリソースとは何ですか？
レンダリングブロックリソースはCSSとJavaScriptであり、ページコンテンツをレンダリングする前に、Webブラウザーでダウンロードする必要があるため、Webサイトの読み込み時間を遅くします。
訪問者がWebサイトにアクセスしようとすると、ブラウザはすぐにWebサイトを上から下に読み始めます。 CSSまたはJavaScriptがある場合、ブラウザはファイルをダウンロードして処理するまで読み取りを停止します。 ブラウザが上記のコンテンツをレンダリングする前に、CSSまたはJavaScriptファイルをダウンロードする必要があります。
インストールするプラグインまたはテーマは、それらのCSSおよびJSの一部を追加できます。 最初にロードする必要がなく、後でロードできるものもあります。 しかし、それらは上部にあるため、Webサイトの速度が低下します。
つまり、Googleが「レンダリングをブロックするリソースを排除する」とは、Webサイトのコンテンツの読み込みが遅くなるため、Webサイトの上部から不要なリソースを削除することを意味します。
レンダリングをブロックするリソースを見つける方法
レンダリングを妨げる問題を解決するには、まずその原因を特定する必要があります。Google PageSpeed InsightまたはWeb.Measureでテストを実行することで、どのリソースがレンダリングを妨げているかを調べることができます。
以下の手順に従って、レンダリングブロックリソースを見つけることができます。
1. Google PageSpeed Insightsにアクセスする
2. Webサイトのアドレスを入力し、[分析]をクリックします
3.下にスクロールして、レンダリングをブロックするリソースの警告を削除するかどうかを確認します。
モバイルとデスクトップの両方のタップで確認してください。
BloggingToolsでは、デスクトップ版ではレンダリングがブロックされる問題は発生しませんが、モバイル版では発生します。そのため、ここではモバイル版を例として、以下に示すとおり説明します。
上記のようにモバイルの場合、2つのレンダリングブロッキングの問題があります。 スコアは93でした。スコアはもっと高かったのですが、この投稿のために、Autoptimizeプラグインを非アクティブ化する必要がありました。
BloggingTools.orgは、 GeneratePressという非常に高速で軽量なテーマを使用しているため、最適化を一切行わずにこのスコアを達成しました。また、 Cloudwaysという非常に高速なウェブホスティングサービスを利用しています。
注：PageSpeed Insightsのスコアで100点を取ることにこだわりすぎる必要はありません。これはあくまで目安です。通常、65～80点程度であればほとんどの人にとって問題ありません。ビジネスに不可欠なファイルは削除しないでください。
WordPressの良いところは、すべてを手動で行う必要がないことです。 役立つように適切にコーディングされたプラグインがいくつかあります。
修正方法WordPressのレンダリングブロックリソースの問題を排除する
次の手順に従って、レンダリングブロッキングリソースの問題を修正します。
1.Autoptimizeをインストールしてアクティブ化します
WordPressには、W3 Total CacheやWP Rocketなど、同様の機能を持つプラグインが数多く存在します。しかし、私が多くのウェブサイトで経験してきた限りでは、Autoptimizeはそれらのどれよりもはるかに優れた処理能力を発揮します。さらに素晴らしいのは、AutoptimizeはほぼすべてのWordPressキャッシュプラグインと互換性があり、しかも無料であることです。
WordPressプラグインディレクトリにアクセスして、Autoptimizeをインストールして有効化してください。
2.Autoptimize設定にアクセスします
Autoptimize設定の場所が必要な場合は、WordPressダッシュボードで[設定]をクリックしてから[Autoptimize]をクリックしてください。
3.JavaScriptを最適化する
[JavaScriptオプション]で、[スクリプトコードの最適化]を選択し、[集約JSファイル]も選択します。 BloggingToolsに使用している設定は以下のとおりです。
4.CSSを最適化する
[CSSの最適化]オプションで、[CSSコードの最適化]を選択します。 また、集約CSSファイルと「インラインCSSも集約」を選択します。 以下のBloggingToolsに使用しているオプションを参照してください。
5.HTMLを最適化する
パフォーマンスを向上させたい場合は、Autoptimizeを使用してHTMLを最適化することもできます。 [HTMLオプション]で、[HTMLコードの最適化]を選択します。 以下のBloggingToolsに使用している設定を確認できます。
6.その他のオプションを確認します
その他のオプションを確認し、適切に機能するようにいくつかの設定を微調整できます。 BloggingToolsの設定は以下にあります。
7.キャッシュを保存して空にします。
次に、[保存してキャッシュを空にする]をクリックします。 以上です！
この後、GooglePageSpeedInsightでサイトを再度確認できます。 BloggingToolsの場合、これを行った直後に、スコアが95に跳ね上がり、レンダリングをブロックするリソースを削除するという警告が完全に消えました。 下記参照。
あなたが持っているレンダリングブロックリソースの数とそれらがあなたのサイトにとってどれほど重要であるかに応じて、それらのいくつかが残るかもしれないことに注意してください。 それらを削除しようとしないでください。
さらに削減したい場合は、 Autoptimizeと同じ作者によるプラグインであるAsync JavaScriptを使用できます。これらは連携して動作しますが、サイトが破損する可能性があるため、お勧めしません。Autoptimize単体でも問題ありません。
結論
速度は重要であり、レンダリングをブロックするリソースを排除することで、Webサイトの読み込みを高速化し、速度テストツールでサイトのスコアを向上させることができます。 ただし、これらのスコアはガイドとしてのみ存在するため、これらのスコアに夢中になることはありません。
それでもウェブサイトの速度が遅い場合は、テーマやウェブホスティングサービスに問題があるか、不適切なプラグインがインストールされている可能性があります。ウェブホスティングサービスとしてはCloudways 、テーマとしてはGeneratePressをお勧めします。初心者であればBluehostでも対応できますが、予算に余裕があればCloudwaysが最適です。無料で始めることができます。私はTargetTrendでGeneratePressとCloudwaysを使用しています。
また、お読みください。
関連記事
