WordPress ウェブサイトからレンダリングをブロックするリソースを排除する方法

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

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

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

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

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

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

この投稿では、WordPress Web サイトからこの厄介なコードを排除し、パフォーマンスを向上させる方法を紹介します。

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

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

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

スキャンが完了すると、Google は Web サイトに 0 (最も遅い) から 100 (最も速い) までの合計速度スコアを割り当てます。 50 から 80 の範囲のスコアが平均であるため、この範囲の上位またはそれ以上に到達する必要があります。

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

画像ソース

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

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

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

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

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

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

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

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

1. Autoptimize プラグインをインストールして有効にします。

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

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

4. Aggregate JS-files? の横のボックスががチェックされている場合は、チェックを外します。

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

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

7.ページの下部で、[変更を保存してキャッシュを空にする] をクリックします。

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

9. PageSpeed Insights が引き続き JavaScript ファイルのレンダリングをブロックしていると報告する場合は、 [設定] > [自動最適化] に戻り、[ JS ファイルを集約しますか? ] の横にあるチェックボックスをオンにします。 CSSファイルを集約しますか？ . 次に、[変更を保存してキャッシュを空にする] をクリックし、もう一度スキャンします。

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

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

1. W3 Total Cache プラグインをインストールして有効にします。

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

3. [縮小]セクションで、[縮小] の横にあるチェックボックスをオンにし、 [縮小モード]を [手動] に設定します。

4. [縮小]セクションの下部にある [すべての設定を保存] をクリックします。

5.ダッシュボード メニューで、[パフォーマンス] > [縮小] を選択します。

6. [ JS minify settings]の横にある [ JS ] セクションで、[有効にする] ボックスがオンになっていることを確認します。 次に、 Operations in areasで、最初のEmbed typeドロップダウンを開き、 Non-blocking using “defer” を選択します。

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

8.以前のスキャンからの PageSpeed Insights の結果を参照します。 [.js で終わるレンダリング ブロック リソースを削除する] の下の各項目について、[スクリプトを追加] をクリックします。 次に、JavaScript リソースの完全な URL を PageSpeed Insights からコピーして、 [ファイル 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セクションの下部にある [ Save Settings & Purge Caches]をクリックします。

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

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

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

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

 
<script src="https://blog.hubspot.com/marketing/resource.js">

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

画像ソース

これを解決するには、レンダリング ブロック リソースのスクリプト タグにasync (非同期) またはdefer属性を追加します。 asyncとdeferは次のように配置されます。

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

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

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

画像ソース

defer属性を持つスクリプトも、ページの解析中に読み込まれますが、これらのスクリプトは、最初のレンダリングの後、またはより重要な部分が読み込まれるまで読み込みが遅れます。

画像ソース

defer属性とasync属性を同じリソースで一緒に使用することはできませんが、特定のリソースには一方が他方よりも適している場合があります。 一般に、重要でないスクリプトがその前に実行するスクリプトに依存している場合は、 deferを使用します。 defer属性は、スクリプトが前の必要なスクリプトの後に実行されることを保証します。 それ以外の場合は、 asyncを使用します。

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

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

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

4. Web サイトのバグをチェックします。

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

最小限の速度向上でさまざまな手段を繰り返し試した場合は、サイトを破壊する危険を冒すよりも、ページを高速化する他の方法を検討することをお勧めします。

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

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

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