網站的加載速度優化,可以從圖片以及js兩方面入手,然而當這兩項的優化都做到了,但用戶還是抱怨加載慢該怎么辦?此時就要提出一個新的概念,加載的感知時間。
什么是網站加載感知時間
網站的感知加載時間是指,并非通過程序來檢測的網頁完全加載的時間,而是用戶感覺到的頁面加載完畢的時間。因為用戶瀏覽網頁需要的是獲取信息,而這些信息一般無需通過文字以及壓縮過的并非太清晰的圖片就可獲得,當用戶想要的信息加載完畢,那么在用戶的感覺上,該頁面就已經加載完畢了。
需要明確的一點是,感知加載時間更多是從用戶的角度出發,優化感知加載時間很多時候并不能優化搜索引擎對該網站的加載速度評級。要想優化搜索引擎對網站加載速度的評分,就應該先從JS代碼的優化與圖像的優化做起。這也是優化感知加載時間之前,首先要做的事情。
優化感知加載時間的要領就是,讓網頁的構造與文字內容優先顯現出來。用戶想要的是網頁第一時間展現出他們要的信息,而不是盯著空白的頁面,一直等到瀏覽器把圖片等元素都加載完畢才顯現出他們想要的。
在文字內容顯現完畢之后,還有一個要注意的細節就是,如果有圖片加載完成,不要讓用戶正在看的文字突然“飛走”。我們在瀏覽網頁時經常出現的一個煩躁的事情就是:文字加載完畢后,我們正在集中精神看或者想要點擊某個鏈接的時候,某個圖片加載完畢,整個頁面內容隨著圖片的擴張,整個往下“飛走了”一大段距離。這會極大的消磨用戶的耐心與繼續瀏覽的欲望。
如何通過優化圖像來減少網頁的加載感知時間
1.利用JS—將圖片的加載寫入JS,使用JavaScript停止圖像和其他元素加載,直到網頁的主要內容完成加載為止。該方式可以有效地加快內容加載速度,但是需要額外的js代碼來占用網頁數據大小。這個方式對pc與移動站點都有效
2.使用縮略圖,當頁面加載時,加載縮略圖像。比如在電商網站上經常見到的方式是,產品詳情圖開始為縮略圖,當用戶點擊放大時,再進行清晰的原圖加載。在移動端訪問上盡可能多的用這種方式可以收到比較好的效果。因為移動設備的屏幕小,因此對于圖像精度的要求不高,并且不論是低質量還是高質量圖像占據位置都差不多,不會因圖像放大造成內容的大范圍遷移。
3.使用漸進式圖像,漸進式圖像是另一種圖像的保存方式。與傳統的由上到下的掃描來展現圖片相比(baseline),漸進式圖像的加載方式是先顯示整個圖片的模糊輪廓,隨著掃描次數的增加,圖片變得越來越清晰。這種加載方式在移動端與pc端適應性都非常良好,并且可以在保證網站整體內容布局第一時間加載完畢的同時,不影響內容的快速呈現。
漸進式圖像(Progressive)無需特別的技術支持,只需要使用ps就可以達到要求。在PS中有“存儲為web所用格式”,打開后選擇“連續”就是漸進式圖像。
加快網站的感知加載速度的目的就是讓用戶盡快理解頁面的主旨,找到他們想要的內容,讓他們可以不同枯燥的等待加載網站信息。優先打好網頁瘦身的基礎(JS優化與針對不同設備做的圖像優化),再進行上述的圖像加載方式優化,可以有效提升用戶體驗。