WPテーマ スピードテスト2021_Lightning

このコンテンツでは、WordPressテーマ「Lightning」を使った高速化テストの結果、及び速度アップに貢献した施策等を解説します。無料で出来る基本的な対策だけでもかなりの改善が見られました(但し広告は貼っていません)。

テーマ情報

テーマの概要は、下記をご覧下さい。

※このテーブルは、横にスクロールします。
テーマ Lightning
テスト時のバージョン 13.8.11
区分 無料テーマ
公式サイト https://lightning.nagoya/ja/

測定ツール

  1. Page Speed Insights
  2. GTmetrix

※【注記】測定方針や目標値などは、下記ページにまとめてありますのでご確認下さい。

テストページ(テストサイト)

主な測定対象ページは、重くなりがちなトップページとLP(ランディングページ)。

※【202111追記】STRATEGY SUPPLIERの推奨テーマ変更に伴い、Lightningのテストサイトは閉鎖しました。現在閲覧可能な情報は、テスト当時のトップページ画像のみとなります。

テスト時点のトップページを見たい場合は、下記をクリックして下さい。

現在の状況(トップページ)

現在のテストサイト(トップページ)のパフォーマンスは下表の通りです。同時期にテストを行った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に標準で搭載されている高速化対策は下記の通りです。設定場所はダッシュボード内ではなく、「カスタマイズ」メニュー内にあるのでご注意下さい。

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テーマでも同様のテストを行っています。興味がおありでしたら、併せてご覧下さい。
(カテゴリーページトップへ移動します)

ウェブサイトは初心者じゃ作れない?いや、全然自作出来ますよ。

あなたが価値ある商品・サービスを提供している事業者なら、全くの初心者であってもWordPressサイトの自作は可能です。

最も速く、安く、完成度の高いサイトを完成させるために必要なポイントを完全無料で徹底解説。詳細は下のボタンをクリックして確認して下さい。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう