【2022年】Webページ高速化のプラグイン「Autoptimize」設定方法

車のスピードメーター - 【2022年】Webページ高速化のプラグイン「Autoptimize」

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

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

目次

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です。

「今すぐインストール」、そして「有効化」です。

Autoptimizeをインストール - 「今すぐインストール」→「有効化」

設定する

有効化しただけではHTMLやCSSは縮小されません。早速設定をやっていきましょう。といってもチェックをつけるだけの簡単設定なので初心者でも安心です。

管理画面左メニューから「設定」→「Autoptimize」を選択で設定画面に入りましょう。

まずはJavaScriptオプション。
ここは「JavaScript コードの最適化」と「連結しないで遅延」を選択です。

Autoptimize設定 - 「JavaScriptコードの最適化」「連結しないで遅延」を選択

「jsファイルを連結」(JavaScriptファイルを連結)、これはJavaScriptファイルを1つにまとめるというもの。これは高速化するためのメリットだけではなくデメリットも。
全てのjsファイルがまとまるためデータ容量が増大するというケースもありますので、チェックを外しておきましょう。

そしてCSSオプションとHTMLオプションです。
CSSは上の3つの項目をチェックします。

Autoptimize設定 - CSSオプション

HTMLオプションは「HTML コードを最適化」をチェック。

Autoptimize設定 - 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点という決していいとはいえない点数です。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を導入した方が断然よいという結果になりました。インストールして有効化するだけなのでモバイルページスピードが気になる場合は導入する価値があるのはと。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる