WordPressテーマをLuxeritasに変えるとPageSpeedInsightsはALL100?!

2017-08-05

敬愛なるあなたへ ー 神谷宇海(@UmiKamiya)です。

この度、モバイルからの光速表示を達成すべくWordPressテーマを有料のSTORK(ストーク)から無料のLuxeritas(ルクセリタス)に変えました。このルクセリタス、開発者のルナさんによるとGoogleのPageSpeed Insightsで設定次第でスコアALL 100を達成可能なテーマとのこと。一体、Wordpressの知識がない初心者の僕にでもそれができてしまうのか。それを検証してみました。結論を先に述べると達成には至らずも大幅なスコアアップに繋がりました。これからその過程を見ていきましょう。

 

今回使用するツール

”サイトの起動時間が3秒以上だと40%のユーザーが断念してしまう”とのこと。確かに僕も表示速度の遅いサイトだとさっと閉じて、別のサイトを探しています。皆さんも僕のこの検証結果とご自身のページと比較してみてくださいね。

 

 

STORK(ストーク)を使っていた時のスコア

PCのスコア ー 86点

PCのスコアは85点を超えてGoodの評価をいただきました。ストークのPCデザインは美しく、記事下の人気記事の表示などもありPV(ページビュー)数を上げる仕組みが無駄なく含まれていてとても好印象です。この点は僕も気に入っていました。

モバイルのスコア ー 64点

問題はモバイルの点数。スコアが70点を下回りPoorの評価を受けてしまったことです。僕がWordpress初心者ということもあり、設定面において改善すべき点がまだまだあるのかも知れません。しかし、スコア上昇のために有料テーマを個性であるアニメーションなどを無くし、見た目が無料テーマと変わらなくなるのであれば、いっその事、無料のルクセリタスに変更することに決めたのでした。

モバイルの表示速度 ー 5秒

モバイルからの表示速度は5秒。概ね良好とのことです。ページを表示するまでの訪問者の推定離脱率は19%。ここはぜひ3秒以下で表示させたいところです。

 

Luxeritas(ルクセリタス)移行直後のスコア

PCのスコア ー 91点

テーマをルクセリタスに移行しただけでスコアは91点を獲得。ブログヘッダーも設定していません。このテーマ自体もとてもシンプルですので、読み込むデータ量が少ない分、スコアが上昇するのは当然とも言えます。

モバイルのスコア ー 70点

モバイルの点数は5点上昇の70点。評価はPoor(貧弱)を脱出し、Need Work(要改善)へ。予想としては80点は越えると思っていたので、肩透かしを食らった印象です。いくつもの設定の改善点があるのでしょう。

モバイルの表示速度 ー 4秒

モバイルの速度は1秒縮まり4秒へ。たった1秒で訪問者の離脱率が19%から10%まで変わるとは。表示速度はやはり侮れません。

 

Luxeritas(ルクセリタス)設定変更後のスコア

ここからはルクセリタスの作成者ルナさん推奨の設定変更を施した場合のスコア上昇を見ていきたいと思います。詳しい設定内容は以下を参照してください。

高速化するためには –  Luxeritas Theme

PCのスコア ー 93点

2点上昇の93点。残念!高速化設定をすればてっきり100点を取得できるものだと思っていました。

適応可能な最適化部分には、以下の2点が指摘されています。

  • スクロールせず見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する。
  • サーバーの応答時間を短縮する

これらを解決する術は、僕がまだ分かっていないので次回以降に持ち越しです。。。

モバイルのスコア ー 80点

モバイルは10点上昇の80点を獲得。ここはグッと上がりましたね!本音としては90点台を獲得して欲しかったです。

モバイルの表示速度 ー 4秒

モバイル速度は変わらずの4秒。訪問者の推定離脱率、”ほぼなし”の称号を手に入れるためには、4秒の壁を突破しなければなりません。これはサーバー乗り換えやプラン変更を視野に入れないといけなさそうですね。

 

PageSpeed Insightsのスコアに関係なく光速でページを表示する方法

ルクセリタスへ移行し、推奨設定を施しただけではPageSpeed InsightsのスコアをALL100取得することはできませんでした。モバイルからの表示も4秒の壁を越えることはできず!!取得するためにはルクセリタスの設定、サーバーの設定など色々と設定を調べ改善する必要がありそうです。

そんなことは纏まった休みの日に後回し。たった1秒で画面レイアウトをほとんど崩さずに表示する方法があります。それはルクセリタスのAMP機能。APMプラグインを追加しただけでは届かない組み込まれているからこそできるAMP機能については、また改めて検証したいと思います。

 

昨日より幸せな、あなたの明日を願って。

それでは、また。

IT, ブログ

Posted by Umi Kamiya