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