WordPress でリソースをグループ化して縮小する方法

可能な限りパフォーマンスを向上させることは、Web サイトを管理し、WordPress でリソースをグループ化し、縮小するすべての人の夢であり、そのために私たちができる最善のことの 1 つですが、それは非常に難しいことかもしれません。 すべてのリソース (主に css ファイルと js ファイル) をグループ化すると、開発者でない場合、競合が発生する可能性があるため、Web サイトが公開される可能性があります。

WP Speed of Lightは、WordPress サイトを実行するための最良のソリューションです。これには、非常に使いやすいダッシュボードでサイトの読み込みを高速化するためのオプションが多数あり、そのオプションの 1 つがリソースのグループ化と縮小です。 グループおよび縮小プロセスからの単一ファイルの包含/除外は、競合せずにカスタム最適化を行うための鍵となります。

このブログ投稿では、サンプルの WordPress サイトを使用し、その方法を学習して、すべての設定プロセスが簡単になるようにします。

WordPressのJSとCSSの縮小方法

WordPress の js と CSS の縮小を行う方法を学びましょう。ただし、まず縮小が何を意味するのかを知る必要があります。「縮小とは、リソースがブラウザーによって処理される方法に影響を与えずに、不要または冗長なデータを削除するプロセスを指します。たとえば、コードのコメントとフォーマット、未使用のコードの削除、より短い変数名と関数名の使用などです。」

ここで、変更を確認するためにページの速度テストを実行します。この例では、woocommerce といくつかの製品を含むサイトを使用しているため、最初は読み込みが少し遅くなります。

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

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

今では、何時間もかかっていた開発者の仕事はすべて、わずか数秒で完了します。

次のステップは、WordPressのCSSとJSを最適化することです。

このプラグインを使用すると、ダッシュボードのグループ オプションを有効にするだけで、WordPress で CSS と js を最適化できるようになります。WP WP Speed of Light > SpeedUp > Group & Minify、CSS と js をグループ化するオプションを含むダッシュボードが表示されます。

これらのオプションを使用すると、次のことが可能になります。

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

HTTP リクエスト: これらは、何かを選択したり、同じサイト内の別のページに移動するたびにサーバーに送信されるリクエストです。そのため、これらのリクエストを削減できれば、読み込み時間が短縮されます。

ウェブサイト上でグループ化できるファイルやスクリプトの量を確認するには、ブラウザ コンソール (右クリック > 検査または F12) を開き、ネットワーク パネル。

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

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

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

え？他の最適化？はい！フォントの太さを最適化できます。設定でオプションを有効にするだけで簡単です。WP WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fontsオプションを選択してください。Group
fonts and Google Fontsオプションを使用すると、フォントを1つのファイルにまとめて高速に表示できます。ほとんどのWordPressテーマとレイアウトには、デフォルトで2つ以上のフォントと全ての傾斜（標準、太字、斜体など）が用意されているので、これは非常に便利です。

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

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

なんと2.8秒から0.56秒に！この記事の冒頭でお伝えした通り、読み込み時間をさらに短縮できるはずです ;)

ファイル縮小除外の使用方法

縮小化はサイトに問題を引き起こす可能性があります。これは主に、構文エラーや変数、クラス名などのエラーを含む特定のファイルをグループ化した場合に発生します。そのため、「ファイル縮小除外」オプションを使用すると、縮小化とグループ化のプロセスからファイルを除外できます。WP WP Speed of Light > SpeedUp > Group & Minify高度なファイル除外」が表示されます。

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

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

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

以下に、種類別（すべて、JS、CSS、フォント）に分類されたファイルリストが表示されます。問題の原因となるファイルが特定された場合は、ファイルグループと縮小を有効にする際に、シンプルなオン/オフスイッチを。

これにより、ファイルを除外し、リソースの縮小時に発生する可能性のある問題を簡単に解決できます。グループ化と縮小のプロセスは、特にテストにおいて依然として多少の手間がかかりますが、その努力は間違いなく報われます。WP WP Speed of Lightから直接スピードテストを実行する。
 
ぜひWP Speed of Light： https://www.joomunited.com/wordpress-products/wp-speed-of-light