WordPressサイト高速化テスト2021_DIVER

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

テーマ情報

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

※このテーブルは、横にスクロールします。
テーマ DIVER
テスト時のバージョン 4.7.3
区分 有料テーマ(17,980円)
公式サイト https://tan-taka.com/diver/

測定ツール

  1. Page Speed Insights
  2. GTmetrix

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

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

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

各ページごとのテスト結果を見たい場合は、下記をクリックして下さい(テストサイトへ移動します)。
テスト時点でのページ構成や、測定結果のスクリーンショット(完全版)を確認出来ます。

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

現在のテストサイト(トップページ)のパフォーマンスは下表の通りです。「結構速い」と言っても大袈裟ではないレベルになったと思います。

※このテーブルは、横にスクロールします。

no. ツール名/測定項目 目標値 スコア 差分
1 PageSpeed Insights(モバイル)スコア - 81
2 PageSpeed Insights(モバイル)TTI 4.0秒 4.1秒 +0.1秒
3 PageSpeed Insights(パソコン)スコア - 99
4 PageSpeed Insights(パソコン)TTI 2.0秒 0.6秒 -1.4秒
5 GTmetrix(LTE-Mobile)TTI 2.5秒 2.1秒 -0.4秒
6 GTmetrix(LTE-Mobile)フルロード時間 5.0秒 3.1秒 -1.9秒
7 GTmetrix(LTE-Mobile)ページサイズ - 677KB
8 GTmetrix(LTE-Mobile)リクエスト数 - 22

スクリーンショット(Page Speed Insights モバイル)

スクリーンショット(Page Speed Insights パソコン)

スクリーンショット(GTmetrix)

対策前後の比較(旧トップページ)

では、最初から現在のようなパフォーマンスを見せていたのか?と聞かれれば、答えは「NO」。パソコンはともかく、モバイルの方は散々な結果でした。

旧バージョンのトップページにおける「素」の状態(Before)と対策後の状態(After)、それぞれの計測結果を比較しました。詳細は下表の通りです。

※このテーブルは、横にスクロールします。

no. ツール名/測定項目 対策前スコア 対策後スコア 差分
1 PageSpeed Insights(モバイル)スコア 63 76 +13
2 PageSpeed Insights(モバイル)TTI 6.3秒 4.4秒 -1.9秒
3 GTmetrix(ブロードバンド低速)フルロード時間 7.8秒 6.5秒 -1.3秒
4 GTmetrix(ブロードバンド低速)ページサイズ 1.04MB 0.85MB -0.19MB
5 GTmetrix(ブロードバンド低速)リクエスト数 38 24 -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」にする」と「画像最適化」について補足します。

「テーマ側の高速化対策」

DIVERに標準で搭載されている高速化対策は下記の通りです。

DIVER標準の高速化対策
  • サムネイル画像遅延処理

「画像最適化」詳細

「画像最適化」の具体的な作業内容は下記の通りです。

作業内容

STEP1:画像は使用箇所の最大表示幅以下にトリミングする
STEP2:画像は全て圧縮する(「Tiny PNG」を使用)
STEP3:Wordpressにアップロード

多少面倒ですが、効果てきめんです。トップページやLPのような「勝負ページ」ではやる価値があります。

表示速度アップに有効だった施策

効果の高かった対策は、プラグインの導入です。
DIVERを使っていて、表示速度の遅さにお悩みなら、下記2つのプラグインを試してみて下さい。

効果の高かった対策

・プラグイン「Asset Clean UP」
・プラグイン「Autoptimize」

※【注記】旧バージョンのテスト時にはプラグイン「WP Fastest Cache(WPFC)」も使っていましたが、不具合が発生したため現在は外しています。具体的な症状は、下記を参照下さい。

表示速度改善時の注意点

対策を重ねる中で発生した不具合や、懸念される点について解説します。

注意点
  • ファーストビュー画像サイズが決まっていない→指摘事項が消えない※1
  • WPFCを使うとSPのファーストビュー表示が崩れるかも?(テストサイトは3分割になった)※2

※1:DIVERの場合、ファーストビュー画像(正確には背景画像)は自動調整されます。そのせいか、推奨サイズの記載はありません。テストサイトで使った画像サイズは「1,300×700px」。参考になれば幸いです。

※2:スマートフォンでテストサイトにアクセスしたら、ファーストビュー画像が3分割された状態で表示されました。WPFCのインストール前は普通に表示されていたので、原因はほぼWPFCだと思われます。商用(本番)サイトでWPFCをテストする場合は十分ご注意下さい。

他のテーマのテスト結果

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

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

最新情報をお届けします

Twitterでフォローしよう