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


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

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

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

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


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

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

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

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

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

使用漸進(jìn)式 JPEG 來(lái)優(yōu)化用戶(hù)體驗(yàn)

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

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