當您學習如何制作網站時,成功的一半是學習如何確保它的功能和外觀一樣好。畢竟,沒有什么比啟動您的網站更令人震驚的了——卻發現大多數人都離開了它,因為你的頁面無法加載。
當今快節奏的數字世界中,時間是一種商品,沒有人愿意浪費它等待您的網站加載。這就是為什么要測試您的網站速度,并知道如何改進它以避免客戶流失到加載緩慢的網站。
影響您網站速度的因素有很多,包括(但不限于)您的網絡托管服務提供商、后端代碼的質量、您的插件等。我們很容易忘記所有內容,但在我們深入研究錯誤之前,讓我們先了解一下網站在幕后是如何工作的。
將互聯網想象成一家餐廳:網站充當菜單,展示所有可在廚房制作的食物。當您從菜單上點菜時,系統會要求您的服務員從廚房取回它并將其送回您的餐桌。您的訂單越復雜,廚房為您的餐點提供服務所需的時間就越長,服務員返回您的餐桌所需的時間就越長。當我們更深入地了解常見的網站速度錯誤時,請記住這個比喻。
想在可靠的平臺上創建網站?
01. 使用過多的自定義字體
在進行網站設計時,很容易讓人滿懷熱情地嘗試字體等元素。雖然有一個完整的設計解釋了為什么你應該堅持排版原則——比如對比度、層次和平衡——但你真的只需要知道為什么字體太多會影響頁面的性能。
瀏覽器可以輕松理解系統字體,因為大多數計算機已經下載了這些字體。但是,使用“自定義字體”或這些常見字體之外的特殊樣式字體的用戶需要下載文件才能顯示文本。雖然這總是比系統字體花費更多的時間,但在單個頁面上使用的時間越多,加載所需的時間就越長。
為了給訪問者提供最快的用戶體驗,請盡量不要使用超過三到四種自定義字體或選擇系統字體。
02. 使用非最佳圖像格式
在創建您的網站時,文件格式似乎是一件棘手的事情,而且在大多數情況下,它們確實如此。它通過將圖像轉換為“WebP”文件來實現這一點,該文件可以保持圖像質量,但需要更小的文件大小。但是,要使它以最適合您網站的方式發揮作用,您需要確保您上傳的原始文件不僅具有最高質量,而且該高質量文件不會在上傳或下載時造成太多問題。
您可以從選擇正確的圖像格式開始。堅持使用 JPG、PNG 或 SVG 等常見圖像格式。
此外,盡可能使用 JPG 而不是 PNG。JPG 圖像可以比 PNG 小 10 倍,因此加載速度要快得多。雖然 PNG 和 JPG 適用于照片,但 SVG 通常更適合形狀和插圖樣式元素(如logo)。SVG 文件通常比 PNG 和 JPG 小得多,并且它們在頁面上的加載速度更快,因為圖像直接嵌入到網站代碼中。由于該網站不必在互聯網上的其他地方找到圖像,因此它有助于更快地加載圖像。
03. 用燈箱過度
如果您正在構建網站并希望確保您的訪問者看到重要的消息或公告,您可以選擇添加出現在主頁內容頂部的燈箱或彈出窗口。
雖然在訪問者進入網站后幾分鐘就讓一個廣告發布銷售彈出窗口是可以的,但每隔幾秒鐘彈出一些東西不僅會讓你的訪問者感到煩惱,還會減慢你的網站速度。
可以將其視為服務器與表的交互方式。雖然他們可以在你坐下并查看菜單后停下來宣布特色菜,但如果他們每隔一會兒就出現一次,那就很煩人了——同時會阻止他們回到廚房為你提供你來的飯菜。
04. 使用第三方功能
當今網站的一個有趣之處在于,您不必使用自己的所有內容 — 您通??梢詫⒌谌絻热萸度氲骄W頁中,本質上是借用其他網站的內容顯示在您的頁面上。雖然這可以增加訪問者可以在您的網站上做的事情數量,但它會減慢您的網站速度。
最佳做法是在網站中非主頁的部分保留第三方應用程序,并限制您網站上的第三方腳本數量。僅保留您正在使用的應用程序。
05. 頂部加載您的主頁設計
降低網站速度的一個常見罪魁禍首是主頁上加載了大量的視覺內容,如畫廊、視頻和自定義字體。為避免這種情況,請專注于簡化主頁的首屏部分。嘗試將此內容限制為系統字體和靜態圖像中的文本,因為它們的加載速度更快。
Thinkart 在大多數情況下還會自動延遲加載圖像,這意味著位于首屏下方的圖像首先會下載為非常小、低分辨率的占位符圖像。當用戶滾動頁面時,這些替代圖像將替換為原始的高分辨率圖像。
06. 使用 GIF
GIF 徹底改變了現代通信。盡管 GIF 可能很誘人,但實際上比視頻對計算機來說要高得多。原因是,您無法控制它們的播放,它們只有在加載了所有內容幀后才會開始播放。由于這些是頁面加載的多個減速帶,因此您需要考慮使用視頻而不是 GIF 來展示動畫內容。
07. 自動緩存
如果您注意到您的網頁加載時間仍然過長,您可能需要為您的網站手動啟用緩存,以確保它將您最常用的內容存儲在 CDN 服務器上
08. 不為移動設備而設計
最后,為了給移動用戶提供量身定制的體驗,所有 Thinkart 網站都是自適應的,這意味著該平臺會自動針對每個最常見的設備優化它們。但是,網站所有者常犯的一個錯誤是沒有檢查移動版本的外觀和功能是否完全符合他們的要求。
某些元素在移動設備上的顯示效果可能不如在桌面上顯示,而其他元素則可能不是必需的。通過優化移動網站的布局并隱藏不必要的元素,您可以將移動網站精簡到最基本的內容,并減少服務器提供的服務。