レンダリングを妨げるリソースとは？

レンダーブロッキングリソースとは、ブラウザがそれらを完全にダウンロードして処理するまで、ページのレンダリングを妨げるCSSやJavaScriptファイルのことです。

レンダー・ブロック・リソースの影響

LCPはページ上の最大の要素が表示されるまでの時間を測定し、FCPはコンテンツの最初の部分が表示されるまでの時間を測定します。サイトの総ブロック時間が長すぎると、ブラウザがこれらのリソースをダウンロードして処理するのに時間がかかり、LCPとFCPの時間が遅くなります。DOMのサイズが大きくなることも、問題の原因になります。

ウェブサイトのレンダリング・ブロッキングの問題を分析するには？

1.グーグル・ページスピード・インサイトの利用

これは、デスクトップとモバイルデバイス上のウェブページのパフォーマンスを分析する無料のオンラインツールです。ウェブサイトのURLを入力し、"分析済み"ボタンをクリックすると、パフォーマンス指標（FCPやTTIなど）と改善案が表示されます。

2.Chrome DevToolsを使う

Chrome DevToolsはGoogle Chromeに内蔵されている開発者向けツールで、ウェブサイトのパフォーマンスを分析・最適化するのに役立ちます。このツールは、"敷地面積「タブと"滝"をクリックすると、どのセクションがロードされ実行されているか、またコードの未使用セクションを見ることができる。

レンダー・ブロッキング・リソースをなくすには？

1.CSSファイルとJavaScriptファイルを圧縮する

スペース、コメント、不要なコードを削除してファイルサイズを縮小します。以下のプラグインが使用できます：

• WPロケット

• 自動最適化

• WPスーパーミニファイ

2.非同期ローディングの実装

非同期ロードは複数のリソースを同時にロードすることができ、ブロック時間を短縮することができます。推奨プラグイン：

• WPロケット
• 自動最適化
• フライングスクリプト

3.JavaScriptの読み込み遅延

ページが完全に読み込まれるまで、重要でないJavaScriptファイルの読み込みを遅らせる。

推奨プラグイン

• WPロケット
• パーフマターズ

4.クリティカルCSSによるCSS配信の最適化

重要なCSSのインラインロードと、重要でないCSSの遅延ロード：

• WPロケット
• 自動最適化
• フライングスクリプト
• WP圧縮

• 資産クリーンアップ
• パーフマターズ

5.使用していないCSSとJavaScriptの削除

ファイルサイズを小さくするために未使用のコードを削除する。推奨プラグイン

• パーフマターズ
• WPロケット
• WP圧縮
• 資産クリーンアップ

レンダー・ブロッキング・リソースを修正する際によくある問題はどのように修正すればいいのか？

1.jQueryとWordPressを扱う

サイトの問題を防ぐため、jQueryファイルの読み込みを遅らせたり、延期したりすることは避けてください。

2、スタイルなしコンテンツ（FOUC）のちらつき問題の解決

メディア・プロパティを使用して、必要なときだけCSSファイルを読み込んだり、重要でないCSSファイルの読み込みを遅らせたりします。パフォーマンスを向上させるために、画像やその他のメディアの読み込みを遅らせます。

パフォーマンスの監視と維持

定期的なパフォーマンス監査を実施し、ロード時間と SEO ランキングを特定し、最適化する。GTmetrix や DebugBear のようなツールを使用して、継続的な改善戦略を監視し、実施する。

概要

ウェブサイトのパフォーマンスを定期的にテストし監視することで、さまざまなデバイスやブラウザでウェブサイトが迅速に読み込まれるようになり、ユーザーエクスペリエンスと検索エンジンのランキングが向上します。継続的な学習と最適化により、ウェブサイトは常に最高の状態に保たれます。