一(yī)、用(yòng)戶期待的(de)速度體(tǐ)驗€♣π"

移動互聯網時(shí)代，用(yòng)戶對(duì ™₩)于網頁的(de)打開(kāi)速度要(yào)求越來(lái)越←✔¶高(gāo)。百度用(yòng)戶體(tǐ)驗部✘∑σ研究表明(míng)，頁面放(fàng)棄率和(hé)頁面的(de)>&打開(kāi)時(shí)間(jiān)關系如(rú)下(xià)圖所'φ示。

根據百度用(yòng)戶體(tǐ)驗部的(de)研究結果來(lái)看(kà≠♥£n)，普通(tōng)用(yòng)戶期望且能(nΩ‌®→éng)夠接受的(de)頁面加載時(shí)間'φ©(jiān)在3秒(miǎo)以內(nèi)。若頁§≥©'面的(de)加載時(shí)間(jiān)過慢(màn)，用'β(yòng)戶就(jiù)會(huì)失去(qù)耐心而選擇離(lí)開(k♠&āi)，這(zhè)對(duì)用(yòng)戶和(hé)站(zhàn∞≤)長(cháng)來(lái)說(shuō)都( ↔ ←dōu)是(shì)一(yī)大(dà)損失。

二、“閃電(diàn)算(suàn)法”的(de)支持λ♠

為(wèi)了(le)能(néng)夠保障用(yòng)戶體(tǐ& )驗，給予優秀站(zhàn)點更多(duō)面向用(yòng)戶的(de)機÷♠‌(jī)會(huì)，“閃電(diàn)算(suàn)法”在20& ✘↑17年(nián)10月(yuè)初上(shàng)線★‌$。閃電(diàn)算(suàn)法的(de)具體(tǐ)>Ω♦內(nèi)容是(shì)什(shén)麽呢(ne)？一(yī)起看(kà∏≥®n)：

移動網頁首屏在2秒(miǎo)之內(nèi)完成打開(kāi)的(de)，在¥₽≥★移動搜索下(xià)将獲得(de)提升頁面≠€評價優待，獲得(de)流量傾斜；同時(shí)，在✘£移動搜索頁面首屏加載非常慢(màn)（3秒(miǎo)及以上(shàng)ε∏）的(de)網頁将會(huì)被打壓。

首屏作(zuò)為(wèi)直面用(yòΩ÷≥ng)戶的(de)第一(yī)屏，其重要(§ yào)性不(bù)言而喻。根據百度用(✘₩•✘yòng)戶體(tǐ)驗部的(de)研究結果，《白(bái)皮書(shū)4φ÷.0》提出，首屏內(nèi)容應在1.5秒(€✘πmiǎo)內(nèi)加載完成。

三、技(jì)術(shù)建議(yì)

優化(huà)頁面首屏加載時(shí)間(jiān)，≈§優化(huà)的(de)技(jì)術(shù)建議(yì)包括但(dàn)♦‍®‍不(bù)限于:

資源加載：

1.将同類型資源在服務器(qì)端壓縮合并，減少(shǎo)網絡請(qǐ₩ε✘ng)求次數(shù)和(hé)資源體(tǐ)積。

2.引用(yòng)通(tōng)用(yòng)資源，充分(fē✔'♦n)利用(yòng)浏覽器(qì)緩存。

3.使用(yòng)CDN加速，将用(yòng)戶的(de)請($≈qǐng)求定向到(dào)最合适的(de)緩存服務器(qì)上(shà∑>≠ng)。

4.非首屏圖片懶加載，将網絡帶寬留給首屏請(qǐng)求。

頁面渲染：

1.将CSS樣式寫在頭部樣式表中，減少(shǎo)由CSS文(w§>én)件(jiàn)網絡請(qǐng)求造成的(de)渲染阻塞。

2.将JavaScript放(fàng)到(←✘dào)文(wén)檔末尾，或使用(yòng)async方式加載，避免JS執行®α(xíng)阻塞渲染。

3.對(duì)非文(wén)字元素（如(rú)圖片，視 ∞ ‍(shì)頻(pín)）指定寬高(gāo)，≥β避免浏覽器(qì)重排重繪。

四、結語

當然，整站(zhàn)的(de)加載時(shí)長(cháβ&πng)對(duì)用(yòng)戶的(de)體(tǐ)驗₹™σ都(dōu)有(yǒu)莫大(dà)的(de)影(yǐng)響。提高(g∞γ♦āo)全站(zhàn)的(de)速度體(tǐ)驗才是(↑§ shì)我們應該一(yī)起追求的(de)目标。站(zhàn)點可(k ↔ě)以結合自(zì)身(shēn)情況升級技(jì)術(shù)棧，也(¶±Ω∞yě)可(kě)以使用(yòng)通(tōng)用(yòng≈₩↔)加速方案（如(rú)MIP、AMP）對(duì)網頁進行(xí✘¶←×ng)綜合加速。