1.Make fewer HTTP requests
盡可能減少HTTP請求次數(shù):通過合并圖片晃洒、CSS望伦、JS砰蠢,減少頁面上組件的數(shù)量減少了渲染頁面所需的HTTP請求的數(shù)量紧阔,降低頁面加載時間。
2.Use a Content Delivery Network (CDN)
使用CDN(內(nèi)容分發(fā)網(wǎng)絡):80-90%的最終用戶響應時間花在下載圖片烤黍,樣式知市,腳本,F(xiàn)lash等網(wǎng)頁組件上速蕊,所以最好先把靜態(tài)內(nèi)容分布到CDN上嫂丙。當用戶在讀取網(wǎng)頁內(nèi)容的時候,就會去就近服務器上下載JS和CSS规哲。提高訪問速度跟啤,保證資源服務器的穩(wěn)定性;并可節(jié)省流量唉锌。
3.Avoid empty src or href
避免使用空的src隅肥、href:當src、href內(nèi)容為空袄简,大部分瀏覽器會直接過濾掉腥放,但IE瀏覽器除外;IE依然會向空路徑發(fā)出請求绿语,可能會損壞用戶數(shù)據(jù)秃症,浪費服務器計算周期生成一個永遠不會被查看的頁面。
4.Add Expires headers
給文件頭添加過期時間:使內(nèi)容具有緩存性吕粹。Expires headers 告訴瀏覽器應該從服務器或從瀏覽器的緩存獲取指定文件种柑。Expires headers 的設計目的是希望使用緩存來減少HTTP requests的數(shù)量,從而減少HTTP相應的大小匹耕。
5.Compress components with gzip
用gzip壓縮內(nèi)容:壓縮通過減少HTTP響應的大小來減少響應時間聚请。gzip是目前可用的最流行和最有效的壓縮方法,通常將響應大小減少約70%稳其。
6.Put CSS at top
把CSS放在頂部
7.Put JavaScript at bottom
把JS放在底部:JavaScript腳本阻止并行下載驶赏,以免對后續(xù)資源造成阻塞;
8.Avoid CSS expressions
避免使用CSS表達式:CSS表達式(在IE5.0以后開始支持)是動態(tài)設置CSS屬性的一種強大且危險的方法欢际。
當頁面被渲染并調(diào)整大小時母市,當頁面滾動時,甚至當用戶在頁面上移動鼠標時损趋,根據(jù)表達式重新計算患久。這些頻繁的計算降低了用戶體驗椅寺。
9.Make JavaScript and CSS external
將CSS和JS放到外部文件中:使用外部JS和CSS文件通常會產(chǎn)生更快的頁面,因為文件是由瀏覽器緩存的蒋失。在HTML文檔中嵌入的JavaScript和CSS在每次請求HTML文檔時都會被下載返帕。這減少了HTTP請求的數(shù)量,但增加了HTML文檔的大小篙挽。另一方面荆萤,如果JavaScript和CSS在瀏覽器緩存的外部文件中,則HTML文檔的大小會減少而不增加HTTP請求的數(shù)量铣卡。(需根據(jù)PV和IP的比例權衡)
10.Reduce DNS lookups
減少DNS查找次數(shù):減少DNS解析時間链韭。
11.Minify JavaScript and CSS
精簡JS及CSS:刪除不需要的空白字符(空格、換行符和選項卡)煮落。
12.Avoid URL redirects
避免重定向(重定向讓用戶感覺網(wǎng)頁速度很慢敞峭。)
13.Remove duplicate JavaScript and CSS
刪除重復的JS及CSS:重重復的JavaScript和CSS文件,通過創(chuàng)建不必要的HTTP請求(僅IE)和浪費JavaScript執(zhí)行(IE和Firefox)來損害性能蝉仇。
在IE中旋讹,如果一個外部腳本被包含兩次而不是可緩存的,它會在頁面加載期間生成兩個HTTP請求轿衔。
在IE和Firefox中沉迹,重復的JavaScript腳本導致浪費時間來不止一次地評估同一腳本。不管腳本是否是可緩存的害驹,這種冗余腳本執(zhí)行都會發(fā)生鞭呕。
14.Configure entity tags (ETags)
配置實體標簽(ETags):用來判斷瀏覽器緩存里的元素是否和原來服務器上的一致。使用ETags減少Web應用帶寬和負載宛官。
15.Make AJAX cacheable
緩存AJAX:AJAX異步請求后臺web服務器琅拌,但使用AJAX并不保證用戶不會等待異步JavaScript和XML響應返回。優(yōu)化AJAX響應對于提高性能非常重要摘刑,利用響應緩存來改進AJAX的性能。
16.Use GET for AJAX requests
使用GET來完成AJAX請求:當使用XHR對象時刻坊,瀏覽器在兩個步驟中實現(xiàn)POST:先發(fā)送頭文件枷恕,然后發(fā)送數(shù)據(jù)。最好使用GET而不是POST谭胚,因為GET將標題和數(shù)據(jù)一起發(fā)送(除非有很多Cookie)徐块。IE里面最大的URL長度為2K,如果需要發(fā)送>2K的數(shù)據(jù)就不能用GET方式了灾而。
17.Reduce the number of DOM elements
減少DOM元素的數(shù)量:復雜的頁面意味著要下載更多的字節(jié)胡控,也意味著JavaScript中的DOM訪問速度較慢。減少頁面上DOM元素的數(shù)量旁趟,以提高性能昼激。
18.Avoid HTTP 404 (Not Found) error
避免404錯誤
19.Reduce cookie size
減少cookie的大小:因為很多理由需要使用cookies,例如:認證橙困,個性化等瞧掺。cookies在HTTP頭信息,是服務器和瀏覽器之間的信息交互凡傅。為了最大程度地降低對用戶響應時間的影響辟狈,需要讓cookies的大小盡量最小化。
20.Use cookie-free domains
使用無cookie的域:當瀏覽器請求靜態(tài)圖像并向請求發(fā)送cookies時夏跷,服務器會忽略cookies哼转,但這些cookies是不必要的網(wǎng)絡流量。解決建議:可以創(chuàng)建一個子域名來放置靜態(tài)組件槽华,瀏覽器發(fā)送靜態(tài)內(nèi)容的請求時不會發(fā)送cookies的域名壹蔓。
21.Avoid AlphaImageLoader filter
避免使用濾鏡:IE特有的AlphaImageLoader濾鏡是為了解決在IE7以下正彩色PNG圖片的半透明的問題。用了此濾鏡下載時會阻塞渲染硼莽,并且內(nèi)存消耗成倍增加庶溶。
22.Do not scale images in HTML
不要在HTML中縮放圖片
23.Make favicon small and cacheable
使favicon.ico盡量小且可被緩存:圖片favicon.ico應該在服務器的根目錄下面。
使小圖標盡量小懂鸵。
使favicon.ico緩存可避免頻繁的請求偏螺。