WordPressでレンダリングをブロックするJavaScriptとCSSを修正する方法

WordPressのレンダリングをブロックするJavaScriptとCSSを削除しますか? Google PageSpeedのインサイトでウェブサイトをテストすると、レンダリングをブロックするスクリプトとCSSを排除する提案が表示される可能性があります。この記事では、WordPressでレンダリングブロックJavaScriptとCSSを簡単に修正して、Google PageSpeedスコアを改善する方法を紹介します.


WordPressでレンダリングブロックJavaScriptおよびCSSを修正する方法

レンダリングをブロックするJavaScriptおよびCSSとは?

すべてのWordPressサイトには、WebサイトのフロントエンドにJavaScriptおよびCSSファイルを追加するテーマとプラグインがあります。これらのスクリプトは、サイトのページの読み込み時間を増加させる可能性があり、ページのレンダリングをブロックする可能性もあります.

ユーザーのブラウザーは、ページ上の残りのHTMLをロードする前に、これらのスクリプトとCSSをロードする必要があります。つまり、低速の接続を使用しているユーザーは、ページが表示されるまでに数ミリ秒待つ必要があります。.

これらのスクリプトとスタイルシートは、レンダリングをブロックするJavaScriptおよびCSSと呼ばれます。.

Google PageSpeedスコア100を達成しようとしているWebサイトの所有者は、この問題を修正して完全なスコアを取得する必要があります。.

Google PageSpeedスコアとは?

Google PageSpeed Insightsは、Googleが作成したオンラインツールで、ウェブサイトの所有者がウェブサイトを最適化してテストするのに役立ちます。このツールは、速度に関するGoogleのガイドラインに照らしてウェブサイトをテストし、サイトのページの読み込み時間を改善するための提案を提供します.

それはあなたのサイトが通過したルールの数に基づくスコアを示しています。ほとんどのウェブサイトは50〜70のどこかにあります。ただし、一部のWebサイト所有者は、100(ページがスコアできる最高点)を達成することを余儀なくされています。.

本当に完璧な「100」のGoogle PageSpeedスコアが必要ですか?

Google PageSpeedの分析情報の目的は、ウェブサイトの速度とパフォーマンスを向上させるためのガイドラインを提供することです。これらのルールに厳密に従う必要はありません.

速度は、Googleがウェブサイトのランク付け方法を決定するのに役立つ多くのSEO指標の1つにすぎないことを覚えておいてください。速度が非常に重要である理由は、サイトのユーザーエクスペリエンスを向上させるためです。.

ユーザーエクスペリエンスを向上させるには、速度だけでなく、それ以上のものが必要です。また、有用な情報、ユーザーインターフェースの改善、テキスト、画像、動画による魅力的なコンテンツの提供も必要です。.

目標は、優れたユーザーエクスペリエンスを提供する高速なWebサイトを作成することです.

最近WPBeginnerを再設計し、スピードとユーザーエクスペリエンスの向上に注力しました.

Google Pagespeedルールを提案として使用することをお勧めします。ユーザーエクスペリエンスを損なうことなく簡単にルールを実装できる場合、それはすばらしいことです。それ以外の場合は、できる限りの努力をして、残りの部分については心配しないでください。.

それでは、WordPressのレンダリングブロックJavaScriptおよびCSSを修正するために何ができるかを見てみましょう。.

WordPressのレンダリングブロックJavaScriptとCSSを修正する2つの方法について説明します。あなたのウェブサイトに最適なものを選択できます.

1. AutoptimizeでレンダリングブロックスクリプトとCSSを修正する

この方法はより簡単で、ほとんどのユーザーに推奨されます.

最初に行う必要があるのは、Autoptimizeプラグインをインストールしてアクティブにすることです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

アクティベーションが完了すると、 設定»自動最適化 プラグイン設定を構成するページ.

設定を自動最適化

まず、JavaScriptオプションとCSSオプションの横にあるチェックボックスをオンにし、[変更を保存]ボタンをクリックします。.

PageSpeedツールを使用してWebサイトをテストできます。それでもレンダリングブロックスクリプトがある場合は、プラグインの設定ページに戻り、上部にある[詳細設定を表示]ボタンをクリックする必要があります。.

高度なJavaScriptオプション

ここでは、プラグインにインラインJSを含め、seal.jsやjquery.jsなどのデフォルトで除外されているスクリプトを削除することを許可できます。.

次に、CSSオプションまでスクロールし、プラグインがインラインCSSを集約できるようにします。.

[変更を保存してキャッシュを空にする]ボタンをクリックして、変更を保存し、プラグインキャッシュを空にします.

完了したら、PageSpeedツールでウェブサイトをもう一度確認してください.

JavaScriptまたはCSSを最適化することにより、ウェブサイトを徹底的にテストして、何も問題がないことを確認してください。.

どのように機能しますか?

Autoptimizeは、エンキューされたすべてのJavaScriptとCSSを集約します。その後、縮小されたCSSおよびJavaScriptファイルを作成し、キャッシュされたコピーを非同期または据え置きとしてWebサイトに提供します.

これにより、レンダリングのブロックスクリプトとスタイルの問題を修正できます。ただし、ウェブサイトのパフォーマンスや外観にも影響を与える可能性があることに注意してください.

2. W3 Total Cacheを使用してレンダリングブロックJavaScriptを修正する

この方法はもう少し作業が必要であり、すでにWebサイトでW3 Total Cacheプラグインを使用しているユーザーに推奨されます.

まず、W3 Total Cacheプラグインをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、初心者向けW3 Total Cacheのインストールとセットアップ方法に関するガイドを参照してください.

次に、あなたは訪問する必要があります パフォーマンス»一般設定 ページを最小化セクションまでスクロールします.

W3トータルキャッシュの有効化

最初に、[縮小]オプションの横にある[有効]をオンにしてから、[縮小]モードオプションの[手動]を選択する必要があります.

[すべての設定を保存]ボタンをクリックして、設定を保存します.

次に、縮小したいスクリプトとCSSを追加する必要があります.

Google PageSpeed Insightsツールから、レンダリングをブロックしているすべてのスクリプトとスタイルシートのURLを取得できます.

「スクロールせずに見える範囲のコンテンツでレンダリングをブロックするJavaScriptとCSSを削除する」という提案の下で、[修正方法を表示]をクリックします。スクリプトとスタイルシートのリストが表示されます.

Google PageSpeedツールからJavaScriptとスタイルシートのURLを取得する

スクリプトにマウスを合わせると、完全なURLが表示されます。このURLを選択し、キーボードのCTRL + C(MacではCommand + C)キーを使用してURLをコピーできます.

次に、WordPressの管理エリアに移動して、 パフォーマンス»縮小 ページ.

最初に、縮小したいJavaScriptファイルを追加する必要があります。 JSセクションまで下にスクロールし、[オペレーションのエリア]で、セクションの埋め込みタイプを[非ブロッキング非同期]に設定します.

縮小するスクリプトを追加

次に、[スクリプトを追加]ボタンをクリックして、Google PageSpeedツールからコピーしたスクリプトURLの追加を開始する必要があります.

完了したら、CSSセクションまでスクロールし、[スタイルシートを追加]ボタンをクリックします。次に、Google PageSpeedツールからコピーしたスタイルシートのURLを追加します.

スタイルシートを追加して縮小する

[設定を保存してキャッシュを削除]ボタンをクリックして、設定を保存します.

Google PageSpeedツールにアクセスして、もう一度ウェブサイトをテストしてください.

ウェブサイトも十分にテストして、すべてが正常に機能していることを確認してください.

トラブルシューティング

プラグインとWordPressテーマがJavaScriptとCSSをどのように使用するかに応じて、すべてのレンダリングブロックJavaScriptとCSSの問題を完全に修正することは非常に困難です。.

上記のツールは役立ちますが、プラグインが適切に機能するために、異なる優先度レベルの特定のスクリプトが必要になる場合があります。その場合、上記の解決策はプラグインを壊す可能性があります、またはそれらは予期せず動作する可能性があります.

スクロールせずに見える範囲でのCSS配信の最適化など、特定の問題が表示される場合があります。 Autoptimizeは、テーマの上記の折りたたみ領域を表示するために必要なインラインCSSを手動で追加することで、これを修正できます.

ただし、スクロールせずに見えるコンテンツの上に表示する必要があるCSSコードを見つけるのは非常に難しい場合があります.

以上で、この記事が、WordPressでレンダリングブロックJavaScriptとCSSを修正する方法を学べたと思います。また、初心者向けのWordPressの速度とパフォーマンスを向上させる究極のガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me