在SEO優(yōu)化中頁(yè)面加載時(shí)間是用戶體驗(yàn)中重點(diǎn)考量的因素之一，那么大家知道頁(yè)面加載的理想時(shí)間是多少呢？又如何才能提升站點(diǎn)的加載速度呢？

　　先說(shuō)結(jié)論，為了保證正常用戶體驗(yàn)，頁(yè)面首屏的加載完成要控制在1.5秒以內(nèi)，再慢也不能超過(guò)3秒。結(jié)論很簡(jiǎn)單，但是我們又如何檢查站點(diǎn)頁(yè)面的加載時(shí)間，顯然不可能掐表數(shù)。

　　01、頁(yè)面加載時(shí)間的指標(biāo)

　　要想搞明白這個(gè)問(wèn)題，首先我們要搞清楚瀏覽器頁(yè)面加載時(shí)間有哪些指標(biāo)：

　　DNS Time：dns解析時(shí)間，進(jìn)行域名解析所需要的時(shí)間。

　　SocketTime：客戶端建立TCP連接的時(shí)間。FirstByte Time(FP)：從瀏覽器請(qǐng)求頁(yè)面到服務(wù)器返回第一字節(jié)的時(shí)間。

　　First Contentful Paint(FCP)：代表瀏覽器向屏幕繪制內(nèi)容，也就是瀏覽器打開頁(yè)面首屏區(qū)域內(nèi)所有的文本、圖像或其他可視元素的時(shí)間點(diǎn)。

　　Largest Contentful Paint(LCP)：整個(gè)頁(yè)面中可以看到的所有內(nèi)容素繪制完成并正常顯示的時(shí)間點(diǎn)。

　　Download Contentful Time(DCL)：網(wǎng)頁(yè)中所有資源對(duì)象下載完成的時(shí)間。

　　頁(yè)面的加載是一個(gè)復(fù)雜的過(guò)程，以上只是潘某人SEO認(rèn)為在頁(yè)面加載時(shí)間中相對(duì)比較重要的時(shí)間節(jié)點(diǎn)，并且以上的時(shí)間節(jié)點(diǎn)是根據(jù)先后順序的。

　　02、重點(diǎn)時(shí)間指標(biāo)

　　在SEO優(yōu)化中潘某人SEO認(rèn)為最關(guān)鍵的是FCP和LCP時(shí)間，這不僅僅是影響SEO，還是直接導(dǎo)致跳出率高轉(zhuǎn)化差。

　　FCP時(shí)間

　　First Contentful Paint(FCP)，這在SEO優(yōu)化中是非常重要的時(shí)間，也就是用戶打開網(wǎng)頁(yè)時(shí)第一眼可以看到的屏幕區(qū)域內(nèi)的所有可見元素的加載完成。

　　如在百度搜索引擎的白皮書建議的首屏加載時(shí)間要達(dá)到1.5秒以內(nèi)，最差也要3秒以內(nèi)，這是評(píng)判站點(diǎn)用戶體驗(yàn)表現(xiàn)的重要因素。

　　要查看網(wǎng)頁(yè)的FCP時(shí)間，可以使用瀏覽器打開開發(fā)者工具。在Performance選項(xiàng)卡下，點(diǎn)擊"錄制"按鈕然后刷新要訪問(wèn)的頁(yè)面，記得清空緩存，頁(yè)面加載完成之后，點(diǎn)擊"停止"按鈕。在左側(cè)面板中，找到"First Contentful Paint"，點(diǎn)擊展開，就可以看到FCP、FP、LCP、DCL時(shí)間，如上圖以潘某人SEO站點(diǎn)為例。

　　如果FCP時(shí)間超過(guò)理想值，就看下前面的時(shí)間節(jié)點(diǎn)DNS Time、SocketTime、FirstByte Time，一般來(lái)說(shuō)問(wèn)題都會(huì)在FirstByte Time。也就是首字節(jié)加載時(shí)間過(guò)長(zhǎng)，也就是后端相應(yīng)速度太慢，一般這個(gè)時(shí)間控制在500毫秒以內(nèi),如果嚴(yán)重超出這個(gè)值那就要考慮下代碼邏輯是否有問(wèn)題，是否做了緩存，服務(wù)器配置是否足夠，總之找到后端影響慢的問(wèn)題。

　　LCP時(shí)間

　　Largest Contentful Paint(LCP)：整個(gè)頁(yè)面中可以看到的所有內(nèi)容素繪制完成并正常顯示的時(shí)間點(diǎn)。潘某人SEO這個(gè)時(shí)間應(yīng)該控制在3秒以內(nèi)，也就是說(shuō)基本上要做到用戶滑動(dòng)頁(yè)面的時(shí)候內(nèi)容已經(jīng)提前加載完成，沒有等待時(shí)間。

　　影響LCP速度的最大因素就是頁(yè)面資源過(guò)多而且又大，如果帶寬又不給力就容易導(dǎo)致瀏覽器線程阻塞。解決方法就是資源該合并的合并，圖片該壓縮的壓縮，該延遲加載的就延遲，或者就重要資源做好預(yù)加載，再不行就提帶寬。

　　03、如何提升首屏加載速度

　　LCP和FCP時(shí)間的關(guān)系，F(xiàn)CP是LCP之前的時(shí)間節(jié)點(diǎn)，就是LCP的組成部分，而我們今天的重點(diǎn)就是在LCP時(shí)間不變的情況下如何提升首屏FCP時(shí)間。

　　站點(diǎn)通過(guò)優(yōu)化提升了LCP時(shí)間，F(xiàn)CP時(shí)間自然也會(huì)同步的提升，但是首屏FCP的提升是非常有限的。最有效的方法就要對(duì)頁(yè)面的內(nèi)容做分割。

　　正常來(lái)說(shuō)一個(gè)頁(yè)面的加載在dom數(shù)構(gòu)建完成之后就開始所以加載資源，也就是說(shuō)整個(gè)頁(yè)面可能東一塊西一塊的加載出來(lái)內(nèi)容。

　　我們要做的就是優(yōu)先加載首屏區(qū)域的內(nèi)容，等首屏內(nèi)容加載完成了才進(jìn)行加載頁(yè)面剩余位置的內(nèi)容，如此在LCP時(shí)間不改變的情況下就可以實(shí)現(xiàn)首屏FCP加載時(shí)間的大幅度提升。