国内视频在线精品_成年人视频免费在线播放_亚洲aaaaaa_日产日韩在线亚洲欧美_日韩成人一级_亚洲另类视频_国产精品一二三

如您所見，有很多因素會影響加載網站上每個頁面所需的時間。但是，您可以通過多種方式提高網站的性能。這里是其中的一些：

1. 減少 HTTP 請求的數量

Web 瀏覽器使用 HTTP 請求從 Web 服務器獲取頁面的不同部分，例如圖像、樣式表和腳本。每個請求，尤其是使用 HTTP/1.1 的請求，在瀏覽器和遠程 Web 服務器之間建立連接時都會有一些開銷。

此外，瀏覽器通常對并行網絡請求的數量有限制，因此如果您有很多請求排隊，如果隊列太長，其中一些請求將被阻止。

您的頭一步應該是消除根本不必要的請求。您的網站所需的比較短渲染時間是多少？找出答案，并僅加載必要的外部資源。

您應該刪除任何不必要的圖像、JavaScript 文件、樣式表、字體等。如果您使用的是 WordPress 等 CMS，則應刪除任何不必要的插件，因為它們通常會在每個頁面上加載其他文件。

現在您已經修剪了所有可以修剪的內容，下一步是優化其余部分。您應該考慮壓縮 CSS 和 JavaScript 文件。優化的網站通常會在每個請求中加載所有必需的 CSS 和 JavasScript。

Sematext Experience 可以幫助您監控和識別真實用戶加載緩慢的 HTTP 請求和資源。

2. 切換到 HTTP/2

我在上面提到了通過 HTTP/1.1 發送許多請求的開銷。HTTP 是瀏覽器用于與遠程 Web 服務器通信的協議。您網站的 HTML 以及所有其他資源（例如圖像、樣式表和 JavaScript 文件）都使用此協議進行傳輸。

解決這個問題的一種方法是減少請求數量。無論如何，這都是一個很好的方法。渲染網站所需的資源越少，頁面加載時間就越快，但還有另一種方法可以避免這種開銷。

您可以將您的網站切換到 HTTP/2。有關如何執行此作的詳細信息將取決于您使用的托管服務提供商。

與 HTTP/2.1 相比，HTTP/1 具有多項優勢。其中包括通過同一連接同時發送多個文件的能力。這避免了多個請求的開銷。

3. 優化圖像尺寸

許多網站大量使用圖形。如果您的圖像沒有壓縮，或者您使用的分辨率太高，它會降低您網站的性能。

例如，網站有時會使用 2 倍甚至 3 倍分辨率的圖像，以便它們在視網膜屏幕等高密度顯示器上顯示良好。但是，如果您的用戶不使用 HiDP 顯示器，那么您只會浪費帶寬并增加訪問者的加載時間，尤其是當他們使用較慢的移動數據連接時。

您可以閱讀此 MDN 指南以正確使用響應式圖像。指定多個圖像大小將允許瀏覽器根據屏幕分辨率選擇合適的圖像。

當您確定在所有設備類型上加載正確的分辨率時，就該優化圖像的大小了。Shopify 有一個關于如何做到這一點的很好的指南。

確保您也使用正確的文件類型！對具有多種顏色的圖像（例如照片）使用 JPEG，對更簡單的圖形使用 PNG。

4. 使用內容分發網絡 （CDN）

提供靜態文件可能會變得棘手。由于這不是 99% 網站的主要業務，因此將這部分基礎設施外包給其他人是明智之舉。幸運的是，有一些專門為此設計的服務：內容分發網絡或 CDN。

CDN 將優化向訪問者交付靜態文件（例如 CSS、圖像、字體和 JavaScript）。設置它們通常非常簡單。

CDN 使用地理上分布的服務器。這意味著離訪問者比較近的服務器將提供文件。因此，無論用戶在哪里連接，例如圖像的加載時間都將相同。通常，從您自己的服務器提供靜態文件時，當用戶物理上遠離服務器時，加載時間會增加。

您可以使用 Sematext Experience 來監控 CDN 上托管的文件的性能，以便您可以實際衡量外包這部分基礎設施是否有意義。當我們一次開始使用 CDN 為 Sematext Cloud 提供資產時，我們實際上使用了 Sematext Experience，這表明我們確實更快地為用戶提供內容。

5. 編寫移動優先代碼

移動設備正在吞噬世界。至少我被告知。您應該檢查您的用戶正在使用 RUM 解決方案（例如 Sematext Experience）甚至您選擇的網站分析工具（例如 Google Analytics），以防萬一。

通常，開發人員在自己的桌面設備上編寫和測試網站，然后才針對移動設備優化網站。這通常是一個痛苦的過程，具體取決于編寫網站時所做的選擇。

但是，如果在測試網站時我們使用移動設備（或模擬器）呢？這樣我們就會首先為移動設備編寫。默認情況下，該體驗將針對移動設備進行優化。

然后為桌面設備調整網站將是一個更簡單的過程。我們可以逐步增強具有更大功率和屏幕空間的設備的體驗。請記住還要限制網絡和 CPU，以更好地模擬移動用戶的體驗。

6. 更小化頭一個字節的時間

頭一個字節的時間 （TTFB） 是瀏覽器從服務器接收頭一個字節數據所需的時間。因此，這是一個服務器端問題，但它對您網站的整體性能起著重要作用，因此您應該花一些時間來改進它。

在 TTFB 方面，您可以控制的主要因素是服務器處理時間。因此，您可以嘗試 Google 推薦的一些技巧來改進 TTFB：

優化服務器的應用程序邏輯以更快地準備頁面。如果您使用服務器框架，則該框架可能會提供有關如何執行此作的建議。

優化服務器查詢數據庫的方式，或遷移到更快的數據庫系統。

升級您的服務器硬件以擁有更多內存或 CPU

低于 200 毫秒的 TTFB 被認為是很好的。200 毫秒到 500 毫秒的范圍被認為是正常且正常的。需要調查持續高于 600 毫秒的 TTFB。Sematext Experience 可以幫助您實現這一目標，同時監控其他 Web Vitals 指標。

7. 選擇合適的托管服務計劃

這與上一點關于更小化頭一個字節的時間有關。如果您使用的是共享網絡托管服務提供商，那么整體性能很可能會低于標準。您應該考慮升級托管服務計劃，或者如果您使用的是 WordPress，請考慮使用以穩定和高性能托管而聞名的托管服務。

您有三個主要托管選項（加上一個獎勵選項）：

共享 – 傳統上，便宜的托管選項是一種與其他客戶共享服務器資源的方式。

VPS – 虛擬專用服務器比共享主機快得多，但它不是只使用一臺機器，而是使用多臺機器。

專用 – 專用服務器顯然是三者中昂貴的，有了這個，您基本上可以租用一整臺機器，通?？梢愿鶕寞偪竦脑竿M行配置。

無服務器 – 最近，無服務器在服務器空間中站穩了腳跟，因為它以極低的成本提供了無與倫比的可擴展性。

當然，與往常一樣，您應該在進行轉換之前先衡量您的表現。

8. 實現 Gzip 壓縮

您應該在 HTTP 服務器上啟用 gzip 壓縮。Gzip 壓縮可更大限度地減少某些文件類型的 HTTP 響應大小。它通常僅用于文本響應。這應該會減少加載時間并節省帶寬。

9. 縮小和組合 CSS、JavaScript 和 HTML 文件

我已經提到過，您應該嘗試在每個請求中加載 JS 和 CSS。這是通過將單獨的 JS 和 CSS 文件縮小并組合成單個捆綁包來實現的。

瀏覽器對并行網絡請求有限制，因此如果您的網站總共需要 3 個請求才能加載，它很可能比必須加載 30 個不同資源更快。開發人員可以使用 webpack 等工具，在開發網站時方便地使用多個文件，并在部署到生產環境時獲得單個捆綁包的性能優勢。但一般來說，合并文件的意思是，所有文件都按原樣復制到一個文件中。

縮小是通過刪除或縮短源代碼中的符號來優化 JavaScript 和 CSS 文件大小的過程。輸出在功能上是等效的，但不完全是人類可讀的。不過，瀏覽器讀取它沒有問題，而且較小的文件大小加載速度會更快。

大多數優化的網站最終所做的是首先縮小 JavaScript 和 CSS 文件，然后將它們組合成單個捆綁包。

10. 異步加載 JavaScript

當瀏覽器達到 <腳本>標記，它將等待文件加載后再繼續渲染網站。這稱為同步加載。

如果您在 <腳本>標記，則瀏覽器將異步加載腳本。加載腳本時，它將繼續解析頁面。

我們還建議將腳本標簽移動到頁面底部，靠近結束標記。這樣，不支持 async 屬性的舊瀏覽器將在解析頁面的其余部分后加載腳本。

11. 考慮使用預取、預連接和預渲染技術

您可以使用不同的預取和預加載技術來提示瀏覽器，在瀏覽器實際需要這些資源之前，需要哪些資源來呈現頁面。

請考慮以下性能優化技術：

DNS 預取。您可以告訴瀏覽器，某些域名需要解析為 IP 地址，然后瀏覽器才能實際看到來自該域名的資源。這似乎是一個小的優化，但當您用盡其他技術時，它可能會有所不同。

<link rel="dns-prefetch" href="//sematext.com">

TCP 預連接。與 DNS 預取方法非常相似，預連接將解析 DNS，但它也會進行 TCP 握手，以及可選的 TLS 握手。

<link rel="preconnect" href="https://www.sematext.com">

預取。如果我們確定將來需要特定資源，那么我們可以要求瀏覽器請求該項目并將其存儲在緩存中以供以后參考。

<link rel="prefetch" href="logo.png">

預渲染。當您真正知道用戶將采取的下一步是轉到某個頁面時，這應該保留。您可以通過指定如下URL來指示瀏覽器預渲染整個頁面，并下載所有必需的資產：

<link rel="prerender" href="https://www.sematext.com/next-page">

12.減少插件數量

插件是可重用的功能，通常用于 WordPress 或其他預建網站平臺等內容管理系統。插件為網站所有者提供了額外的功能，例如分析或在博客文章上發表評論的能力。

但插件是有代價的。每個插件幾乎肯定會加載額外的 CSS 和 JavaScript 文件。一些插件也會增加 TTFB 時間，因為它們需要在服務器上對每個頁面請求進行額外處理。

因此，我建議您瀏覽您的插件列表并確保您確實需要每個插件。您應該刪除任何對您的網站不重要的插件。

13.使用網站緩存

我已經簡要提到了緩存，但我想解釋一下它是什么。緩存是將文件版本保存在可以更快訪問的臨時存儲位置（緩存）中的過程。啟用瀏覽器緩存有很多優點，因為它可以減少帶寬消耗、增加加載時間、減少延遲和服務器的工作負載。主要缺點是基本上在任何給定時間您的網站都會至少有兩個版本。如果您正在運行依賴于準確數據的實時服務，這可能會導致問題，但即使這樣也可以在某種程度上解決，從而在導入新數據時強制清除緩存的子部分。

14. 采用基于云的網站監控

提高網站性能的頭一步是衡量它。衡量性能需要特定的工具，如果您希望在更改正在提高性能或性能隨時間下降時收到警報，則必須持續監控。

網站監控有兩種方法：綜合監控和真實用戶監控。如果您不確定它們的工作原理以及哪一種適合您的用例，請查看我們關于真實用戶監控與綜合監控的博客文章，其中我們比較了兩種類型的監控。

無論哪種情況，我們都建議使用基于云的網站監控工具，這樣您就可以專注于發展業務，而不是構建或管理自己的工具。Sematext Cloud 提供綜合監控和真實用戶監控的解決方案。免費試用 14 天！

總結：

提高網站性能可能具有挑戰性，尤其是在設備、連接、瀏覽器和作系統方面存在巨大差異的情況下，但如果您的企業依賴您的網站作為接觸客戶的主要渠道之一，這將對您的業務產生重大的積極影響。

另外，請記住，這是一個沒有明確定義的起點和終點的過程。您不必立即實施所有建議的更改。花一些時間查看監控工具的結果，在網站上進行更改，然后比較更改前后的性能。

如果您正在市場上尋找一種工具來幫助您提高網站性能，請務必查看 Sematext Cloud 及其網站監控工具。Sematext 確保對應用程序所有組件的端到端可見性，以幫助您保持網站的性能和可用性。有 14 天的免費試用期供您試用其所有功能。試一試！