這兩天一直在看首屏優(yōu)化的文章,所以將其總結(jié)歸納一下,方便以后使用。

相對于移動端的首屏優(yōu)化,PC在有些方面要苛刻得多,主要是因為PC端有太多的東西想要讓用戶看到,這就
難免PC端的頁面大而“重”,與我們現(xiàn)在“富客戶端”的概念想相呼應。

本文目錄

一 什么是首屏?

以800x600像素尺寸為標準,當瀏覽器加載頁面后看到第一眼的顯示內(nèi)容為首屏。而從開始加載到瀏覽器頁面顯示高度達到600像素且此區(qū)域有內(nèi)容顯示的時間為首屏顯示時間。

以京東首頁為例:

大學生就業(yè)培訓,高中生培訓,在職人員轉(zhuǎn)行培訓,企業(yè)團訓

當我們打開京東時,第一眼看到的內(nèi)容即為首屏內(nèi)容,也就是如上圖的內(nèi)容。

二 為什么要做首屏優(yōu)化

一個頁面的“總加載時間”要比“首屏時間”長,但對于最終用戶體驗而言,當內(nèi)容充滿首屏的區(qū)域時,用戶就可以看到網(wǎng)站的主要內(nèi)容并可以進行各自的選擇了。首屏時間的快與慢,直接影響到了用戶對網(wǎng)站的認知度。
所以首屏時間的長短對于用戶的滯留時間的長短、用戶轉(zhuǎn)化率都尤為重要。

三 大公司是怎么做首屏優(yōu)化的

還是首先以京東為例:

當我們打開京東的網(wǎng)站(不要滾動鼠標和鍵盤),右鍵查看源代碼會發(fā)現(xiàn)京東首頁的DOM樹出奇的簡單,頁面DOM中多含有mod_lazyload的類

<div class="J_f J_lazyload J_f_lift mod_lazyload need_ani chn" id="portal_8" data-backup="basic_8" data-source="cms:basic_8" data-tpl="portal_tpl">

再看下 localstorage

大學生就業(yè)培訓,高中生培訓,在職人員轉(zhuǎn)行培訓,企業(yè)團訓

網(wǎng)友評論