png画像を圧縮する「TinyPNG」でページ読み込み速度アップ【サイト軽量化＆高速化計画】
先日macの「OS X Marvericks 10.9.4」アップデートがあったのでやってみたら改善点に「一部のMacにおける、これまで接続したことのあるwifiネットワークに自動的に接続できないという問題を修正します」とぬけぬけと書かれていることを発見！
この2ヶ月ほどwifi接続が平均週3ペースで不安定で、仕事に支障が出てたのでフレッツ光からケーブル回線に乗り換えてやろうかと割と本気で検討してたんだけどお前が戦犯かMarverickよ！！
アップデートしたら接続安定してるよ。。。
そんな本日のお題は「（ページ）速度」です。さんざん回線速度にストレス与え続けられてたのでね・・・^^;
google Analyticsの画面で「速度の提案」という項目がありますね。
そこをクリックすると「提案○個」というおせっかいな（笑）リンクがあり、リンクすると「Google PageSpeed Insights」に飛び、ご丁寧に表示ページの点数がつけられるという・・・。
点数を（一方的に）つけられる系に関してはゲーマー魂に火がつき、ついついムキになってしまうw
当方、当初はPC70、モバイル64でした。
具体的なツッコミ内容は以下の通りでした。
修正が必要
●画像を最適化する
●ブラウザキャッシュを利用
●圧縮を有効にする
修正を考慮
●サーバーの応答時間を短縮する
●スクロールせずに見えるコンテンツのレンダリングブロックJavascript/CSSを排除する
●JavaScriptを縮小する
まずは「修正しろ」と強要されている以下項目から対応することにきーめた
●画像を最適化する
●ブラウザキャッシュを利用する
●圧縮を有効にする
画像を最適化
この中でとりあえずわたしでも意味が分かるのは「画像を最適化する」のみw
ご丁寧に「この画像を圧縮しろよ！」とgoogleさんが対象画像を全て表示してくれています・・・あ、ありがとう。。うれしくねーけどな！
ほぼ全てpng画像でした。そらそーだ。
png画像圧縮については、他サイト様や知り合いから絶賛されている有名なこちらのサイトを利用させていただきました！
正直昔同僚からこのサイトを教えてもらった時はあまりpngを使っていなかったので「ふーん」としか思わなかったのですが、いざ必要な状況に陥るとまあ便利w
ほんとうにざっくりな説明ですが、「Drop your PNG files here!」と書かれてる欄に圧縮したいpngファイルを「えいやっ」とドラッグドロップするだけでもう勝手に全て圧縮してくれます！おしまいw
しかもファイル名も変わらず圧縮してくれるので一つずつダウンロード（まとめてダウンロードできればいいのに・・・唯一の要望。贅沢だけどw）したら、そいつらを自分のサーバーの画像ディレクトリにアップすれば上書き完了！
結構画像圧縮は速度読み込みに効果的で、これだけでもスコアが70から77に上がりました。
圧縮するとグラデーション画像はもしかすると荒く見えるかもしれないけど、当方グラデーションがほぼ皆無だったので（笑）かなり恩恵を受けました。
圧縮を有効にする
これは「Javascriptを縮小」「CSSを縮小」とどう違うのか？
と日本語的にモヤモヤしましたw まあ全体的に圧縮しろってことでしょ。
あまり深く考えずにこの項目については.htaccessに以下記述を追記すれば完了
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </IfModule>
※サーバーによってはこの記述が有効でないこともあるそうなので念のため調べてみてください。
当方lolipopですが、有効でした。
これでまたスコアが少し上がりました（ごめんなさい、記録してなかったので数値は忘れましたw）
しかし劇的にあがるとしたらやはり「ブラウザキャッシュを利用する」なのかなぁとなんとなくWEB屋のカンが。。またキャッシュか。
ブラウザキャッシュについては、少し手間取ったので後日グチ書こうと思います！