互聯(lián)網(wǎng)時代，百度搜索對用戶行為的研究表明，用戶對于頁面的打開速度要求越來越高，首屏的加載時間過長會加速用戶的流失通過調(diào)研，小編發(fā)現(xiàn)部分站點和智能小程序頁面加載速度慢的主要原因分別是頁面關(guān)鍵子資源耗時嚴(yán)重和圖片體積過大。為了方便開發(fā)者進(jìn)行優(yōu)化，深圳網(wǎng)站建設(shè)公司小編特地邀請技術(shù)同學(xué)總結(jié)了優(yōu)化方法給大家參考。


清除不必要的資源及阻塞渲染的JS/CSS
頁面中往往會包含一些冗余資源，影響性能的同時還無法給用戶帶來價值，所以站點應(yīng)當(dāng)定期檢查并清除頁面上不必要的資源，避免資源下載帶來性能上的消耗。
如果要以最快的速度完成首屏的渲染，開發(fā)者還需要最大限度地減少頁面上關(guān)鍵JS/CSS子資源的數(shù)量，并盡可能清除這些資源，最大限度地減少下載量。

通過代碼拆分減少JS負(fù)載
開發(fā)者可以根據(jù)不同的業(yè)務(wù)需求，將JS中首屏的關(guān)鍵代碼拆分出來，以便于提前加載首屏中必要的少量JS代碼，從而縮短頁面的加載時間。其余的JS代碼可以按需加載或者置后加載，同時建議開發(fā)者將JS優(yōu)先放在首屏渲染完成之后，body閉標(biāo)簽之前。

優(yōu)化阻塞渲染的JS及JS的使用方式
JS允許我們修改頁面的同時也會阻止DOM構(gòu)建，阻塞頁面渲染。開發(fā)者可以優(yōu)先考慮使用defer的方式，其次是async方式讓頁面的JS進(jìn)行異步執(zhí)行，并去除關(guān)鍵渲染路徑中任何不必要的JS，在默認(rèn)情況下，JS資源會阻塞解析，強制等待CSSOM并暫停DOM的構(gòu)建從而大大增加首屏渲染的時間。異步JS資源則不會阻塞文檔解析器，開發(fā)者可以考慮在首屏渲染后異步加載腳本。

優(yōu)化阻塞渲染的CSS及CSS的使用方式
默認(rèn)情況下，關(guān)鍵CSS子資源會阻塞內(nèi)核的渲染，建議開發(fā)者精簡頁面中的CSS資源，盡快將CSS完成下載，并把關(guān)鍵CSS子資源優(yōu)先放在head標(biāo)簽內(nèi)，以便縮短首屏渲染的時間。CSS是構(gòu)建渲染樹的必備元素，首次構(gòu)建頁面時，開發(fā)者應(yīng)確保將任何非必需的CSS資源都標(biāo)記為非關(guān)鍵資源（比如print），并盡可能減少關(guān)鍵CSS子資源的數(shù)量


控制圖片大小
（1）針對本地圖片
本地圖片過大會導(dǎo)致小程序包體積過大，加載時間變長，因此開發(fā)者需盡可能地壓縮圖片大?。?br /> ● 對于不需要透明格式的圖片，推薦采用 jpeg 格式來代替 png 格式
● 安卓端建議使用webp的圖片格式。webp格式在有損壓縮的情況下，肉眼不易察覺出壓縮前后的變化，但是圖片體積卻會大大減?。ㄗ⒁猓篿OS 百度 App 版本 < 11.22 時不支持webp格式）
● 確保小程序包內(nèi)沒有冗余和無用的圖片資源
● 延遲加載不重要的圖片，并在關(guān)鍵圖片渲染完成后再加載后續(xù)內(nèi)容
● 使用工具對圖片進(jìn)行壓縮

（2）針對網(wǎng)絡(luò)圖片

在智能小程序中，對于部署到 CDN 上的網(wǎng)絡(luò)圖片，也需要進(jìn)行壓縮：
● 通過CDN 靜態(tài)資源服務(wù)器獲取圖片資源，并添加圖片壓縮規(guī)則
● 使用圖片壓縮工具對圖片進(jìn)行壓縮后，再上傳至 CDN

開啟圖片懶加載
智能小程序的image組件提供了lazy-load屬性，開發(fā)者可以開啟圖片的懶加載功能進(jìn)行優(yōu)化：

謹(jǐn)慎使用耗費性能的屬性
image組件mode屬性提供了 13 種模式，widthFix模式是其中一種。由于widthFix模式需要動態(tài)計算圖片的寬度，導(dǎo)致頁面重繪，因此應(yīng)謹(jǐn)慎使用mode屬性的widthFix模式。

使用漸進(jìn)式 JPEG 來優(yōu)化用戶體驗

打開漸進(jìn)式 JPEG 時頁面會先展示整個圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來越清晰。這種格式的主要優(yōu)點是在網(wǎng)絡(luò)較慢的情況下，可以預(yù)覽到圖片的輪廓，一定程度上可以提升用戶體驗。

更多高端網(wǎng)站建設(shè)、專業(yè)網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站開發(fā)等相關(guān)，歡迎您咨詢深圳中工互聯(lián)！