html・css・javascriptを圧縮して軽量化するwordpressプラグイン「Autoptimize」
Google PageSpeed Insights でサイトの速度をチェック
このgoogleが提供しているチェックツールで自分のサイトがどのくらいのレスポンスなのか確認します。
特に何もしてないと警告が出るかなと思います。
- 赤色:警告
- 黄色:注意
- 緑色:OK
このサイトをサンプルに対策してみようと思います。
100点を目指すのは少々無理があるのでとりあえず緑色の通過ラインを目指すことに。
まず何もしていない状態でチェック。
オーマイガッ！！
モバイルに至っては警告が出ているじゃないですか・・・
ダメだこいつ。早くなんとかしないと。。。
wordpressプラグイン「Autoptimize」導入
このプラグインはhtml,css,javascriptを圧縮するもの。
余計な改行や空白を除去してできるだけ軽くするというものです。
webサービスでも色々あるんですが、プラグインでできるのは便利。
私はhtml,css,javascript全部圧縮しています。詳細設定はいじっていません。
どうなるかというと・・・
うわー・・・すごく見づらいです・・・
これを修正したりするわけじゃないからいいけど、仕事で渡されたHTMLファイルがこんなのだったら嫌だなぁ・・・
cssは
<link type="text/css" media="all" href="～style.css rel="stylesheet"/>
<link type="text/css" media="all" href="～plugin.css rel="stylesheet"/>
↓
<link type="text/css" media="all" href="～autoptimize_****.css rel="stylesheet"/>
jsは
<script type="text/javascript" defer="" src="～jquery.js"></script>
<script type="text/javascript" defer="" src="～function.js"></script>
<script type="text/javascript" defer="" src="～plugin.js"></script>
↓
<script type="text/javascript" defer="" src="～autoptimize_****.js"></script>
という風にまとめられます。
そのファイルはwp-content/cache内に保存されています。
Autoptimize導入後の結果
結果はこちら
黄色になった。
効果はあるっぽいですねー。
でもまだ合格ラインには達していない・・・さてどうするか。
Autopimizeの注意点
その前に注意点を1つ。
このプラグインでjavascriptを圧縮すると動かない機能が出てしまう可能性があります。
私はコメントプラグインに「Disqus」というのを入れていたんですが、見事に動かなくなりました。
不具合でたら「javascript」のチェックを外してください。
私は他のプラグインにしてみようと思い、Jetpackのコメント機能にすると大丈夫だったんでこっちに切り替えました。
このコメントプラグインお勧めですよー。
サーバの設定を変える
ここからはwordpressとは関係ないですが、Xサーバーを使っている人は一度試してください。
(この機能を使うと画像がちょっと荒くなったので外しました)
Xサーバーには「mod_pagespeed設定」というのがあり、これを有効化するとサイトが最適化されるようです。
詳しい構造はよくわかんないですけど・・・
他のサーバについてはわからないので一度コントロールパネル等で確認してみてください。
有効化した結果がこれ
おお！合格だ！
チェックしてみて
色々とチェックしてみましたが、結論。
あんまり気にするな
だと思います。
あまりに応答が遅いと改善必須ですが、体感で問題なければいいかなと。
できないところはできないし、広告が入ってたりするとどうしようもないし、ページによっても構成が違うからサイト全体でって考えると難しいですし。
こういう数字だけ気にしてても仕方ないですしね。
メンテナンスのことも考えて、ある程度改善できればそれでOK！
検証する時間にもよりますのであくまで参考程度にとどめておけばいいんじゃないかと思います。
さっきは合格だったのに時間をあけると注意になったって事はざらです。
それよりも
- 元々のHTMLコーディングをきっちりやる。
- CSSはできるだけ簡素に。
- wordpress・jQueryプラグインはできるだけ減らす。
うう・・・(T_T) 初心忘れるべからずですね・・・
サーバも大事ですね。
ある程度を目指すなら数100円のサーバはやめといたほうがいいかも。
その点Xサーバーはコスパいいですねー。
wpXクラウドもちょっと興味あります。
このサイトが万が一、、いや億が一嬉しい悲鳴を上げるようなことになればそっちに移転してみようかなぁ
