ウェブパフォーマンスにおいて重要な要素の一つは、レンダリングを妨げるリソースを排除することです。レンダリングを妨げるリソースはページのレンダリングを遅延させ、JavaScriptやCSSファイルなどが含まれることがあります。これらのリソースは、ブラウザがページのレンダリングを開始する前に読み込まれなければなりません。これには、外部のCSSファイルやJavaScriptファイルなど、ブラウザがページを表示する際の遅延を引き起こす可能性のあるものすべてが含まれます。.
ページの表示を正しくするためにCSSファイルなど、レンダリングを妨げるリソースの中には必要なものもありますが、最適化したり削除したりできるものもあります。ウェブサイトの読み込み速度を最大限に高めるには、レンダリングを妨げるリソースを特定し、可能な限り最小限に抑えるか削除することが不可欠です。Pag eSpeedツール。
レンダリングをブロックするリソースを識別するにはどうすればよいでしょうか?
ウェブサイトのパフォーマンスを改善しようとすると、「レンダリングをブロックするリソース」という用語を目にすることがあるかもしれません。これは、ブラウザがページのレンダリングを開始する前に読み込まれる必要があるリソースを指します。通常、これには外部のCSSファイルやJavaScriptファイルが含まれます。.
使用する と、レンダリングをブロックしているリソースを特定。Chromeでウェブサイトを読み込み、開発者ツールを開きます。「カバレッジ」タブをクリックし、「キャッシュを無効にする」オプションがオンになっていることを確認してください。これにより、ウェブサイトの最新バージョンが表示されるようになります。
ウェブサイトをリロードしてください。開発者ツールには、ページのレンダリング時に読み込まれたすべてのリソースのリストが表示されます。 赤い線 表示されているリソースを探してください。これらはレンダリングをブロックしているリソースです。
WordPress でレンダリングをブロックするリソースを排除する 3 つの方法
WordPress でこれを行うにはいくつかの方法があります。.
方法1:
1つは 重要なCSSをインライン化する。これは、外部スタイルシートを呼び出す代わりに、CSSコードをHTMLファイルに直接埋め込むことを意味します。これは、ページ数が少ない小規模なWebサイトでは効果的ですが、大規模なWebサイトでは実用的ではありません。レンダリングを妨げるリソースを特定したら、それらを削除するかインライン化する必要があります。インライン化とは、リソースをコードに直接埋め込むことで、別途読み込む必要がないようにすることです。これは、JavaScriptファイルとCSSファイルで行うことができます。Flyingpress 、WP Rocket、Swift Performance、 LiteSpeed Cache 使用すると、これを自動化できます。
方法2:
を用いることで実現できます 非同期読み込み技術、ドキュメントの解析後にJavaScriptファイルを読み込む、あるいはdefer属性を使用するといった
方法3:
最後に、各ページに必要なリソースの数を減らすことも試してみてください。これは、複数のCSSファイルやJavaScriptファイルを1つのファイルにまとめたり、読み込み速度の速い小さな画像を使用したりすることを意味します。レンダリングを妨げるリソースの数を減らすことで、ウェブサイトの読み込み速度を大幅に向上させ、訪問者に優れたユーザーエクスペリエンスを提供できます。コードの扱いに慣れるまでに時間がかかる場合は、 AutoptimizeやWPRocket など
場合によっては、ウェブサイトが正しく機能するためにレンダリングをブロックするリソースが必要になることがあります。このような場合は、読み込み速度を向上するために最適化する方法を見つける必要があります。.
まとめ
上記のアドバイスに従った場合、ウェブサイト上のレンダリングを妨げるリソースのほとんど、あるいはすべてが解消されているはずです。それでも問題が解決しない場合は、弊社のプロフェッショナルな WordPress速度最適化サービスをご利用ください。ウェブサイトのパフォーマンスと速度を向上させるお手伝いをいたします。これは、高品質でユーザーフレンドリーなウェブサイトを作成する上で不可欠です。
サーバー応答時間、ファイルサイズ、コード品質など、ウェブサイトのパフォーマンスに影響を与える要因は他にもあることを覚えておいてください。しかし、レンダリングを妨げるリソースを排除することは、ウェブサイトの速度とパフォーマンス、そして Core Web Vitalsの 評価を向上させるための優れた方法です。
