百度網站頁面性能優化(huà)指南(nán)

在前段時(shí)間，百度爲了(le)更好地提升用(yòng)戶的(de)浏覽體驗，《移動落地頁體驗白皮書(shū)4.0》中規定：頁面的(de)首屏内容應在1.5秒内加載完成。

百度搜索對(duì)用(yòng)戶行爲的(de)研究表明(míng)，頁面首屏的(de)加載時(shí)間在1.5秒以内的(de)頁面，會帶給用(yòng)戶流暢快(kuài)捷的(de)極速體驗。近期我們發現有部分(fēn)站點移動端頁面首屏打開速度多(duō)于1.5秒，爲了(le)方便開發者對(duì)頁面進行優化(huà)，百度後台技術特地總結了(le)問題的(de)主要原因以及優化(huà)方法給大(dà)家進行參考。

慢(màn)速主要原因： 

1、關鍵子資源耗時(shí)較嚴重； 
2、頁面存在額外跳轉； 
3、主文檔耗時(shí)較爲嚴重

慢(màn)速原因一：關鍵子資源耗時(shí)較嚴重

頁面打開速度優化(huà)建議(yì)：

1、清除不必要的(de)資源，避免進行不必要的(de)下(xià)載

站點應當定期審核網頁上的(de)資源是否是必需的(de)，并評估該資源的(de)價值與性能影(yǐng)響。網頁中往往會包含一些冗餘資源，影(yǐng)響網頁性能的(de)同時(shí)還(hái)無法給網頁帶來(lái)價值，可(kě)以考慮清除不必要的(de)資源，避免不必要的(de)資源下(xià)載帶來(lái)性能上的(de)消耗。

清除阻塞渲染的(de)JS和(hé)CSS：如果要以最快(kuài)速度完成首屏渲染，需要最大(dà)限度地減少網頁上關鍵JS/CSS子資源的(de)數量，并盡可(kě)能清除這(zhè)些資源，最大(dà)限度地減少下(xià)載量。

2、使用(yòng)代碼拆分(fēn)減少JS負載

有的(de)網站可(kě)能将所有的(de)JS組合成一個(gè)大(dà)型的(de)組合包，以這(zhè)種方式加載的(de)話(huà)頁面性能會受到影(yǐng)響。長(cháng)時(shí)間運行的(de)JS可(kě)能會阻塞主線程，這(zhè)時(shí)可(kě)以考慮使用(yòng)requestAnimationFrame() 或 requestIdleCallback() 來(lái)進行優化(huà)。

根據不同的(de)業務需求，開發者可(kě)以将JS中首屏的(de)關鍵代碼拆分(fēn)出來(lái)，這(zhè)樣可(kě)以提前加載執行首屏中必需的(de)少量JS代碼，從而縮短頁面的(de)加載時(shí)間，其餘的(de)可(kě)以按需加載或者置後加載，同時(shí)建議(yì)開發者将JS優先放在首屏渲染完成之後，放在body閉标簽前面。

3、優化(huà)阻塞渲染的(de)JS

JS允許我們修改網頁的(de)同時(shí)也(yě)會阻止DOM構建，阻塞網頁渲染。默認情況下(xià)，JS的(de)執行會阻塞内核渲染：無論我們使用(yòng)外鏈還(hái)是内嵌JS，當遇到文檔中的(de)JS腳本時(shí)，它将暫停 DOM 構建，将控制權移交給 JS，腳本執行完畢後再繼續構建 DOM，處理(lǐ)剩餘的(de)HTML文檔。如果是外鏈JS文件，浏覽内核需停下(xià)來(lái)，等待從磁盤、緩存或遠(yuǎn)程服務器中獲取JS腳本，這(zhè)就可(kě)能給關鍵渲染路徑增加數十到數百毫秒的(de)延遲。

爲了(le)實現最佳性能，可(kě)以讓頁面的(de)JS進行異步執行，建議(yì)優先考慮使用(yòng)defer的(de)方式，其次是async方式，并去除關鍵渲染路徑中任何不必要的(de)JS。

（1）優化(huà)JS的(de)使用(yòng)方式，優先使用(yòng)異步JS資源

默認情況下(xià)，JS資源會阻塞解析，強制等待CSSOM并暫停DOM的(de)構建，繼而大(dà)大(dà)延遲首屏渲染的(de)時(shí)間。異步JS資源則不會阻塞文檔解析器，如果腳本可(kě)以使用(yòng)defer/async 屬性，也(yě)就意味著(zhe)它并非是首屏渲染所必需的(de)，可(kě)以考慮在首屏渲染後異步加載腳本。

（2）延遲解析加載JS

爲了(le)最大(dà)限度減少内核渲染網頁的(de)工作量，建議(yì)開發者延遲所有非必需的(de)、對(duì)構建首屏渲染無關緊要的(de)JS腳本，将JS優先放在body閉标簽處。

（3）避免長(cháng)時(shí)間運行的(de)JS

運行時(shí)間長(cháng)的(de)JS會阻塞構建 DOM、CSSOM以及網頁的(de)渲染，所以任何對(duì)首屏渲染無關緊要的(de)初始化(huà)邏輯和(hé)功能都應延後執行。如果需要運行較長(cháng)的(de)初始化(huà)序列，請考慮将它們拆分(fēn)爲若幹個(gè)階段，以便浏覽内核可(kě)以間隔處理(lǐ)其它的(de)渲染任務。

4、優化(huà)阻塞渲染的(de)CSS

默認情況下(xià)，關鍵CSS子資源是會阻塞内核渲染的(de)，請務必精簡網頁的(de)CSS資源，同時(shí)需要将CSS盡快(kuài)地完成下(xià)載，關鍵CSS子資源優先放在head标簽内，以便縮短首屏渲染的(de)時(shí)間。

（1）優化(huà)CSS的(de)使用(yòng)方式

CSS是構建渲染樹的(de)必備元素，首次構建網頁時(shí)，确保将任何非必需的(de)CSS資源都标記爲非關鍵資源（比如print），并應确保盡可(kě)能減少關鍵CSS子資源的(de)數量。

（2）将關鍵CSS放在文檔head标簽内

盡早在HTML文檔内指定所有必需的(de)關鍵CSS資源，以便浏覽内核盡早發現link标記并發出CSS請求下(xià)載。

（3）避免使用(yòng)CSS import指令

一個(gè)樣式表可(kě)以使用(yòng)CSS import指令從另一個(gè)樣式表文件導入規則。不過應避免使用(yòng)這(zhè)些指令，因爲它們會在關鍵路徑中增加往返次數從而影(yǐng)響首屏渲染性能。

慢(màn)速原因二：主文檔耗時(shí)

頁面打開速度優化(huà)建議(yì)：優化(huà)和(hé)壓縮資源，減小總下(xià)載文件大(dà)小

優化(huà)和(hé)壓縮資源來(lái)最大(dà)限度地減小總下(xià)載大(dà)小，來(lái)提高(gāo)網頁加載速度。開發者可(kě)以考慮通(tōng)過簡化(huà)編碼來(lái)優化(huà)主文檔大(dà)小，同時(shí)可(kě)以采用(yòng)chunk編碼，服務器分(fēn)chunk輸出，以及通(tōng)過GZIP來(lái)壓縮主文檔資源。

慢(màn)速原因三：頁面存在額外跳轉

頁面打開速度優化(huà)建議(yì)：去除頁面的(de)額外跳轉

從用(yòng)戶點擊到打開頁面的(de)過程中，有些網站内可(kě)能經過額外跳轉才會将最終的(de)頁面展現給用(yòng)戶。根據調研數據，單次額外跳轉會使性能退化(huà)約600毫秒，這(zhè)就可(kě)能給關鍵渲染路徑增加600毫秒的(de)延遲體驗，所以建議(yì)開發者去除額外的(de)跳轉。