結構まめに確認しているAlexa traffic rank。サイトの世界ランキングが確認できるもので自分のサイトの状態を把握するために使えますし、競合サイトの調査でも使えます。
マックス時は10万位以内に行くかという位の勢いでしたが、最近は少しずつ下がっていき14万位ほどで落ち着いています。
PageSpeed Toolsでサイト診断
つい最近サーバーのPHPバージョンを7.1にアップデートしていますし、ランクが下がっている原因は何かということでPageSpeed Toolsでサイト診断をしてみました。
するとどうでしょう、モバイルのパフォーマンスが56点でパソコンが73点という結果に。改善点も多く指摘されています。
これはいかんと、指摘された改善点のうちの1つ「ブラウザのキャッシュを活用する」を.htaccessにて設定・対処しました。
関連記事 : WEBサイト高速化・ページの表示速度改善！ブラウザキャッシュの有効期限を設定する方法
これにより点数が改善され、劇的とまではいかないにしろモバイルが56点→63点。パソコンが73点→82点という好結果となりました。
でもまだまだ指摘されている改善点は多く、100点にはほど遠いので他にも対処する必要があります。そこで「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目が目につきました。
これは簡単にいえばページの読み込みをJavaScriptやCSSが邪魔しているので、それをページの読み込みが終わったあとに動作させるための設定といえばいいのでしょうか。仕組みはなんとなく理解できましたがなんだか手間がかかりそうだったので、「CSSを縮小する」「JavaScriptを縮小する」という項目を今回対処したいと思います。
今回紹介するプラグイン「Autoptimize」では「HTMLを縮小する」という項目も含まれますが当サイトは最適化されていました。なのでAutoptimizeでは「HTMLを縮小する」「CSSを縮小する」「JavaScriptを縮小する」というPageSpeed Toolsで指摘される改善点3つの項目に対応できるということになります。
Autoptimizeをインストール
ではプラグインAutoptimizeをWordPressに導入してみましょう。導入したあとにPageSpeed ToolsとGTmetrixでそれぞれを点数比較をしたいと思います。
WordPress管理画面にログイン。「プラグインを追加」からAutoptimizeを検索します。同じような名前のプラグインが出てきますが、左側のAutoptimizeです。
「今すぐインストール」、そして「有効化」です。
設定する
有効化しただけではHTMLやCSSは縮小されません。早速設定をやっていきましょう。といってもチェックをつけるだけの簡単設定なので初心者でも安心です。
管理画面左メニューから「設定」→「Autoptimize」を選択で設定画面に入りましょう。
まずはJavaScriptオプション。
ここは「JavaScript コードの最適化」と「連結しないで遅延」を選択です。
「jsファイルを連結」（JavaScriptファイルを連結）、これはJavaScriptファイルを1つにまとめるというもの。これは高速化するためのメリットだけではなくデメリットも。
全てのjsファイルがまとまるためデータ容量が増大するというケースもありますので、チェックを外しておきましょう。
そしてCSSオプションとHTMLオプションです。
CSSは上の3つの項目をチェックします。
HTMLオプションは「HTML コードを最適化」をチェック。
この設定を保存するために「変更を保存」を選択します。簡単ですね設定は以上です。
「比較」パフォーマンス測定
それでは今回紹介したAutoptimize導入前と導入後でパフォーマンスがどう変わるのか違いを比較してみましょう。測定に使用するサービスはGoogleが公開しているツールPageSpeed InsightsとGTmetrixです。
PageSpeed Insights
⇒https://developers.google.com/speed/pagespeed/insights/?hl=ja
GTmetrix
⇒https://gtmetrix.com/
Autoptimize導入前
それではAutoptimize導入前のパフォーマンスから見ていきましょう。まずはPageSpeed Insightsです。
モバイルが63点のパソコンが78点という決していいとはいえない点数です。
続いてGTmetrix。先日キャッシュの有効期限設定を行ったからでしょうか、スピードスコアが83%とまあ悪くないような気がします。これが導入後でどう変わるのでしょうか。
横のYslowというのはYahooが提供しているサイトパフォーマンス値の結果のようです。こちらは63％です。
Autoptimize導入後
導入後に計測した結果を元に見比べてみましょう。
まずはPageSpeed Insights。モバイルが63点→66点、パソコンが78点→85点とモバイルは3点しか上がりませんでしたが、パソコンの点数が7点も上がり「Good」表示に切り替わりました。
ある程度時間がかかるかと思いましたが、Autoptimizeを有効化した後に数十分程度でこのスコアになりました。
続いてGTmetrixです。こちらも上がりました。スピードスコアが83％→86％、Yslowが63％→70％に。
まとめ
Googleは検索順位の評価のうちの1つにモバイルのページ速度を判断基準にすると公式に発表しました。今後はその影響が徐々に強くなってくるかもしれません。
今回、HTML/CSS/JavaScriptを縮小するためにAutoptimizeを導入した結果このようになりました。
| PageSpeed Insights | モバイル 63点→66点 | パソコン 78点→85点 |
| GTmetrix | スピードスコア 83％→86％ | Yslow 63%→70％ |
Autoptimizeを導入した方が断然よいという結果になりました。インストールして有効化するだけなのでモバイルページスピードが気になる場合は導入する価値があるのはと。
ただし環境によってはあまり変わらないこともあるようですその場合はアンインストールか無効化するだけで元に戻るので問題ないかと思います。
コメント