[読書] webサイトの高速化

Webサイト制作者のための HTML5+JavaScriptスマートフォンサイト実践講座

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

PageSpeed Insightsで現状を知る

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

画像の最適化

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

などのwebサービスで簡単に圧縮できます。

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

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

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

CONTENTS
  1. PageSpeed Insightsで現状を知る
  2. 画像の最適化
  3. アプリケーションキャッシュ