WEBサイト高速化!HTML、CSS、JavaScriptを縮小してくれるプラグイン「Autoptimize」

WordPressバッチ

結構まめに確認しているAlexa traffic rank。サイトの世界ランキングが確認できるもので自分のサイトの状態を把握するために使えますし、競合サイトの調査でも使えます。

マックス時は10万位以内に行くかという位の勢いでしたが、最近は少しずつ下がっていき14万位ほどで落ち着いています。

SPONSORED LINK

目次

  1. PageSpeed Toolsでサイト診断
  2. Autoptimizeをインストール
  3. 「比較」パフォーマンス測定
  4. まとめ

photo by Titanas

PageSpeed Toolsでサイト診断

つい最近サーバーのPHPバージョンを7.1にアップデートしていますし、ランクが下がっている原因は何かということでPageSpeed Toolsでサイト診断をしてみました。

するとどうでしょう、モバイルのパフォーマンスが56点でパソコンが73点という結果に。改善点も多く指摘されています。
改善点の指摘 - PageSpeed Tools

これはいかんと、指摘された改善点のうちの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」を選択で設定画面に入りましょう。

当サイトの場合はHTMLの縮小は必要ないようなので、「JavaScriptオプション」と「CSSオプション」にチェックを入れます。

Autoptimize設定 - WordPress

この設定を保存するために「変更を保存」を選択します。非常に簡単ですが設定は以上です。

「さらに最適化!」や「高度な設定」という項目もありますが、レイアウトのエラーだったりと不具合が起きてしまう可能性が少なからずあるようなので触れずにそのままにしておきました。

「比較」パフォーマンス測定

それでは今回紹介した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点という決していいとはいえない点数です。
Autoptimize導入前の点数 - PageSpeed Tools

続いてGTmetrix。先日キャッシュの有効期限設定を行ったからでしょうか、スピードスコアが83%とまあ悪くないような気がします。これが導入後でどう変わるのでしょうか。

Autoptimize導入後の点数 - GTmetrix

横のYslowというのはYahooが提供しているサイトパフォーマンス値の結果のようです。こちらは63%です。

Autoptimize導入後

導入後に計測した結果を元に見比べてみましょう。

まずはPageSpeed Insights。モバイルが63点→66点、パソコンが78点→85点とモバイルは3点しか上がりませんでしたが、パソコンの点数が7点も上がり「Good」表示に切り替わりました。

Autoptimize導入後の点数 - PageSpeed Tools

ある程度時間がかかるかと思いましたが、Autoptimizeを有効化した後に数十分程度でこのスコアになりました。

続いてGTmetrixです。こちらも上がりました。スピードスコアが83%→86%、Yslowが63%→70%に。

Autoptimize導入後の点数 - GTmetrix

まとめ

Googleは検索順位の評価のうちの1つにモバイルのページ速度を判断基準にすると公式に発表しました。今後はその影響が徐々に強くなってくるかもしれません。

今回、HTML/CSS/JavaScriptを縮小するためにAutoptimizeを導入した結果このようになりました。

PageSpeed Insights モバイル 63点→66点 パソコン 78点→85点
GTmetrix スピードスコア 83%→86% Yslow 63%→70%

Autoptimizeを導入した方が断然よいという結果になりました。インストールして有効化するだけなのでモバイルページスピードが気になる場合は導入する価値があるのはと。

ただし環境によってはあまり変わらないこともあるようですその場合はアンインストールか無効化するだけで元に戻るので問題ないかと思います。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでMechalogをフォローしよう!



トップへ戻る