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

レンダリングをブロックするリソースはブロガーにとって大きな悩みの種です。Google はそれらを削除するよう警告し続けています。それらを削除する方法は多数ありますが、ここではコーディングを必要としない非常に簡単な方法を紹介します。

速いブログやウェブサイトを持つことは非常に重要です。 あなたが検索エンジンで上位にランク付けしたいなら、それは重要です。 あなたのウェブサイトが非常に遅い場合、それは間違いなくあなたのSEOを傷つけます。

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

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

あなたがあなたのウェブサイトをスピードアップしようとしていて、あなたがグーグルのようなテストツールを使うならば PageSpeedインサイト、発生する可能性のある警告のXNUMXつは、レンダリングをブロックするリソースを削除することです。

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

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

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

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

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

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

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

レンダリングブロッキングの問題を解決する前に、それがどこから来ているのかを知る必要があります。 でテストを実行すると、レンダリングがブロックされているリソースを見つけることができます Google PageSpeed インサイト or Web.Measure。

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

1。 訪問 Google PageSpeed インサイト

2. Webサイトのアドレスを入力し、[分析]をクリックします

3.下にスクロールして、レンダリングをブロックするリソースの警告を削除するかどうかを確認します。

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

PageSpeed Insight Desktop
BloggingToolsの場合、デスクトップに100がありますが、幸いなことに、レンダリングのブロックの問題はありません。

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

PageSpeed Insight Mobile score
PageSpeed Insight mobile
モバイル向けに2つの問題があります

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

BloggingTools.orgは、非常に高速で軽量なテーマを使用しているため、最適化なしでこのスコアを達成しました。 GeneratePress。 また、として知られている非常に高速なウェブホストでホストしています 曇り.

Note:PageSpeedインサイトスコアで100を取得することに夢中になってはいけません。 単なるガイドです。 通常、65から80の平均スコアはほとんどの人にとって問題ありません。 あなたのビジネスに不可欠なファイルを削除しないでください。

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

修正方法WordPressのレンダリングブロックリソースの問題を排除する

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

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

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

WordPressプラグインディレクトリに移動して Autoptimizeをインストールしてアクティブ化します

2.Autoptimize設定にアクセスします

Autoptimize設定の場所が必要な場合は、WordPressダッシュボードで[設定]をクリックしてから[Autoptimize]をクリックしてください。

3.JavaScriptを最適化する

[JavaScriptオプション]で、[スクリプトコードの最適化]を選択し、[集約JSファイル]も選択します。 BloggingToolsに使用している設定は以下のとおりです。

Autoptimize JavaScript

4.CSSを最適化する

[CSSの最適化]オプションで、[CSSコードの最適化]を選択します。 また、集約CSSファイルと「インラインCSSも集約」を選択します。 以下のBloggingToolsに使用しているオプションを参照してください。

Autoptimize CSS

5.HTMLを最適化する

パフォーマンスを向上させたい場合は、Autoptimizeを使用してHTMLを最適化することもできます。 [HTMLオプション]で、[HTMLコードの最適化]を選択します。 以下のBloggingToolsに使用している設定を確認できます。

Autoptimize HTML

6.その他のオプションを確認します

その他のオプションを確認し、適切に機能するようにいくつかの設定を微調整できます。 BloggingToolsの設定は以下にあります。

Autoptimize Misc options

7.キャッシュを保存して空にします。

次に、[保存してキャッシュを空にする]をクリックします。 以上です!

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

Google PageSpeed Insight mobile
Google PageSpeed Insight Mobile score

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

さらに排除したい場合は、 非同期JavaScript、Autoptimizeと同じ作者によるプラグイン。 彼らは一緒に働きます。 サイトが破損する可能性があるため、これはお勧めしません。 最適化だけでも大丈夫です!

まとめ

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

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

また、お読みください。

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

ブログへのトラフィックを増やす方法

お金のブログを作る方法

ブログを始めるには

Mfon Abel Ekene

ムフォン・アベル・エケネ

役立つコンテンツを作るのが楽しいです。 私の情熱は、インターネット人口が正しい方向に向けることによって、彼らが必要とするものを見つけるのを助けることです。 それは私が行うのが大好きなことであり、TargetTrendのコンテンツを通じてそれを確実に実行するために、何時間もの調査とテストを行いました。

記事:48

技術者のものを受け取る

技術トレンド、スタートアップトレンド、レビュー、オンライン収入、Webツール、およびマーケティングを月にXNUMX〜XNUMX回

コメントを残す

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *