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

WordPressでレンダリングをブロックするJavaScriptやCSSを排除しようとしていますか？

Google PageSpeed insightsでサイトをテストすると、レンダリングをブロックするスクリプトやCSSを削除するよう提案されることが多い。しかし、それはあなたのWordPressサイトでそれを行う方法についての詳細を提供していません.

この投稿では、Google PageSpeedのスコアを向上させるために、WordPressでレンダリングをブロックするJavaScriptとCSSを簡単に修正する方法を紹介します。

レンダーブロックJavaScriptとCSSとは？

レンダーブロックJavaScriptとCSSは、これらのファイルを読み込む前にサイトがウェブページを表示しないようにするファイルです。

WordPressサイトには必ずテーマとプラグインがあり、JavaScriptや CSSファイルをサイトのフロントエンドに追加します。

これらのスクリプトはサイトのページ読み込み時間を長くし、ページのレンダリングをブロックすることもあります。

ユーザーのブラウザーは、ページの残りのHTMLを読み込む前に、これらのスクリプトとCSSを読み込む必要があります。つまり、接続速度の遅いユーザーは、ページを表示するのに数ミリ秒多く待たされることになります。

これらのスクリプトやスタイルシートは、レンダーブロックJavaScriptやCSSと呼ばれる。

Google PageSpeedスコア100を目指すWordPressサイトオーナーは、この問題を解決して満点を目指す必要がある。

Google PageSpeed Scoreとは？

Google PageSpeed Insightsは、ウェブサイトの所有者が自分のウェブサイトを最適化し、テストするためにGoogleによって作成されたWebサイトのスピードテストツールです。このツールは、速度のためのGoogleのガイドラインに対してあなたのサイトをテストし、あなたのページのロード時間を改善するための提案を提供しています.

これは、あなたのサイトが通過した監査の数に基づいてスコアを表示します。ほとんどのサイトでは50～70の間です。しかし、中には100（ページが獲得できる最高スコア）を達成しなければならないと考えるサイトオーナーもいる。

Google PageSpeed Scoreの完璧な “100 “は本当に必要か？

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

スピードは、Googleがあなたのサイトのランク付けを決定するのに役立つ数多くのサイト検索エンジン最適化（SEO）指標の一つに過ぎないことを覚えておいてください。サイトのユーザー体験を向上させるため、スピードはとても重要です。

より良いユーザー・エクスペリエンスに必須なのは、スピードだけではありません。有益な情報、より優れたユーザーインターフェース、テキストや画像、動画を使った魅力的なコンテンツを提供することも必要です。

あなたのゴールは、素晴らしいユーザー体験を提供する高速サイトを作ることであるべきだ。

Google PageSpeedのルールを提案として利用することをお勧めします。ユーザーエクスペリエンスを損なうことなく簡単に実装できるのであれば、それは素晴らしいことだ。そうでなければ、できる限りのことをやってみて、あとは気にしないことだ。

とはいえ、WordPressでレンダーブロックを起こすJavaScriptとCSSを修正するためにできることを見てみましょう。

WordPressのレンダリング・ブロッキング・リソースを排除する2つの方法を取り上げます。あなたのサイトに最適な方法をお選びください：

方法1：WP RocketでレンダリングブロックスクリプトとCSSを修正する

この方法では、WP Rocketプラグインを使用します。WP Rocketプラグインは、技術的なスキルや複雑なセットアップを必要とせず、素早くサイトのパフォーマンスを向上させることができる、市場で最高のWordPressキャッシュおよび最適化プラグインです。

まず、WP Rocketプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

WP Rocketはすぐに動作し、サイトに最適な設定でキャッシュを有効にします。さらに詳しくは、WordPressにWP Rocketを正しくインストールしてセットアップする方法についての完全ガイドをご覧ください。

初期設定では、JavaScriptとCSSの最適化オプションはオンになっていません。これらの最適化はサイトの外観や一部の機能に影響を与える可能性があるため、プラグインではこれらの設定をオプションで有効化することができます。

これを行うには、設定 ” WP Rocketページにアクセスし、’ファイル最適化’タブに切り替える必要があります。

ここから、CSS Filesセクションまでスクロールし、’Minify CSS’、’Combine CSS Files’、’Optimize CSS Delivery’にチェックを入れる。

CSS配信の最適化」設定について、WP Rocketは「未使用のCSSを削除する」方法を選択することを推奨します。

最高のパフォーマンスを提供するだけでなく、ページサイズやHTTPリクエストの削減にも役立つ。

次に、JavaScript Filesセクションまでスクロールする必要があります。ここから、パフォーマンスを最大限に向上させるためのオプションをすべてチェックすることができます。

CSSでやったように、JavaScriptファイルを最小化して結合することができる。

WordPressがjQueryMigrateファイルを読み込まないようにすることもできます。これは、古いバージョンのjQueryを使用しているプラグインやテーマの互換性を提供するためにWordPressが読み込むスクリプトです。

ほとんどのサイトではこのファイルは必要ありませんが、このファイルを削除してもテーマやプラグインに影響がないことを確認するために、サイトをチェックすることをお勧めします。

次に、もう少し下にスクロールして、「Load JavaScript Defered」と「Safe Mode for jQuery」オプションの横にあるボックスにチェックを入れる。

jQueryセーフモードでは、インラインでjQueryを使用する可能性のあるテーマに対してjQueryの読み込みを許可します。テーマがインラインでjQueryを使用していないことが確実な場合は、このオプションをオフにしたままにしておくことができます。

変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。

その後、Google PageSpeed Insightsであなたのサイトを再度テストする前に、WP Rocketのキャッシュをクリアすることもできます。

テストサイトでは、デスクトップ端末で100％のスコアを達成し、レンダーブロックの問題はモバイルとデスクトップの両方のスコアで解決されました。

方法2：自動最適化でスクリプトとCSSのレンダーブロックを修正する

この方法では、サイトのCSSとJSファイルの配信を改善するために特別に作られた区切りのプラグインを使用します。このプラグインは仕事はこなしますが、WP Rocketのような強力な機能はありません。

まず最初に行う必要があるのは、サイトのパフォーマンスを高速化する無料のプラグイン、Autoptimizeをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、Settings ” Autoptimizeページにアクセスしてプラグイン設定を行う必要があります。

まず、JavaScriptオプションブロックの「JavaScriptコードを最適化する」にチェックを入れます。Aggregate JS-files’オプションのチェックが外れていることを確認してください。

次に、CSSオプションボックスまでスクロールダウンし、「CSSコードを最適化する」設定にチェックを入れます。

Aggregate CSS-files’オプションのチェックが外れていることを確認してください。

Save Changes and Empty Cache（変更を保存してキャッシュを空にする）」ボタンをクリックして、設定を保存することができます。

PageSpeed Insightsツールであなたのサイトをテストしてください。私たちのデモサイトでは、我々はこれらの基本的な設定でレンダリングブロックの問題を修正することができました.

レンダリングをブロックするスクリプトがまだある場合は、プラグインの設定ページに戻って、JavaScriptとCSSの両方のオプションの設定を見直すことができます。

例えば、プラグインにインラインJSを含めることを許可し、seal.jsやjquery.jsのように初期設定で除外されているスクリプトを削除することができます。その後、「変更を保存してキャッシュを空にする」ボタンをクリックするだけで、変更が保存され、プラグインのキャッシュが空になります。

完了したら、先に進み、PageSpeed Insightsツールでもう一度サイトをチェックする.

Autoptimizeはどのように機能するのか？

Autoptimizeは、キューに入れられたすべてのJavaScriptとCSSを集約します。その後、最小化された CSS と JavaScriptファイルを作成し、キャッシュされたコピーを非同期または遅延としてサイトに提供します。

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

レンダリングをブロックするJavaScriptとCSSが存在する場合の対処法

プラグインやWordPressテーマのJavaScriptやCSSの使用方法によっては、レンダリングをブロックするJavaScriptやCSSの問題をすべて完全に修正するのは難しい場合があります。

上記のツールは役に立ちますが、プラグインが正しく動作するためには、優先度の異なるスクリプトが必要な場合があります。そのような場合、上記の解決策はそのようなプラグインの機能を壊してしまったり、予期せぬ動作をする可能性があります。

レンダーブロックの問題を完全に排除しようとするのではなく、サイトを高速化するための別のアプローチを行うことをお勧めします。例えば、CDNサービスを使って静的なJavaScriptやCSSファイルを提供し、ロード時間を短縮することができます。

詳しくは、WordPressのスピードとパフォーマンスを向上させる究極のガイドをご覧ください。

この投稿が、WordPressでレンダリングをブロックするJavaScriptとCSSを修正する方法を学ぶのにお役に立てば幸いです。また、WPBeginnerが6つのヒントでページ読み込み速度を向上させる方法の投稿や、最高のマネージドWordPressホスティングサービス会社の比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.