WordPressでリソースをグループ化および縮小する方法
可能な限り優れたパフォーマンスを実現することは、WordPressのWebサイト、グループ、リソースを管理するすべての人の夢です。これは、WordPressでできる最善のことの1つですが、それは本当に難しいことです。 すべてのリソース（主にcssおよびjsファイル）をグループ化すると、開発者でない場合、競合が発生する可能性があるため、Webサイトが公開される場合があります。
WP Speed of Lightは、ワードプレスサイトを実行するための最良のソリューションです。これは、非常に使いやすいダッシュボードを使用してサイトの読み込みを高速化するためのオプションが多数あるためです。これらのオプションの1つは、リソースのグループ化と縮小です。 グループおよびミニファイプロセスからの単一ファイルの包含/除外は、競合のないカスタム最適化の鍵です。
このブログ投稿ではワードプレスサイトの例を使用します。これを行う方法を学習し、すべてを構成するプロセスがより簡単になるようにします。
WordPress JSとCSSを縮小する方法
ワードプレスのjsとCSSの縮小を行う方法を学びましょうが、最初に、縮小の意味を知る必要があります。フォーマット、未使用のコードの削除、短い変数名と関数名の使用など」
次に、変更を確認するためにページの速度テストを行います。この例では、woocommerceといくつかの製品を含むサイトを使用しているため、初めての読み込みは少し遅くなります。
はい、ページを読み込むのに2,79秒かかりますが、悪くはありませんが、jsとCSSを縮小して違いを確認し、 WP Speed of light ]> [SpeedUp]> [Group＆Minify]に移動してください。縮小するすべてのオプションを含むメニューを表示します。 プラグインの無料バージョンにはグループとミニファイオプションが含まれていますが、ビジュアルファイルの除外はPROアドオンバージョンでのみ使用できます。
PROアドオンオプションは次のとおりです。インラインスクリプトを除外する（インラインスクリプトを縮小から除外する）、スクリプトをフッターに移動する（すべての縮小スクリプトをフッターに移動することでサイトを高速化できます）、グループフォントとGoogleフォント（グループローカルフォントとGoogleフォント単一のファイルでより速く提供されます）および高度なファイルの除外。
ご覧のとおり、JS、CSS、およびHTMLを縮小するオプションがあります。これらのオプションをアクティブにして、[保存]をクリックすると、すべてのリソースがすぐに縮小されます。高度な構成であるため、問題が発生する可能性がありますが、すべて一部のコードとファイルを除外して修正できます（プロアドオンを使用）。
これで、数時間かかる可能性のあるすべての開発者の作業が数秒で完了します。
次のステップ、WordPressがCSSとJSを最適化する
このプラグインを使用すると、ダッシュボードでグループオプションを有効にするだけで、ワードプレスがCSSとjsを最適化できる WP Speed of Light > SpeedUp> Group＆Minifyに移動すると、グループ化するオプションを含むダッシュボードが表示されます。 CSSとjs。
これらのオプションを使用すると、次のことができます。
- グループJS：複数のJavaScriptファイルを1つのファイルにグループ化すると、HTTPリクエスト数が最小限になります
- CSSのグループ化：複数のCSSファイルを1つのファイルにグループ化すると、HTTPリクエスト数が最小限になります。
HTTPリクエスト：これは、何かを選択するか、同じサイトの別のページに移動するたびにサーバーに対して行われるリクエストであるため、これらのリクエストを減らすことができれば、ロード時間が短縮されます。
Webサイトでグループ化できるファイルやスクリプトの量を確認するには、ブラウザコンソールを開いて（右クリック> [検査]または[F12]）、ネットワークパネル。
次に、タイプ別にロードされたすべてのファイルを一覧表示できます。この例では、JSファイルリストのみをクリックしています。
これでこの設定が完了したので、グループオプション（Group CSSとGroup JS）を有効にして[保存]をクリックします。これらのオプションは慎重に使用する必要があり、競合を引き起こす可能性があるため、ページをテストする必要があることに注意してください。 。
真剣に取り組み、フォントの太さを最適化しましょう
何？ 他の最適化？ はい！ フォントの太さを最適化することができ、設定でオプションを有効にするのと同じくらい簡単 WP Speed of Light > SpeedUp> Group＆Minify> Group fonts andGoogleFontsオプションに移動するだけです。
グループフォントとGoogleフォントオプションを使用すると、それらを1つのファイルにグループ化して、より速く提供できます。これは、WordPressのテーマとレイアウトのほとんどがデフォルトですべての曲用（通常、太字、斜体）の2つまたはフォントで提供されるため非常に便利です。 ...）
そのオプションを有効にして保存をクリックすると、すべてのフォントがグループ化されます。
リソースを最小化およびグループ化するためのすべてのオプションをアクティブ化したので、サイトの読み込み時間に違いが見られるはずです。速度を確認してみましょう。
なんと違い、2.8秒から0.56秒まで！ この投稿の冒頭でお話ししたように、読み込み時間を改善することができます;）
ファイル縮小除外の使用方法
縮小はサイトで問題を引き起こす可能性があります。これは主に、構文エラーまたは同様の変数、クラス名のエラーを含む特定のファイルをグループ化するときに発生します。 そのため、「ファイルミニファイ除外」オプションを使用すると、ミニファイおよびグループ化プロセスからファイルを除外できます WP Speed of Light > SpeedUp> Group＆Minifyに移動すると、高度なファイル除外オプションが表示されます。
高度なファイル除外を使用するには、最初にスキャンを実行してオプションを有効にし、[スキャンの実行]をクリックする必要があります。
Webサイトにロードされたスクリプトを一覧表示できるようにするには、 WP Speed of Lightフォルダーをスキャンして一覧表示する必要があります。 これらは通常、すべてのプラグインとテーマをグループ化する/wp-contentフォルダーに含まれています。 そのフォルダを（少なくとも）選択し、 「今すぐスキャン」
スキャンが実行され、スキャンが完了したら、最後に結果の表示をクリックします。
タイプ（すべて、JS、CSS、フォント）で分類されたファイルのリストを以下に表示する必要があります。 ON/OFFスイッチャーを使用してここから除外できます。
これにより、ファイルを除外することができ、リソースの縮小時に発生する可能性のある問題を簡単に解決できます。グループ化と縮小のプロセスには、特にテストの場合にまだ作業が必要ですが、努力する価値は間違いなくあります。 WP Speed of Lightから直接速度テストを実行することで、いつでも動作をテストできます。
さあ、 WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light
あなたがブログを購読するとき、あなたがそれらを見逃さないように、サイトに新しい更新があるときに私たちはあなたに電子メールを送ります。
コメント