網(wǎng)頁幾秒鐘就能打開,比留住用戶早了一步。解讀手機(jī)白皮書4.0。通過研究發(fā)現(xiàn),大部分網(wǎng)頁加載緩慢是由于其他網(wǎng)頁資源耗時過多,圖片尺寸過大造成的。首屏加載時間要在1.5秒內(nèi)完成,會導(dǎo)致用戶流失。
據(jù)百度搜索用戶大數(shù)據(jù)了解,用戶對于網(wǎng)頁打開速度的要求越來越高,主屏幕的加載時間最好能在1.5秒內(nèi)完成,加載時間過長會導(dǎo)致用戶流失。
通過研究發(fā)現(xiàn),大部分網(wǎng)頁加載慢是由于網(wǎng)頁其它資源耗時過多及圖片體積過大造成,下面總結(jié)了部分網(wǎng)頁速度優(yōu)化方法給大家參考。
福利環(huán)節(jié)
如果你想要學(xué)習(xí)更多的SEO優(yōu)化技巧,可以從我的專欄中找到更多的干貨文章,想免費(fèi)領(lǐng)取資料的朋友請看下文
獲取資料方式:
渠道1:微信 seobst
渠道2:公眾號 愛學(xué)SEO
網(wǎng)頁其它資源耗時過多的的優(yōu)化方案
1、刪除無用資源及JS/CSS文件
現(xiàn)如今很多網(wǎng)頁都包含一些無用的文件資源,不但影響網(wǎng)頁加載速度,而且還不能給用戶帶去價值,因此建議定期清除網(wǎng)頁中一些無用的資源,避免給網(wǎng)頁加載速度帶去影響。
2、利用代碼拆分減少JS負(fù)載
將首屏中必要的JS代碼先拆分出來,便于提前加載,達(dá)到縮減首屏加載時間的目的,其它的JS代碼則按照按需加載或置后加載的方式,建議將首屏JS代碼放在首屏渲染之后,body標(biāo)簽關(guān)閉之前。
3、優(yōu)化阻塞渲染JS及JS使用方式
JS文件在允許修改的同時,也會阻止DOM構(gòu)建,阻塞頁面渲染,可考慮使用defer方式或async方式讓JS文件可以異步執(zhí)行加載,刪除關(guān)鍵渲染路徑中一些不必要的JS文件。
默認(rèn)情況下,JS文件會阻塞網(wǎng)頁解析時間,延長網(wǎng)頁首屏加載時間,異步JS資源執(zhí)行方式不會阻塞網(wǎng)頁解析時間,可考慮選擇在首屏渲染后異步加載腳本。
4、優(yōu)化阻塞渲染的CSS及CSS使用方式
網(wǎng)頁CSS資源會阻塞網(wǎng)頁內(nèi)核渲染,大兵建議精簡網(wǎng)頁CSS資源,讓網(wǎng)頁首屏可在最短時間完成CSS加載,把重要的CSS資源放在網(wǎng)頁head標(biāo)簽內(nèi),達(dá)到縮短首屏渲染時間的目的。
CSS資源是渲染網(wǎng)頁的必備文件,在渲染網(wǎng)頁時,應(yīng)確保將非必要CSS資源都標(biāo)記為非關(guān)鍵資源,并盡可能減少網(wǎng)頁網(wǎng)頁CSS資源的數(shù)量。
圖片體積過大優(yōu)化方案
1、控制圖片大小
1)針對本地圖片
本地圖片體積過大會導(dǎo)致小程序包體積過,延長首屏加載時間,因此建議盡可能將圖片體積縮小:
(1)對于不需要透明背景的圖片,建議用jpeg格式來代替png格式;
(2)安卓移動端圖片格式建議選擇webp格式,webp格式在有損壓縮的情況下,不會察覺圖片壓縮前后有變化,但圖片體積卻大大縮小了;
(3)確保小程序包中沒有無用的圖片資源;
(4)設(shè)置延遲加載不重要的圖片文件,在小程序必要圖片加載完成后再加載不重要的圖片;
(5)使用第三方工具對圖片進(jìn)行有損壓縮。
2)針對網(wǎng)絡(luò)圖片
(1)對于部署cdn加速服務(wù)器上的圖片,也建議壓縮;
(2)通過cdn服務(wù)器獲取的圖片資源,建議添加圖片壓縮規(guī)則;
(3)使用第三方壓縮工具對于壓縮后,再上傳至cdn服務(wù)器。
3、謹(jǐn)慎使用image組件的mode屬性
圖片image組件的mode屬性向開發(fā)者提供了13種模式,widthFix模式就屬于其中一種,由于widthFix模式需要動態(tài)計算圖片寬度,導(dǎo)致網(wǎng)頁尺寸重繪,因此建議大家謹(jǐn)慎使用mode屬性的widthFix模式。
4、使用漸進(jìn)式JPEG來優(yōu)化用戶體驗(yàn)
JPEG圖片格式先展示圖片模糊輪廓,隨著加載掃描次數(shù)的增加,圖片越來越清晰,對于擁堵的網(wǎng)絡(luò)環(huán)境作用比較大,也在一定程度上提升了用戶體驗(yàn)。
百度搜索“閃電算法”的支持
為了保障良好的用戶體驗(yàn),給予優(yōu)質(zhì)站點(diǎn)更多的展現(xiàn)機(jī)會,百度搜索于2017年上線了“閃電算法”。
百度“閃電算法”具體內(nèi)容如下:
要求移動端網(wǎng)頁可在2秒時間內(nèi)完成加載,在此時間內(nèi)完成加載的站點(diǎn)將會獲得流量傾斜,同時網(wǎng)頁首屏加載時間超過3秒鐘,將會被懲罰。
首屏是用戶打網(wǎng)頁的第一屏,重要性肯定是不言而喻的,根據(jù)《百度移動搜索白皮書4.0》提出,要求首屏要在1.5秒內(nèi)完成加載,百度搜索“閃電算法”可參考拓展閱讀第2條。
在移動互聯(lián)網(wǎng)時代,用戶越來越?jīng)]有耐心,對于網(wǎng)頁加載速度也是越來越高,根據(jù)相關(guān)數(shù)據(jù)表明,頁面放棄率和頁面加載時間關(guān)系如下圖所示:
總結(jié),網(wǎng)頁加載打開速度對于用戶體驗(yàn)有著很大的影響,提高網(wǎng)頁加載速度才是開發(fā)者要追求的目標(biāo),例如可以使用加速方案如 MIP、AMP),對于整體網(wǎng)頁進(jìn)行加速。
拓展閱讀:
1、wordpress加載速度很慢,wordpress優(yōu)化速度教程
2、解讀百度閃電算法打擊了什么網(wǎng)站