ODDBRAIN.JP | The splash Ideas

サイトのレスポンス高速化 Part.2

Preview Post:サイトがなんか遅いっぽいので対策してみた

まだ行っていなかったCSS最適化、gzip圧縮を行なっていきます。HTTP/2はとりあえず後回しです。

#CSS最適化
最適化というよりは圧縮作業に近いですけど、もう更新する必要のない、テーマ的なCSSに関してはminifyをしていきます。自動化するほど数がなかったので以下のサイトを使いました。
CSS Minifier (スタイルシートの圧縮) | Syncer

入力すると勝手に圧縮してくれるんで楽ですねこれ。
~.min.cssという名前で保存して入れ替えました。

#gzip圧縮
これも前回のと同様一旦.htaccessで書いて問題無ければhttpd.confに書き直そうかと思います。というかほかにもやり方あるかと思いますが、面倒なのでまとめてできるこの方法使いました。どうせ人来ないんでCPUを多少食っても問題ないだろうという判断です。
コピペなんで元サイトを見てもらえればと思いますが、重要なのは1行目でgzip圧縮の宣言、5, 6行目で画像の圧縮は行わないことです。画像を圧縮しないのは基本的に不可逆なファイルだからですが、利用者に秘密で勝手に圧縮していた例もあるように、問題が発生する場合もあるようです。
.htaccess

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

cf, gzip圧縮でCSSやJSなどの転送量を減らす方法

ここで、Deflateができているか確認しました。
HTTP Compression Test Result
できてますね。よかったです。

あと、GoogleのSpeedTestをやると、毎回Youtubeの動画がスマホサイトだとはみ出すぞおい!って怒られるので何とかしました。っていうか、最初からそういう仕様にしていただければ問題ないはずなんですけどねGoogle=san。

HTML

<div class="youtube-video">
  <iframe src="https://www.youtube.com/embed/YmXToa2Uehk" frameborder="0"></iframe>
</div>

CSS

div.youtube-video{
  width:100%;
  padding:30px 0 56.25%;
  overflow:hidden;
  position:relative;
}
div.youtube-video iframe{
  width:100% !important;
  height:100% !important;
  bottom:0;
  position:absolute;
  top:0;
}

cf, YouTube動画の埋め込みサイズをレスポンシブ対応にする方法

ここまでやって、もう一度PageSpeed Insightsやったらかえってスコアが下がったのですがどうしてでしょう…
特にCSSの最適化はちょっと何言ってるかわかんないですってレベルで最適化できてないですね。

その後、画像の再度最適化を行なったり、いろいろ見直したところPC向けのスコアが88になりました。モバイルはまだ73だけど今のところこれくらいでいいんじゃないかなと思います。読み込み速度も2.9秒と3秒切りました。WP自身の見直しとかが必要かと思いますがそれはおいおい。てかGoogleのページ表示速度1秒以内ってかなり厳しくないっすか…?