Lighthouse を介して Web サイトを実行している場合、レンダリングをブロックするリソースを削除するよう提案されていることに気付いたかもしれません。
JavaScript を遅らせ、重要な CSS スタイルをインラインに配置することで、レンダリングを遅くする WordPress のリソースを取り除くことができます。 これは、ほとんどのキャッシュ プラグイン、Autoptimize、および Async JavaScript でサポートされています。 ElementorとDiviの両方に、遅延 CSS とインライン CSS を使用して、ページのレンダリングを停止するリソースを取り除く方法が組み込まれています。 不要な CSS、JavaScript、およびサードパーティ コードを削除することも解決に役立ちます。
この記事では、レンダリングをブロックするリソースを定義し、それらを Web サイトから取り除くことの利点について説明します。 次に、それらを取り除くための 5 つの代替方法を紹介します。
レンダリング ブロッキング リソース? とは
レンダリングをブロックするリソースを詳しく調べる前に、一般的な Web サイトの読み込みプロセスを理解することが重要です。 Web サイトのコンテンツ全体は、訪問者がリンクをクリックした後、訪問者のブラウザーによってレンダリング (またはダウンロード) される必要があります。 Web サイトのすべての HTML、CSS、および JavaScript を上から下に読み取ります。 ブラウザがこのスクリプト キューの読み取りを完了するまで、Web サイトは訪問者に表示されません。 レンダリングをブロックするリソースがある場合、長時間待機する必要がある場合があります。 基本的に、処理中にブラウザーが他のコンテンツを読み込めないようにする CSS または JavaScript ファイルは、レンダリングをブロックするリソースです。 これにより、レンダリング プロセスが停止し、ページが未完成または空白に見える可能性があります。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始めるWeb サイトにレンダリングをブロックするリソースがある場合、余分なファイルがコードの先頭に読み込まれます。 Web サイトを表示する前に、ユーザーはこれらのファイルが処理されるまで待つ必要があります。 レンダリングをブロックするリソースは、いくつかの Web サイトのパフォーマンス指標に影響を与える可能性があります。 たとえば、最大のコンテンツ ペイントは、ページの主要なコンテンツの読み込みにかかる時間を測定します。 サイトのドキュメント オブジェクト モデル (DOM) のマテリアルがブラウザーによって初めてレンダリングされることは、最初のコンテンツ ペイントと呼ばれます。 Totalblockingtime は、最初のコンテンツ ペイントからインタラクションまでの時間 (ページが完全にインタラクティブになるまでの時間) です。
ロードには必要ありませんが、レンダリングをブロックするリソースはレンダリングを妨げる可能性があります。 その結果、Web サイトのユーザー エクスペリエンス (UX) が損なわれる可能性があります。 そのため、訪問者がページを離れるのを防ぐために、これらを取り除くことが重要です。
レンダリングをブロックするリソースを排除する利点
一般に、インターネット ユーザーは Web サイトが読み込まれるのを待つことを嫌います。 素早い Web サイトは、ユーザーをあなたの資料を探索するように誘導し、ライバルを訪問させないようにすることができます。 レンダリングをブロックする要素を削除することで、Web サイトのコードを効果的に可能な限り軽くすることができます。 サイトのパフォーマンスとユーザー エンゲージメントは、Google のような検索エンジンの巨人が Web サイトを評価する際に考慮する 2 つの要素であるため、レンダリング ブロック ファイルを削除すると、サイトの検索エンジンのランキングを上げることができます。
WordPress でレンダリングをブロックするリソースを排除する方法
WordPress でレンダリングをブロックする要素を見つける方法を理解したところで、Web サイトからレンダリングをブロックする要素を削除する方法を知りたいと思うかもしれません。 幸いなことに、最も単純なものから始めて、これを達成するために使用できる多くのアプローチのリストをまとめました.
CSS の読み込みを最適化する
Web サイトでの CSS の読み込み速度を上げることは、レンダリングをブロックするリソースを取り除く 1 つの手法です。 前述のように、ブラウザーは Web ページを上から下に読み込みます。 これにより、特定のファイルを処理する必要がある場合に、ロード プロセスに時間がかかる場合があります。 ページを表示するには、一部の CSS ファイルのみを読み込む必要があることを覚えておくことが重要です。 したがって、CSS の読み込みを最適化すると、最も重要なファイルを最初に表示できます。 レンダリングをブロックする CSS は手動で削除できますが、プラグインをインストールして簡単にすることもできます。 Jetpack Boost を使用して、WordPress ダッシュボードから直接ウェブサイトを最適化できます。 このプラグインにより、遅延読み込みの実装、必須ではない JavaScript の延期、CSS 読み込みの改善が簡単になります。 WordPress でレンダリングをブロックするリソースを取り除く最も簡単な方法の 1 つは、これを行うことです。
まず、WordPress ダッシュボードの Plugins Add New で Jetpack Boost を検索します。 ウェブサイトにプラグインをインストールして有効にします。
Jetpack が既に読み込まれている場合は、Jetpack My Jetpack に移動できます。 Boostを探し、JetpackグッズのリストからActivateを選択します。
プラグインが有効化されたら、[Jetpack Boost] タブをクリックし、[開始する] を選択します。
あなたのウェブサイトは、Jetpack から即座にパフォーマンス評価を受けます。 デスクトップとモバイルのスコアに関する情報とともに文字の成績が表示されます。
次に、CSS の読み込みを最適化するまで下にスクロールして、この機能を有効にします。 有効にすると、Jetpack Boost はウェブサイトの重要な CSS を上げて、読み込みを高速化します。
必須ではない JavaScript を延期する
CSS の読み込みを最適化するだけでなく、WordPress のレンダリングをブロックするリソースを取り除くために、より多くの対策を講じることができます。 必須ではない JavaScript も延期して、Web サイトの読み込みをさらに高速化できます。 コンテンツが読み込まれるまで一部のプロセスを遅らせるために、必須ではない JavaScript を遅らせることができます。 ページの読み込みに JavaScript ファイルが必要ない場合は、ブラウザーによる JavaScript ファイルの実行を停止できます。 幸いなことに、Jetpack Boost プラグインを使用すると、これを簡単に行うことができます。 CSS 読み込みプロセスを最適化した後、重要でない JavaScript を簡単に延期できます。 [必須ではない JavaScript を延期] 領域のトグル スイッチをオンに切り替えます。 このセクションは、CSS 読み込みの最適化セクションの下にあります。
この設定を有効にすると、プラグインはページの全体的なパフォーマンスの評価を更新します。 Jetpack Boost の使用前後のスコアが表示されます。
このプロセスを完了する前と後に撮影したスクリーンショットのスコアを見てください。 重要でない JavaScript を遅らせ、CSS をより効率的にロードすることによって、ページ速度の向上が達成されたことに気付くでしょう。 ブラウザーは、大きなスクリプトを実行する必要がないため、コンテンツをより迅速に読み込むことができます。
画面外の画像を延期する
画像はページのレンダリングを妨げるリソースではありませんが、読み込み時間を短縮することを検討することをお勧めします。 Web サイトには、スクロールなど、ユーザーがページを操作するまで表示されない画面外の画像がよくあります。 これらは Web ページの読み込みに必要ないため、遅延読み込みで延期できます。 訪問者が見ることができる画像のみが遅延して読み込まれます。 これらの写真は、ユーザーがスクロールすると、ページに表示される直前に読み込まれます。 遅延読み込みが有効になっていない場合、ブラウザはページ上のすべての画像を一度に読み込もうとします。 素材の読み込みに時間がかかるほど、訪問者がサイトを離れる可能性が高くなります。
訪問者がデスクトップ コンピューターを使用している場合、定期的な読み込みは問題にならない場合があります。 一方、スマートフォンやタブレットは画面が小さく、帯域幅が狭くなります。 Web サイトが一度にすべての写真を完全に読み込むと、より多くの帯域幅を消費し、携帯電話ユーザーの読み込みに時間がかかる場合があります。 この問題は、遅延読み込みによって解決されます。
サイトで遅延読み込みを有効にするには、Jetpack Boost を利用します。 Lazy Image Loading オプションを探して有効にするだけです。
これを行うと、ビューアーは、ページを下にスクロールしたときにのみ、Web サイトに読み込まれた画像を確認できます。 写真はブロックをレンダリングするリソースではありませんが、遅延読み込みを有効にするとページを高速化できます。
Elementor/Divi を使用してレンダリングをブロックするリソースを排除する
ElementorとDiviの両方に、レンダリングを妨げるリソースを削除するためのオプションが含まれています。
Elementor Experiments 設定で改善された CSS 読み込みと Font-Awesome Inline を有効にして、CSS とフォントをインラインで読み込み、非レンダリング ブロックにします。 改善されたアセットの読み込みにより、不要な CSS/JavaScript が排除され、さまざまな方法で基本的な Web の重要性が改善されます。
重要な CSS を適用し、CSS/JavaScript を延期し、フォントをインラインで読み込むことにより、 Diviのパフォーマンス オプションは、レンダリングをブロックするリソースを削減することもできます。
レンダリングをブロックする JavaScript を手動で削除する
レンダー ブロック リソースを手動で削除することもできますが、最適化プラグインをインストールする方がはるかに簡単なオプションです。 理想的には、経験豊富なコーダーである場合にのみ、この選択について考える必要があります。 Web サイトのプラグインの数を減らしたい場合は、この手順も役立ちます。 JavaScript をより効率的に実行できるように、ファイルに async または defer プロパティを与えることができます。 ブラウザーは、重要でないスクリプトをそのようにマークすることによって、それらを個別にレンダリングするように指示されます。 両方の特性を使用して、HTML 情報の読み込みを高速化できます。
HTML ファイルは、スクリプト ファイルに到達するまで、通常の方法で解析されます。 スクリプトを見つける間、解析は停止します。 ダウンロードして実行した後、解析が続行されます。
残りの HTML を処理している間、ブラウザは非同期機能のおかげで JavaScript をダウンロードできます。 ダウンロード後、HTML 処理を停止し、スクリプトを実行できます。
defer 属性も同様に機能し、ブラウザが HTML を解析しながらスクリプトをダウンロードできるようにします。 違いは、HTML 解析が完了するまでスクリプトの実行を遅らせることです。
これらのプロパティのいずれかを実装するには、functions.php ファイルにコードを含める必要があります。 最初に、レンダリング ブロック リソースの script> タグを見つける必要があります。 非同期属性として次を指定します。
<script src="resource.js" async></script>別の方法として、defer プロパティを使用した場合にスクリプトがどのように見えるかを考えてみましょう。
http://resource.jsプラグインはこれらの属性を処理できますが、自分で行うと、好みにより適したものになる可能性があります. その場合、各属性をいつ適用するかを理解することが重要です。 別のスクリプトに依存する重要でないスクリプトには、defer プロパティを使用する必要があります。 async オプションは、その他のスクリプトに適しています。
プラグインで async または defer 属性を適用する
スクリプトを手動で編集する際に問題がある場合は、Async JavaScript などのプラグインを使用してください。 このツールのおかげで、どのスクリプトが async または defer プロパティを持つかを完全に制御できます。
プラグインがインストールされたら、[非同期 JavaScript の設定] で [非同期 JavaScript を有効にする] を選択します。
次に、Async JavaScript メソッドというタイトルのセクションに移動します。 ここで、async を有効にするか、属性を延期するかを選択できます。
多くのプラグインは jQuery に依存しているため、これらのスクリプトを除外することをお勧めします。 jQuery に非同期プロパティを適用すると、Web サイトが壊れる可能性があります。
疑わしい場合は defer 属性を利用できますが、jQuery を完全に除外することが最善の方法です。
非同期または遅延で実行するスクリプトを指定できるようになりました。 各スクリプトを適切なセクションに配置するように注意する必要があります。
[スクリプトの除外] セクションで、この手順から除外するスクリプトを一覧表示できます。
ページの下部には、プラグインとテーマを除外するオプションもあります。 ここで言及するテーマまたはプラグインのスクリプトは、非同期または遅延特性には適用されません。
必要な調整を行った後、[設定を保存] をクリックできます。 このアプローチは、スクリプトを手動で変更することと、プラグインを使用してタスクを処理することとの間の便利な妥協点になる可能性があります。 別の方法として、Jetpack Boost などのオールインワン アプリケーションを使用して、これらの余分な手順を省略できます。
まとめ
ビジターのブラウザーがスクロールせずに見えるコンテンツのレンダリングを延期し、すぐには必要のないアセットをダウンロードすることで、レンダリングをブロックするリソースは、WordPress サイトの知覚されるページ読み込み時間を増加させます。 訪問者がページの表示可能な領域をより迅速にロードできるように、すぐに必要でないリソースのロードを遅らせる必要があります。 事前に作成されたプラグインを使用して、WordPress のレンダリング ブロック リソースを取り除きます。 同じ開発者が作成した 2 つのプラグインである Autoptimize と Async JavaScript を組み合わせて、費用のかからないソリューションを実現できます。 お金を払う準備ができている場合は、Kinstaとの特定の相互作用を提供し、多くの追加のWordPressパフォーマンス調整を支援できるWP Rocketを利用できます.
