WEBデザイナーからHTMLがあがってきたらやってることを書いてみます。
1. 画像サイズ縮小
まずは画像サイズのダイエット。
使い方は簡単。ブラウザに画像をドラッグ＆ドロップするだけです。圧縮の度合いもいい感じに勝手にやってもらえます。
2. 画像遅延処理
lazyload 2.x
cf. 1x1の最小GIF・PNGファイル（透過/base64）
imgタグのsrcにダミー画像、data-srcに本来ロードする画像を指定します。classにlazyloadを。
<head>
<script src="js/lazyload.js"></script>
</head>
〜
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=" data-src="images/hoge.png">
〜
<script>
lazyload();
</script>
</body>
3. javascriptのミニマイズ
4. レンダリングパフォーマンス測定
自分の場合、画像圧縮とlazyloadの仕込みが終わった時点でとりあえず測ってみます。
↑パフォーマンス測定のみでなく、改善点も教えてくれる素敵なサイト。
あとは自鯖ならapacheのキャッシュ設定とか、画像のCDN化（AWS S3等）でしょうかね…