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