サイト速度の向上: レンダリングをブロックする JS と CSS を削除する

公開: 2023-02-12

WordPress では、プラグインとテーマを選択してカスタム Web サイトを構築できます。 ただし、これは、サイトに多くのスクリプトがあり、読み込み時間とパフォーマンスが低下していることを意味する場合があります. これらのスクリプトのすべてをすぐにロードする必要はありません。一部のスクリプトは、訪問者ができるだけ早くコンテンツを表示するのを実際にブロックできます。

これらの不要なファイルは、レンダリングをブロックする JavaScript および CSS と呼ばれます。 この記事では、これらのレンダリングをブロックするリソースとは何かを説明し、WordPress サイトからレンダリングをブロックするリソースを排除する方法を示します. 始めましょう！

目次
1.レンダリングをブロックする JavaScript および CSS とは?
2.レンダリングをブロックする JavaScript と CSS が Web ページに悪いのはなぜですか?
3.レンダリングをブロックする JavaScript と CSS を排除する方法
4.レンダリングをブロックする JavaScript と CSS を軽減するプラグイン
4.1. 1.WPロケット
4.2. 2.自動最適化
4.3. 3.JCHオプティマイズ
4.4. 4.スピードブースターパック
5. WP Engine でサイトの速度を改善する

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

Web サイトがブラウザーに読み込まれると、キュー内のすべてのスクリプトに呼び出しが送信されます。 通常、Web サイトがブラウザーに表示される前に、そのキューを空にする必要があります。 Web サイトの完全な読み込みを停止させる可能性があるスクリプトのキューは、レンダリングをブロックする JavaScript および CSS ファイルです。

スクリプト キューが非常に長い場合、訪問者がサイトにアクセスできるようになるまでに時間がかかることがあります。 多くの場合、これらのスクリプトの多くは、Web サイトをすぐに表示するのに必要ではなく、サイト自体が完全に読み込まれるまで実行を待つことができます。

つまり、これらの種類のスクリプトは、閲覧者の差し迫ったニーズに実際に貢献することなく、Web ページの速度を低下させます。 閲覧者にすぐに表示されるもの (「スクロールせずに見える」要素と呼ばれることが多い) を含まないスクリプトは、ページの残りの部分が読み込まれるまで延期する必要があります。

レンダリングをブロックする JavaScript と CSS が Web ページに悪いのはなぜですか?

レンダリングをブロックする JavaScript および CSS スクリプトは Web ページの速度を低下させますが、これは多くの理由で良くありません。 サイトの速度は、一般的な使いやすさや検索エンジン最適化 (SEO) など、WordPress Web サイトの多くの重要な側面で役割を果たします。 サイトの読み込みが遅いと、訪問者を失う可能性が高くなり、検索エンジンの結果で上位にランクされる可能性が低くなります.

もちろん、サイトの速度とパフォーマンスは、レンダリングをブロックするリソース以外にも影響を受けます。 そうは言っても、これはロード時間に大きな違いをもたらす可能性のある要因です. Web ページ上のすべてのリソースはバイトを消費し、それが増えるとダウンロード時間が長くなる可能性があることに注意してください。 サイトにあるスクリプトが少なくて軽いほど、より良い結果が得られます。 結局のところ、遅いサイトがビジネスに悪影響を与えるのは望ましくありません。

一般に、全体的な速度を向上させるには、Web サイトのコードをできるだけクリーンで最小限にすることが最善です。 ただし、常にいくつかのコードが残っています。 デフォルトでは、ブラウザーは、レンダリングをブロックするスクリプトを含め、すべてを一度に読み込もうとします。

サイトが正しく表示され、閲覧者が最初にページにアクセスしたときに使用できるようにするために必要なスクリプトを、サイトが最初にロードすることを確認するのはあなた次第です。 その後、残りのスクリプトをロードする必要があります。

レンダリングをブロックする JavaScript と CSS を排除する方法

レンダリングをブロックするスクリプトを排除する前に、どのスクリプトが問題を引き起こしているかを特定する必要があります。 これを行うには、Google の PageSpeed Insights を使用することをお勧めします。 URL を入力するだけで、Google はどのスクリプトがページのパフォーマンスを低下させているかを正確に教えてくれます。

Page Speed Insights は、CSS と Javascript のレンダリング ブロッキングを示します

Eliminate render-blocking JavaScript and CSSの下の結果に表示されるスクリプトのリストを作成します。 手動で対処しようとする場合でも、プラグインを使用する場合でも、次の修正を適用する際には、これらのスクリプトに特に注意を払う必要があります。

サイトのレンダリングをブロックするスクリプトの数を減らすには、いくつかのベスト プラクティスに従う必要があります。

  • JavaScript と CSS を「縮小」します。 これは、コード内の余分な空白と不要なコメントをすべて削除することを意味します。
  • JavaScript と CSS を連結します。 これを行うには、いくつかの異なる .js ファイルと.cssファイルを取得して結合する必要があります。 理想的には、そのようなファイルは少数しかありません。
  • JavaScript のロードを延期します。 ページ上の他のすべての準備が整うまで、JavaScript ファイルの読み込みを強制的に待機させると便利な場合があります。 JavaScript を遅延させる確実な方法は、非同期読み込みを使用することです。

多くの前面プラグインには独自の JavaScript および CSS ファイルが付属しているため、これらのヒントを WordPress で手動で実行するのは難しい場合があります。 1 つのプラグインで、サイトのフロント エンドに 5 つまたは 6 つのスクリプトを簡単に追加できます。 これらのファイルはすぐに追加できます。

ありがたいことに、WordPress は 1 つの結合フィルターを使用して、すべてのフロントエンド向けスクリプトを登録します。 これは、何を探すべきか正確にわからなくても、受信する JavaScript または CSS ファイルを識別して処理する機会があることを意味します。 もちろん、ゼロから始めるよりも、プラグインを使用する方がはるかに簡単です。

JavaScript と CSS のレンダリング ブロックを軽減するプラグイン

レンダリングをブロックする JavaScript と CSS を削除してサイトを最適化するのに役立つ WordPress プラグインがいくつかあります。 このセクションでは、4 つの一般的な選択肢を見ていきます。

1.WPロケット

WP Rocket は、CSS と JavaScript の縮小、画像の遅延読み込み、リモート JavaScript リクエストの遅延などのタスクを通じて、サイトの最適化を支援します。 これは、最適化プラグインの「スイス アーミー ナイフ」です。

このプラグインを使用する最大の利点の 1 つは、簡単なセットアップ プロセスです。 ただし、潜在的な欠点の 1 つは、ユーザー インターフェイスです。 プラグインは、WordPress ダッシュボードで慣れ親しんだものとは異なる体験を生み出します。 一部の長年のユーザーは、このインターフェイスの変更を評価しない場合があります。 それでも、プラグインの実際の機能は一流のままです。

WordPress Plugin Directory には、WP Rocket 用に入手できる無料のエクストラがいくつかあります。 ただし、基本プラグイン自体の価格は、1 つの Web サイトと 1 年間のサポートで年間 49 ドルで、追加の層ではより多くのオプションが提供されます.

2.自動最適化

Autoptimize は、PageSpeed Insights などのレコメンデーション ツールによって引き起こされる問題に対処するために特別に構築されています。 Web サイトのプラグインを構成できるようにするすべての設定は、WordPress ダッシュボードの新しいメニューに含まれます。

自動最適化は、スクリプトの縮小やキャッシュなど、すべての基本的な最適化タスクをカバーしています。 ユニークな機能の 1 つは、画像を最適化して WebP 形式に変換できることです。 このツールの全体的なレビューは優れていますが、構成がやや複雑になる可能性があることに注意してください。

プラグイン自体は無料ですが、開発者から 2 つのパッケージのいずれかを購入して、構成を支援することができます。 約 165 ドル (149 ユーロ) のカスタム構成プランがあります。 また、約 667 ドル (€599) で、完全に実践的な専門家による Web サイトのレビューと専門家によるプラグイン構成を取得できます。

3.JCHオプティマイズ

JCH Optimize には、ページの読み込み時間を改善するための独自のツールもいくつか用意されています。 たとえば、ページの読み込みに必要な HTTP リクエストの数を減らし、それらのページのサイズも小さくすることができます。 これにより、サーバーの負荷が軽減され、必要な帯域幅が減少します。

JCH Optimize のもう 1 つのユニークな機能は、スプライト ジェネレーターです。 これにより、背景画像が「スプライト」に結合されるため、それらをブラウザにロードするための HTTP リクエストが少なくて済みます。 ただし、このプラグインの欠点の 1 つは、学習曲線が急であることです。 ほとんどのユーザーは、エラーを回避するために、プラグインが正しく構成されていることを確認するために、サポート ドキュメントに依存する必要があります。

そうは言っても、プラグインには多くの 5 つ星のレビューがあり、10,000 を超えるアクティブなインストールがあります. 価格に関しては、利用可能なプラグインの無料バージョンがあります。 ただし、Optimize Image API などのサポートや高度な機能にアクセスしたい場合は、サブスクリプションを購入する必要があります。 これらは、6 か月間のサポートと API アクセスで 29 ドルからです。

4.スピードブースターパック

Speed Booster Pack は、CSS と JavaScript の最適化、遅延読み込み、クラッター除去機能を提供します。 Optimocha の開発者は、常に進化するコード ベースでプラグインを最新の状態に保つため、常に最新のメソッドを使用できます。 ボトルネックを解決するために機能する組み込みの WooCommerce 最適化機能もあります。

Speed Booster Pack を使用する利点の 1 つは、コンテンツ配信ネットワーク (CDN) 統合機能があることです。 これにより、プラグインで最適化しながら、WordPress で選択した CDN を簡単に使用できます。 このプラグインの欠点は、適切に構成するために必要な試行錯誤のプロセスにあります。

また、無料のプラグインに付随するサービス オプションがあることも注目に値します。 Autoptimize と同じように、開発者は、独自の Web サイトに合わせてプラグインを構成するための実践的で専門的なアプローチを提供するためのいくつかのオプションを提供しています。

WP Engine でサイトの速度を改善する

サイトの速度を改善するためのアプローチがどのようなものであっても、私たちはお手伝いします。 ウェブサイトをテストするためのスピード ツールと、最適化されたエクスペリエンスを実現するのに役立つ最高の開発者リソースがあります。
実際、当社のデジタル エクスペリエンス プラットフォーム (DXP) は、より優れた WordPress Web サイトの構築を開始するのに最適な場所です。 料金プランを今すぐチェック！