百度搜索對(duì)用戶行為的研究表明,頁(yè)面首屏的加載時(shí)間在1秒以內(nèi)的頁(yè)面,會(huì)帶給用戶流暢快捷的極速體驗(yàn)。近期我們發(fā)現(xiàn)有部分站點(diǎn)移動(dòng)端頁(yè)面首屏打開速度多于1秒,為了方便開發(fā)者對(duì)頁(yè)面進(jìn)行優(yōu)化,技術(shù)特地總結(jié)了問題的主要原因以及優(yōu)化方法給大家進(jìn)行參考。
慢速主要原因:
1、關(guān)鍵子資源耗時(shí)較嚴(yán)重;
2、頁(yè)面存在額外跳轉(zhuǎn);
3、主文檔耗時(shí)較為嚴(yán)重
慢速原因一:關(guān)鍵子資源耗時(shí)較嚴(yán)重
頁(yè)面打開速度優(yōu)化建議:
1、清除不必要的資源,避免進(jìn)行不必要的下載
站點(diǎn)應(yīng)當(dāng)定期審核網(wǎng)頁(yè)上的資源是否是必需的,并評(píng)估該資源的價(jià)值與性能影響。網(wǎng)頁(yè)中往往會(huì)包含一些冗余資源,影響網(wǎng)頁(yè)性能的同時(shí)還無(wú)法給網(wǎng)頁(yè)帶來價(jià)值,可以考慮清除不必要的資源,避免不必要的資源下載帶來性能上的消耗。
清除阻塞渲染的JS和CSS
如果要以最快速度完成首屏渲染,需要最大限度地減少網(wǎng)頁(yè)上關(guān)鍵JS/CSS子資源的數(shù)量,并盡可能清除這些資源,最大限度地減少下載量。
2、使用代碼拆分減少JS負(fù)載
有的網(wǎng)站可能將所有的JS組合成一個(gè)大型的組合包,以這種方式加載的話頁(yè)面性能會(huì)受到影響。長(zhǎng)時(shí)間運(yùn)行的JS可能會(huì)阻塞主線程,這時(shí)可以考慮使用requestAnimationFrame() 或 requestIdleCallback() 來進(jìn)行優(yōu)化。
根據(jù)不同的業(yè)務(wù)需求,開發(fā)者可以將JS中首屏的關(guān)鍵代碼拆分出來,這樣可以提前加載執(zhí)行首屏中必需的少量JS代碼,從而縮短頁(yè)面的加載時(shí)間,其余的可以按需加載或者置后加載,同時(shí)建議開發(fā)者將JS優(yōu)先放在首屏渲染完成之后,放在body閉標(biāo)簽前面。
3、優(yōu)化阻塞渲染的JS
JS允許我們修改網(wǎng)頁(yè)的同時(shí)也會(huì)阻止DOM構(gòu)建,阻塞網(wǎng)頁(yè)渲染。默認(rèn)情況下,JS的執(zhí)行會(huì)阻塞內(nèi)核渲染:無(wú)論我們使用外鏈還是內(nèi)嵌JS,當(dāng)遇到文檔中的JS腳本時(shí),它將暫停 DOM 構(gòu)建,將控制權(quán)移交給 JS,腳本執(zhí)行完畢后再繼續(xù)構(gòu)建 DOM,處理剩余的HTML文檔。如果是外鏈JS文件,瀏覽內(nèi)核需停下來,等待從磁盤、緩存或遠(yuǎn)程服務(wù)器中獲取JS腳本,這就可能給關(guān)鍵渲染路徑增加數(shù)十到數(shù)百毫秒的延遲。
為了實(shí)現(xiàn)最佳性能,可以讓頁(yè)面的JS進(jìn)行異步執(zhí)行,建議優(yōu)先考慮使用defer的方式,其次是async方式,并去除關(guān)鍵渲染路徑中任何不必要的JS。
優(yōu)化JS的使用方式,優(yōu)先使用異步JS資源
默認(rèn)情況下,JS資源會(huì)阻塞解析,強(qiáng)制等待CSSOM并暫停DOM的構(gòu)建,繼而大大延遲首屏渲染的時(shí)間。異步JS資源則不會(huì)阻塞文檔解析器,如果腳本可以使用defer/async 屬性,也就意味著它并非是首屏渲染所必需的,可以考慮在首屏渲染后異步加載腳本。
延遲解析加載JS
為了最大限度減少內(nèi)核渲染網(wǎng)頁(yè)的工作量,建議開發(fā)者延遲所有非必需的、對(duì)構(gòu)建首屏渲染無(wú)關(guān)緊要的JS腳本,將JS優(yōu)先放在body閉標(biāo)簽處。
避免長(zhǎng)時(shí)間運(yùn)行的JS
運(yùn)行時(shí)間長(zhǎng)的JS會(huì)阻塞構(gòu)建 DOM、CSSOM以及網(wǎng)頁(yè)的渲染,所以任何對(duì)首屏渲染無(wú)關(guān)緊要的初始化邏輯和功能都應(yīng)延后執(zhí)行。如果需要運(yùn)行較長(zhǎng)的初始化序列,請(qǐng)考慮將它們拆分為若干個(gè)階段,以便瀏覽內(nèi)核可以間隔處理其它的渲染任務(wù)。
4、優(yōu)化阻塞渲染的CSS
默認(rèn)情況下,關(guān)鍵CSS子資源是會(huì)阻塞內(nèi)核渲染的,請(qǐng)務(wù)必精簡(jiǎn)網(wǎng)頁(yè)的CSS資源,同時(shí)需要將CSS盡快地完成下載,關(guān)鍵CSS子資源優(yōu)先放在head標(biāo)簽內(nèi),以便縮短首屏渲染的時(shí)間。
優(yōu)化CSS的使用方式
CSS是構(gòu)建渲染樹的必備元素,首次構(gòu)建網(wǎng)頁(yè)時(shí),確保將任何非必需的CSS資源都標(biāo)記為非關(guān)鍵資源(比如print),并應(yīng)確保盡可能減少關(guān)鍵CSS子資源的數(shù)量。
將關(guān)鍵CSS放在文檔head標(biāo)簽內(nèi)
盡早在HTML文檔內(nèi)指定所有必需的關(guān)鍵CSS資源,以便瀏覽內(nèi)核盡早發(fā)現(xiàn)link標(biāo)記并發(fā)出CSS請(qǐng)求下載。
避免使用CSS import指令
一個(gè)樣式表可以使用CSS import指令從另一個(gè)樣式表文件導(dǎo)入規(guī)則。不過應(yīng)避免使用這些指令,因?yàn)樗鼈儠?huì)在關(guān)鍵路徑中增加往返次數(shù)從而影響首屏渲染性能。
慢速原因二:主文檔耗時(shí)
頁(yè)面打開速度優(yōu)化建議:
優(yōu)化和壓縮資源,減小總下載文件大小
優(yōu)化和壓縮資源來最大限度地減小總下載大小,來提高網(wǎng)頁(yè)加載速度。開發(fā)者可以考慮通過簡(jiǎn)化編碼來優(yōu)化主文檔大小,同時(shí)可以采用chunk編碼,服務(wù)器分chunk輸出,以及通過GZIP來壓縮主文檔資源。
慢速原因三:頁(yè)面存在額外跳轉(zhuǎn)
頁(yè)面打開速度優(yōu)化建議:
去除頁(yè)面的額外跳轉(zhuǎn)
從用戶點(diǎn)擊到打開頁(yè)面的過程中,有些網(wǎng)站內(nèi)可能經(jīng)過額外跳轉(zhuǎn)才會(huì)將最終的頁(yè)面展現(xiàn)給用戶。根據(jù)調(diào)研數(shù)據(jù),單次額外跳轉(zhuǎn)會(huì)使性能退化約600毫秒,這就可能給關(guān)鍵渲染路徑增加600毫秒的延遲體驗(yàn),所以建議開發(fā)者去除額外的跳轉(zhuǎn)。
