AutoptimizeでPageSpeed Insightsの改善

※記事内に商品プロモーションを含む場合があります

賢威を使っている人なら是非入れておきたいプラグイン。

理由は、賢威はテーマのCSSだけでも７つあり、
他のプラグインのCSSを含めると１０以上のCSSに分割されます。

分割されると何回もリクエストする必要がありますが、
まとめてしまえば１回だけで済むので、より読み込みが早くなります。

CSSとJavaScriptを縮小し最適化するAutoptimize

WordPressプラグイン、AutoptimizeはHTML、CSS、JavaScriptを縮小し
最適化してくれるプラグイン。

PageSpeed Insightsで表示される
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
に多少効果があります。

Optimize HTML Code?
HTMLの最適化を行います、改行やコメントアウト部分が除去されます。
コメントアウト部分はKeep HTML comments?にチェックを入れれば残る様になります。

Optimize JavaScript Code?
チェックを入れるとJavaScriptの最適化を行います。
メニューなどJavaScriptsで実装している場合は動かなかったり、誤作動の
可能性があるので、プラグイン設定後にPCとスマホで動作確認をすると良いでしょう。

Optimize CSS Code?
チェックを入れるとCSSの最適化を行います。
複数のCSSファイルをキャッシュに１本化しますが、レイアウト崩れなどの可能性もあるので
プラグイン設定後にPCとスマホで動作確認をすると良いでしょう。

Generate data: URIs for images?
小さな画像をCSS内に記述するかどうかのオプション。
私はOFFにしています。
【関連】「Autoptimize」CSSとJavaScriptを縮小し最適化するプラグイン。

CDN Options・CDN Base URL
CDNは使わないので空欄のままです。

設定反映はSave Changes and Empty Cacheをクリックします。
キャッシュなどが残っている場合は、キャッシュを削除します。

ページの速度をチェック出来るのはこちらの２つ

今回はPageSpeed Insightsでチェックしました。

インストール前

インストール後

数値的には良くなっています。

インストール後、両方緑のなっていますが、
いろいろ試したら、点数が少し下がってしまいました。

また、個別記事だと記事下にある関連記事の元画像が大きいので
画像を最適化するのエラーが出ます。

すべてのエラーを消すのは無理だと思います。

CSSを遅延読み込みさせようとCSSの指定を最後にするとCSSが効かない素なｈｔｍｌ
ページが一瞬表示されてしまうので止めました。

また、個別ページだと記事下の関連記事のアイキャッチ画像が普通のサイズなので
サムネイルにしろと怒られます。

またツィッターやFacebook、GoogleアナリティクスのJavaScriptsなど
自分ではどうしようも出来ない所もあります。

PageSpeed Insightsは他のサイトもチェック出来るので
有名なブログを見ても、モバイルが５０点ぐらいな所もあるので
必要以上に気にする必要は無いと思います。

ブログのCSSやテンプレートを弄る時はHTMLやCSSの改行やコメントが除去されて
わかりにくいので一時的にプラグインを無効化しておいた方が良いかもしれません。

こちらも合わせてどうぞ