http://spritegen.website-performance.org/
背景画像を一枚にまとめるための補助ツール。
画像をまとめ、CSSのポジションを吐いてくれる。
http://www.punypng.com/
画像の質を落とさずに、軽量化してくれる。
imgではHTMLかCSSで必ずwidth、heightを指定。
そうすることで、レイアウトの計算時間を短縮できる。
画像のオリジナルサイズと違う値を指定すると、
当然処理時間がかかる。
ちなみにtableも横縦の大きさを指定しないと計算分重くなる。
ul#global-nav
こういうCSSの指定は丁寧だが、重くなる。
#global-nav
で十分。
入れ子もできる限り避けるほうが良い。
#global-navigation ul li a → .global-navigation
a以外のタグに:hoverを利用すると、IE7とIE8ではレンダリング速度が落ちてしまう。
HEADの中で、CSSは上に固め、JSは下に固める。
レンダリングの順序の理由からこれが望ましい。
FileETag Noneをhttpd.confに差し込む
JSファイルを軽量化する。
JSMin 、 YUI Compressor などのソフトを使う事で、コメントや改行を削除し、軽量化させることができる。
GNU zip (gzip) を利用すると、圧縮した状態でブラウザに渡すことができる。
LoadModule deflate_module modules/mod_deflate.so
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
イラレやフォトショで画像を吐きだすとき、pngが一番ファイルサイズが大きい気がするけど、pngが最も推奨される最適化されたファイルだそうな。
CSSやJS、画像をキャッシュさせることができる。
LoadModule expires_module modules/mod_expires.so
ExpiresActive on
ExpiresByType image/png "access plus 1 days"
ExpiresByType image/jpeg "access plus 1 days"
ExpiresByType image/gif "access plus 1 days"
ExpiresByType image/x-icon "access plus 3 days"
ExpiresByType image/vnd.microsoft.icon "access plus 3 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType application/x-javascript "access plus 1 days"
ExpiresByType text/javascript "access plus 1 days"
ExpiresByType application/javascript "access plus 1 days"
