在SEO優化中頁面加載時間是用戶體驗中重點考量的因素之一,那么大家知道頁面加載的理想時間是多少呢?又如何才能提升站點的加載速度呢?
先說結論,為了保證正常用戶體驗,頁面首屏的加載完成要控制在1.5秒以內,再慢也不能超過3秒。結論很簡單,但是我們又如何檢查站點頁面的加載時間,顯然不可能掐表數。
01、頁面加載時間的指標
要想搞明白這個問題,首先我們要搞清楚瀏覽器頁面加載時間有哪些指標:
DNS Time:dns解析時間,進行域名解析所需要的時間。
SocketTime:客戶端建立TCP連接的時間。FirstByte Time(FP):從瀏覽器請求頁面到服務器返回第一字節的時間。
First Contentful Paint(FCP):代表瀏覽器向屏幕繪制內容,也就是瀏覽器打開頁面首屏區域內所有的文本、圖像或其他可視元素的時間點。
Largest Contentful Paint(LCP):整個頁面中可以看到的所有內容素繪制完成并正常顯示的時間點。
Download Contentful Time(DCL):網頁中所有資源對象下載完成的時間。
頁面的加載是一個復雜的過程,以上只是潘某人SEO認為在頁面加載時間中相對比較重要的時間節點,并且以上的時間節點是根據先后順序的。
02、重點時間指標
在SEO優化中潘某人SEO認為最關鍵的是FCP和LCP時間,這不僅僅是影響SEO,還是直接導致跳出率高轉化差。
FCP時間
First Contentful Paint(FCP),這在SEO優化中是非常重要的時間,也就是用戶打開網頁時第一眼可以看到的屏幕區域內的所有可見元素的加載完成。
如在百度搜索引擎的白皮書建議的首屏加載時間要達到1.5秒以內,最差也要3秒以內,這是評判站點用戶體驗表現的重要因素。
要查看網頁的FCP時間,可以使用瀏覽器打開開發者工具。在Performance選項卡下,點擊"錄制"按鈕然后刷新要訪問的頁面,記得清空緩存,頁面加載完成之后,點擊"停止"按鈕。在左側面板中,找到"First Contentful Paint",點擊展開,就可以看到FCP、FP、LCP、DCL時間,如上圖以潘某人SEO站點為例。
如果FCP時間超過理想值,就看下前面的時間節點DNS Time、SocketTime、FirstByte Time,一般來說問題都會在FirstByte Time。也就是首字節加載時間過長,也就是后端相應速度太慢,一般這個時間控制在500毫秒以內,如果嚴重超出這個值那就要考慮下代碼邏輯是否有問題,是否做了緩存,服務器配置是否足夠,總之找到后端影響慢的問題。
LCP時間
Largest Contentful Paint(LCP):整個頁面中可以看到的所有內容素繪制完成并正常顯示的時間點。潘某人SEO這個時間應該控制在3秒以內,也就是說基本上要做到用戶滑動頁面的時候內容已經提前加載完成,沒有等待時間。
影響LCP速度的最大因素就是頁面資源過多而且又大,如果帶寬又不給力就容易導致瀏覽器線程阻塞。解決方法就是資源該合并的合并,圖片該壓縮的壓縮,該延遲加載的就延遲,或者就重要資源做好預加載,再不行就提帶寬。
03、如何提升首屏加載速度
LCP和FCP時間的關系,FCP是LCP之前的時間節點,就是LCP的組成部分,而我們今天的重點就是在LCP時間不變的情況下如何提升首屏FCP時間。
站點通過優化提升了LCP時間,FCP時間自然也會同步的提升,但是首屏FCP的提升是非常有限的。最有效的方法就要對頁面的內容做分割。
正常來說一個頁面的加載在dom數構建完成之后就開始所以加載資源,也就是說整個頁面可能東一塊西一塊的加載出來內容。
我們要做的就是優先加載首屏區域的內容,等首屏內容加載完成了才進行加載頁面剩余位置的內容,如此在LCP時間不改變的情況下就可以實現首屏FCP加載時間的大幅度提升。