頁面秒打開，留住用戶快人一步
百度搜索對(duì)用戶行為的研究表明，用戶對(duì)于頁面的打開速度要求越來越高，首屏的加載時(shí)間過長會(huì)加速用戶的流失。
通過調(diào)研，小編發(fā)現(xiàn)部分站點(diǎn)和智能小程序頁面加載速度慢的主要原因分別是頁面關(guān)鍵子資源耗時(shí)嚴(yán)重和圖片體積過大。為了方便開發(fā)者進(jìn)行優(yōu)化，小編特地邀請(qǐng)技術(shù)同學(xué)總結(jié)了優(yōu)化方法給大家參考。
【站點(diǎn)頁面關(guān)鍵子資源耗時(shí)嚴(yán)重的優(yōu)化方案】
01
清除不必要的資源及阻塞渲染的JS/CSS
頁面中往往會(huì)包含一些冗余資源，影響性能的同時(shí)還無法給用戶帶來價(jià)值，所以站點(diǎn)應(yīng)當(dāng)定期檢查并清除頁面上不必要的資源，避免資源下載帶來性能上的消耗。
如果要以最快的速度完成首屏的渲染，開發(fā)者還需要最大限度地減少頁面上關(guān)鍵JS/CSS子資源的數(shù)量，并盡可能清除這些資源，最大限度地減少下載量。
02
通過代碼拆分減少JS負(fù)載
開發(fā)者可以根據(jù)不同的業(yè)務(wù)需求，將JS中首屏的關(guān)鍵代碼拆分出來，以便于提前加載首屏中必要的少量JS代碼，從而縮短頁面的加載時(shí)間。其余的JS代碼可以按需加載或者置后加載，同時(shí)建議開發(fā)者將JS優(yōu)先放在首屏渲染完成之后，body閉標(biāo)簽之前。
03
優(yōu)化阻塞渲染的JS及JS的使用方式
JS允許我們修改頁面的同時(shí)也會(huì)阻止DOM構(gòu)建，阻塞頁面渲染。開發(fā)者可以優(yōu)先考慮使用defer的方式，其次是async方式讓頁面的JS進(jìn)行異步執(zhí)行，并去除關(guān)鍵渲染路徑中任何不必要的JS。
在默認(rèn)情況下，JS資源會(huì)阻塞解析，強(qiáng)制等待CSSOM并暫停DOM的構(gòu)建從而大大增加首屏渲染的時(shí)間。異步JS資源則不會(huì)阻塞文檔解析器，開發(fā)者可以考慮在首屏渲染后異步加載腳本。
04
優(yōu)化阻塞渲染的CSS及CSS的使用方式
默認(rèn)情況下，關(guān)鍵CSS子資源會(huì)阻塞內(nèi)核的渲染，建議開發(fā)者精簡(jiǎn)頁面中的CSS資源，盡快將CSS完成下載，并把關(guān)鍵CSS子資源優(yōu)先放在head標(biāo)簽內(nèi)，以便縮短首屏渲染的時(shí)間。
CSS是構(gòu)建渲染樹的必備元素，首次構(gòu)建頁面時(shí)，開發(fā)者應(yīng)確保將任何非必需的CSS資源都標(biāo)記為非關(guān)鍵資源（比如print），并盡可能減少關(guān)鍵CSS子資源的數(shù)量。
【智能小程序圖片體積過大的優(yōu)化方案】
01
控制圖片大小
（1）針對(duì)本地圖片
本地圖片過大會(huì)導(dǎo)致小程序包體積過大，加載時(shí)間變長，因此開發(fā)者需盡可能地壓縮圖片大?。?/p>
● 對(duì)于不需要透明格式的圖片，推薦采用 jpeg 格式來代替 png 格式
● 安卓端建議使用webp的圖片格式。webp格式在有損壓縮的情況下，肉眼不易察覺出壓縮前后的變化，但是圖片體積卻會(huì)大大減?。ㄗ⒁猓篿OS 百度 App 版本 < 11.22 時(shí)不支持webp格式）
● 確保小程序包內(nèi)沒有冗余和無用的圖片資源
● 延遲加載不重要的圖片，并在關(guān)鍵圖片渲染完成后再加載后續(xù)內(nèi)容
● 使用工具對(duì)圖片進(jìn)行壓縮
（2）針對(duì)網(wǎng)絡(luò)圖片
在智能小程序中，對(duì)于部署到 CDN 上的網(wǎng)絡(luò)圖片，也需要進(jìn)行壓縮：
● 通過CDN 靜態(tài)資源服務(wù)器獲取圖片資源，并添加圖片壓縮規(guī)則
● 使用圖片壓縮工具對(duì)圖片進(jìn)行壓縮后，再上傳至 CDN
02
開啟圖片懶加載
智能小程序的image組件提供了lazy-load屬性，開發(fā)者可以開啟圖片的懶加載功能進(jìn)行優(yōu)化：
<image lazy-load="true"/>
03
謹(jǐn)慎使用耗費(fèi)性能的屬性
image組件mode屬性提供了 13 種模式，widthFix模式是其中一種。由于widthFix模式需要?jiǎng)討B(tài)計(jì)算圖片的寬度，導(dǎo)致頁面重繪，因此應(yīng)謹(jǐn)慎使用mode屬性的widthFix模式。
04
使用漸進(jìn)式 JPEG 來優(yōu)化用戶體驗(yàn)
打開漸進(jìn)式 JPEG 時(shí)頁面會(huì)先展示整個(gè)圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來越清晰。這種格式的主要優(yōu)點(diǎn)是在網(wǎng)絡(luò)較慢的情況下，可以預(yù)覽到圖片的輪廓，一定程度上可以提升用戶體驗(yàn)。
以上便是站點(diǎn)和智能小程序頁面加載速度的優(yōu)化方法啦，你學(xué)會(huì)了嗎？
來源：百度搜索資源平臺(tái) 百度搜索學(xué)堂
