1.開啓gzip壓縮：Apache 使用 mod_deflate;
2.隱藏父元素，瀏覽器不會加載這張圖片：
<div id="parent"><div></div></div>
#parent div { background:url(image.jpt); }
@media(max-width:600px){ #parent{display:none;} }
3.用不同的媒體查詢告訴瀏覽器什麼屏幕尺寸加載什麼background-image，瀏覽器會加載匹配媒體查詢和圖片：
<div id="match"></div>
@media(min-width:601px){ #match{background:rul(big.jpg);} }
@media(max-width:600px){ #match{background:url(small.jpg);} }
4.通過給腳本添加async標記來告訴瀏覽器這個腳本不需要被立即執行，這樣就不會阻塞內容渲染：
<script src="main.js" async></script>
這樣瀏覽器會繼續構建DOM，在腳本加載完成並準備好後再執行它。
5.用媒體查詢指定視網膜屏版來確保只加載視網膜版圖片：
<div id="match"></div>
#match{ background:url(regular.png); }
@media(-webkit-min-device-pixel-ratio:1.5),(min-moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ #match{background:url(retina.png);} }
6.HTML的picture元素