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