このページで: [隠れる]
Vodafone がイタリアのサイトでレンダリングをブロックする JavaScript を削減したとき, 最大のコンテンツフルペイントがドロップされました 31% そして売上も上がった 8%. それは誤差の範囲の微調整ではありません. 1 つの技術修正から得られる収益は目に見えています. すべての WordPress サイトで同じ最適化を利用できます。, ほとんどのインストールでは、単一のプラグイン切り替えの背後に存在します。.
簡単な回答: パフォーマンスプラグインをインストールします “JavaScriptの遅延” と “CSS配信の最適化” 特徴 (フライングプレス, WPロケット, または LiteSpeed サーバー用の LiteSpeed Cache), 両方を有効にする, その後、PageSpeed Insights で再テストします. 為に 90% WordPress サイトの, その 1 ステップで警告が解除されます. このガイドの残りの部分では、そうでない場合の対処方法について説明します.
最終レビュー済み: 4月 2026. 現在のプラグイン バージョンでテストされ、PageSpeed Insights に対して検証済み 2026 得点.
何 “レンダリングのブロック” 実際の意味 (なぜお金がかかるのか)
ブラウザは、CSS または JavaScript ファイルにアクセスした瞬間にピクセルの描画を停止します。 <頭>. ファイルのダウンロードと実行が完了するまで、画面には何も表示されません. 5 つのレンダリング ブロック ファイルをヘッドにスタックする, それぞれ 100 ～ 300ms の遅延が追加されます, 訪問者は何も表示される前に 1 秒以上白い画面を見つめます。.
その白い画面には値段がある. 最大の満足のいくペイント (LCP) Google がランキングに使用する 3 つのコア ウェブ バイタルの 1 つ, レンダリング ブロック リソースは、定義上、それを後でプッシュします。. あなたのものが終わったら 2.5 秒, Google はページを次のように扱い始めます “貧しい。” 1.5 秒未満の LCP を持つ競合他社は、コンテンツが弱い場合でもコマース クエリで上位にランクされます.
Google のケーススタディでは、 5-15% サイトが移動するときの範囲 “貧しい” に “良い” LCPについて. そのため、これは、展開後の最初の 1 か月で元が取れる数少ない SEO 雑務の 1 つです。.
初め, 実際にレンダリングをブロックしているものを特定する
何を修正すべきかがわかるまで修正を開始しないでください. 3 つのツールで 1 分以内に答えが得られます:
PageSpeed Insights (公式のもの)
- pagespeed.web.dev に移動します
- URL を貼り付けて監査を実行します
- までスクロールして、 診断 セクション
- 拡大 “レンダリングをブロックするリソースを排除する”
- CSS ファイルと JS ファイルのリストとそのサイズ、各ファイルにかかる費用のミリ秒が表示されます。
リストはあなたのヒットリストです. 通常、上位のエントリはテーマ CSS です, jQuery, および 1 つまたは 2 つの重いプラグイン (スライダー, ページビルダー, 分析).
Chrome DevTools (自由, リアルタイム)
ページを右クリックします, 検査を選択, 次に、 パフォーマンス タブ. ヒット記録, リフレッシュする, 停止. タイムラインには、最初のペイントをブロックするリソースが正確に表示されます。. DevTools は、自分の訪問を診断する場合、PageSpeed Insights よりも正確です, 実際の接続を使用するため.
ここであまり活用されていないツールは、 「カバレッジ」タブ. Cmd+Shift+P を押します (Windows では Ctrl+Shift+P), タイプ “カバレッジ,” Enterを押す, それからリロードしてください. すべての CSS および JS ファイルに実際の実行量の注釈が付けられていることがわかります. 表示中のファイル 80%+ 未使用は明らかなカットです. ほとんどの WordPress サイトには、次のようなスタイルシートが少なくとも 1 つあります。 90% 未使用バイトが各ページにロードされる.
ウェブページテスト (強迫観念の人のために)
webpagetest.org は、どのリソースがレンダリングをブロックしているかを正確に示すウォーターフォール チャートを提供します. 無料, 緻密なインターフェース. PageSpeed Insights と DevTools が明確な答えを与えていない場合は、価値があります。.
リストを入手したら, 以下の修正パスを選択してください. プラグインのルートハンドル 90% ケースの. 手動ルートは、別のプラグインをインストールできないサイト、または正確な制御が必要なサイト向けです.
パフォーマンスプラグインで修正する (5 分間のパス)
これはほとんどのサイトがたどるべき道です. 最新のパフォーマンス プラグインは 3 つのレイヤーでレンダリング ブロッキングを解決します: JavaScriptの延期, CSS配信の最適化, 使用されていないCSSを削除する. 3 つのプラグインがこれを適切に処理します 2026, 意味のある違いがある.
フライングプレス (60ドル/年)
FlyingPress は使用される CSS を別の外部ファイルとして読み込みます, 実際のユーザーにとっては、代替手段よりも高速です。. これは “JavaScriptの遅延” 実装は粒度が細かい: ユーザーの操作が行われるまで特定のスクリプトを遅らせることができます, これにより、分析やチャット ウィジェットを中断することなく、レンダリング ブロックの警告が完全にクリアされることがよくあります。. 有効にする設定: CSS配信の最適化, 重要なCSSを生成する, JavaScript を延期する, と JavaScriptの遅延 デフォルトの除外リストを使用する. それでおしまい.
WPロケット (59ドル/年)
最も人気のある有料オプション. 1 つの技術的トレードオフを伴う、FlyingPress に設定された同等の機能: WPロケットの “使用されていないCSSを削除する” 使用される CSS を HTML に直接インライン化する機能, すべてのページの応答が肥大化します. FlyingPress と LiteSpeed Cache は代わりに外部ファイルとしてロードします. ほとんどのサイトでは、この違いは無視できます. トラフィックの多いサイトでは追加料金がかかります. 有効: CSS配信の最適化, JavaScript の読み込みの遅延, と JavaScriptの実行を遅らせる.
LiteSpeedキャッシュ (自由, LiteSpeed サーバーのみ)
ホストが LiteSpeed を実行している場合 (Hostinger, A2ホスティング, NameHero, ChemiCloud, 弊社のほとんどのプロバイダーは、 安価な共有ホスティング ラウンドアップする), LiteSpeed Cache は無料で、レンダリング ブロッキングの修正に関しては有料のプラグインと同等です. クリティカル CSS の生成は LiteSpeed のサーバー上で実行されます, あなたのものではありません, ビルド中にサイトの速度が低下することはありません. オンに切り替えます CSS の非同期ロード, クリティカルCSS, JS 遅延, と JS の遅延.
無料オプション: 最適化 + 非同期JavaScript
支払えない場合, Async JavaScript プラグインと組み合わせた Autoptimize プラグイン (どちらも無料, 両方維持) 基本をカバーしています. FlyingPress の詳細なインタラクションまでの遅延制御は利用できません, でもあなたが対処してくれるでしょう 70-80% 警告の. 自動最適化を有効にする JSファイルを集約する, インラインCSSと遅延CSS, 次に、Async JavaScript セットで 非同期を適用する jQuery を除外してグローバルに.
これらのいずれかを有効にした後、, すべてのキャッシュをクリアする, 待つ 60 秒, PageSpeed Insights を再実行します. レンダリングをブロックする警告が表示されなくなるか、大幅に小さくなるはずです.
手動で修正する (開発者およびページビルダーサイト向け)
プラグインがオプションではない場合もあります. クライアントがプラグイン リストをロックした可能性があります. 厳しい要件を備えたカスタム テーマを最適化している可能性があります. もしかしたら、あなたは他の可動部分を信頼していないだけなのかもしれません. 2 つのスニペット ハンドル 80% マニュアルケースの.
必須ではない JavaScript をすべて延期する
これを子テーマのfunctions.phpに追加します。:
関数 htg_defer_scripts( $鬼ごっこ, $ハンドル ) {
もしも ( is_admin() ) $tagを返す;
もしも ( 配列内( $ハンドル, [ 「jQueryコア」’ ] ) ) $tagを返す;
str_replaceを返す( ‘ ソース=’, ‘ src=’を延期します, $鬼ごっこ );
}
追加フィルター( 「script_loader_tag」, 「htg_defer_scripts」, 10, 2 );
このフィルターは、WordPress がエンキューするすべてのスクリプトをキャッチします。, admin と jQuery をスキップします, そして他のすべてに defer 属性を追加します. Defer は、HTML 解析と並行してスクリプトをダウンロードするが、解析が完了した後にのみスクリプトを実行するようにブラウザに指示します。. 結果: JavaScript によるレンダリングのブロックなし.
除外リストは調整する部分です. スクリプトが DOMContentLoaded の前に利用可能な jQuery に依存している場合, これをデプロイした後、JavaScript エラーが表示されます. 問題のあるハンドルを配列に追加してリロードします. ほとんどのサイトは最終的に jquery-core を除外します, jQuery-移行, および 1 つまたは 2 つの支払いゲートウェイ スクリプト.
メディアクエリを使用した非クリティカル CSS の非同期読み込み
最初のペイントに重要ではないスタイルシートの場合, リンクタグのメディア属性を変更する:
<リンクrel=”スタイルシート” href =”非クリティカル.css” メディア=”印刷” オンロード=”this.media='すべて'”>
ブラウザは印刷スタイルのレンダリングをブロックしません, その後、onload ハンドラーはメディアを次のように交換します。 “全て” ページがレンダリングされると. WordPress はこのパターンのフィルターを公開していません, したがって、テーマの wp_enqueue_style 呼び出しを編集するか、小さな mu-plugin を追加します。.
重要な CSS をインライン化する
クリティカル CSS は、スクロールせずに見える範囲にすべて表示されるようにするために必要なスタイルの最小サブセットです。. そのサブセットを直接インライン化します。 <頭>, 次に、残りの CSS を非同期的にロードします。. ブラウザは即座に描画します, 次に、ページの残りの部分を段階的にスタイル設定します。.
重要な CSS を手動で生成するのは過酷です. それを自動化してくれるツール:
- フライングプレス, WPロケット, LiteSpeedキャッシュ ページタイプごとに重要なCSSを自動的に生成
- クリティカル パス CSS ジェネレーター (sitelocity.com/critical-path-css-generator) 一回限り生成できる無料のWebツールです
- The “致命的” npmパッケージ JS ツールチェーンからテーマを配布している場合、ビルド パイプラインに統合されます
ほとんどの WordPress サイトの場合, 米ドルを支払う 60 FlyingPress が重要な CSS 生成を処理するのに 1 年かかるのは、開発者が手動で保守する時間よりも安価です. あなたが持っている場合、数学はさらに醜くなります 50 すべてのページ テンプレートには独自の重要な CSS の計算が必要です.
本当の解決策: 存在すべきでないものを監査してカットする
プラグインのトリックによりロードが延期される. しかし、負荷がまったく存在しない場合はどうなるでしょうか? 最も耐久性のある修正は最も魅力的ではない: 不要なリソースのロードを停止する.
PageSpeed Insights リストの各エントリについて, 3つの質問をする:
- 実際にこのページでこれを使用しますか?? すべての商品ページに CSS をロードする問い合わせフォーム プラグインがレンダリングをブロックしており、遅延トリックでは完全に修正できません.
- ソースプラグインにはそれだけの価値があるか? Elementor, ディビ, WPBakery は定期的に各ページに 200 ～ 400 KB を追加します. すべてのページでビルダーを使用しない場合, とにかくコストを払っているのです.
- これを軽いものと交換してもいいでしょうか? 滑らかなスライダー, CDN 経由の FontAwesome, 3 年前に設定されたが一度も使用されていない分析スクリプト. 5 年前の WordPress サイトのほとんどには、カット可能なスクリプトの長いリストがあります。.
役立つツール:
- パフォーマンスマターズ ページごとにスクリプトを無効にするためのスクリプト マネージャーが含まれています. Elementor JS バンドル, 例えば, Elementor セクションを使用しないページでは無効にできます.
- 資産のクリーンアップ (自由) より小さな機能セットでも同じことを行います.
- プラグイン探偵 ファイル名が難読化されている場合に、各レンダリングブロックスクリプトがどのプラグインからのものかを識別します.
未使用のスクリプトをソースでカットすると、遅延最適化よりも大きな PageSpeed の向上が得られます。. これは、テーマを切り替えても生き残る唯一の修正でもあります.
一般 2026 WordPress のレンダリングをブロックする犯人
PageSpeed Insights によって報告されたほとんどのサイトに同じ違反者が現れます. 時間がない場合, まずこれらを確認してください.
- jQuery (まだ!). WordPress コアはデフォルトでフロントエンドに jQuery をロードします. テーマに必要がない場合, デキューする. Perfmatters にはワンクリックで切り替え可能.
- ページビルダーバンドル. Elementorのfrontend.min.jsとfrontend.cssは、ロードされるすべてのページでレンダリングをブロックします。. あらゆる場所でコストを支払う前に使用状況を監査.
- Google Fontの読み込みのブロック. セルフホストフォントまたはフォントディスプレイを使用する: スワップ. fonts.googleapis.com から 3 つのフォント ウェイトを読み込むと、レンダリングに 200 ～ 400 ミリ秒が追加されます.
- Cookie バナーと同意スクリプト. これらは、EU の同意規則に準拠するために同期して読み込まれることがよくあります。, そのため、設計上レンダリングがブロックされます。. 独自のモーダルを除くすべてを延期する同意プラグインを使用する.
- 分析, チャット, そしてタグマネージャー. Googleタグマネージャー, インターホン, ドリフト, Tawk.to スクリプトは、ユーザーの操作が行われるまで遅延する可能性があります. ほとんどのパフォーマンス プラグインはワンクリックで完了します “遅れ” これらのハンドルのプリセット.
- FontAwesome およびその他のアイコン フォント. のみの場合にブロッキングをロードすることがよくあります 4 ページ内でアイコンが使用されています. SVG アイコンに切り替えるか、FontAwesome を非同期でロードします.
米国のマネージド WordPress ホストのまとめ 通常はサーバーレベルの重要な CSS が含まれます, JavaScript の自動延期, フォント最適化を備えた CDN. 同じセットアップには有料のプラグインと、安価な共有ホスティングでの数時間の設定が必要です.
修正が機能したことを確認する方法
プラグインを信用しないでください “設定済み!” バッジ. 3つのチェックで確認:
- PageSpeed Insights を再実行する 新しい URL で (追加 ?v=キャッシュをバストするテスト). 警告は表示されなくなるか、1 つまたは 2 つの必須ファイルに限定されるはずです.
- Chrome シークレット モードでページを開く 視覚的な破損に注意してください. 遅延ルールの設定が間違っていると、スタイルの設定されていないコンテンツがフラッシュされる (FOUC).
- コンバージョンパスをテストする. クリック “カートに追加,” お問い合わせフォームを送信する, ログイン. 過度に遅延した JavaScript は、コンソール エラーをスローせずにインタラクティブな要素を破壊します.
すべてを正しく設定した後でも、PageSpeed Insights にレンダリングをブロックするリソースがリストされる場合, おそらくプラグインの最適化が完了する前に監査が実行されたと思われます. 待って 5 分, すべてのキャッシュをクリアする (ホスト, プラグイン, CDN), 新しいタブから再テストします.
よくある質問
レンダリングをブロックするリソースを削除すると、実際に Google ランキングが向上しますか?
間接的に, はい. この修正により、最大コンテンツフル ペイントが改善されます。, これは、Google がランキング シグナルとして使用する 3 つのコア ウェブ バイタルのうちの 1 つです. 信号は単独では大きくありません, しかし、競合するクエリでの関係を断ち切るには十分です. より大きな勝利はコンバージョンです: ユーザーは読み込みの遅いページを放棄する, 100 ミリ秒の LCP 改善により、コマース サイトで目に見える収益増加が継続的に生み出されます。.
WPロケットは必要ですか？, または無料のプラグインでこれを行うことができますか?
無料のプラグインでほとんどのことができます. 自動最適化と非同期 JavaScript ハンドル 70-80% 典型的な WordPress サイトで表示されるレンダリング ブロック警告の数. WP Rocket と FlyingPress は、インタラクションまでの詳細な遅延制御と重要な CSS の自動生成を追加します, USDの価値があるもの 59-60 商用サイトでは年間. 趣味のブログとしては, フリーコンボは大丈夫です.
プラグインなしでレンダリングをブロックするリソースを修正できますか?
はい, しかし、コードを書くことを期待しています. 上記の遅延フィルターは JavaScript を処理します. CSSは難しい: クリティカルCSSを手動でインライン化する, テーマの上書きによるメディア属性の変更, または、次のコマンドを使用して重要な CSS を生成します。 “致命的” ビルド パイプラインの npm パッケージ. プラン 4-8 何時間もの開発時間, WordPress フックを初めて使用する場合はさらに時間がかかります.
プラグインをインストールした後も PageSpeed Insights がレンダリング ブロックのフラグを立てるのはなぜですか?
よくある3つの原因: 設定が有効になっていません (デフォルトのインストールは保守的です), キャッシュがクリアされていない (監査は古い HTML をテストしています), または、プラグインがオーバーライドできない方法でテーマがリソースをキューに入れている. すべてのキャッシュをクリアする, 設定を確認する, 次に、別のページを監査して、テーマ固有の問題を除外します。.
遅延と非同期の違いは何ですか?
どちらも HTML 解析と並行して JavaScript をダウンロードします。, したがって、どちらのブロックもレンダリングされません. 違いは実行力です. 非同期 ダウンロードしたらすぐにスクリプトを実行します, 解析中でも. 延期 最初に解析が完了するのを待ちます. DOM 依存のスクリプトには defer を使用する (ほとんどの WordPress スクリプト). 分析タグなどの独立したスクリプトには非同期を使用する.
これにより私のサイトは壊れますか?
できる. JavaScript の積極的な遅延または延期ルールにより、支払いフォームが破損する場合がある, チャットウィジェット, または特定のテーマ機能. すべてのプラグインで、除外リストを介してスクリプトをホワイトリストに登録できます。. コンバージョンパスをテストする (カート, お問い合わせフォーム, ログインする) 変化するたびに, 何かが壊れたときにスクリプトを除外リストに追加します. ほとんどのサイトは 1 時間以内に安定した構成に到達します.
これはモバイルとデスクトップに同様に影響しますか??
モバイルではより大きな改善が見られる. レンダリング ブロッキング ペナルティは接続速度に応じて増加します: デスクトップ ファイバーでは 200 ミリ秒かかるリソースは、4G では 600 ～ 800 ミリ秒かかる. PageSpeed Insights は、同じ理由でモバイル スコアをより積極的に重視します. まずはモバイル向けに最適化する.
最終的な考え
“レンダリングをブロックするリソースを排除する” 宿題のように読む, しかし、それは実際には収益のつまみです. 最短のパスは、適切なデフォルト設定を備えたパフォーマンス プラグインです。. 最も耐久性のある方法は、テーマとプラグインが実際に各ページに読み込む必要があるものを監査することです。, それから残りを切ります. 組み合わせが分かれる “十分です” から “すべてのテンプレートで Core Web Vitals を一貫して渡します。”
サイトがホストと戦っている場合 (格安シェアプラン, 遅いPHP, ライトスピードなし), プラグインをいくら最適化しても警告は完全に解決されません. サーバーレベルのキャッシュ, 最新のPHP, そして実際の CDN は、プラグインが実行される前に意味のある作業の塊を処理します。. 私たちの WordPress VPS ホスティング ガイドと WordPress eコマースホスティング 正しいデフォルトを持つホストのラウンドアップ フィルター. モダン AI WordPress ビルダー プラットフォームには、古いページ ビルダーよりも無駄のないデフォルト アセットも付属しています。, 問題と戦うのではなく問題全体を回避する.