BLOGサイトの高速化で行なっていること2014/11/21てっちゃんツイートこんにちは、てっちゃんです。最近、急な気温で体調を崩されてる方が多いのでは無いでしょうか?僕も先週から本調子ではなく、鼻声で仕事しています。みなさんも体調には気をつけましょう。今回はサイトの高速化について普段行っていることを書いていこうと思います。背景としては、回線速度が向上してきたことで速度を気にせずWebサイトの閲覧が出来るようになってきましたがそれにともないディスプレイも進化したことで高解像度の画像を扱うことが出来ます。これにより画像の容量が増え、スマホやタブレットといったデバイスでも遅延なしに閲覧できるようにしないといけない状態になってきました。analticsにもWebサイトの速度が閲覧できるようになり、ひとつの指標となっています。いうことで、まずはツールの診断結果を見てWebサイトの改善ポイントごとに作業していきます。遅延している部分から手を入れることが手っ取り早く高速化になつながるのでまずはサイトの高速化にあたり今サイトのどのような状態であるかを把握する必要があります。Insightsを使用していこうと思います。改善を行なっていく1.キャッシュ有効にする。googleさんにブラウザのキャッシュを有効にするように言われているので以下のようにキャッシュを有効にする.htaccessを書きます。public"1行目はファイルの種類2行目がキャッシュの有効期限を表しています。キャッシュは有効な手段ですが、更新頻度の高くない物に設定していきます。HTML、CSS、jsなどには注意が必要です。サイトがどれくらいの頻度で更新されているかチェックをしておきましょう。2.jsの位置を変更する。排除する」とでていますが、これはレンダリングを阻害するjsを後から読めばいいので位置を変えます。次の画像の圧縮を行ないます。コレが一番簡単で効果が出やすいものなのでやっておかないのは損ですね。こちらもいくつか紹介しておきます。・ImageOptim(Mac)https://imageoptim.com/PNG、JPEGファイルやフォルダごとドラック&ドロップできるのでとても楽です。圧縮率でいうとまあまあです。大量に画像がある場合やそこまでシビアに容量の削減が求められていない時はこれでいいと思います。・JPEGminihttp://www.jpegmini.com/有料とフリー(使用制限あり)があり。Webサイト上でも使うことができます。・PNGGauntlet(win)http://pnggauntlet.com/こちらはWindowsにのみになりますが、ツールとしてはImageOptimと似た仕様になっています。・tinypnghttps://tinypng.com/こちらはWebサービスになりますが、PNGの圧縮率がかなり高いので大幅な削減ができます。非可逆圧縮なので一度圧縮すると元に戻せない分の効果は大きです。まとめて圧縮を行うのに制限があるので大量の圧縮をかけたい場合は少々手間がかかります。・COMPRESSORhttps://compressor.io/こちらも圧縮率は高いです。1ファイルづつしかアップロードできないので実用的にではないです。非可逆圧縮を好んで使っていますが、経験上で言うとファイルが破損する可能性もあるのでサーバでのチェックは必須です。Insightsで行えます。このサイトでは修正方法が提示されるのでそれに従う、もしくはchrome拡張機能のPageSpeedを使えば縮小されたHML、CSS、jsを表示してくれます。こちらのサイトから結合・縮小を簡単にできます。http://refresh-sf.com/yui/5.サーバー側で圧縮gzipというファイルを圧縮する方式があり、サーバーとユーザーのPCとの間で行う通信容量を少なくすることが出来ます。サーバー側の設定なので環境的に出来ない人もいますが、覚えておくとかなりの改善のなります。まとめ色々な高速化の手法がありますが、まずはできることから手をつけていきましょう。弊社でもサーバー側の設定は自由にはいじらせてもらえなかったりしますのでフロントの部分だけで最大限努力するのがよいかと思います。和風系UIデザイナーのてっちゃんです。和服のことならいつでもお問い合わせ下さい。