頁面秒打開，留住用戶快人一步

2012-04-15 營銷型網(wǎng)站專題

百度搜索對用戶行為的研究表明，用戶對于頁面的打開速度要求越來越高，首屏的加載時間過長會加速用戶的流失。

通過調(diào)研，小編發(fā)現(xiàn)部分站點和智能小程序頁面加載速度慢的主要原因分別是頁面關(guān)鍵子資源耗時嚴(yán)重和圖片體積過大。為了方便開發(fā)者進(jìn)行優(yōu)化，小編特地邀請技術(shù)同學(xué)總結(jié)了優(yōu)化方法給大家參考。

【站點頁面關(guān)鍵子資源耗時嚴(yán)重的優(yōu)化方案】

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

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

03、優(yōu)化阻塞渲染的JS及JS的使用方式
JS允許我們修改頁面的同時也會阻止DOM構(gòu)建，阻塞頁面渲染。開發(fā)者可以優(yōu)先考慮使用defer的方式，其次是async方式讓頁面的JS進(jìn)行異步執(zhí)行，并去除關(guān)鍵渲染路徑中任何不必要的JS。

在默認(rèn)情況下，JS資源會阻塞解析，強(qiáng)制等待CSSOM并暫停DOM的構(gòu)建從而大大增加首屏渲染的時間。異步JS資源則不會阻塞文檔解析器，開發(fā)者可以考慮在首屏渲染后異步加載腳本。

04、優(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ù)量。

【智能小程序圖片體積過大的優(yōu)化方案】

01、控制圖片大小

（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

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

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

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

上一篇：下載站請注意，清風(fēng)算法再次升級！返回觀點列表下一篇：高等教育成功視頻營銷的7個秘訣

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/3152.html

相關(guān)專題

品牌官網(wǎng)設(shè)計
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計，品牌官網(wǎng)建設(shè)開發(fā)服務(wù)，以國際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
大策略營銷門戶網(wǎng)站
杭州派迪科技有自己的營銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對大策略的營銷型門戶網(wǎng)站制作有一定的經(jīng)驗，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營銷型門戶、先臨三維門戶營銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情
集團(tuán)/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團(tuán)公司提供網(wǎng)頁設(shè)計、制作、開發(fā)服務(wù)，為集團(tuán)公司網(wǎng)站建設(shè)提供了響應(yīng)式、營銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團(tuán)公司客戶咨詢
查看詳情
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計，外貿(mào)官網(wǎng)建設(shè)開發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因為派迪科技在這里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗、與客戶的持續(xù)溝通以及對每一個細(xì)節(jié)的關(guān)注，我們確保在快速的周期時間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情