JavaScriptの非同期読み込みに WordPress サイトの速度を改善する

Last Updated: 2021 年 04 月 02 日 11のコメント

WordPress サイトの速度が出なくて悩んでな方々がいらっしゃるでしょう。 WordPress キャッシュプラグインと最適化プラグインを使用すると、サイトの速度がどの程度改善されるでしょう。 そして、Javaスクリプト、非同期読み込みにサイトの速度をさらに向上させることができます。

ちなみにサイトの速度に影響を与える要素はさまざまです。 シンプルなブログを運営する場合は、このブログで使用された GeneratePressのようなテーマを使用すると、速度面で急速に感じるでしょう。

以下は、私利用する方式です。 キャッシュプラグインは、好ましいプラグインをそのまま使用ください。 時間を少し投資して詳細なチューニング(Fine Tuning)をすると努力しただけの効果を得ることができると思います。

JavaScriptの非同期読み込みに WordPress サイトの速度を改善する

WordPress 速度の向上

WordPress サイトの速度が遅く悩みの場合は、キャッシュのプラグインと WordPress 最適化プラグインをインストールして、詳細設定をしAsync Javascript機能を有効にして速度が改善していることを確認してください。

WordPress 最適化プラグインClearfy

私はサイトの速度を向上させるために キャッシュイネーブラーというキャッシュプラグインと クリアフィという最適化プラグインを使用しています。

参考までに、キャッシュプラグインのClearfyのようなMinifyプラグインを一緒に利用する場合には、設定が重なった場合なりません。 つまり、キャッシュプラグインのMinify機能を無効にする必要がMinifyプラグインが正常に動作しています。

Clearfy有料版でAsync Javascript機能を含む追加機能が提供され、速度をさらに向上させることができます。

WordPress 最適化プラグインClearfy  -  JavaScriptの非同期読み込み

Javascriptの読み込みとjQueryロードモードでAsyncとDeferの中から選択することができます。

Clearfyプラグインを使用している場合は特にPerformance下のMinify(HTML / JS / CSS)とAssets manager、Google services、Async Javascript部分を気にしてセッティングすると、速度の改善に役立つでしょう。 Minify機能の設定をするときは、サイトが壊れずに最大のパフォーマンスを出す最適な設定を探してみてください。

JavaScriptの非同期読み込みプラグイン - Async Javascript

Clearfy無料版を利用する場合 Async Javascriptプラグインを使用してJavaScriptの非同期読み込み機能を設定することができます。

JavaScriptの非同期読み込みプラグイン -  Async Javascript

実際にこのプラグインを使用してテストしてみると、いくつかのサイトで速度が大幅に改善されていることを確認しました。

キャッシュプラグインと最適化プラグインを使用する場合は機能が重複しているプラ​​グインを複数インストールしないようにご注意ください。 速度の改善に役立つと、複数のMinificationプラグインをインストールする方がおられます。 その後、サイトの速度がより遅くなり、サイトに異常症状が表示されることがあります。

Clearfy無料版を利用する場合には、 キャッシュプラグイン+ Clearfy + Async JavaScript 程度をインストールしてチューニングを試みることができます。

ボーナス:PHP ini設定値が低いと高めてください

私のサイトを追加した後の最初のPHP ini設定値を確認して低いと調整する作業を行います。 メモリサイズ制限、max_execution_timeなどの設定値を確認していただき、設定値が低い場合は高めください。

例:

最後に、

このブログには、現在の Bluehost(Bluehost)でホストされています。 Bluehostは安価に利用することができますが、重いテーマやプラグインを使用すると、サイトの最適化が正常にならない場合、速度が遅くなるおそれがあるものです。 そのような場合、上記の措置を取って見れば助けになるでしょう。

実際に、私は Bluehostでホストされているサイトに Cache Enabler + Clearfyプラグイン無料版+ Async JavaScript 또는 Cache Enabler + Clearfy有料版を設置して運営していますが、速度がどの程度改善されるようです。

これらの措置にもサイトの速度が改善されない場合、不要なプラグインを無効にしてテーマを軽いテーマに変えるなどの措置を取って見ることができます。 そして重要なサイトである場合、速度を向上させSEOを改善するために速度の最適化の専門家(開発者)を雇うことも考慮してみることができます。

参照

ワードクラッカーのアバター画像

ワードクラッカー

プロの英国翻訳家。 WordPress 愛好家。 Naver カフェ 「ワープ社」 操作。

11のコメント

コメントを残す

  1. Clearfyプラグインをインストールしているので遅くなるのではなく、新しい関数コードを追加したので、それは遅くなりました^^;ところで、Clearfyプラグインをインストールしても大きな速度変化はわかりません。

    応答
    • このようなプラグインを設定するときは、重複設定をしないことが重要です。 クラウドウェイズのBreezeプラグインにはほとんどの機能があるため、clearfyプラグインを使用する必要はありませんが、もし使用する場合は、BreezeでClearfyと重複する機能を解除して細かく設定してみてください。

      応答
  2. 私が設定を間違っているので、それがわかりませんが、Clearfyプラグインをインストールしているので、管理者のページの速度やサイトの速度、またはあなたが遅くなります。

    応答
  3. JavaScriptコードを追加しながら機能がますます多くなるので、JavaScriptコードで動作するものがロード速度が遅かったのですが、Async Javascriptプラグインで非同期ロードを有効にするので、確かにロード速度が速くなりました。

    応答
    • クラウドウェイズが提供するBreezeプラグインを使用している場合は、このプラグインが提供する機能をサポートできます。両方のプラグインを同時に使用する場合は、設定が重複せず、問題が発生しないように細心の注意を払って設定すると良い効果が得られそうです。参考までに、jQueryスクリプトはサイトの速度に悪影響を及ぼす可能性があるため、可能な限りVanilla JSでコーディングすることをお勧めします。😄 WordPressで正しい方法でロードし、そのスクリプトが使用されている場所にのみロードされるようにすると効果的です。

      応答
      • Breeze FILE OPTIMIZATIONのJS SettingsにあるDelay JS Inline Scripts/Delay All JavaScriptは同じ機能ですか? JavaScriptの遅延と非同期ローディングの違いは何ですか?

      • Delay JS Inline ScriptsとDelay All JavaScriptは似ていますが、違いがあります。 「Delay JS Inline Scripts」は、HTML内に直接挿入されたインラインスクリプトの実行を遅らせる機能です。一方、「Delay All JavaScript」は、すべてのJavaScriptファイル(内部および外部を含む)の実行を遅らせてページの読み込み速度をさらに向上させる機能だそうです。後者はより強力な影響を与える可能性がありますが、特定の機能が意図したとおりに機能しない危険性があります。

        JavaScriptの遅延は、ページがユーザー入力(スクロール、クリックなど)を受け取るまでJavaScriptの実行を遅らせる方法です。非同期ローディングは、ブラウザが他のリソースをダウンロードしながらJavaScriptを同時に取得できるようにする方法です。遅延は実行自体を遅らせることであり、非同期ローディングは並列にダウンロードしてページレンダリングを妨げないようにする点で違いがあります。

      • BreezeでDelay JS Inline Scripts / Delay All JavaScriptのそれぞれを有効にしてテストしてみましたが、同じ速度でAsync Javascriptの非同期ローディングを使用しています。

  4. The7テーマはビジュアルページを使用して、読み込み速度が少し遅れてのは仕方ないようです。
    このポストを見ながら最大限の読み込み速度を速く、一度してみるね。
    ありがとうございます

    応答
カカオトーク相談 カトクサービス相談