WordPressでのJavaScriptとCSSのレンダリングブロック：修正するための5つのプラグイン

読み込みに XNUMX 秒以上かかる Web サイトは SEO に優しくないと Google が発表したのは、それほど前のことではありません。

インターネットとデジタル マーケティングのこの時代において、世界中の何千ものライバルと効果的に競争するには、最速の Web サイトが必要です。 Web サイトの速度が速いほど、訪問者を引き付け、コンテンツへのエンゲージメントを高める可能性が高まることは疑いの余地がありません。

WordPress Web サイトを実行すると、サイトにアクセスできるようにするために大量のスクリプトが同時に実行されることになります。

ただし、これらの項目すべてをロードすることが常に必須であるわけではありません。 Web サイトのパフォーマンスをチェックしたことがある場合 GoogleのリソースPageSpeed、速度に影響を与えるレンダリングをブロックする JavaScript および CSS オプションに遭遇したことがあるでしょう。

今日は、これらの無関係なファイルについて説明し、サイトを改善するためにそれらを削除する方法について説明します。

 

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

要約すると、レンダリングをブロックする JavaScript と CSS は、サイトが読み込まれて表示される前に完全に実行する必要がある一連のスタイルシートとスクリプトです。

WordPress Web サイトにインストールするテーマとプラグインにより、これらのファイルの多くが Web サイトのフロントエンド セクションに追加されます。 ご想像のとおり、それらの一部はページの読み込み時間を遅くし、ページのレンダリングを妨げます。

Web サイト訪問者が Web サイトを開くと、インターネット ブラウザは、HTML の前に必要な JavaScript ファイルと CSS ファイルを読み込みます。

これらの必須要素が欠けているページは使用できなくなるため、これは通常の手順です。 問題は、これらのファイルが完全に読み込まれる前に、Web ブラウザがページをレンダリングできないことです。

ここでの秘訣は、訪問者がページを開いたときに表示される内容に問題を引き起こすことなく、一部のスクリプトの読み込みを延期できることです。

Web サイトの所有者は、Web ブラウザーがユーザーにすぐに表示されるページの上部に必要なコード以外のコードをロードしないようにサイトを変更できます。

言い換えれば、ブラウザは、ユーザーがページを下にスクロールする前に、そのセクションの重要なファイルのみを読み込みます。 Web ページのこの領域は、Above the Fold の略で ATF と呼ばれます。 非 ATF セクションは、ユーザーが下にスクロールして表示する必要がある他の部分です。

したがって、Web サイトが非 ATF セクションに関連する JavaScript および CSS コードを読み込む場合、ページの読み込みに時間がかかります。 だからこそ、Google はウェブサイトのコード内で不必要なリソースの実行をやめるよう指示しようとしているのです。

 

レンダリングをブロックする JavaScript と CSS を見つける

この問題を調べる最も簡単な方法は、Google PageSpeed Insights を使用して速度テストを実行することです。 ページにアクセスしたら、必要なフィールドに URL アドレスを入力し、[分析] ボタンをクリックするだけです。

ページ上でこの問題が発生している場合は、スクロールせずに見えるコンテンツ内のレンダリングをブロックする JavaScript と CSS を削除するよう求める提案が表示されます。

それを一番忘れないでくれたら一番良いのですが ウェブサイトのスコア スコアは 70 ～ 90 の間で、最もパフォーマンスの高いサイトでも 100 に近い数値を達成することはめったにありません。したがって、サイトを強制的に 100 に到達させる必要はありません。ユーザー エクスペリエンスに影響を与えずに最高のスコアを達成するためにできる限りのことを行ってください。否定的に。

サイトで使用するテーマとツールに応じて、一部のスクリプトは 完璧なUXには不可欠 視聴者に提供する必要があります。 したがって、この Google ツールの結果ページで少しでも高いスコアを達成しようとしてそれらを削除するのはまったく賢明ではありません。

 

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

レンダリングをブロックする JavaScript を排除するための戦略はたくさんあります。 主なメソッドは Async と Defer です。最初のメソッドを使用すると、ユーザーのブラウザは他の HTML 部分を解析しながら JavaScript をダウンロードできます。

ファイルのダウンロード中に解析が完全に停止するわけではありませんが、 HTMLパーサー スクリプトのダウンロード時に実行を一時停止します。 一方、遅延アプローチでは、ブラウザーは他の HTML 部分を解析しながら JavaScript をダウンロードし、HTML 解析が終了するまでスクリプトを実行しません。

ATF コンテンツをロードするために必要なコードが遅れる可能性があるため、レンダリングをブロックする CSS を削除することはさらに困難です。 この手順は少し複雑なので、Web 開発についての十分な理解が必要です。

それにもかかわらず、私たちは Web サイトを自分で運営する平均的なユーザーを対象としています。

WordPress がモジュール式システムであり、平均的なユーザーがコードを XNUMX 行も記述することなくすべてを調整できることは誰もが知っています。 この問題の解決も同様で、適切なプラグインをインストールすることで問題をすぐに解決できます。

 

レンダリングをブロックする JavaScript と CSS を修正するためのベスト WordPress プラグイン

次の段落では XNUMX つを紹介します。 最高のパフォーマンスを誇るWordPressプラグイン この問題を最も深く解決するのに役立ちます。

ウォールタイム - 次のツールを使用する前に、データの損失を防ぐために必ず Web サイトをバックアップしてください。

 

Autoptimize

　 Autoptimize このプラグインは、Google PageSpeed Insights などの Web サイト分析ツールによって示唆される問題に対処するために明示的に作成されています。 Web サイトのパフォーマンスの他の側面にあまり重点を置くことなく、JavaScript と CSS ファイルの配信を改善します。

基本的な最適化機能を探している場合、このプラグインは必要なものを提供します。 このツールの優れた点は、Web サイトの画像を最適化された WebP 形式に変換することです。

Autoptimize をインストールしてアクティブ化したら、プラグインの設定にある [JavaScript コードの最適化] オプションと [CSS コードの最適化] オプションのボックスをチェックする必要があります。 CSS ファイルとスクリプト ファイルを集約するこれら XNUMX つのオプションの下のボックスをオンにしないように注意してください。

このプラグインは無料で利用できますが、Web サイトの設定に役立つプレミアム パッケージを購入することもできます。

 

WP Rocket

WP Rocket は、JavaScript や CSS の変更、遅延読み込み設定など、さまざまな面で役立つ WordPress 最適化ツールの中でよく知られた名前です。 WP Rocket のセットアッププロセスは非常に簡単ですが、最初はインターフェイス上で何が行われるかを理解するのが難しいかもしれません。

箱から出してすぐに使用でき、インストール後すぐに Web サイトに最適な設定が適用されます。 スクリプトの変更による Web サイトの誤動作が避けられないことを考慮して、プラグインはデフォルトでレンダリングをブロックする JavaScript および CSS 設定を有効にしません。

ただし、プラグインの設定に移動し、「CSS ファイル」セクションと「JavaScript ファイル」セクションで関連するオプションを探すことで、この機能を簡単にオンにすることができます。

メインのプラグインは年間 49 ドルで、XNUMX 年間のサポートも付いています。 さらに、複数見つけることができます 無料の追加物 WordPress のコアプラグインにも。

 

ラビットローダー

ラビットローダー は、ウェブサイトをより速く、よりスムーズに、より効率的に実行できるように設計された最先端の WordPress パフォーマンス最適化プラグインです。

広く評価されている WP Rocket と同様に、RabbitLoader はサイトのパフォーマンスを新たな高みに引き上げるだけでなく、ゲーム内の他のプレイヤーと一線を画すいくつかの革新的な機能も導入しています。

キャッシュマジック: RabbitLoader は、サイトの変更にリアルタイムで適応する動的キャッシュ システムを提供することで、これをさらに進化させ、速度を犠牲にすることなく訪問者が常に最新のコンテンツを確認できるようにします。

画像の最適化: 画像は Web サイトの速度を大幅に低下させる可能性がありますが、RabbitLoader の画像最適化機能は状況を一変させます。 品質を損なうことなく画像を最適なサイズに自動的に圧縮およびサイズ変更し、視覚的な魅力を損なうことなくサイトが迅速に読み込まれるようにします。

遅延読み込み: WP Rocket と RabbitLoader はどちらも画像と iframe の遅延読み込みを提供しますが、RabbitLoader はさらに進んで、遅延 JavaScript 読み込みを提供します。

互換性： RabbitLoader は、WP Rocket と同様に、幅広い WordPress テーマやプラグインで完璧に動作するように設計されています。 単純なブログでも複雑な電子商取引 Web サイトでも、RabbitLoader は競合することなくサイトのパフォーマンスを向上させるように設計されています。

 

W3合計キャッシュ

W3合計キャッシュ は、キャッシュの問題だけでなく、スクリプトやスタイル シートによって引き起こされる問題も処理する強力なパフォーマンス エンハンサーです。

まずプラグインの設定から Minify オプションを有効にし、手動モードに設定することで、レンダリングをブロックする JavaScript と CSS を簡単に削除できます。

次に、「レンダリングをブロックするリソースを削除する」タブをクリックし、スクリプトとスタイルシートをブロックするために必要なファイルの完全なリンクアドレスをコピーする必要があります。 これで、これらのリンクを使用して、 パフォーマンス>縮小化 タブには何も表示されないことに注意してください。

W3 Total Cache には XNUMX 万を超えるアクティブなインストールがあり、WordPress.org Web サイトから無料でサイトにダウンロードできます。

 

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

スピードブースターパック は、スタイル シート、JavaScript、遅延読み込み、および不要な要素の削除を最適化するための信頼できるツールです。 開発者チームは、このプラグインを継続的に更新して、最新のアップデートとセキュリティ対策を最新の状態に保ちます。

製品やサービスをオンラインで販売する場合、 WooCommerce 固有の最適化 Speed Booster Pack の機能は、インターネット上でストアの認知度を高めるのに非常に役立ちます。

管理パネルの Speed Booster Pack メニューから [Advanced] タブをクリックすると、WordPress Web サイト上のレンダリングをブロックする JavaScript と CSS をすぐに修正できます。

JavaScript の場合、「スクリプトをフッターに移動」および「JavaScript ファイルの解析を延期」オプションを有効にします。 次に、「CSS 最適化」メニューに移動し、サイトのパフォーマンスを向上させるために利用可能なオプションを選択します。

Speed Booster Pack は、WordPress.org Web サイトで入手できる無料のソリューションです。

 

JCHオプティマイズ

JCHオプティマイズ これは、この推奨プラグインのリストの最後の項目であり、 ページの読み込みを高速化する。 たとえば、ページの読み込みに必要な HTTP リクエストの数を減らし、同時にそれらのページのサイズを小さくするのに役立ちます。

スプライトジェネレーター このプラグインで利用できるもう XNUMX つの魅力的な機能は、背景画像をロードするための HTTP リクエストの数を削減します。

プレミアム プランにアップグレードすると、JCH Optimize を使用してレンダリングをブロックする JavaScript と CSS を削除できます。 必要なのは、「自動設定」セクションから「プレミアム」または「最適」オプションを有効にすることだけです。 CSS 配信設定も同様に Pro バージョンでのみ利用可能です。

このプラグインは WordPress.org から無料でインストールできますが、その可能性を最大限に活用するにはプレミアム プランを購入する必要があります。 料金プランは 29 か月間 99 ドルから始まり、永久アクセスの場合は XNUMX ドルに達します。

 

まとめ

Web サイトの読み込み速度は、視聴者を引きつけ、引きつけ、維持するために最も重要な要素の XNUMX つです。 Web サイトを検索エンジン向けに最適化するときは、これを最優先にし、Google PageSpeed Insights ツールを使用して、この分野でのパフォーマンスを測定する必要があります。

レンダリングをブロックする JavaScript および CSS 項目は、Google の強力なツールを使用するときに表示される最も一般的な提案の XNUMX つです。 この記事で紹介した XNUMX つのプラグインのいずれかをインストールすることで、この問題を簡単に解決できます。 ページの読み込み速度を高速化します 大体。

このチュートリアルが有益であることを理解し、最良の結果を得るために高速読み込みの Web サイトを楽しんでいただければ幸いです。