WordPressでリソースをグループ化および圧縮する方法

最高のパフォーマンスを実現することは、ウェブサイトを管理するすべての人にとっての夢です。WordPressのリソースをグループ化してミニファイすることは、そのための最善の方法の1つですが、実際には難しい場合があります。すべてのリソース（主にCSSとJSファイル）をグループ化すると、開発者でない場合、ウェブサイトが危険にさらされる可能性があります。なぜなら、競合が発生する可能性があるからです。.

WP Speed of Lightは、非常に使いやすいダッシュボードを備え、サイトの読み込みを高速化するための多くのオプションを提供するため、WordPressサイトのパフォーマンスを向上させるための最適なソリューションです。また、これらのオプションの1つは、リソースのグループ化と圧縮です。グループ化と圧縮のプロセスからの単一ファイルの包含/除外は、競合なしでカスタム最適化を行うための鍵となります。

このブログ記事では、WordPressサイトの例を使用して、すべてを設定するプロセスをより簡単に学習します。.

WordPressのJSとCSSのミニファイを行う方法

WordPressのJSとCSSの圧縮のやり方を学ぼう。ただしその前に、まず、圧縮とはどういったものなのかを知っておく必要がある。「圧縮とは、ブラウザでの処理方法に影響を与えずに、不必要または冗長なデータを削除することである。たとえば、コードのコメントやフォーマットを削除したり、未使用のコードを削除したり、変数や関数の名前を短くしたりすることなどである。」.

ここで、変更を確認するためにページのスピードテストを実行します。この例では、woocommerceと製品を使用しているサイトを使用しているため、最初のロードには少し時間がかかります。.

はい、ページの読み込みに2.79秒かかりました。悪くはありませんが、もっと改善できます。JSとCSSを圧縮して違いを見てみましょう。WP Speed of light > SpeedUp > Group & Minifyに移動すると、ミニファイするすべてのオプションを含むメニューが表示されます。プラグインの無料バージョンにはグループ化とミニファイオプションが含まれていますが、ビジュアルファイルの除外はPROアドオン版でのみ利用可能です。

PROアドオンのオプションは以下の通りです: インラインスクリプトの除外（ミニファイからインラインスクリプトを除外）、スクリプトをフッターに移動（ミニファイされたスクリプトをすべてフッターに移動することでサイトを高速化）、フォントとGoogle Fontsのグループ化（ローカルフォントとGoogleフォントを1つのファイルにグループ化してより高速に配信）および高度なファイル除外。
 
ご覧のとおり、JS、CSS、HTMLをミニファイするオプションがあります。これらのオプションを有効にして保存をクリックすると、すべてのリソースがすぐにミニファイされます。高度な設定であるため問題が発生する可能性はありますが、プロアドオンを使用していくつかのコードやファイルを除外することですべてを修正できます。

これで、数時間かかる可能性のある開発作業がわずか数秒で完了します。.

次のステップ、WordPressのCSSとJSの最適化

このプラグインを使用すると、ダッシュボードのグループオプションを有効にするだけで、WordPressがCSSとJSを最適化できるようになります。WP Speed of Light > スピードアップ > グループとミニファイに移動すると、CSSとJSをグループ化するオプションが表示されたダッシュボードが表示されます。

これらのオプションを使用すると、次のことができます:

• JSをグループ化: 複数のJavaScriptファイルを1つのファイルにグループ化すると、HTTPリクエストの数が最小限に抑えられます。
• CSSのグループ化: 複数のCSSファイルを1つのファイルにグループ化すると、HTTPリクエストの数が最小限に抑えられます。.

HTTPリクエスト: これらは、同じサイト内で何かを選択したり、別のページに移動したりするたびにサーバーに対して行われるリクエストです。したがって、これらのリクエストを減らすことができれば、読み込み時間を短縮できます。.

Webサイトでグループ化できるファイルやスクリプトの数を確認するには、ブラウザコンソール（右クリック > 検証またはF12）を開き、ネットワークパネル

次に、タイプ別にロードされたすべてのファイルをリストできます。この例では、JSファイルリストのみをクリックしています。.

この設定では、グループオプション（グループCSSとグループJS）を有効にして保存をクリックするだけです。これらのオプションは注意して使用する必要があり、競合が発生する可能性があるため、ページをテストする必要があります。.

真剣にフォントの太さを最適化しよう

何？他の最適化？はい！フォントの太さを最適化できるようになり、設定のオプションを有効にするのと同じくらい簡単です。 WP Speed of Light > SpeedUp > グループ化と圧縮 > フォントとGoogleフォントのグループ化オプションに移動してください。
フォントとGoogleフォントのグループ化オプションを使用すると、単一のファイルにグループ化して、より高速に配信できます。これは、ほとんどのWordPressテーマとレイアウトがデフォルトで2つ以上のフォント（レギュラー、ボールド、イタリックなど）で提供されているため、非常に便利です。

そのオプションを有効にして、保存をクリックするだけで、すべてのフォントがグループ化されます。.

リソースをミニファイしてグループ化するすべてのオプションを有効にしたので、サイトの読み込み時間に違いが見られるはずです。速度を確認してみましょう。.

なんと大きな違いでしょう。2.8秒から0.56秒に！この投稿の最初に述べたように、読み込み時間をより良くすることができます;)

ファイルミニファイ除外の使用方法

ミニファイケーションは、主に構文エラーや同様の変数、クラス名のエラーが含まれる特定のファイルをグループ化する場合に、サイトでトラブルを引き起こす可能性があります。そのため、「ファイルミニファイケーション除外」オプションを使用すると、ミニファイケーションとグループ化のプロセスからファイルを除外できます。WP Speed of Light > スピードアップ > グループ & ミニファイに移動すると、高度なファイル除外オプションが表示されます。

高度なファイル除外を使用するには、最初にスキャンを実行し、オプションを有効にして[スキャンを実行]をクリックする必要があります。.

 ウェブサイトに読み込まれたスクリプトを一覧表示できるようにするには、WP Speed of Lightはそれらを一覧表示するためにフォルダをスキャンする必要があります。これらは通常、すべてのプラグインとテーマをグループ化した/wp-contentフォルダに含まれています。そのフォルダ（少なくとも）を選択し、「今すぐスキャン」

スキャンが実行され、最後にスキャンが完了したら[結果の表示]をクリックします。.

タイプ（すべて、JS、CSS、フォント）別に分類されたファイルのリストが以下に表示されます。ファイルのグループ化とミニファイケーションを有効にすると問題が発生するファイルが 1 つ見つかった場合は、単純なオン/オフ切り替えを使用してここから除外できます。

これにより、ファイルを除外し、リソースの縮小時に存在する可能性のある問題を簡単に解決できます。グループ化と縮小のプロセスには、特にテストにおいて、依然として多少の作業が必要です。しかし、それは間違いなく価値があり、常に から直接スピードテストを実行することでWP Speed of Lightどのように機能するかをテストできます。
 
ぜひ WP Speed of Lightをお試しください:https://www.joomunited.com/wordpress-products/wp-speed-of-light