こんにちは、てっちゃんです。
最近、急な気温で体調を崩されてる方が多いのでは無いでしょうか？
僕も先週から本調子ではなく、鼻声で仕事しています。
みなさんも体調には気をつけましょう。

さて、今回はサイトの高速化について普段行っていることを書いていこうと思います。

背景としては、回線速度が向上してきたことで速度を気にせずWebサイトの閲覧が出来るようになってきましたがそれにともないディスプレイも進化したことで高解像度の画像を扱うことが出来ます。これにより画像の容量が増え、スマホやタブレットといったデバイスでも遅延なしに閲覧できるようにしないといけない状態になってきました。また、google analticsにもWebサイトの速度が閲覧できるようになり、ひとつの指標となっています。

っということで、まずはツールの診断結果を見てWebサイトの改善ポイントごとに作業していきます。

今の状態を把握

遅延している部分から手を入れることが手っ取り早く高速化になつながるのでまずは
サイトの高速化にあたり今サイトのどのような状態であるかを把握する必要があります。

・Make Fewer HTTP Request
http://gtmetrix.com/make-fewer-http-requests.html

・PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

・YSlow
http://yslow.org/

・webpagetest(モバイル)
http://www.webpagetest.org/

・pingdom
http://tools.pingdom.com/fpt/

・google Analytics
http://www.google.com/intl/ja_jp/analytics/

この中でも今回は、修正方法や、修正したファイルを提供してくれるPageSpeed Insights
を使用していこうと思います。

改善を行なっていく

1.キャッシュ有効にする。

googleさんにブラウザのキャッシュを有効にするように言われているので以下のように
キャッシュを有効にする.htaccessを書きます。

1行目はファイルの種類
2行目がキャッシュの有効期限を表しています。

キャッシュは有効な手段ですが、更新頻度の高くない物に設定していきます。
なので、HTML、CSS、jsなどには注意が必要です。サイトがどれくらいの頻度で更新されているかチェックをしておきましょう。

2.jsの位置を変更する。

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」とでていますが、これはレンダリングを阻害するjsを後から読めばいいので位置を変えます。

3.画像の圧縮

次の画像の圧縮を行ないます。コレが一番簡単で効果が出やすいものなのでやっておかないのは損ですね。こちらもいくつか紹介しておきます。

・ImageOptim(Mac)

https://imageoptim.com/

PNG、JPEGファイルやフォルダごとドラック&ドロップできるのでとても楽です。
圧縮率でいうとまあまあです。大量に画像がある場合やそこまでシビアに容量の削減が求められていない時はこれでいいと思います。

・JPEGmini

http://www.jpegmini.com/

有料とフリー（使用制限あり）があり。Webサイト上でも使うことができます。JPEGの圧縮にたけていて、画質の劣化は肉眼では確認できないほどなのに結構圧縮できるので　重宝しています。

・PNGGauntlet(win)

http://pnggauntlet.com/

こちらはWindowsにのみになりますが、ツールとしてはImageOptimと似た仕様になっています。

・tinypng

https://tinypng.com/

こちらはWebサービスになりますが、PNGの圧縮率がかなり高いので大幅な削減ができます。非可逆圧縮なので一度圧縮すると元に戻せない分の効果は大きです。ただし、まとめて圧縮を行うのに制限があるので大量の圧縮をかけたい場合は少々手間がかかります。

・COMPRESSOR

https://compressor.io/

こちらも圧縮率は高いです。しかし、1ファイルづつしかアップロードできないので実用的にではないです。

非可逆圧縮を好んで使っていますが、経験上で言うとファイルが破損する可能性もあるのでサーバでのチェックは必須です。

4.HTML,CSS,jsの縮小

このあたりの圧縮もPageSpeed Insightsで行えます。
このサイトでは修正方法が提示されるのでそれに従う、もしくはchrome拡張機能のPageSpeedを使えば縮小されたHML、CSS、jsを表示してくれます。

もしくはこちらのサイトから結合・縮小を簡単にできます。
http://refresh-sf.com/yui/

5.サーバー側で圧縮

gzipというファイルを圧縮する方式があり、サーバーとユーザーのPCとの間で行う通信容量を少なくすることが出来ます。ただ、サーバー側の設定なので環境的に出来ない人もいますが、覚えておくとかなりの改善のなります。

まとめ

色々な高速化の手法がありますが、まずはできることから手をつけていきましょう。
弊社でもサーバー側の設定は自由にはいじらせてもらえなかったりしますのでフロントの部分だけで最大限努力するのがよいかと思います。