こんにちは。さとやんです。
以前から気になっていたことがあります。
それは
WordPressテンプレートって何が一番表示速度が速いの・・・？
という疑問。
どのテンプレートもあんまり変わらないのか。
それとも全然スピードが違うのか・・・。
ネット上にも様々な情報が飛び交っていますが、一体何が正しいのか正直わかりません。
ということで、今回、１３個の有名どころのテンプレートを使って、表示スピードの検証をしてみることにしました！
同じ条件でガチ比較してみたので、気になっている方にはとっても参考になる内容だと思いますよ(^^♪
【動画を公開しました！】
速度比較をした１３個のテンプレートは？
今回検証したテンプレートはこちら。有料・無料合わせて全部で１３種類あります。
| 有料 | ➀賢威8（ver8.0.0.3） |
|---|---|
| ②stork（v1.2.6） | |
| ③Hummingbird（v1.2.9） | |
| ④SANGO（V1.3） | |
| ⑤JIN（V2.15） | |
| ⑥THOR（Ver1.6.0） | |
| 無料 | ⑦Cocoon（1.9.6） |
| ⑧Siplicity2（2.8.0） | |
| ⑨LIONメディア（2.0.0） | |
| ⑩LIONブログ（2.0.0） | |
| ⑪ルクセリタス（3.7.0.2） | |
| ⑫Xeory Base（Ver0.2.0） | |
| ⑬Xeory Extension（Ver0.2.2） |
ちなみに、このチョイスは僕がこれまで使ってみたものを中心に選びました。
テンプレート速度比較の条件は？
今回の速度比較はこんな条件でやってみました。
【ブログの条件】
記事数：３６記事
メディア数：３１３画像
【測定に使用したツール】
【実施方法】
各テンプレートをブログに適用して、３回ずつ測定。その平均値をとる。
１回の測定でパソコンとスマホの両方が取得できるため、それぞれのデータを検証する。
検証するのはブログのトップページ。
【追記】
Xeory Baseはデフォルト状態だとトップページに記事の内容がすべて出てしまい、速度が極端に遅くなってしまった。
その場で記事を修正するのも面倒だったので、今回は測定対象から除外しましたm(__)m
速度比較した結果は？
で、比較検証した結果がこちら。
スコアが大きいほどスピードが速いことを示しています。（赤い網掛けは有料テンプレート、黄色網掛けは無料テンプレートです。）
PageSpeed Insightsの評価基準はこんな感じになっています↓
００－４９・・・遅い
５０－８９・・・普通
９０－１００・・・速い
PCの表示速度はいずれのテンプレートも９５以上のスコアが出ていて大差はありませんでした。
問題なのはスマホのスピードです。これはテンプレートごとにかなりばらつきが出ました。
スマホのスコアをランキング順に並べ替えるとこうなります。
| 順位 | テンプレート名 | スコア |
|---|---|---|
| 1 | Cocoon | 99.7 |
| 2 | ルクセリタス | 97.7 |
| 3 | LIONメディア | 94.0 |
| 4 | SANGO | 93.3 |
| 5 | THOR | 92.7 |
| 6 | LIONブログ | 92.0 |
| 7 | Hummingbird | 70.7 |
| 8 | stork | 68.7 |
| 9 | Xeory Extension | 67.7 |
| 10 | Siplicity2 | 66.0 |
| 11 | JIN | 63.0 |
| 12 | 賢威8 | 49.7 |
| – | Xeory Base | 11.0 |
上位３位が無料テンプレートという結果に・・・！しかもCocoonとルクセリタスに至ってはほとんど満点に近い状態です。
有料テンプレートは無料テンプレートに比べて機能が少なかったり、デザインがシンプルなのでスピードは速くなる傾向にあるのかもしれませんが、Cocoonは機能も豊富なのでやはり無料テンプレートの中では頭一つ抜きんでていますね。
有料テンプレートではSANGOとTHE THOR（ザ・トール）が優秀なスコアでした。
SANGOはかわいいデザインで人気のあるテンプレートですが、設定項目は比較的シンプルで初心者向きですね。
一方のTHE THOR（ザ・トール）は設定項目がめちゃくちゃ多く、機能に関していえば全テンプレートの中で最多です。
それでこのスピードが出ているのはある種驚異的かもしれないです。このブログもTHE THOR（ザ・トール）を使っています。
=>THE THOR（ザ・トール）の実際の使用感と性能を暴露レビュー
表示速度を上げるにはどうしたらいい？
自分の使っているテンプレートが遅かったら、テンプレートを変更するしかないのでしょうか？
いえ、必ずしもそうではありません。
コンテンツの中身や設定を変更することで、スピードを上げることが可能なので、以下の５つの方法を試してみて下さい。
➀画像サイズの最適化
②コードの圧縮
③プラグインの削減
④キャッシュ機能
⑤遅延読み込み
➀画像サイズの最適化
画像を圧縮しないままアップしているとサーバーの容量も食いますし表示も遅くなります。なので、プラグインを使って画像の最適化をしましょう。
おススメなのは「EWWW Image Optimizer」です。こちらの動画で解説しているのでよかったら参考にしてみて下さい。
②コードの圧縮
HTMLやCSS、javascriptといったコードは、コードを読みやすくするために改行やスペース、タブ文字などが大量に含まれています。
こういった余計なコードを省くことで、若干ではありますが表示速度を改善できます。
THE THOR（ザ・トール）やCocoonのようにテンプレートに圧縮機能がある場合はそれを活用しましょう。
圧縮専用のプラグイン「Autoptimize」というものがあるので、試しに導入してみて速度の変化を調べてみてください。
③プラグインの削減
これは前々から言っていますが、とにかく不要なプラグインはなるべく削除するようにしてください。
余計なプラグインは速度を落とすだけでなく、プラグイン同士の干渉を引き起こすこともあります。なるべくブログをシンプルに保ちましょう。
④キャッシュ機能
テンプレートにキャッシュ機能が備わっていたら有効化しましょう。キャッシュすることで、２回目以降のページ表示が格段に高速化します。
テンプレートに備わっていればそれを利用しますが、ない場合には「WP Fastest Cache」というプラグインがおすすめです。
⑤遅延読み込み
CSSや画像ファイルを必要に応じて遅延読み込みすることで、ユーザのファーストビューを早めることができます。
スクロールしないと見えない箇所はロードするのは後でいいので、まずはユーザが目に入る箇所だけを最速で表示してあげることが大事です。
画像の遅延読み込みには「Lasy Load」がおすすめです。
まとめ
今回はWordpressテンプレートの速度比較をしてみました。
表示スピードはテンプレートだけで決まるものではありませんが、テンプレートのみの違いを実際に数値化することで、僕自身スッキリすることができました(^^♪こういうのは実際にやってみないとわからないものですね。
ひとたびブログ運営を始めると環境周りはあまり触ることはないと思いますが、最近少し重くなってきたなー・・・と感じている場合は、一度見直しをはかるといいと思います。
