サイトの表示スピードを速くする方法

ページの表示スピードが遅いと、
SEOで不利になります。

ページの表示スピードが遅い時の、
ページスピードを上げる方法を解説します。

あなたのページの表示スピードは、
PageSpeed Insightsというサイトで計測できます。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

 

あるサイトを計測した結果、
このような結果となりました。

 

モバイルで”6”。

 

パソコンで”57”。

メチャクチャ遅いです。

 

そこで、今回の方法を実施すると、

モバイルで”20”。

 

パソコンで”84”まで回復しました。

 

それではやっていきましょう!

 

まずは、
Async JavaScript と
Autoptimize の
2つのプラグインをインストールしてください。

 

Async JavaScriptの設定

ダッシュボード→設定→Async JavaScript


Enable Async JavaScript?にチェックを入れてください。

 


Apply Asyncをクリック、それでエラーが出る場合は、Apply Deferをクリック。

Async JavaScript Methodは、Asyncをチェック。

jQueryは、Asyncをチェック。

 

あとは、初期状態のままでOKなので、ウィンドウの一番下にあるSave Settingsをクリックしてください。

 

Autoptimizeの設定

ダッシュボード→設定→Autoptimize


JavaScript コードの最適化、
JS ファイルを連結する、
をチェックする
※JS ファイルを連結する、にチェックを入れているとiphoneでの表示がくずれる場合があります。
その場合は、JS ファイルを連結するのチェックを外してください。


CSS コードを最適化、
CSS ファイルを連結する、
インラインの CSS も連結、
をチェックする。

HTML コードを最適化にチェックを入れる

その他のオプションは全てにチェックを入れる

 

 

他の部分は初期状態のままでOKです。

下部にある変更を保存とキャッシュの削除をクリックしてください。

以上で、完了です。

もう一度、
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
でページの速さを測ってみて、
効果をご確認ください。

もっとスピードアップしたい時

これ以上にスピードアップをする場合、
特に、elementorのプラグインを導入しているとページの表示スピードが遅くなってしまいます。
その場合には、
この方法を追加でやると、
高速化できます!

a3 Lazy Loadのプラグインをインストール

設定はImage Load Thresholdのところで400と値を入力するだけ、あとは初期設定のままでOK。

EWWW Image Optimizerのプラグインを導入

基本タブのメタデータを削除の箇所にチェック。

変換タブの変換リンクを非表示にチェック。

他の設定は初期設定のままOK。

ダッシュボードのメディアの部分に一括最適化があるので、
こちらで、これまでの画像を一括最適化する。

※プラグイン導入後以降にアップした画像は、自動で最適化されます。
この一括最適化は、プラグイン導入以前にアップした画像の画像サイズを最適化します。

Revision Controlプラグインを導入する

なるべくリビジョンの数を少なくしたいので、私はこのような設定にしています。

参考にしてみてください!

 

さぁ、わくわく、どのくらいページのスピードが速くなったでしょうか?

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

こちらでページスピードを計測してみてください!