WordPress Web サイトの作成を完了し、そのすべてが気に入ったのに、読み込みに時間がかかることに気づいてすぐに嫌いになったことはありませんか? レンダリングをブロックするリソースの除去を習得すると、この問題の診断に役立ちます。 しかし、どのように？

読み込み速度が遅いと、あなたとあなたの訪問者にとって厄介なだけでなく、SEOに関してはかなりの費用がかかる可能性があります。 2010年以来、Googleのアルゴリズムは ランキング決定における読み込み速度を考慮、そのため、遅いページは結果ページの下部に表示されます。

ページ パフォーマンスの低下の一般的な原因として、過剰なコンテンツ、圧縮されていない画像ファイル、不十分なホスティング、キャッシングの欠如などをよく知っているかもしれません。 しかし、見過ごされがちなもう XNUMX つの加害者がいます。それは、リソースのレンダリングをブロックすることです。

誤解しないでほしいのですが、CSS と JavaScript は素晴らしいものです。 CSS がなければ、Web サイトはプレーン テキストの壁になります。 Ja=ooovaScript がなければ、動的でインタラクティブな魅力的な要素を Web サイトに追加することはできません。 しかし、間違ったタイミングで実行すると、CSS と JavaScript の両方が、 ウェブサイトのパフォーマンス.

その理由は次のとおりです。Web ブラウザーが最初に Web ページをロードするとき、ページの HTML をすべて解析してから、訪問者の画面に表示します。 ブラウザーが CSS ファイル、JavaScript ファイル、またはインライン スクリプト (つまり、HTML ドキュメント自体の JavaScript コード) へのリンクを検出すると、HTML の解析を一時停止してコードを取得して実行するため、すべてが遅くなります。

あなたがしている場合 ページのパフォーマンスを最適化 WordPress でまだ問題が発生している場合は、レンダリング ブロック リソースが原因である可能性があります。 このコードは、最初のロードで実行することが重要な場合もありますが、多くの場合、キューの最後まで削除またはプッシュできます。

この投稿では、この厄介なコードをあなたの WordPressのウェブサイト パフォーマンスを向上させます。

ビデオと一緒にフォローしたい場合は、によって作成されたこのウォークスルーをチェックしてください。 WPキャスト:

1. レンダリングをブロックするリソースを特定します。

変更を加える前に、まずレンダリングをブロックするリソースを見つける必要があります。 これを行う最善の方法は、次のような無料のオンライン速度テストを使用することです GoogleのPageSpeedInsightsツール. サイトの URL を貼り付けてクリックします 解析.

スキャンが完了すると、Googleはウェブサイトに0（最も遅い）から100（最も速い）までの総合的な速度スコアを割り当てます。 50から80の範囲のスコアは平均であるため、この範囲の上部またはそれより上に着陸することをお勧めします。

ページの速度を低下させているレンダリング ブロック ファイルを特定するには、下にスクロールして 機会次に開きます レンダリングをブロックするリソースを排除する アコーディオン。

画像ソース

ページの「最初の描画」を遅くしているファイルのリストが表示されます。これらのファイルは、最初のページ読み込み時にブラウザー ウィンドウに表示されるすべてのコンテンツの読み込み時間に影響します。 これは「スクロールせずに見える」コンテンツとも呼ばれます。

拡張子 .css および .js で終わるすべてのファイルに注意してください。これらのファイルに注目する必要があります。

2. レンダリングをブロックするリソースを手動またはプラグインで削除します。

問題を特定したので、WordPressで問題を修正するには、手動とプラグインのXNUMXつの方法があります。 最初にプラグインソリューションについて説明します。

いくつかの WordPress プラグインは、WordPress Web サイトでのレンダリング ブロック リソースの影響を減らすことができます。 ここでは、Autoptimize と W3 Total Cache という XNUMX つの一般的なソリューションについて説明します。

Autoptimize プラグインを使用してレンダリングをブロックするリソースを排除する方法

Autoptimize は、Web サイトのファイルを変更してより高速なページを配信する無料のプラグインです。 自動最適化は、ファイルを集約し、コードを縮小し (つまり、冗長または不要な文字を削除してファイル サイズを縮小する)、レンダリング ブロック リソースの読み込みを遅らせることによって機能します。

サイトのバックエンドを変更しているため、このプラグインまたは同様のプラグインには注意してください。 Autoptimize を使用してレンダリングをブロックするリソースを排除するには:

1. インストールとアクティブ化 Autoptimizeプラグイン。

2. WordPressダッシュボードから、を選択します。 設定>最適化.

3. JavaScriptオプションの横にあるチェックボックスをオンにします JavaScriptコードを最適化しますか？.

4. 隣のボックスの場合 JSファイルを集約しますか？ チェックされている場合は、チェックを外します。

5. CSSオプションの横にあるチェックボックスをオンにします CSS コードを最適化しますか?.

6. 隣のボックスの場合 CSSファイルを集約しますか? チェックされている場合は、チェックを外します。

7. ページの下部にあるをクリックします 変更を保存 & 空のキャッシュ.

8. PageSpeed Insights でウェブサイトをスキャンし、改善を確認します。

9. それでもPageSpeedInsightsがレンダリングをブロックするJavaScriptファイルを報告する場合は、 設定>最適化 の横にあるチェックボックスをオンにします。 JSファイルを集約しますか？ & CSSファイルを集約しますか?。 次に、をクリックします。 変更を保存してキャッシュを空にする 再度スキャンします。

W3 Total Cache Plugin を使用してレンダリングをブロックするリソースを排除する方法

W3合計キャッシュ は、遅延コードに対処するのに役立つ、広く使用されているキャッシュ プラグインです。 W3 Total Cache を使用してレンダリングをブロックする JavaScript を排除するには:

1. W3 TotalCacheプラグインをインストールしてアクティブ化します。

2. 新しい 性能 オプションがWordPressダッシュボードメニューに追加されます。 選択する パフォーマンス > 一般設定。

3. 縮小する セクションの横にあるチェックボックスをオンにします 縮小する、次に設定 縮小モード 〜へ マニュアル.

4. クリック すべての設定を保存します の底に 縮小する のセクションから無料でダウンロードできます。

5. ダッシュボードメニューで、 パフォーマンス>縮小.

6. JS 次のセクション JSは設定を縮小します、確認してください 有効にします ボックスがチェックされています。 次に、 地域での運用、最初に開きます 埋め込みタイプ ドロップダウンから選択 「延期」を使用したノンブロッキング.

7. JSファイル管理、からアクティブなテーマを選択します テーマ ドロップダウン。

8. 以前のスキャンからのPageSpeedInsightsの結果を参照してください。 下の各アイテムについて レンダリングをブロックするリソースを排除する .js で終わる、クリック スクリプトを追加する. 次に、PageSpeed Insights から JavaScript リソースの完全な URL をコピーして、 ファイルURI フィールド。

9. PageSpeed Insightsによって報告されたすべてのレンダリングブロックJavaScriptリソースを貼り付けたら、[ 設定の保存とキャッシュの削除 の底に JS のセクションから無料でダウンロードできます。

10. CSS 次のセクション CSS縮小設定の横にあるチェックボックスをオンにします CSS縮小設定 そして、 縮小方法 に設定されています 結合と縮小.

11. CSS ファイル管理、からアクティブなテーマを選択します テーマ ドロップダウン。

12. 以下の各項目について レンダリングをブロックするリソースを排除する PageSpeed Insights のスキャン結果で末尾が .css になっている場合は、クリックします。 スタイルシートを追加する. 次に、PageSpeed Insights から CSS リソースの完全な URL をコピーして、 ファイルURI フィールド。

13. PageSpeed Insights によって報告されたすべてのレンダリングをブロックする CSS リソースを貼り付けたら、 設定の保存とキャッシュの削除 の底に CSS のセクションから無料でダウンロードできます。

14. PageSpeed Insights でウェブサイトをスキャンし、改善を確認します。

レンダリングをブロックする JavaScript を手動で削除する方法

プラグインはバックエンドの作業を処理できます。 繰り返しますが、プラグイン自体は Web サーバーに追加される単なるファイルです。 これらの余分なファイルを制限したい場合、またはプログラミングを自分で処理したい場合は、レンダリングをブロックする JavaScript に手動で対処できます。

これを行うには、 <script> PageSpeedInsightsスキャンで識別されたリソースのWebサイトファイル内のタグ。 それらは次のようになります。

 
<script src="resource.js">

<script> タグは、ブラウザに、で識別されるスクリプトをロードして実行するように指示します。 SRC （ソース）属性。 このプロセスの問題は、このロードと実行がブラウザによるWebページの解析を遅らせ、全体的なロード時間に影響を与えることです。

画像ソース

これを解決するには、次のいずれかを追加できます。 非同期 （非同期）または 延期する レンダリングをブロックするリソースのスクリプトタグの属性。 非同期 & 延期する そのように配置されます：

 
<script src="resource.js" async>
<script src="resource.js" defer>

これらはロード時間に同様の影響を及ぼしますが、これらの属性はブラウザに異なることを行うように指示します。

　 非同期 属性は、ページの残りの部分を解析しながらJavaScriptリソースをロードするようにブラウザーに通知し、ロードされた直後にこのスクリプトを実行します。 スクリプトを実行すると、HTMLの解析が一時停止します。

画像ソース

のあるスクリプト 延期する ページの解析中に属性もロード​​されますが、これらのスクリプトは、ロードから最初のレンダリング後、またはより重要な部分がロードされるまで遅延されます。

画像ソース

　 延期する & 非同期 属性を同じリソースで一緒に使用しないでください。ただし、一方が他方よりも特定のリソースに適している場合があります。 一般に、必須ではないスクリプトがその前に実行するスクリプトに依存している場合は、次を使用します。 延期するを選択します。 延期する 属性は、スクリプトが先行する必要なスクリプトの後に実行されることを保証します。 それ以外の場合は、 非同期.

3.サイトスキャンを再実行します。

変更を加えた後、PageSpeed Insightsを介してWebサイトの最終スキャンをXNUMX回実行し、変更がスコアにどのような影響を与えたかを確認します。

目立った改善があることを願っていますが、そうでなくても心配しないでください。 多くの要因がページのパフォーマンスを阻害する可能性があり、パフォーマンスの低下の原因を見つけるために、さらに調査を行う必要がある場合があります。

4.Webサイトにバグがないか確認します。

再スキャンに加えて、ページをチェックして、サイトが機能していることを確認してください。 ページは正しく読み込まれますか? すべての要素が表示されていますか? 何かが壊れていたり、正しく読み込まれない場合は、変更を元に戻し、問題をトラブルシューティングしてください。

最小限の速度向上でさまざまな対策を繰り返し試したところに到達した場合は、検討するのが最善かもしれません ページを高速化する他の方法、あなたのサイトを壊す危険を冒すのではなく。

WordPress サイトのパフォーマンスを最適化する

多くの要因がWebサイトでのユーザーエクスペリエンスに影響しますが、読み込み時間より重要なものはほとんどありません。 WordPressサイトのコンテンツや外観に大きな変更を加える場合は常に、そのような変更がパフォーマンスにどのように影響するかを常に考慮する必要があります。

レンダリングをブロックするリソースを排除したので、パフォーマンスを低下させることが知られている他の機能を分析して、Web サイトの速度を引き続き最適化する必要があります。 定期的な速度テストをサイトのメンテナンス スケジュールに組み込むようにしてください。潜在的な問題を先取りすることが成功の鍵となります。

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://blog.hubspot.com/marketing/remove-javascript-rendering-block