ウェブサイト検索

サイトの速度を向上させるためにレンダリングをブロックする JS と CSS を削除する方法

Web サイトの美しさは重要ですが、そのコンテンツと読み込み速度が人々を惹きつけます。 WordPress は、独自のカスタム Web サイトを迅速に作成するためのプラグインとテーマの洗練されたツールボックスをユーザーに提供します。

ただし、これらのテーマとプラグインが機能するには、JavaScript (JS) と Cascading Style Sheets (CSS) が必要です。 WordPress はこれらをスクリプト ファイルの形式で自動的に作成します。最適化が不十分であることがよくあります。そのため、Web サイトの速度が大幅に低下する可能性があります。

これは読者にとってイライラする可能性があります。したがって、このガイドでは、これらのレンダリングをブロックするスクリプトを見つけて削除する方法を検討し、WordPress Web サイトの読み込み速度を向上させる方法を示します。

レンダリングをブロックする JS および CSS スクリプトとは何ですか?また、それらが問題となるのはなぜですか?

インターネット上のほとんどの Web ページは、JavaScript、CSS、ハイパーテキスト マークアップ言語という 3 つの主要コンポーネントで構成されています。 HTML がベースとなり、JavaScript と CSS が埋め込まれます。ただし、最近では、外部スクリプトへの呼び出しを HTML ドキュメントに埋め込むことが一般的になっています。

これらのスクリプトは、Web ブラウザが Web ページをレンダリングするために使用するキューに保持されます。ソース コードを見ずに Web ページで使用されているスクリプトを確認する最も簡単な方法は、Web ブラウザー (Ctrl + S) からダウンロードすることです。 Web ブラウザは、Web ページで使用されるすべて (またはほとんど) のスクリプト、画像、その他のファイルを含むフォルダーとともに HTML ドキュメントをダウンロードします。

Web ページがキューから呼び出す必要があるスクリプトが複雑であればあるほど、レンダリングにかかる時間が長くなります。多くの場合、Web ブラウザは、Web ページをより速く読み込むために、スクリプトや画像などの Web ページ リソースをローカル キャッシュにダウンロードします。クライアント側のユーザーは、JavaScript を無効にし、キャッシュ サイズを増やし、AdBlocker を使用することで Web ページのレンダリング時間を短縮できますが、これは理想的なソリューションではありません。責任は Web 開発者にあるはずです。

苦情を受け取った場合、または Web サイトのコンテンツのレンダリングに問題があることに気づいた場合は、それを修正するのに遅すぎるということはありません。

レンダリングをブロックするスクリプトを見つけて修正して Web サイトを最適化する方法

どのスクリプトを終了または最適化するかを決定する前に、Web サイトまたは Web ページの速度を評価する必要があります。 GTmetrix や Google の PageSpeed Insights などのオンライン プラットフォームを使用できます。テストしたい Web サイトまたは Web ページの URL を挿入するだけで、ツールがそれを評価し、その他の洞察を提供します。

また、Web サイトを高速化するために使用できる監査も提案されます。たとえば、Web ページで使用する要素を減らすことや、未使用の CSS や JavaScript を減らすことを提案します。 GTmetrix は、どのスクリプトを最適化する必要があるのかまで示します。

あるいは、Chrome DevTools の [カバレッジ] タブを使用して、スクリプトの使用率データを表示することもできます。どのスクリプトが最適ではないかを特定したら、それらを修正するためにいくつかのことを行うことができます。ただし、これらの手順を正常に実装するには、かなりのコーディング能力が必要です。少なくとも関数型 JavaScript プログラミングの基本を理解する必要があります。

スキルをさらに向上させるために、コーディング チュートリアル コース (またはブートキャンプ) に参加することもお勧めします。平均すると、コーディング ブートキャンプは完了するまでに最大 15 週間かかります。これは長いように聞こえるかもしれませんが、基本的なコード リテラシーが現代社会においていかに重要なスキルであるかを考えると、それだけの価値は十分にあります。それでも、レンダリングをブロックするスクリプトを修正し、Web ページの速度を上げる 5 つの方法をここに示します。

1. ロード順序を最適化する

Web ページのヘッド セクション <i>(</head></head>) は、要素の事前読み込みに使用されます。ユーザーが Web ページをロードするときに白い画面が表示されないように、Web ページの基礎をここに配置する必要があります。埋め込み CSS は問題ありませんが、ここに JavaScript を配置することは避けてください。

ヘッドセクションを最適化したら、ボディを最適化する必要があります。ほとんどの Web ブラウザは、Web ページを上から下にレンダリングします。スクリプトの呼び出しは、その重要性と複雑さに応じて順序付ける必要があります。 Web ページのレンダリングに重要ではないスクリプトの呼び出しは、時間のかかる複雑なスクリプトと同様に最後に行う必要があります。

2. コードを縮小する

コードの縮小には、コードの書き直し、空白、コメント、カンマ、改行などの不要な文字の削除が含まれます。これにより、コードがより簡潔かつコンパクトになり、最終的にはスクリプトのサイズが削減され、Web ページの読み込み時間が増加します。

W3TC などのプラグインやツールには、テーマ内の JavaScript と CSS を縮小するモジュールがあります。あるいは、JavaScript Minifier などの無料のオンライン ツールを使用して、スクリプト コードを手動で縮小することもできます。

3. JavaScript の遅延および非同期読み込みを使用する

Web ブラウザはコードを上から下に読み取ります。 script タグに遭遇すると、Web ページの読み込みを停止し、スクリプト ファイルを読み取ります。これによりレンダリングが遅くなります。

<i>async 属性を使用すると、Web ページと並行してスクリプトをロードし、利用可能になったらすぐに実行できます。あるいは、<i>defer 属性を利用してスクリプトの解析を延期することもできます。これは、Web ページと並行してスクリプトもロードしますが、ブラウザが Web ページを解析するときにのみ実行されることを意味します。

ビジュアル要素のレンダリングと表示に使用されるスクリプトでは、<i>async 属性や <i>defer 属性を使用しないことをお勧めします。これらの属性に相当する JavaScript キーワードは、<i>async キーワードと <i>await キーワードです。これらを使用すると、Web ページ上の HTML タグを編集せずに、JavaScript をより非同期的に読み込むことができます。

4. JavaScript のビジュアル要素を CSS3 に置き換える

以前は、CSS は今日ほど多用途ではありませんでした。たとえば、CSS 1.0 および 2.0 には、基本的なコントロールやスライダーなどの UI ツールがありませんでした。

その後、CSS 3 が登場しました。新しい色、ボックスの影、不透明度などが表示されました。JavaScript は、複雑なユーザー インターフェイス コントロールを追加するのに最適です。ただし、JavaScript は CSS よりもリソースを多く消費します。

したがって、過剰な量の JavaScript を使用すると、Web サイトの速度が大幅に低下します。以前のバージョンの CSS がうまく機能しなかった部分を補うために Web ページが JavaScript を使用していることに気付いた場合は、可能であれば Web ページを変更し、不要な JavaScript をすべて CSS に置き換える必要があります。これにより、Web ページの読み込みが高速化されます。

5. 不要なスクリプトをすべて削除する

JS と CSS の目的は、機能を Web ページに拡張し、HTML ではできないロジックを追加することです。ただし、HTML 5.3 には、一部の CSS および JS 操作が不要になる新しいタグが組み込まれています。スクリプトの代わりに HTML を使用すると、当然、Web ページの読み込みが速くなります。

したがって、Web サイトの速度を最適化する最善の方法は、十分に活用されていないスクリプトをすべて削除することです。完全に不要なスクリプトを分析して削除する必要があります。繰り返しになりますが、Chrome DevTools の [Coverage] タブまたは GTmetrix を使用して、Web ページ上で最も活用されていないスクリプトを見つけて削除できます。

不要な関数やタグをすべて削除すると、機能が似たスクリプトを組み合わせることができます。 Web ページのソース コードを操作する方法をすでに知っている場合、これは難しい作業ではありません。ただし、Web デザインの経験や知識が浅いユーザーでも心配する必要はありません。 WordPress を使用すると、Web サイト上のスクリプトを簡単に識別し、さまざまな最適化プラグインを使用して編集できます。次にそれらについて説明します。

6. プラグインを使用して WordPress ウェブサイトを最適化する

繰り返しますが、WP Web サイトを最適化するためにプログラミングの実践的な知識は必要ありません。多少の経験は役に立ちますが。それにもかかわらず、スクリプトの最適化を目的としたさまざまなプラグインが存在します。それらの中には、AI を使用してコードを縮小し、ロード順序を変更し、十分に活用されていないスクリプトをより効率的なコードやスクリプトに置き換えるものもあります。

スクリプトの最適化に最適なプラグインには次のようなものがあります。

  • WP Rocket: これは、Web 最適化のための最も人気のあるプラグインの 1 つです。問題のあるスクリプトを自動的に検出し、修正します。素早いキャッシュ、参照、圧縮、縮小に使用できます。
  • 自動最適化: 不要なスクリプトを延期して削除し、インライン CSS を統合して、スクリプト、HTML、画像を縮小できます。 Autoptimize は、オープン API と高度なオプションを通じて高度にカスタマイズ可能です。
  • W3 Total Cache: このプラグインを使用するには、少し作業が必要です。スクリプトを削除または編集する前に、スクリプトを手動で追跡して特定する必要があります。ほとんどの場合、このプラグインは WordPress パッケージですでに利用可能です。
  • Async Javascript: WordPress が提供するオープンソース プラグイン。これにより、レンダリングをブロックする JavaScript を検出し、それを延期したり、非同期でロードしたりできます。

では、なぜ最初からプラグインを推奨しなかったのでしょうか?残念ながら、これらのプラグインの中には有料のものもあります。たとえば、Autoptimize の料金は年間 49 ドルです。これは妥当な料金ではありますが、ホスティングやその他のアプリケーションやプラグインにすでに多額のお金を支払っている人にとっては理想的ではないかもしれません。

ただし、プラグインを使用しているかスクリプトを手動で検索しているかに関係なく、縮小、非同期読み込み、読み込み順序などの概念を理解する必要があります。これにより、スクリプトの 1 つが失敗した場合の読み込みの問題のトラブルシューティングが容易になります。