WordPress でレンダリングをブロックするリソースを排除する方法 (非常に簡単)

高速なブログやウェブサイトを持つことは非常に重要です。 検索エンジンで上位表示させたい場合は重要です。 ウェブサイトの速度が非常に遅い場合、SEO に悪影響を与えることは間違いありません。

また、ウェブサイトが遅いと直帰率が高くなり、多くの点で技術的にブランドに損害を与える可能性があります. 遅いウェブサイトは、収入とコンバージョンに影響を与える可能性があります。

ほとんどのユーザーはせっかちです。サイトの読み込みに時間がかかりすぎると、サイトを放棄して、より高速な代替手段に移動します。 それは、潜在的な顧客または収益ブースターがなくなったことです。

Web サイトの速度を上げようとしていて、Google PageSpeed Insight などのテスト ツールを使用している場合、レンダリングをブロックするリソースを排除するようにという警告が表示される可能性があります。

この記事では、レンダリングをブロックするリソースを簡単に排除する方法を学びます。

レンダリングをブロックするリソースとは何ですか?

レンダリングをブロックするリソースは、ページ コンテンツがレンダリングされる前に Web ブラウザーによってダウンロードされる必要があるため、Web サイトの読み込み時間を遅くする CSS および JavaScript です。

訪問者が Web サイトにアクセスしようとすると、ブラウザーはすぐに Web サイトを上から下に読み始めます。 CSS または JavaScript がある場合、ブラウザはファイルをダウンロードして処理するまで読み取りを停止します。 ブラウザーがスクロールせずに見えるコンテンツをレンダリングする前に、CSS または JavaScript ファイルをダウンロードする必要があります。

インストールするプラグインまたはテーマは、これらの CSS および JS の一部を追加できます。 最初にロードする必要がなく、後でロードできるものもあります。 ただし、それらは上部にあるため、Web サイトの速度が低下します。

したがって、Google が「レンダリングをブロックするリソースを排除する」とは、Web サイト コンテンツの読み込みが遅くなるため、Web サイトの上部から不要なリソースを削除することを意味します。

レンダリングをブロックするリソースを見つける方法

レンダー ブロッキングの問題を解決する前に、その原因を知る必要があります。 Google PageSpeed Insight または Web.Measure でテストを実行すると、レンダリングをブロックしているリソースを見つけることができます。

以下の手順に従って、レンダリング ブロック リソースを見つけることができます。

1. Google PageSpeed インサイトにアクセス

2. ウェブサイトのアドレスを入力し、分析をクリックします

3. 下にスクロールして、「remove render-blocking resources」という警告を探します。

モバイルとデスクトップの両方のタップで確認してください。

BloggingTools の場合、デスクトップではレンダリング ブロックの問題はありませんが、モバイルでは発生します。 このため、以下に示すようにモバイルを使用します。

上記のように、モバイルの場合、2 つのレンダリング ブロックの問題があります。 スコアは 93 でした。スコアは高くなりましたが、この投稿のために、Autoptimize プラグインを無効にする必要がありました。

BloggingTools.org は、GeneratePress という非常に高速で軽量なテーマを使用しているため、最適化なしでこのスコアを達成しました。 また、Cloudways として知られる非常に高速な Web ホストでもホスティングしています。

注: PageSpeed インサイト スコアで 100 を獲得することに執着するべきではありません。 あくまでも目安です。 通常、65 から 80 の平均スコアは、ほとんどの人にとって問題ありません。 ビジネスに不可欠なファイルは削除しないでください。

WordPress の良いところは、すべてを手動で行う必要がないことです。 適切にコーディングされたプラグインがいくつかあります。

WordPress でレンダリング ブロック リソースの問題を解決する方法

次の手順に従って、レンダリング ブロック リソースの問題を解決します。

1. Autooptimize をインストールしてアクティブ化する

W3 トータル キャッシュ、WP Rocket など、これを実行できる WordPress プラグインは多数あります。 しかし、多くの Web サイトでの私の経験から、Autoptimize は常に、どの Web サイトよりもはるかにうまく処理します。 すばらしいことに、Autoptimize はほぼすべての WordPress キャッシュ プラグインと互換性があり、しかも無料です。

WordPress プラグイン ディレクトリに移動して、Autoptimize をインストールして有効にします。

2.自動最適化設定にアクセスします

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. キャッシュを保存して空にします。

次に、[保存してキャッシュを空にする] をクリックします。 それだけです！

このすべての後、Google PageSpeed Insight でサイトを再度確認できます。 BloggingTools の場合、これを行った直後にスコアが 95 まで跳ね上がり、レンダリング ブロック リソースの削除に関する警告がすべて完全に消えました。 下記参照。

レンダリングをブロックするリソースの数と、それらがサイトにとってどれほど重要かによっては、それらのいくつかが残っている可能性があることに注意してください. それらを削除しようとしないでください。

さらに排除したい場合は、Autoptimize と同じ作者によるプラグインである Async JavaScript を使用できます。 彼らは一緒に働きます。 サイトが壊れる可能性があるため、これはお勧めしません。 自動最適化だけでOK！

結論

速度は重要であり、レンダリングをブロックするリソースを排除すると、Web サイトの読み込みが速くなり、速度テスト ツールでサイトのスコアが向上します。 ただし、これらのスコアはガイドとしてのみ使用されるため、これらのスコアに執着する必要はありません。

この後もウェブサイトがまだ非常に遅い場合。 最も可能性の高い 3 つの問題は、テーマまたは Web ホストが不良であるか、不適切なプラグインがインストールされていることです。 Coudwaysを最高の Web ホストとして、 GeneratePressを最高のテーマとしてお勧めします。 あなたが初心者ならBluehostで対処できますが、余裕があるならCloudwaysが最適です. 無料で始められます。 TargetTrend には GeneratePress と Coudways を使用しています

また読む：

WordPressを非常に高速にする方法

ブログにトラフィックを誘導する方法

ブログでお金を稼ぐ方法

ブログの始め方