如何減少網頁首屏載入壓力和時間?

首屏時間是指瀏覽器視窗上部區域被充滿所需時間,它是衡量一個網站使用者體驗好與壞的指標。一般情況下,時間越短,使用者體驗越好。通常一個網站,如果首屏時間在5秒以內是比較優秀的,10秒以內是可以接受的,10秒以上就不可容忍了。使用者會選擇重新整理頁面或立刻離開。

工具/原料

chrome瀏覽器

網頁編輯器

網頁載入原理

載入HTML,HTML的各種DOM會並行載入,但若碰到CSS和JS外鏈檔案會阻斷HTML載入,單執行緒載入。

從圖片和CSS來說,HTML的IMG>內嵌CSS圖片>內聯CSS圖片>外聯CSS圖片>JS載入圖片。所以建議將與賣點相關的圖片以IMG形式插入,按照渲染順序,此類圖片是最先顯示載入的,這樣有利於使用者第一時間看到最關鍵的資訊點。

減少載入時間方法

延遲載入,通過js將第二屏出現的圖片設定問延遲載入,優先載入第一屏的圖片。可以使用lazyload,地址是

如何減少網頁首屏載入壓力和時間

儘可能壓縮圖片大小,可以利用線上圖片壓縮工具tinypng。地址是

如何減少網頁首屏載入壓力和時間

將JS放到HTML最後的地方,能最後載入,優先保證基礎資訊閱讀。可以參考雅虎優化原則

如何減少網頁首屏載入壓力和時間

如何減少網頁首屏載入壓力和時間

相關問題答案