Secura Vita

Category: Works , WordPress
Works

html・css・javascriptを圧縮して軽量化するwordpressプラグイン「Autoptimize」

html・css・javascriptを圧縮して軽量化するwordpressプラグイン「Autoptimize」
  • twitter
  • facebook
  • はてな
  • line

Google PageSpeed Insights でサイトの速度をチェック

このgoogleが提供しているチェックツールで自分のサイトがどのくらいのレスポンスなのか確認します。

特に何もしてないと警告が出るかなと思います。

  • 赤色:警告
  • 黄色:注意
  • 緑色:OK

このサイトをサンプルに対策してみようと思います。

100点を目指すのは少々無理があるのでとりあえず緑色の通過ラインを目指すことに。

まず何もしていない状態でチェック。

Google PageSpeed Insights 無対策

オーマイガッ!!

モバイルに至っては警告が出ているじゃないですか・・・

ダメだこいつ。早くなんとかしないと。。。

wordpressプラグイン「Autoptimize」導入

このプラグインはhtml,css,javascriptを圧縮するもの。

余計な改行や空白を除去してできるだけ軽くするというものです。

webサービスでも色々あるんですが、プラグインでできるのは便利。

私はhtml,css,javascript全部圧縮しています。詳細設定はいじっていません。

wordpressプラグイン「Autoptimize」設定

どうなるかというと・・・

Autoptimize HTML圧縮

うわー・・・すごく見づらいです・・・

これを修正したりするわけじゃないからいいけど、仕事で渡された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導入後の結果

結果はこちら

Google PageSpeed Insights Autopimize対策後

黄色になった。

効果はあるっぽいですねー。

でもまだ合格ラインには達していない・・・さてどうするか。

Autopimizeの注意点

その前に注意点を1つ。

このプラグインでjavascriptを圧縮すると動かない機能が出てしまう可能性があります。

私はコメントプラグインに「Disqus」というのを入れていたんですが、見事に動かなくなりました。

不具合でたら「javascript」のチェックを外してください。

私は他のプラグインにしてみようと思い、Jetpackのコメント機能にすると大丈夫だったんでこっちに切り替えました。

このコメントプラグインお勧めですよー。

サーバの設定を変える

ここからはwordpressとは関係ないですが、Xサーバーを使っている人は一度試してください。
(この機能を使うと画像がちょっと荒くなったので外しました)

Xサーバーには「mod_pagespeed設定」というのがあり、これを有効化するとサイトが最適化されるようです。

Xサーバーmod_pagespeed

詳しい構造はよくわかんないですけど・・・

他のサーバについてはわからないので一度コントロールパネル等で確認してみてください。

有効化した結果がこれ

Google PageSpeed Insights 対策後

おお!合格だ!

チェックしてみて

色々とチェックしてみましたが、結論。

あんまり気にするな

だと思います。

あまりに応答が遅いと改善必須ですが、体感で問題なければいいかなと。

できないところはできないし、広告が入ってたりするとどうしようもないし、ページによっても構成が違うからサイト全体でって考えると難しいですし。

こういう数字だけ気にしてても仕方ないですしね。

メンテナンスのことも考えて、ある程度改善できればそれでOK!

検証する時間にもよりますのであくまで参考程度にとどめておけばいいんじゃないかと思います。

さっきは合格だったのに時間をあけると注意になったって事はざらです。

それよりも

  • 元々のHTMLコーディングをきっちりやる。
  • CSSはできるだけ簡素に。
  • wordpress・jQueryプラグインはできるだけ減らす。

うう・・・(T_T) 初心忘れるべからずですね・・・

サーバも大事ですね。

ある程度を目指すなら数100円のサーバはやめといたほうがいいかも。

その点Xサーバーはコスパいいですねー。

wpXクラウドもちょっと興味あります。

このサイトが万が一、、いや億が一嬉しい悲鳴を上げるようなことになればそっちに移転してみようかなぁ


おもしろかった・役に立った
  • twitter
  • facebook
  • はてな
  • line
▼ブログランキング参加中!クリック!▼
  • ブログランキング・にほんブログ村へ

Leave a comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ソースコードを記入する場合は [code]~[/code] でくくってください。
[code]
echo "Hello World";
[/code]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください