多年來螟够，網(wǎng)絡(luò)社區(qū)積累了豐富的網(wǎng)絡(luò)性能優(yōu)化知識张吉。雖然任何一項優(yōu)化都可以提升許多網(wǎng)站的性能，但如果同時進(jìn)行所有優(yōu)化，可能會讓人感到不知所措鲫忍。實際上，只有部分優(yōu)化措施適用于任何給定網(wǎng)站溜族。

除非您是網(wǎng)站性能方面的專業(yè)人士浓体，否則可能很難確定哪些優(yōu)化措施對您的網(wǎng)站影響最大。您可能沒有時間全部完成，因此請務(wù)必問自己：您可以選擇哪些最具影響力的優(yōu)化措施來提升用戶體驗助析？

關(guān)于性能優(yōu)化的真相是：您不能僅根據(jù)技術(shù)優(yōu)勢來評判優(yōu)化效果裁替。您還需要考慮人力和組織因素，這些因素會影響您實現(xiàn)任何給定優(yōu)化的可能性貌笨。從理論上講弱判，某些性能改進(jìn)可能具有巨大影響，但在現(xiàn)實中锥惋，很少有開發(fā)者有時間或資源來實現(xiàn)這些改進(jìn)昌腰。另一方面，可能有幾乎所有人都已在遵循的效果極佳的最佳實踐膀跌。本指南介紹了以下 Web 性能優(yōu)化措施：

• 具有最大的現(xiàn)實影響
• 與大多數(shù)網(wǎng)站相關(guān)且適用
• 對大多數(shù)開發(fā)者而言是否切合實際

總的來說遭商，這些是最切實有效的方法，可幫助您改進(jìn) Core Web Vitals 指標(biāo)捅伤。如果您剛開始接觸網(wǎng)頁性能劫流，或者您仍在確定什么能帶來最大的投資回報率，那么建議您從該指南開始丛忆。

Interaction to Next Paint (INP)

作為最新的 Core Web Vitals 指標(biāo)祠汇，Interaction to Next Paint (INP) 有許多值得改進(jìn)的地方。不過熄诡，由于與其已棄用的前身相比可很，達(dá)到“良好”體驗閾值的網(wǎng)站更少，因此您可能是眾多首次學(xué)習(xí)如何優(yōu)化互動響應(yīng)能力的開發(fā)者之一凰浮。不妨先了解這些必備技巧我抠，以便以最有效的方式提升 INP。

1.<wbr style="box-sizing: inherit;"> 經(jīng)常使用收益率袜茧，將耗時較長的任務(wù)分離開來

任務(wù)是瀏覽器執(zhí)行的任何離散工作菜拓，包括渲染、布局笛厦、解析纳鼎、編譯或執(zhí)行腳本。當(dāng)一個任務(wù)的時長超過 50 毫秒時递递，該任務(wù)就變成了長時間運(yùn)行的任務(wù)喷橙。耗時較長的任務(wù)會帶來問題，因為它們可能阻止主線程快速響應(yīng)用戶互動登舞。

雖然您應(yīng)始終努力盡量減少在 JavaScript 中完成的工作贰逾，但您可以通過分解長時間運(yùn)行的任務(wù)來幫助主線程執(zhí)行任務(wù)。為此菠秒，您可以經(jīng)常讓出主線程疙剑，以便更快地進(jìn)行渲染更新和其他用戶互動氯迂。

瀏覽器支持

• [圖片上傳中...(image-faffde-1731334150102-15)]

  129

• [圖片上傳中...(image-2b00cc-1731334150102-14)]

  129

• [圖片上傳中...(image-ab7711-1731334150102-13)]

  x

• [圖片上傳中...(image-910981-1731334150102-12)]

  x

來源

借助 Scheduler API，您可以使用優(yōu)先級系統(tǒng)將工作加入隊列言缤。具體而言嚼蚀，scheduler.yield() API 會拆分長任務(wù)，同時確保能夠在不放棄任務(wù)隊列中的位置的情況下處理互動管挟。

通過分解冗長的任務(wù)轿曙，瀏覽器有更多機(jī)會來負(fù)責(zé)阻礙用戶的關(guān)鍵工作。

了解詳情：優(yōu)化耗時較長的任務(wù)僻孝。

2.<wbr style="box-sizing: inherit;"> 避免使用不必要的 JavaScript

網(wǎng)站所發(fā)送的 JavaScript 比以往任何時候都多导帝，而且這種趨勢似乎不會改變。如果您提交的 JavaScript 過多穿铆，就會造成任務(wù)爭奪主線程的注意力您单。這可能會影響網(wǎng)站的響應(yīng)速度，尤其是在關(guān)鍵的啟動期間荞雏。

不過虐秦，這并不是一個無法解決的問題，您可以采取以下措施：

• 使用基準(zhǔn)廣泛提供的 Web 平臺功能凤优，而不是冗余的基于 JavaScript 的實現(xiàn)悦陋。
• 使用 Chrome 開發(fā)者工具中的覆蓋率工具查找腳本中未使用的代碼。通過縮減啟動期間所需資源的大小别洪，您可以確保網(wǎng)頁花在解析和編譯代碼上的時間更少叨恨，從而提供更流暢的初始用戶體驗。
• 使用代碼分塊為初始渲染不需要但日后仍會使用的代碼創(chuàng)建單獨(dú)的軟件包挖垛。
• 如果您使用的是跟蹤代碼管理器，請定期優(yōu)化代碼秉颗。您可以移除包含未使用的代碼的舊版代碼痢毒，以縮減跟蹤代碼管理器的 JavaScript 占用空間。

了解詳情：移除未使用的代碼蚕甥。

3.<wbr style="box-sizing: inherit;"> 避免大規(guī)模渲染更新

JavaScript 執(zhí)行只是影響網(wǎng)站響應(yīng)速度的眾多因素之一哪替。呈現(xiàn)本身就是一項耗費(fèi)巨大的工作，在進(jìn)行大型呈現(xiàn)更新時菇怀，您的網(wǎng)站對用戶互動的響應(yīng)速度可能會更慢凭舶。

優(yōu)化渲染工作并非一個簡單的過程，具體取決于您要實現(xiàn)的目標(biāo)爱沟。即便如此帅霜，您也可以采取以下措施來確保渲染任務(wù)不會變成長任務(wù)：

• 重新整理 JavaScript 代碼中的 DOM 讀寫操作，以避免強(qiáng)制布局和布局抖動呼伸。
• 使 DOM 大小保持小巧身冀。DOM 大小與布局工作強(qiáng)度相關(guān)。當(dāng)渲染程序必須更新非常大的 DOM 的布局時，重新計算其布局所需的工作量可能會大幅增加搂根。
• 使用 CSS 組件延遲渲染屏幕外的 DOM 內(nèi)容珍促。這并不總是簡單明了，但通過隔離包含復(fù)雜布局的區(qū)域剩愧，您可以避免不必要的布局和渲染工作猪叙。

了解詳情：避免大型、復(fù)雜的布局和布局抖動仁卷。

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) 是開發(fā)者最難把控的核心 Web 指標(biāo)：Chrome 用戶體驗報告中40%的網(wǎng)站未達(dá)到建議的 LCP 閾值沐悦，無法提供良好的用戶體驗。Chrome 團(tuán)隊建議使用以下技術(shù)來最有效地縮短 LCP五督。

1.<wbr style="box-sizing: inherit;"> 確保 LCP 資源可從 HTML 源中發(fā)現(xiàn)并獲得優(yōu)先級

Chrome 團(tuán)隊注意到有關(guān)網(wǎng)頁上的 LCP 的以下事項：

• 根據(jù) HTTP Archive 的 2022 年網(wǎng)絡(luò)年鑒藏否，72% 的移動網(wǎng)頁將圖片作為 LCP 元素。
• 通過對 Chrome 中的真實用戶數(shù)據(jù)進(jìn)行的分析充包，我們發(fā)現(xiàn)副签，大多數(shù) LCP 表現(xiàn)不佳的來源在下載 LCP 映像上所花的 LCP 映像的時間只有不到 10%。
• 在 LCP 較差的網(wǎng)頁中基矮，75 百分位數(shù)的 LCP 圖片在客戶端上的加載延遲時間為 1,290 毫秒淆储，這超過了快速體驗預(yù)算的一半。
• 在 LCP 元素為圖片的網(wǎng)頁中家浇，39% 的圖片的來源網(wǎng)址在初始 HTML 響應(yīng)中不可檢測（例如 <img src="..."> 或 <link rel="preload" href="...">）本砰，這會導(dǎo)致瀏覽器的預(yù)加載掃描器無法盡快發(fā)現(xiàn)這些圖片。
• 根據(jù)《Web Almanac》的資料钢悲，只有 0.03% 的符合條件的網(wǎng)頁利用 fetchpriority HTML 屬性為資源提供了更高的優(yōu)先級点额，其中包括那些可以事半功倍地改善網(wǎng)頁 LCP 的資源。

這些統(tǒng)計數(shù)據(jù)表明莺琳，開發(fā)者有很大的機(jī)會來縮短 LCP 映像的資源加載延遲和資源加載時長还棱。

瀏覽器支持

• [圖片上傳中...(image-823430-1731334150102-11)]

  102

• [圖片上傳中...(image-d0b927-1731334150102-10)]

  102

• [圖片上傳中...(image-7994c7-1731334150102-9)]

  132

• [圖片上傳中...(image-3bca6f-1731334150102-8)]

  17.2

來源

如果資源加載延遲是問題所在，請務(wù)必注意惭等，如果網(wǎng)頁需要等待 CSS 或 JavaScript 完全加載后才能開始加載圖片珍手，那么可能已經(jīng)太晚，無法實現(xiàn)良好的 LCP辞做。此外琳要，您還可以使用 fetchpriority HTML 屬性重新調(diào)整 LCP 圖片的優(yōu)先級，以便其獲得更多帶寬秤茅，從而加快加載速度稚补，縮短資源加載時長。

如果您的 LCP 元素是圖片嫂伞，則應(yīng)在 HTML 響應(yīng)中發(fā)現(xiàn)圖片的網(wǎng)址孔厉，以縮短其資源加載延遲時間拯钻。以下是一些有助于實現(xiàn)這一目標(biāo)的提示：

• 使用帶有 src 或 srcset 屬性的 <img> 元素加載圖片。請勿使用需要 JavaScript 才能呈現(xiàn)的非標(biāo)準(zhǔn)屬性（例如 data-src）撰豺，因為這類屬性的速度始終較慢粪般。9% 的網(wǎng)頁會將 LCP 圖片隱藏在 data-src 后面。
• 首選服務(wù)器端呈現(xiàn) (SSR) 而非客戶端呈現(xiàn) (CSR)污桦，因為 SSR 意味著 HTML 源代碼中存在整頁標(biāo)記（包括圖片）亩歹。CSR 解決方案要求在發(fā)現(xiàn)映像之前運(yùn)行 JavaScript。
• 如果需要從外部 CSS 或 JS 文件引用圖片凡橱，您仍然可以使用 <link rel="preload"> 標(biāo)記將其添加到 HTML 源中小作。請注意，內(nèi)嵌樣式引用的圖片無法被瀏覽器的預(yù)加載掃描器發(fā)現(xiàn)稼钩，因此即使在 HTML 源代碼中找到這些圖片顾稀，在加載其他資源時，系統(tǒng)可能仍會阻止發(fā)現(xiàn)它們坝撑，因此在這種情況下静秆，預(yù)加載會很有幫助。

此外巡李，您可以確保盡早以高優(yōu)先級加載 LCP 資源抚笔，從而縮短資源的加載時長：

• 將 fetchpriority="high" 屬性添加到 LCP 圖片的 <img> 或 <link rel="preload"> 標(biāo)記中。這會提高圖片資源的優(yōu)先級侨拦，以便其更早開始加載殊橙。
• 從 LCP 圖片的 <img> 標(biāo)記中移除 loading="lazy" 屬性。這樣可以避免因確認(rèn)圖片顯示在視口中或附近而引起的加載延遲狱从。
• 盡可能推遲非關(guān)鍵資源膨蛮。將這些資源移到文檔末尾、延遲加載圖片或 iframe矫夯，或者使用 JavaScript 異步加載鸽疾，都有助于讓更重要的資源（例如 LCP 圖片）更快加載。

閱讀以下內(nèi)容了解詳情：消除資源加載延遲和關(guān)于如何優(yōu)化 LCP 的常見誤解训貌。

2.<wbr style="box-sizing: inherit;"> 力求實現(xiàn)即時導(dǎo)航

理想的用戶體驗是，用戶無需等待網(wǎng)頁加載冒窍。資源可檢測性和優(yōu)先級等 LCP 優(yōu)化措施可以有效縮短用戶等待 LCP 元素加載和呈現(xiàn)的時間递沪，但這些字節(jié)通過網(wǎng)絡(luò)加載并在網(wǎng)頁上呈現(xiàn)的速度存在物理限制。在達(dá)到該上限之前综液，您需要付出極大的努力才能再縮短幾毫秒款慨。因此，為了實現(xiàn)即時導(dǎo)航谬莹，我們需要采用完全不同的方法檩奠。

即時導(dǎo)航會嘗試在用戶開始導(dǎo)航到相應(yīng)網(wǎng)頁之前加載和呈現(xiàn)該網(wǎng)頁桩了。這樣一來，預(yù)渲染的網(wǎng)頁便可立即顯示埠戳，并且 LCP 幾乎為零井誉。恢復(fù)和推測是實現(xiàn)這一目的的兩種方法整胃。當(dāng)用戶返回或前進(jìn)到之前訪問過的網(wǎng)頁時颗圣，系統(tǒng)可以從內(nèi)存緩存中快速恢復(fù)該網(wǎng)頁，使其顯示的樣子與用戶離開時完全一樣屁使≡谄瘢或者，Web 應(yīng)用也可以嘗試預(yù)測用戶接下來會去哪里蛮寂，如果預(yù)測正確蔽午，那么當(dāng)用戶導(dǎo)航到該網(wǎng)頁時，下一個網(wǎng)頁就會已加載并呈現(xiàn)酬蹋。

往返緩存 (bfcache) 可用于恢復(fù)之前訪問過的網(wǎng)頁及老。要使用 bfcache，您必須確保網(wǎng)頁符合 bfcache 資格條件除嘹。網(wǎng)頁不符合 bfcache 條件的常見原因是写半，它們使用 no-store 緩存指令進(jìn)行傳送或具有 unload 事件監(jiān)聽器。

恢復(fù)完全呈現(xiàn)的網(wǎng)頁不僅可以提升加載性能尉咕，還可以提高布局穩(wěn)定性叠蝇。如需詳細(xì)了解 bfcache 以及它在提高 CLS 方面的有效性，請參閱確保網(wǎng)頁符合 bfcache 使用條件部分年缎。

瀏覽器支持

• [圖片上傳中...(image-ebf97b-1731334150102-7)]

  109

• [圖片上傳中...(image-73429c-1731334150102-6)]

  109

• [圖片上傳中...(image-2494b4-1731334150102-5)]

  x

• [圖片上傳中...(image-227c45-1731334150102-4)]

  x

預(yù)渲染用戶下次訪問的網(wǎng)頁是顯著提升 LCP 性能的另一種有效方法悔捶，可通過 Speculation Rules API 實現(xiàn)。不過单芜，要想實現(xiàn)這些優(yōu)勢蜕该，請確保預(yù)渲染正確的網(wǎng)頁。錯誤的推測會浪費(fèi)服務(wù)器和客戶端上的資源洲鸠，從而影響性能堂淡。因此，您對下一頁的預(yù)期越不確定扒腕，就越應(yīng)謹(jǐn)慎地預(yù)渲染該頁面绢淀。當(dāng)存在疑慮時，您的分析數(shù)據(jù)可讓您信心十足地預(yù)呈現(xiàn)最有可能下次訪問的網(wǎng)頁瘾腰。

了解詳情：往返緩存和在 Chrome 中預(yù)渲染網(wǎng)頁以實現(xiàn)即時網(wǎng)頁導(dǎo)航皆的。

3.<wbr style="box-sizing: inherit;"> 使用 CDN 優(yōu)化 TTFB

之前的建議側(cè)重于即時導(dǎo)航，可為用戶提供盡可能出色的體驗蹋盆，但在某些情況下费薄，bfcache 和推測性加載技術(shù)可能不適用硝全。假設(shè)有用戶訪問了指向您網(wǎng)站的跨源鏈接，最初的 HTML 文檔響應(yīng)有效地阻止了 LCP楞抡。瀏覽器在收到響應(yīng)的第一個字節(jié)之前伟众，無法開始加載任何子資源。越早完成拌倍，其他所有工作就能越早開始赂鲤。

該時間稱為第一字節(jié)時間 (TTFB)≈簦縮短 TTFB 的最佳方法是：

• 在地理位置上盡可能靠近用戶的位置發(fā)布內(nèi)容数初。
• 緩存該內(nèi)容，以便在近期再次請求該內(nèi)容時可以快速提供該內(nèi)容梗顺。

要同時實現(xiàn)這兩點泡孩，最佳方式是使用 CDN。CDN 會將您的資源分發(fā)到全球各地的邊緣服務(wù)器寺谤，從而限制這些資源通過網(wǎng)絡(luò)傳輸?shù)接脩舻木嚯x仑鸥。CDN 通常還具有精細(xì)的緩存控制功能，可根據(jù)您網(wǎng)站的需求進(jìn)行調(diào)整变屁。

CDN 還可以分發(fā)和緩存 HTML 文檔眼俊，但根據(jù)《網(wǎng)絡(luò)年鑒》的統(tǒng)計，只有 29% 的 HTML 文檔請求是通過 CDN 分發(fā)的粟关。這意味著疮胖，網(wǎng)站有很大機(jī)會進(jìn)一步節(jié)省開支。

關(guān)于配置 CDN 的一些提示包括：

• 緩存靜態(tài) HTML 文檔闷板，即使只是短時間澎灸。例如，內(nèi)容是否始終保持新鮮度很重要嗎遮晚？或者可以延遲幾分鐘嗎性昭？
• 探索是否可以將在源服務(wù)器上運(yùn)行的動態(tài)邏輯移至邊緣（這是大多數(shù)新型 CDN 的一項功能）。

每當(dāng)您可以直接從邊緣傳送內(nèi)容并避免發(fā)送到源服務(wù)器時县遣，性能就會得到提升糜颠。即使您必須一直訪問到源站，CDN 通常也會經(jīng)過優(yōu)化萧求，以便更快地完成訪問括蝠，因此無論哪種方式，您都能獲益饭聚。

閱讀以下內(nèi)容了解詳情：優(yōu)化加載第一個字節(jié)所需時間。

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) 用于衡量網(wǎng)頁的視覺穩(wěn)定性搁拙。雖然 CLS 是大多數(shù)網(wǎng)站往往都能取得良好效果的指標(biāo)秒梳，但有大約四分之一的網(wǎng)站仍未達(dá)到建議的閾值法绵，因此許多網(wǎng)站仍有很大的機(jī)會改進(jìn)用戶體驗。

1.<wbr style="box-sizing: inherit;"> 為從網(wǎng)頁加載的任何內(nèi)容設(shè)置明確的尺寸

布局偏移通常發(fā)生在其他內(nèi)容加載完畢后現(xiàn)有內(nèi)容移動時酪碘。提高 CLS 的主要方法是盡可能提前預(yù)留所需空間朋譬。

要解決因圖片大小不合適而導(dǎo)致的布局偏移，最佳方法是明確設(shè)置 width 和 height 屬性或其等效的 CSS 屬性兴垦。72% 的網(wǎng)頁至少有一張未調(diào)整大小的圖片徙赢。如果沒有明確的尺寸，這些圖片的初始高度為 0px探越，這可能會導(dǎo)致在這些圖片加載并瀏覽器發(fā)現(xiàn)其尺寸時狡赐，布局發(fā)生偏移。這對集體網(wǎng)絡(luò)來說是一個巨大的機(jī)遇钦幔，而且相較于本指南中建議的其他一些做法枕屉，抓住這個機(jī)遇所需的工作量更少。

瀏覽器支持

• [圖片上傳中...(image-1aebe1-1731334150102-3)]

  88

• [圖片上傳中...(image-ab2bd0-1731334150102-2)]

  88

• [圖片上傳中...(image-2bc04d-1731334150102-1)]

  89

• [圖片上傳中...(image-8d7ed0-1731334150101-0)]

  15

來源

圖片并非 CLS 的唯一貢獻(xiàn)者鲤氢。布局偏移可能是由通常在網(wǎng)頁初次呈現(xiàn)后加載的其他內(nèi)容（包括第三方廣告或嵌入的視頻）導(dǎo)致的搀擂。aspect-ratio 屬性可以派上用場。這是一種廣泛使用的基準(zhǔn) CSS 功能卷玉，可讓開發(fā)者為圖片和非圖片元素顯式設(shè)置寬高比哨颂。這樣，您就可以設(shè)置動態(tài) width（例如相种，根據(jù)屏幕尺寸）威恼，并讓瀏覽器自動計算合適的高度，計算方法與計算有尺寸的圖片大致相同蚂子。

不過沃测，您并非總是能夠知道動態(tài)內(nèi)容的確切尺寸。即使您不知道確切尺寸食茎，仍然可以降低布局偏移的嚴(yán)重程度蒂破。設(shè)置合理的 min-height 通常比允許瀏覽器為空元素使用默認(rèn)高度 0px 更好。使用 min-height 通常也是一個簡單的解決方法别渔，因為它仍然允許容器在需要時增長到最終內(nèi)容的高度附迷，只是將增長量減少到更易于接受的水平。

閱讀以下內(nèi)容了解詳情：優(yōu)化 Cumulative Layout Shift哎媚。

2.<wbr style="box-sizing: inherit;"> 確保網(wǎng)頁符合使用 bfcache 的條件

如本指南前面所述喇伯，往返緩存 (bfcache) 會從內(nèi)存快照中即時加載瀏覽器歷史記錄中較早或較晚的網(wǎng)頁。雖然 bfcache 是一項重要的瀏覽器級性能優(yōu)化拨与，可提升 LCP稻据，但它還能完全消除布局偏移。事實上买喧，2022 年引入 bfcache 是當(dāng)年 CLS 改善幅度最大的因素捻悯。

盡管如此匆赃，大量網(wǎng)站不符合使用 bfcache 的條件，因此錯失了這一免費(fèi)的網(wǎng)站性能提升機(jī)會今缚。除非您的網(wǎng)頁正在加載您不希望從內(nèi)存恢復(fù)的敏感信息算柳，否則請確保您的網(wǎng)頁符合使用 bfcache 的條件。

網(wǎng)站所有者應(yīng)檢查網(wǎng)頁是否符合加入 bfcache 的條件姓言，并解決所有不符合要求的原因瞬项。Chrome 在開發(fā)者工具中提供了 bfcache 測試程序，您還可以使用 Not Restored Reasons API 來檢測該字段中的不符合條件的原因何荚。

閱讀以下內(nèi)容了解詳情：往返緩存囱淋。

3.<wbr style="box-sizing: inherit;"> 避免使用會導(dǎo)致布局的 CSS 屬性的動畫和過渡

布局偏移的另一個常見原因是元素呈現(xiàn)動畫效果。例如兽泣，Cookie 橫幅或其他從頂部或底部滑入的通知橫幅通常對 CLS 有影響绎橘。如果這些橫幅會將其他內(nèi)容推開，這種情況尤其嚴(yán)重唠倦，但即使不會称鳞，為其添加動畫效果也可能會影響 CLS。

雖然 HTTP Archive 數(shù)據(jù)無法確切地將動畫與布局偏移聯(lián)系起來稠鼻，但數(shù)據(jù)確實表明冈止，與整體網(wǎng)頁相比，如果網(wǎng)頁為任何可能會影響布局的 CSS 屬性添加動畫候齿，CLS 達(dá)到“良好”水平的可能性會降低 15%熙暴。某些媒體資源的 CLS 比其他媒體資源要高。例如慌盯，在整體頁面被評為 CLS 較差的網(wǎng)頁中周霉，采用 margin 或 border 寬度動畫的網(wǎng)頁被評為 CLS 較差的網(wǎng)頁占比幾乎是前者的兩倍。

這或許不足為奇亚皂，因為每當(dāng)您為任何會布局調(diào)整的 CSS 屬性進(jìn)行轉(zhuǎn)換或添加動畫效果時俱箱，都會導(dǎo)致布局偏移。如果這些布局偏移不在用戶互動后的 500 毫秒內(nèi)發(fā)生灭必，則會影響 CLS狞谱。

有些開發(fā)者可能會感到意外，即便元素不在正常文檔流中禁漓，也是如此跟衅。例如，對 top 或 left 進(jìn)行動畫處理的絕對定位元素會導(dǎo)致布局偏移播歼，即使它們沒有推送其他內(nèi)容也是如此伶跷。不過，如果您不是為 top 或 left 添加動畫效果，而是為 transform:translateX() 或 transform:translateY() 添加動畫效果撩穿，不會導(dǎo)致瀏覽器更新頁面布局磷支，從而避免布局偏移。

長期以來食寡，優(yōu)先使用可在瀏覽器的合成器線程上更新的 CSS 屬性進(jìn)行動畫處理一直是性能方面的最佳實踐，因為這會將工作從主線程移至 GPU廓潜。除了是一種常規(guī)性能最佳實踐抵皱，它還有助于改進(jìn) CLS。

一般來說辩蛋，請勿為需要瀏覽器更新頁面布局的 CSS 屬性添加動畫或轉(zhuǎn)換呻畸，除非您是在響應(yīng)用戶點按或按鍵操作（但不是 hover）時執(zhí)行此操作。請盡可能使用 CSS transform 屬性實現(xiàn)轉(zhuǎn)換和動畫悼院。

當(dāng)頁面為可能運(yùn)行緩慢的 CSS 屬性添加動畫時伤为，避免使用未合成的動畫 Lighthouse 審核會發(fā)出警告。

了解詳情：優(yōu)化動畫引起的布局偏移据途。

總結(jié)

提升網(wǎng)頁性能可能看起來很難绞愚，尤其是考慮到網(wǎng)絡(luò)上有大量的指導(dǎo)信息需要參考。不過颖医，通過關(guān)注這份簡短的最有效的最佳實踐列表位衩，您可以重新專注于解決問題，并有望為您網(wǎng)站的核心網(wǎng)頁指標(biāo)更進(jìn)一步熔萧。

如果您想采取上述優(yōu)化措施之外的措施糖驴，請參閱以下指南了解詳情：

• 優(yōu)化 INP
• 優(yōu)化 LCP
• 優(yōu)化 CLS