【Lightning】表示速度を改善した設定はコレ！

閲覧ありがとうございます。

※計測はPageSpeed Insightsで行いました。

そんな問題解決につながれば嬉しいです。

スピードアップの検証

サイトの表示速度を上げるため、Lightningデフォルトの高速化機能のほかプラグインもすべて無効化した状態から検証しました。

参考までにパフォーマンスの数値はあくまで目安なのですが、モバイルでは４０でOK、７０でGOOD。PCでは８０でOK、９０でGOODのようです。

私がLightningで運用しているサイトでは以下の高速化に関わるツールを使っていました。
※現在はテーマ「SWELL」に変更しています。

1. Lightning CSS最適化
   （Tree shaking 有効化設定）
2. Lightning CSS最適化
   （Preload CSS 有効化設定）
3. プラグイン（Autoptimize）：コードの効率化
4. プラグイン（Converter for Media）：画像の軽量化
5. プラグイン（WP Super Cache）：キャッシュ管理

結果がわかれば良い方が多いと思うので検証結果は表示速度が速い順に並べていきます。

検証結果

最高値は６７ポイント（モバイル）

1. Tree shaking 有効化設定：ON
2. Preload CSS 有効化設定：OFF
3. Autoptimize：ON
4. Converter for Media：ON
5. WP Super Cache：ON

設定は有効にする順番によってパフォーマンスの値が異なりました。１を有効にしたのち３，４と順に有効にしたときが一番高い数値になりました。５は条件に変化は無いと考え、常にONにしていました。

因みにこの時のPCでの値は９５ポイントでした。

２番目以下の測定結果

２番目以降は続けて表示します。

1. Tree shaking 有効化設定：OFF
2. Preload CSS 有効化設定：OFF
3. Autoptimize：ON
4. Converter for Media：ON
5. WP Super Cache：ON

1. Tree shaking 有効化設定：ON
2. Preload CSS 有効化設定：OFF
3. Autoptimize：ON
4. Converter for Media：OFF
5. WP Super Cache：ON

1. Tree shaking 有効化設定：ON
2. Preload CSS 有効化設定：OFF
3. Autoptimize：OFF
4. Converter for Media：OFF
5. WP Super Cache：ON

1. Tree shaking 有効化設定：OFF
2. Preload CSS 有効化設定：OFF
3. Autoptimize：OFF
4. Converter for Media：OFF
5. WP Super Cache：ON

1. Tree shaking 有効化設定：OFF
2. Preload CSS 有効化設定：OFF
3. Autoptimize：ON
4. Converter for Media：OFF
5. WP Super Cache：ON

1. Tree shaking 有効化設定：OFF
2. Preload CSS 有効化設定：OFF
3. Autoptimize：OFF
4. Converter for Media：OFF
5. WP Super Cache：ON

1. Tree shaking 有効化設定：OFF
2. Preload CSS 有効化設定：ON
3. Autoptimize：OFF
4. Converter for Media：OFF
5. WP Super Cache：ON

その他に実践していること

紹介したこと以外にも画像サイズを大きすぎないサイズでアップロードするようにしています。

また、Googleの口コミをプラグインでサイト連携すると劇的に遅くなった経験があります。

グーグルフォントを読み込ませない設定も効果的です。（今回は注意表示が出なかったので実践していません。）

サイトの表示はSEOだけでなくユーザビリティにかなり影響すると思うのであなたのサイトにも効果があると嬉しいです。

最後までご覧いただきありがとうございました。