1. 盡量減少需要傳輸?shù)臄?shù)據(jù)量

首先，刪除所有未使用的部分，例如 中不可訪問(wèn)的函數(shù)、選擇器從不匹配任何元素的樣式，以及 CSS 中永遠(yuǎn)隱藏的 HTML 標(biāo)簽。其次，刪除所有重復(fù)項(xiàng)。然后，我建議設(shè)置一個(gè)自動(dòng)最小化過(guò)程。例如網(wǎng)站模板，它應(yīng)該刪除來(lái)自后端服務(wù)的所有注釋（但不是源代碼）以及每個(gè)不包含其他信息的字符（例如 JS 中的空格字符）。完成后，剩下的就可以是文本了。這意味著我們可以安全地應(yīng)用壓縮算法，例如 GZIP（大多數(shù)瀏覽器都能理解）。最后，還有緩存。這在瀏覽器第一次呈現(xiàn)頁(yè)面時(shí)不會(huì)有太大幫助，但在后續(xù)訪問(wèn)中會(huì)節(jié)省很多。但關(guān)鍵是要記住兩件事：

如果您使用 CDN，請(qǐng)確保支持緩存并正確設(shè)置。

您可能希望從自己的角度更早地更新資源，而不是等待資源的到期日期。將文件的“指紋”嵌入 URL 中以使本地緩存無(wú)效。

當(dāng)然，應(yīng)該為每種資源定義緩存策略。有些資源可能很少更改，或者根本不更改。有些資源更改得更快。有些資源包含敏感信息，有些資源可能被視為公開(kāi)信息。使用“”指令可防止 CDN 緩存私人數(shù)據(jù)。Web 圖像也可以進(jìn)行優(yōu)化，盡管圖像請(qǐng)求不會(huì)阻止解析或渲染。

2.減少關(guān)鍵資源的總數(shù)

“關(guān)鍵”僅指頁(yè)面正確呈現(xiàn)所需的資源。因此，我們可以跳過(guò)所有不直接參與此過(guò)程的樣式以及所有腳本。

樣式表

為了告訴瀏覽器不需要特定的 CSS 文件seo優(yōu)化，我們應(yīng)該為引用樣式表的所有鏈接設(shè)置 屬性。使用這種方法，瀏覽器將僅根據(jù)需要處理與當(dāng)前媒體（設(shè)備類型、屏幕尺寸）匹配的資源，同時(shí)降低所有其他樣式表的優(yōu)先級(jí)（它們將被處理，但不會(huì)成為關(guān)鍵渲染路徑的一部分）。例如，如果您向引用打印頁(yè)面樣式的 標(biāo)簽添加 = "" 屬性，則當(dāng)介質(zhì)未打印時(shí)（即，當(dāng)頁(yè)面顯示在瀏覽器中時(shí)），這些樣式不會(huì)干擾關(guān)鍵渲染路徑。

為了進(jìn)一步改善流程網(wǎng)站優(yōu)化，一些樣式也可以內(nèi)聯(lián)。這至少為我們節(jié)省了一次往返服務(wù)器的次數(shù)，否則就需要往返服務(wù)器來(lái)獲取樣式表。

腳本

如上所述，腳本會(huì)阻塞解析器，因?yàn)樗鼈兛梢愿?DOM 和。因此，不會(huì)更改它們的腳本不應(yīng)被解析為塊，從而節(jié)省我們的時(shí)間。為了實(shí)現(xiàn)這一點(diǎn)，所有腳本標(biāo)簽都必須標(biāo)有或?qū)傩浴?/p>

標(biāo)記為“”的腳本不會(huì)阻止 DOM 構(gòu)建或“”，因?yàn)樗鼈兛梢栽跇?gòu)建之前執(zhí)行。但請(qǐng)記住，內(nèi)聯(lián)腳本無(wú)論如何都會(huì)阻塞，除非您將它們放在 CSS 之上。相反，標(biāo)記為“”的腳本在頁(yè)面加載結(jié)束時(shí)進(jìn)行評(píng)估。因此，它們不應(yīng)該影響文檔（否則它們會(huì)觸發(fā)重新渲染）。

換句話說(shuō)，使用時(shí)，腳本直到頁(yè)面加載事件觸發(fā)才會(huì)執(zhí)行，同時(shí)允許腳本在解析文檔時(shí)在后臺(tái)運(yùn)行。

3.縮短關(guān)鍵渲染路徑長(zhǎng)度

最后，應(yīng)盡量減少CRP長(zhǎng)度。在一定程度上，上述方法可以實(shí)現(xiàn)這一點(diǎn)。

媒體查詢作為樣式標(biāo)簽的屬性將減少必須下載的資源總數(shù)。腳本標(biāo)簽屬性和將防止相應(yīng)腳本阻塞解析。使用 GZIP 最小化、壓縮和存檔資源將減少傳輸數(shù)據(jù)的大?。◤亩鴾p少數(shù)據(jù)傳輸時(shí)間）。內(nèi)聯(lián)某些樣式和腳本可以減少瀏覽器和服務(wù)器之間的往返次數(shù)。

我們還沒(méi)有討論過(guò)在文件之間重新排列代碼的選項(xiàng)。根據(jù)最新的最佳性能理念，網(wǎng)站應(yīng)該最快完成的第一件事是顯示 ATF 內(nèi)容，ATF 代表首屏以上，即無(wú)需滾動(dòng)即可立即看到的區(qū)域。因此，最好重新排列與渲染相關(guān)的所有內(nèi)容，以便首先加載所需的樣式和腳本，然后停止其他所有內(nèi)容 — 既不解析也不渲染，并且始終記住在進(jìn)行更改之前和之后進(jìn)行測(cè)量。

簡(jiǎn)而言之網(wǎng)站優(yōu)化，網(wǎng)站性能優(yōu)化包括網(wǎng)站響應(yīng)的各個(gè)方面，例如緩存、設(shè)置 CDN、重構(gòu)、資源優(yōu)化等，但所有這些都可以逐步完成。作為 Web 開(kāi)發(fā)人員，您應(yīng)該將本文作為參考，并始終記得在實(shí)驗(yàn)前后測(cè)量性能。