このコンテンツでは、WordPressテーマ「Lightning」を使った高速化テストの結果、及び速度アップに貢献した施策等を解説します。無料で出来る基本的な対策だけでもかなりの改善が見られました(但し広告は貼っていません)。
テーマ情報
テーマの概要は、下記をご覧下さい。
テーマ | Lightning |
テスト時のバージョン | 13.8.11 |
区分 | 無料テーマ |
公式サイト | https://lightning.nagoya/ja/ |
測定ツール
- Page Speed Insights
- GTmetrix
※【注記】測定方針や目標値などは、下記ページにまとめてありますのでご確認下さい。
WORDPRESSテーマ スピードテスト(2021):DIY WordPress Site
テストページ(テストサイト)
主な測定対象ページは、重くなりがちなトップページとLP(ランディングページ)。
※【202111追記】STRATEGY SUPPLIERの推奨テーマ変更に伴い、Lightningのテストサイトは閉鎖しました。現在閲覧可能な情報は、テスト当時のトップページ画像のみとなります。
テスト時点のトップページを見たい場合は、下記をクリックして下さい。
LIGHTNING TESTPAGE(202102):DIY WordPress Site
現在の状況(トップページ)
現在のテストサイト(トップページ)のパフォーマンスは下表の通りです。同時期にテストを行ったDIVERやCocoonを上回り、ダントツの速さを見せつけました。
※このテーブルは、横にスクロールします。
no. | ツール名/測定項目 | 目標値 | スコア | 差分 |
1 | PageSpeed Insights(モバイル)スコア | – | 78 | |
2 | PageSpeed Insights(モバイル)TTI | 4.0秒 | 3.3秒 | -0.7秒 |
3 | PageSpeed Insights(パソコン)スコア | – | 99 | |
4 | PageSpeed Insights(パソコン)TTI | 2.0秒 | 0.7秒 | -1.3秒 |
5 | GTmetrix(LTE-Mobile)TTI | 2.5秒 | 2.0秒 | -0.5秒 |
6 | GTmetrix(LTE-Mobile)フルロード時間 | 5.0秒 | 2.7秒 | -2.3秒 |
7 | GTmetrix(LTE-Mobile)ページサイズ | – | 673KB | |
8 | GTmetrix(LTE-Mobile)リクエスト数 | – | 15 |
スクリーンショット(Page Speed Insights モバイル)
スクリーンショット(Page Speed Insights パソコン)
スクリーンショット(GTmetrix)
対策前後の比較(旧トップページ)
最新の結果ではDIVERやCocoonを上回りましたが、それまではずっとLightningが一番遅かったのです。対策とテストを繰り返してきた者からすれば、まさに「衝撃の結末」という感じでした。
旧バージョンのトップページにおける「素」の状態(Before)と対策後の状態(After)、それぞれの計測結果を比較しました。詳細は下表の通りです。
※このテーブルは、横にスクロールします。
no. | ツール名/測定項目 | 対策前スコア | 対策後スコア | 差分 |
1 | PageSpeed Insights(モバイル)スコア | 61 | 68 | +7 |
2 | PageSpeed Insights(モバイル)TTI | 6.4秒 | 5.8秒 | -0.6秒 |
3 | GTmetrix(ブロードバンド低速)フルロード時間 | 10.9秒 | 9.4秒 | -1.5秒 |
4 | GTmetrix(ブロードバンド低速)ページサイズ | 1.60MB | 1.35MB | -0.25MB |
5 | GTmetrix(ブロードバンド低速)リクエスト数 | 34 | 20 | -14 |
【※注記】:当初は「ブロードバンド低速(1.5Mbps/384Kbps,50ms)」接続でテストを行っていた。だがPage Speed Insightsとの差があまりに大きくて比較しづらかったので、現在は「LTE-Mobile接続(15/10Mbps,100ms)」に変更している。
スクリーンショット(Page Speed Insights モバイル・対策前)
スクリーンショット(Page Speed Insights モバイル・対策後)
スクリーンショット(GTmetrix・対策前)
スクリーンショット(GTmetrix・対策後)
テスト(改善)概要
テスト(改善)の概要は下記の通りです。
- STEP1(1回目):「テーマ側の高速化対策を「ON」にする」&「画像最適化」の実施
- STEP2(2回目):不要なCSS/Javascriptを読み込ませない。加えて、CSS/Javascriptを圧縮する
- STEP3(3回目):キャッシュプラグインの導入
STEP1の「テーマ側の高速化対策を「ON」にする」と「画像最適化」について補足します。
「テーマ側の高速化対策」
Lightningに標準で搭載されている高速化対策は下記の通りです。設定場所はダッシュボード内ではなく、「カスタマイズ」メニュー内にあるのでご注意下さい。
LightningCSS最適化(高速化)設定
LightningCSS最適化(高速化)設定には、「Tree shaking」と「Preload CSS」の2か所の設定項目があります。説明を見ると、主要なCSSのインライン出力(Tree shaking)とクリティカルCSS以外のCSSのプリロード設定(Preload CSS)とのこと。
いずれも有効な施策(計測ツールで毎度のように指摘される項目)のため、テストサイトでは上記設定を「有効化(推奨設定)」してテストを行いました。
「画像最適化」詳細
「画像最適化」の具体的な作業内容は下記の通りです。
- STEP1:画像は使用箇所の最大表示幅以下にトリミングする
- STEP2:画像は全て圧縮する(今回は「Tiny PNG」を使用)
- STEP3:Wordpressにアップロード
多少面倒ですが、効果てきめんです。トップページやLPのような「勝負ページ」ではやる価値があります。
表示速度アップに有効だった施策
効果の高かった対策は、プラグインの導入です。
Lightningを使っていて、表示速度の遅さにお悩みなら、下記3つのプラグインを試してみて下さい。
- プラグイン「Asset Clean UP」
- プラグイン「Autoptimize」
- プラグイン「WP Fastest Cache(WPFC)」
表示速度改善時の注意点
対策を重ねる中で発生した不具合や、懸念される点について解説します。
- ファーストビューのスライドショーは要注意(使い過ぎに注意。画像の選定はシビアに)
- Lightning独自の装飾は、使い過ぎに注意(重い)
ざっと目視確認した限り、外観上の不具合は特に見当たりません。
それよりも、Lightningで速度低下を招く根本原因は上記2項目。これらの項目をキッチリ対策するのが最優先です。参考までに、現在テストサイトのトップページで使用している画像と装飾に関する情報をシェアします。
- 大きさ:1300 x 700 px
- サイズ:104KB/116KB
- 装飾:ボタン×8か所
他のテーマのテスト結果
他のWordPressテーマでも同様のテストを行っています。興味がおありでしたら、併せてご覧下さい(カテゴリーページトップへ移動します)。