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