2020 年提高網站速度的 10 種簡單方法

頁面速度曾經是網頁設計的基本支柱之一。 最近，不幸的是，由於更高帶寬的互聯網（“為什麼要這麼麻煩？”）和現代前端框架的採用，它退居二線。 然而，網站速度對於用戶體驗和貨幣化仍然至關重要，它對您網站的影響可能比您意識到的要大得多。

在廣告盈利和用戶體驗方面優化網站速度的效果不容小覷。 要了解您的網站在速度方面的表現如何，您可以使用 Chrome 審核工具或使用 GTmetrix 或 Google 的開發工具等工具。

在本文中，我們將介紹一些技術性的內容，帶您完成十個基本操作，這些操作將在 2020 年加快您的網站速度，從而帶來更好的用戶體驗和更好的貨幣化。

讓你的服務器為你工作

正確設置服務器可以大大提高速度性能。 您需要確保擁有兩個簡單的設置：

1. 啟用壓縮——確保為所有文本文件（HTML、JS、CSS、ETC……）啟用了 GZIP 壓縮。
2. HTTP2 – 如果您的服務器可以支持 HTTP2，請確保啟用它。這是無需更改站點上的任何內容即可提高性能的好方法。
   查看 Vodien 對 HTTP2 的精彩演示。

使用延遲加載

延遲加載是僅在內容即將進入視圖時才加載內容的過程。 這將減少用戶可能永遠無法訪問的大量額外內容的下載，並釋放瀏覽器以顯著提高性能。 好消息是，有很多現成的包可以幫助您快速延遲加載內容。 更好的是，從 Chrome 76（2019 年 7 月）開始，延遲加載與 HTML 原生集成。 只需在標籤中添加loading=”lazy ”，就大功告成了。

讓你的文件更小

縮小——這是從代碼中刪除空格和註釋的過程。 它們對於使代碼對人類可讀至關重要，但計算機不需要它們。 縮小可以將文件大小減少 70% 以上。 您應該縮小所有 HTML、CSS 和 JS 文件。 只要確保保留原件，以備不時之需。 今天，每個主要的 IDE 都有插件可以為您縮小文件。 如果您使用的是像 React 這樣的包，縮小會帶有內置的 tree shaking。

拆分文件——確保你的文件只有他們需要的。拆分文件有助於使文件更小，並使您的項目更易於管理。

優化圖像

正確調整圖像大小——響應式網頁設計已成為一種規範，導致圖像根據屏幕以不同大小顯示。 我們可以利用它來發揮我們的優勢，並為我們的圖像保留一些​​不同的尺寸。 如果圖像無法顯示所有這些像素，則無需下載大文件。 圖片標籤和srcset屬性使它非常容易做到。

本指南將引導您完成一些響應式調整圖像大小的最佳實踐和簡單實施。

下一代格式——現在大多數瀏覽器都支持的新圖像格式可以大大減小文件大小（不僅僅是照片）。例如，Google 的開放 WebP 格式可以減少 64% 到 92% 的文件大小。 在下面的案例中，我們使用 2 種不同大小的 WebP 文件，並為不支持 webP 的瀏覽器添加備用 jpg 圖像。

圖像精靈——圖像精靈是由許多小圖像組成的圖像。為所有按鈕\徽標使用圖像子畫面將減少加載頁面所需的服務器調用次數。 如果您使用的是 HTTP/1.1，這將縮短加載時間。

實施客戶端緩存策略

通過要求瀏覽器保留已下載的文件，可以顯著縮短頁面加載時間。 這與內部和外部文件都相關。

內部文件——這些是您網站上可重複使用的文件，如樣式表和徽標。對於不會更改的文件，例如徽標、通用 CSS 和具有唯一標識符的圖片，習慣上將到期日期設置為 1 年。 如果您希望更頻繁地更改文件，則可以設置適當的到期日期。

外部包——例如，如果您的站點使用引導包，您可以選擇使用 CDN，而不是將包下載到您的網站上。如果您這樣做，即使用戶是第一次訪問您的網站，他也可能不需要下載該軟件包，因為它是一個流行的軟件包並且可能已經從其他站點下載過。

利用服務器端緩存

這個想法與前端緩存相同，可以讓你的服務器免於處理它已經創建或經常使用的東西。 如果您有一個內容網站，您不希望每次用戶進入該網站時都訪問您的數據庫，因為性能低下且數據庫成本高。 由於所有用戶都將看到相同的文章，您可以將其緩存一次並繼續提供緩存版本，直到對其進行更改。

許多不同的軟件包可以幫助您解決這個問題，具體取決於您的服務器的設計方式。 當然，您可以設計自己的緩存以滿足您的特定需求。

使用 CDN

內容交付網絡聯繫您的服務器，緩存響應，然後在本地將其提供給您的用戶。 乍一看，它們似乎非常昂貴。 但是，正確設置 CDN 應該可以降低服務成本，同時大大提高性能。

避免重定向

避免重定向！ 重定向是減慢一切的可靠方法。 有時它們是必要的，例如當重定向用戶以使用您網站的安全版本（HTTP VS HTTPS）或當您移動網站上的內容但希望舊的 SEO 鏈接繼續指向內容時。

如果您發現自己使用重定向，請確保避免鍊式重定向。 鍊式重定向是導致另一個重定向的重定向。 如果您必須重定向，請確保只重定向一次！

確定並移除渲染阻塞活動

渲染是指加載，在查看您的網頁時，快速加載的最高優先級是首屏部分。 由於 HTML 是從上到下閱讀的，因此將對首頁視圖不重要的內容推送到重要內容之外非常重要。

例如，如果您有一個用於分析的 JS 標記，您可以將它放在頁腳中。 這樣，您可以確保用戶的瀏覽器首先處理用戶可以看到的內容，而將其他內容推遲到以後處理。

明智地選擇您的合作夥伴

在網絡上，就像在生活中一樣，最重要的是選擇合適的合作夥伴。 您可以簡化您的網站並擁有一個旨在快速運行的漂亮網站。 但是，如果廣告合作夥伴導致網站加載緩慢，您就會創建一種侵入性的用戶體驗。 一年前，我們開始與電子競技行業的一家出版商合作，我們在通過該網站獲利方面遇到了困難。 在仔細檢查網站後，我們發現一個廣告單元速度太慢，導致網站上的所有其他廣告合作夥伴都超時。 該網站刪除該廣告合作夥伴後，該網站的整體每頁每千次展示收入翻了兩番！

保持學習

在本文中，我們只介紹了一些快速提示。 因此，一定要更深入地提高性能。 此外，我們的生態系統也在不斷發展。 如果你走到這一步，你可能知道總有新東西要學。

我建議您看看下面的兩個鏈接。 我認為他們是一個很好的起點。

https://www.udacity.com/course/browser-rendering-optimization–ud860

https://medium.com/swlh/what-the-amp-augmenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8