CSSとJavaScript縮小対策

みなさんこんにちは！ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！Googleページスピードインサイトを見始めてから、寝ても覚めてもポイントの向上方法が気になって仕方ないのですが、今回は修正ポイントとして上げられていた、CSSとJavaScriptの縮小を行ってみたいと思います。

外部ツールなどで縮小する方法もあるようですが、今回は、削除すればすぐ元に戻せるプラグインにて対策してみたいと思います。

 

Autoptimizeプラグイン

今回使用したのは、これ一つでCSSとJavaScriptが縮小でき、さらに設定も簡単という事で、Autoptimizeというプラグインを使用してみました。

 

導入と設定

導入方法

プラグイン導入前に必ずバックアップを取るようにしておきましょう。不具合がおきても当サイトでは一切の責任を負う事は出来ません。

1. プラグイン新規追加
2. 「Autoptimize」で検索
3. 有効化
4. 管理画面 > Autoptimizeで設定

 

設定方法

設定はいたって簡単です。したのキャプチャの部分にチェックを入れて行くだけです。詳細は後述したいと思います。

 

HTML Options

Optimize HTML Code?　：　 HTMLを縮小し、最適化します。

Keep HTML comments?

コメントアウトのHTMLを残すかどうかのチェックです。私は残すためチェックを入れていません。

JavaScript Options

Optimize JavaScript Code?　：　 JavaScriptを最適化します。

CSS Options

Optimize CSS Code?　：　 CSSを縮小し最適化します。

Generate data: URIs for images?

サイズの小さなイメージをCSS内に記述しますか？的な内容だと思います。一応チェックは入れていますが、CSSが崩れるようならチェックをはずしておきましょう。

CDN Options

CDN Base URL　： CDNは利用しないので設定はしません。

 

全ての設定が完了したら、Save Changes and Empty Cacheをクリックして、設定変更とキャッシュのクリアをしておきましょう。

このプラグインは、CSSやJavaScriptを変更するので、デザインが崩れるなどの不具合を起こす場合もあるようです。もし、デザインが崩れるようなら、設定を見直すか削除しましょう。

 

気になる結果は

パソコン導入前

 

モバイル導入前

 

 

パソコン導入後

パソコンは大幅にポイントアップして大満足です^^

 

モバイル導入後

レンダリングをブロックするスクリプトリソースが3個、CSSリソースが5個と、導入前の17個と14個から大幅に少なくなりました。また、修正を考慮するの部分の、圧縮を有効にする、CSSを縮小する、“HTMLを縮小する”が表示されなくなりました^^

 

まとめ

項目が削減され、プラグインの効果を大きく感じるとともに、モバイルのポイントが全然改善されない事に一抹の不安を感じます。更なる改善を目指し愚直に前進あるのみ！

次回モバイルポイントが低かった理由が判明　⇒　ページスピードインサイトのモバイルポイントが低かったのはなんとPhotonが原因だった！