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 > スピードアップ > グループ & 縮小, すべての縮小オプションが表示されたメニューを見ることができます。プラグインの無料バージョンにはグループと縮小オプションが含まれていますが、ビジュアルファイル除外はPROアドオンバージョンでのみ利用可能です。

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

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

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

このプラグインを使用すると、WordPress がダッシュボードでグループオプションを有効にするだけで CSS と JS を最適化できるようになります。次に移動してください WP Speed of Light > SpeedUp > Group & Minify、ダッシュボードで CSS と JS をグループ化するオプションを見ることができるようになります。

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

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

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

ウェブサイトでどれだけのファイルやスクリプトをグループ化できるか確認するには、ブラウザのコンソール（右クリック > Inspect または F12）を開き、 ネットワークパネル.

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

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

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

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

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

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

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

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

ミニファイはサイトで問題を引き起こす可能性があり、主に構文エラーや変数・クラス名の類似エラーを含む特定のファイルをグループ化したときに発生します。そのため、「ファイルミニファイ除外」オプションを使用すれば、ミニファイおよびグループ化プロセスからファイルを除外でき、次へ進むことができます WP Speed of Light > SpeedUp > Group & Minify、以下を確認できます 高度なファイル除外 オプションです。

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

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

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

タイプ別に分類されたファイルのリスト（All、JS、CSS、Font）は以下に表示されるはずです。問題を引き起こすファイルを特定した場合、ファイルグループと縮小を有効にするとき、シンプルな ON/OFF スイッチ.

これにより、ファイルを除外でき、この方法でミニファイ時に発生する可能性のある問題を簡単に解決できます… グループ化とミニファイのプロセスはまだ作業が必要で、特にテスト時にそうですが、確実に価値があります。そして、常にその動作をテストできるようになります 直接からスピードテストを実行する WP Speed of Light.
 
ぜひ試してみてください WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light