|
一站式網(wǎng)絡(luò)推廣服務(wù)商 |
 |
24小時(shí)服務(wù)熱線電話(huà)
15981820747
|
如您所見(jiàn)，有很多因素會(huì)影響加載網(wǎng)站上每個(gè)頁(yè)面所需的時(shí)間。但是，您可以通過(guò)多種方式提高網(wǎng)站的性能。這里是其中的一些：
1. 減少 HTTP 請(qǐng)求的數(shù)量
Web 瀏覽器使用 HTTP 請(qǐng)求從 Web 服務(wù)器獲取頁(yè)面的不同部分，例如圖像、樣式表和腳本。每個(gè)請(qǐng)求，尤其是使用 HTTP/1.1 的請(qǐng)求，在瀏覽器和遠(yuǎn)程 Web 服務(wù)器之間建立連接時(shí)都會(huì)有一些開(kāi)銷(xiāo)。
此外，瀏覽器通常對(duì)并行網(wǎng)絡(luò)請(qǐng)求的數(shù)量有限制，因此如果您有很多請(qǐng)求排隊(duì)，如果隊(duì)列太長(zhǎng)，其中一些請(qǐng)求將被阻止。
您的頭一步應(yīng)該是消除根本不必要的請(qǐng)求。您的網(wǎng)站所需的比較短渲染時(shí)間是多少？找出答案，并僅加載必要的外部資源。
您應(yīng)該刪除任何不必要的圖像、JavaScript 文件、樣式表、字體等。如果您使用的是 WordPress 等 CMS，則應(yīng)刪除任何不必要的插件，因?yàn)樗鼈兺ǔ?huì)在每個(gè)頁(yè)面上加載其他文件。
現(xiàn)在您已經(jīng)修剪了所有可以修剪的內(nèi)容，下一步是優(yōu)化其余部分。您應(yīng)該考慮壓縮 CSS 和 JavaScript 文件。優(yōu)化的網(wǎng)站通常會(huì)在每個(gè)請(qǐng)求中加載所有必需的 CSS 和 JavasScript。
Sematext Experience 可以幫助您監(jiān)控和識(shí)別真實(shí)用戶(hù)加載緩慢的 HTTP 請(qǐng)求和資源。
2. 切換到 HTTP/2
我在上面提到了通過(guò) HTTP/1.1 發(fā)送許多請(qǐng)求的開(kāi)銷(xiāo)。HTTP 是瀏覽器用于與遠(yuǎn)程 Web 服務(wù)器通信的協(xié)議。您網(wǎng)站的 HTML 以及所有其他資源（例如圖像、樣式表和 JavaScript 文件）都使用此協(xié)議進(jìn)行傳輸。
解決這個(gè)問(wèn)題的一種方法是減少請(qǐng)求數(shù)量。無(wú)論如何，這都是一個(gè)很好的方法。渲染網(wǎng)站所需的資源越少，頁(yè)面加載時(shí)間就越快，但還有另一種方法可以避免這種開(kāi)銷(xiāo)。
您可以將您的網(wǎng)站切換到 HTTP/2。有關(guān)如何執(zhí)行此作的詳細(xì)信息將取決于您使用的托管服務(wù)提供商。
與 HTTP/2.1 相比，HTTP/1 具有多項(xiàng)優(yōu)勢(shì)。其中包括通過(guò)同一連接同時(shí)發(fā)送多個(gè)文件的能力。這避免了多個(gè)請(qǐng)求的開(kāi)銷(xiāo)。
3. 優(yōu)化圖像尺寸
許多網(wǎng)站大量使用圖形。如果您的圖像沒(méi)有壓縮，或者您使用的分辨率太高，它會(huì)降低您網(wǎng)站的性能。
例如，網(wǎng)站有時(shí)會(huì)使用 2 倍甚至 3 倍分辨率的圖像，以便它們?cè)谝暰W(wǎng)膜屏幕等高密度顯示器上顯示良好。但是，如果您的用戶(hù)不使用 HiDP 顯示器，那么您只會(huì)浪費(fèi)帶寬并增加訪問(wèn)者的加載時(shí)間，尤其是當(dāng)他們使用較慢的移動(dòng)數(shù)據(jù)連接時(shí)。
您可以閱讀此 MDN 指南以正確使用響應(yīng)式圖像。指定多個(gè)圖像大小將允許瀏覽器根據(jù)屏幕分辨率選擇合適的圖像。
當(dāng)您確定在所有設(shè)備類(lèi)型上加載正確的分辨率時(shí)，就該優(yōu)化圖像的大小了。Shopify 有一個(gè)關(guān)于如何做到這一點(diǎn)的很好的指南。
確保您也使用正確的文件類(lèi)型！對(duì)具有多種顏色的圖像（例如照片）使用 JPEG，對(duì)更簡(jiǎn)單的圖形使用 PNG。
4. 使用內(nèi)容分發(fā)網(wǎng)絡(luò) （CDN）
提供靜態(tài)文件可能會(huì)變得棘手。由于這不是 99% 網(wǎng)站的主要業(yè)務(wù)，因此將這部分基礎(chǔ)設(shè)施外包給其他人是明智之舉。幸運(yùn)的是，有一些專(zhuān)門(mén)為此設(shè)計(jì)的服務(wù)：內(nèi)容分發(fā)網(wǎng)絡(luò)或 CDN。
CDN 將優(yōu)化向訪問(wèn)者交付靜態(tài)文件（例如 CSS、圖像、字體和 JavaScript）。設(shè)置它們通常非常簡(jiǎn)單。
CDN 使用地理上分布的服務(wù)器。這意味著離訪問(wèn)者比較近的服務(wù)器將提供文件。因此，無(wú)論用戶(hù)在哪里連接，例如圖像的加載時(shí)間都將相同。通常，從您自己的服務(wù)器提供靜態(tài)文件時(shí)，當(dāng)用戶(hù)物理上遠(yuǎn)離服務(wù)器時(shí)，加載時(shí)間會(huì)增加。
您可以使用 Sematext Experience 來(lái)監(jiān)控 CDN 上托管的文件的性能，以便您可以實(shí)際衡量外包這部分基礎(chǔ)設(shè)施是否有意義。當(dāng)我們一次開(kāi)始使用 CDN 為 Sematext Cloud 提供資產(chǎn)時(shí)，我們實(shí)際上使用了 Sematext Experience，這表明我們確實(shí)更快地為用戶(hù)提供內(nèi)容。
5. 編寫(xiě)移動(dòng)優(yōu)先代碼
移動(dòng)設(shè)備正在吞噬世界。至少我被告知。您應(yīng)該檢查您的用戶(hù)正在使用 RUM 解決方案（例如 Sematext Experience）甚至您選擇的網(wǎng)站分析工具（例如 Google Analytics），以防萬(wàn)一。
通常，開(kāi)發(fā)人員在自己的桌面設(shè)備上編寫(xiě)和測(cè)試網(wǎng)站，然后才針對(duì)移動(dòng)設(shè)備優(yōu)化網(wǎng)站。這通常是一個(gè)痛苦的過(guò)程，具體取決于編寫(xiě)網(wǎng)站時(shí)所做的選擇。
但是，如果在測(cè)試網(wǎng)站時(shí)我們使用移動(dòng)設(shè)備（或模擬器）呢？這樣我們就會(huì)首先為移動(dòng)設(shè)備編寫(xiě)。默認(rèn)情況下，該體驗(yàn)將針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化。
然后為桌面設(shè)備調(diào)整網(wǎng)站將是一個(gè)更簡(jiǎn)單的過(guò)程。我們可以逐步增強(qiáng)具有更大功率和屏幕空間的設(shè)備的體驗(yàn)。請(qǐng)記住還要限制網(wǎng)絡(luò)和 CPU，以更好地模擬移動(dòng)用戶(hù)的體驗(yàn)。
6. 更小化頭一個(gè)字節(jié)的時(shí)間
頭一個(gè)字節(jié)的時(shí)間 （TTFB） 是瀏覽器從服務(wù)器接收頭一個(gè)字節(jié)數(shù)據(jù)所需的時(shí)間。因此，這是一個(gè)服務(wù)器端問(wèn)題，但它對(duì)您網(wǎng)站的整體性能起著重要作用，因此您應(yīng)該花一些時(shí)間來(lái)改進(jìn)它。
在 TTFB 方面，您可以控制的主要因素是服務(wù)器處理時(shí)間。因此，您可以嘗試 Google 推薦的一些技巧來(lái)改進(jìn) TTFB：
優(yōu)化服務(wù)器的應(yīng)用程序邏輯以更快地準(zhǔn)備頁(yè)面。如果您使用服務(wù)器框架，則該框架可能會(huì)提供有關(guān)如何執(zhí)行此作的建議。
優(yōu)化服務(wù)器查詢(xún)數(shù)據(jù)庫(kù)的方式，或遷移到更快的數(shù)據(jù)庫(kù)系統(tǒng)。
升級(jí)您的服務(wù)器硬件以擁有更多內(nèi)存或 CPU
低于 200 毫秒的 TTFB 被認(rèn)為是很好的。200 毫秒到 500 毫秒的范圍被認(rèn)為是正常且正常的。需要調(diào)查持續(xù)高于 600 毫秒的 TTFB。Sematext Experience 可以幫助您實(shí)現(xiàn)這一目標(biāo)，同時(shí)監(jiān)控其他 Web Vitals 指標(biāo)。
7. 選擇合適的托管服務(wù)計(jì)劃
這與上一點(diǎn)關(guān)于更小化頭一個(gè)字節(jié)的時(shí)間有關(guān)。如果您使用的是共享網(wǎng)絡(luò)托管服務(wù)提供商，那么整體性能很可能會(huì)低于標(biāo)準(zhǔn)。您應(yīng)該考慮升級(jí)托管服務(wù)計(jì)劃，或者如果您使用的是 WordPress，請(qǐng)考慮使用以穩(wěn)定和高性能托管而聞名的托管服務(wù)。
您有三個(gè)主要托管選項(xiàng)（加上一個(gè)獎(jiǎng)勵(lì)選項(xiàng)）：
共享 – 傳統(tǒng)上，便宜的托管選項(xiàng)是一種與其他客戶(hù)共享服務(wù)器資源的方式。
VPS – 虛擬專(zhuān)用服務(wù)器比共享主機(jī)快得多，但它不是只使用一臺(tái)機(jī)器，而是使用多臺(tái)機(jī)器。
專(zhuān)用 – 專(zhuān)用服務(wù)器顯然是三者中昂貴的，有了這個(gè)，您基本上可以租用一整臺(tái)機(jī)器，通?？梢愿鶕?jù)您的瘋狂的愿望進(jìn)行配置。
無(wú)服務(wù)器 – 最近，無(wú)服務(wù)器在服務(wù)器空間中站穩(wěn)了腳跟，因?yàn)樗詷O低的成本提供了無(wú)與倫比的可擴(kuò)展性。
當(dāng)然，與往常一樣，您應(yīng)該在進(jìn)行轉(zhuǎn)換之前先衡量您的表現(xiàn)。
8. 實(shí)現(xiàn) Gzip 壓縮
您應(yīng)該在 HTTP 服務(wù)器上啟用 gzip 壓縮。Gzip 壓縮可更大限度地減少某些文件類(lèi)型的 HTTP 響應(yīng)大小。它通常僅用于文本響應(yīng)。這應(yīng)該會(huì)減少加載時(shí)間并節(jié)省帶寬。
9. 縮小和組合 CSS、JavaScript 和 HTML 文件
我已經(jīng)提到過(guò)，您應(yīng)該嘗試在每個(gè)請(qǐng)求中加載 JS 和 CSS。這是通過(guò)將單獨(dú)的 JS 和 CSS 文件縮小并組合成單個(gè)捆綁包來(lái)實(shí)現(xiàn)的。
瀏覽器對(duì)并行網(wǎng)絡(luò)請(qǐng)求有限制，因此如果您的網(wǎng)站總共需要 3 個(gè)請(qǐng)求才能加載，它很可能比必須加載 30 個(gè)不同資源更快。開(kāi)發(fā)人員可以使用 webpack 等工具，在開(kāi)發(fā)網(wǎng)站時(shí)方便地使用多個(gè)文件，并在部署到生產(chǎn)環(huán)境時(shí)獲得單個(gè)捆綁包的性能優(yōu)勢(shì)。但一般來(lái)說(shuō)，合并文件的意思是，所有文件都按原樣復(fù)制到一個(gè)文件中。
縮小是通過(guò)刪除或縮短源代碼中的符號(hào)來(lái)優(yōu)化 JavaScript 和 CSS 文件大小的過(guò)程。輸出在功能上是等效的，但不完全是人類(lèi)可讀的。不過(guò)，瀏覽器讀取它沒(méi)有問(wèn)題，而且較小的文件大小加載速度會(huì)更快。
大多數(shù)優(yōu)化的網(wǎng)站最終所做的是首先縮小 JavaScript 和 CSS 文件，然后將它們組合成單個(gè)捆綁包。
10. 異步加載 JavaScript
當(dāng)瀏覽器達(dá)到 <腳本>標(biāo)記，它將等待文件加載后再繼續(xù)渲染網(wǎng)站。這稱(chēng)為同步加載。
如果您在 <腳本>標(biāo)記，則瀏覽器將異步加載腳本。加載腳本時(shí)，它將繼續(xù)解析頁(yè)面。
我們還建議將腳本標(biāo)簽移動(dòng)到頁(yè)面底部，靠近結(jié)束標(biāo)記。這樣，不支持 async 屬性的舊瀏覽器將在解析頁(yè)面的其余部分后加載腳本。
11. 考慮使用預(yù)取、預(yù)連接和預(yù)渲染技術(shù)
您可以使用不同的預(yù)取和預(yù)加載技術(shù)來(lái)提示瀏覽器，在瀏覽器實(shí)際需要這些資源之前，需要哪些資源來(lái)呈現(xiàn)頁(yè)面。
請(qǐng)考慮以下性能優(yōu)化技術(shù)：
DNS 預(yù)取。您可以告訴瀏覽器，某些域名需要解析為 IP 地址，然后瀏覽器才能實(shí)際看到來(lái)自該域名的資源。這似乎是一個(gè)小的優(yōu)化，但當(dāng)您用盡其他技術(shù)時(shí)，它可能會(huì)有所不同。
<link rel="dns-prefetch" href="//sematext.com">
TCP 預(yù)連接。與 DNS 預(yù)取方法非常相似，預(yù)連接將解析 DNS，但它也會(huì)進(jìn)行 TCP 握手，以及可選的 TLS 握手。
<link rel="preconnect" href="https://www.sematext.com">
預(yù)取。如果我們確定將來(lái)需要特定資源，那么我們可以要求瀏覽器請(qǐng)求該項(xiàng)目并將其存儲(chǔ)在緩存中以供以后參考。
<link rel="prefetch" href="logo.png">
預(yù)渲染。當(dāng)您真正知道用戶(hù)將采取的下一步是轉(zhuǎn)到某個(gè)頁(yè)面時(shí)，這應(yīng)該保留。您可以通過(guò)指定如下URL來(lái)指示瀏覽器預(yù)渲染整個(gè)頁(yè)面，并下載所有必需的資產(chǎn)：
<link rel="prerender" href="https://www.sematext.com/next-page">
12.減少插件數(shù)量
插件是可重用的功能，通常用于 WordPress 或其他預(yù)建網(wǎng)站平臺(tái)等內(nèi)容管理系統(tǒng)。插件為網(wǎng)站所有者提供了額外的功能，例如分析或在博客文章上發(fā)表評(píng)論的能力。
但插件是有代價(jià)的。每個(gè)插件幾乎肯定會(huì)加載額外的 CSS 和 JavaScript 文件。一些插件也會(huì)增加 TTFB 時(shí)間，因?yàn)樗鼈冃枰诜?wù)器上對(duì)每個(gè)頁(yè)面請(qǐng)求進(jìn)行額外處理。
因此，我建議您瀏覽您的插件列表并確保您確實(shí)需要每個(gè)插件。您應(yīng)該刪除任何對(duì)您的網(wǎng)站不重要的插件。
13.使用網(wǎng)站緩存
我已經(jīng)簡(jiǎn)要提到了緩存，但我想解釋一下它是什么。緩存是將文件版本保存在可以更快訪問(wèn)的臨時(shí)存儲(chǔ)位置（緩存）中的過(guò)程。啟用瀏覽器緩存有很多優(yōu)點(diǎn)，因?yàn)樗梢詼p少帶寬消耗、增加加載時(shí)間、減少延遲和服務(wù)器的工作負(fù)載。主要缺點(diǎn)是基本上在任何給定時(shí)間您的網(wǎng)站都會(huì)至少有兩個(gè)版本。如果您正在運(yùn)行依賴(lài)于準(zhǔn)確數(shù)據(jù)的實(shí)時(shí)服務(wù)，這可能會(huì)導(dǎo)致問(wèn)題，但即使這樣也可以在某種程度上解決，從而在導(dǎo)入新數(shù)據(jù)時(shí)強(qiáng)制清除緩存的子部分。
14. 采用基于云的網(wǎng)站監(jiān)控
提高網(wǎng)站性能的頭一步是衡量它。衡量性能需要特定的工具，如果您希望在更改正在提高性能或性能隨時(shí)間下降時(shí)收到警報(bào)，則必須持續(xù)監(jiān)控。
網(wǎng)站監(jiān)控有兩種方法：綜合監(jiān)控和真實(shí)用戶(hù)監(jiān)控。如果您不確定它們的工作原理以及哪一種適合您的用例，請(qǐng)查看我們關(guān)于真實(shí)用戶(hù)監(jiān)控與綜合監(jiān)控的博客文章，其中我們比較了兩種類(lèi)型的監(jiān)控。
無(wú)論哪種情況，我們都建議使用基于云的網(wǎng)站監(jiān)控工具，這樣您就可以專(zhuān)注于發(fā)展業(yè)務(wù)，而不是構(gòu)建或管理自己的工具。Sematext Cloud 提供綜合監(jiān)控和真實(shí)用戶(hù)監(jiān)控的解決方案。免費(fèi)試用 14 天！
總結(jié)：
提高網(wǎng)站性能可能具有挑戰(zhàn)性，尤其是在設(shè)備、連接、瀏覽器和作系統(tǒng)方面存在巨大差異的情況下，但如果您的企業(yè)依賴(lài)您的網(wǎng)站作為接觸客戶(hù)的主要渠道之一，這將對(duì)您的業(yè)務(wù)產(chǎn)生重大的積極影響。
另外，請(qǐng)記住，這是一個(gè)沒(méi)有明確定義的起點(diǎn)和終點(diǎn)的過(guò)程。您不必立即實(shí)施所有建議的更改?；ㄒ恍r(shí)間查看監(jiān)控工具的結(jié)果，在網(wǎng)站上進(jìn)行更改，然后比較更改前后的性能。
如果您正在市場(chǎng)上尋找一種工具來(lái)幫助您提高網(wǎng)站性能，請(qǐng)務(wù)必查看 Sematext Cloud 及其網(wǎng)站監(jiān)控工具。Sematext 確保對(duì)應(yīng)用程序所有組件的端到端可見(jiàn)性，以幫助您保持網(wǎng)站的性能和可用性。有 14 天的免費(fèi)試用期供您試用其所有功能。試一試！
