【読書】Webサイトの高速化

Webサイト制作者のための HTML5+JavaScriptスマートフォンサイト実践講座からスマートフォン向け最適化テクニックの簡単なメモです。

PageSpeed Insightsで現状を知る

googleのサービスであるPageSpeed Insightsで、パフォーマンスの解析ができるだけではなく、どのような対策を行うべきかを教えてくれます。PC・モバイルと両方の解析ができます。

画像の最適化

CSS Sprite
複数の画像を一つの画像にまとめることでHTTPリクエストを減らす。jQueryMobileがアイコン画像で利用している。
Data URIの利用
画像をBase64エンコードしてHTMLにバイナリデータとして埋め込み、HTTPリクエストを減らす。 参考サイト
画像ファイルサイズの最適化
画質を落とさずにファイルサイズを最適化するには
PunyPNG、TinyPNG、JPEGmini、Yahoo! Smush.it
などのwebサービスを利用します。

アプリケーションキャッシュ

キャッシュ マニフェスト ファイル
一度読み込んだHTML,CSS,JavaScript,画像をデバイスにキャッシュさせることで、次回からのリクエストを減らしたり、オフラインでの操作を可能にする。 参考サイト

その他にも、gzip圧縮、cache-control、Expiresヘッダーなど、非常に勉強になりました。