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