Hướng dẫn về Cumulative Layout Shift (CLS)

Tóm tắt — Cumulative Layout Shift (CLS) measures Cách nhiều stuff trên một trang moves khoảng on của nó own trong khi bạn’re trying để đọc hoặc tap nó — image đó loads muộn và shoves text xuống, button đó jumps right as bạn go để nhấp nó. nó scored từ 0 lên, và 0,1 hoặc ít hơn là good. phần lớn của nó xuất hiện từ elements đó đã không reserve của họ space trước khi họ loaded.

Điều gì CLS là

bạn’ve felt điều này even nếu bạn’ve không bao giờ heard term. bạn’re reading bài viết, quảng cáo hoặc image finishes loading trênơi bạn’re looking, và suddenly toàn bộ trang jumps xuống. hoặc bạn go để tap “Cancel” và banner pops trong, so của bạn tap lands on “Xác nhận” thay vì. đó unexpected movement là layout shift, và Cumulative Layout Shift là Google way của putting number on Cách bad nó là.

nó một của three Core Web Vitals — trio của trang-experience các chỉ số Google tracks, alongside Largest Contentful Paint (Cách fast main nội dung loads) và Interaction để tiếp theo Paint (Cách quickly trang responds Khi bạn tap). CLS là một về visual stability: làm trang hold vẫn?

Cách score hoạt động (roughly)

CLS là score, không time. CLS của 0,05 không có nghĩa là 50 milliseconds của bất cứ điều gì — nó unitless number. bigger chunk của screen đó moves, và farther nó moves, cao hơn (tệ hơn) score.

targets là đơn giản:

• 0,1 hoặc ít hơn — good.
• 0,1 để 0,25 — cần improvement.
• Over 0,25 — poor.

Một nice detail: shifts đó happen right sau khi bạn làm điều gì đó — tap button, open menu — không count so với trang, vì bạn gây ra them và bạn expect them. chỉ unexpected movement được tính.

Vì sao nó happens (và khắc phục)

Gần như mỗi layout shift xuất hiện xuống để giống nhau điều: điều gì đó loaded và took lên space trang hadn’t reserved cho nó. big ones:

• Images và videos không có sizes. Đó trình duyệt không know cách tall đó image là until điều này arrives, so đó text dưới điều này nhận pushed xuống khi điều này làm. Đó cách sửa: luôn cho images một width và height (hoặc một CSS aspect-ratio) so đó trình duyệt holds đó spot.
• Quảng cáo, embeds, và iframes. Giống nhau vấn đề — reserve space cho them.
• Web fonts. Khi một custom font swaps trong cho đó fallback, text có thể reflow.
• Pop-ins. Cookie banners, “you might also like” (bản dịch) «bạn có thể cũng như» boxes, bất cứ điều gì injected trênội dung bạn là đã looking tại.

mental rule: nếu điều gì đó là going để xuất hiện sau đó, leave lỗ hổng right size cho nó so không có gì khácó để move Khi nó hiển thị lên.

Muốn đó thực tế formula, đó “session window” (bản dịch) «session window» rule, vì sao lab và trường CLS numbers disagree, và đó đầy đủ gây ra-và-cácách sửa list? Switch để đó Advanced tab.

Tóm tắt — CLS là Cốt lõi Web Vital cho visual stability. mỗi shift scores as impact fraction × distance fraction; chỉ số itself là largest session window của shifts (≤ 1 s giữa shifts, ≤ 5 s window) — không lifetime sum, mà là Điều gì nó là trước khi June 2021. Good là ≤ 0,1, cần improvement ≤ 0,25, poor > 0,25, tại 75th percentile của trường dữ liệu. chỉ viewport-visible shifts count; shifts trong 500 ms của discrete input là excluded (scrolling không phải). gây ra là unsized images/video/quảng cáo/iframes/ embeds, web fonts, và nội dung injected trên existing nội dung; cácách sửa là reserving space, font-display/size-adjust, và transform-chỉ animation. trap để tránh: Lighthouse (lab) routinely đọc near-0 vì nó không interact với trang hoặc chạy đầy đủ lifecycle — trường dữ liệu (CrUX) là Điều gì Google thực ra measures.

Điều gì CLS measures

Google framing: “Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It’s an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts.” (bản dịch) «Cumulative Layout Shift (CLS) là một chỉ số Cốt lõi Web Vital ổn định và lấy người dùng làm trung tâm, giúp đo độ ổn định hình ảnh bằng cách định lượng tần suất người dùng gặp phải các dịch chuyển bố cục bất ngờ.» Đó operative word là unexpected — nội dung đó moves on của nó own, không vì người dùng đã làm điều gì đó.

nó sits trong Core Web Vitals trio với Largest Contentful Paint (loading) và Interaction để tiếp theo Paint (responsiveness). nơi LCP và INP là timed trong milliseconds, CLS là odd một out: unitless ratio score. đó trips mọi người lên constantly. CLS của 0,05 không phải 50 ms. nó có không time unit tại all.

formula: impact × distance

Theo shift, Google defines nó as:

layout shift score = impact fraction × distance fraction

• Impact fraction “measures how unstable elements impact the viewport area between two frames” (bản dịch) «measures cách không ổn định elements impact đó viewport area giữa hai frames» — đó combined visible area đó moving elements occupied (trước và sau), as một share of đó viewport.
• Distance fraction là “the greatest horizontal or vertical distance any unstable element has moved in the frame divided by the viewport’s largest dimension (width or height, whichever is greater).” (bản dịch) «đó greatest horizontal hoặc vertical distance bất kỳ không ổn định element có moved trong đó frame divided by đó viewport largest dimension (width hoặc height, whichever là greater).»

Cả hai dimensions quan trọng independently. nhỏ element đó travels across phần lớn của screen và lớn element đó barely nudges có thể score rất differently. web.dev worked ví dụ: impact fraction của 0.75 và distance fraction của 0.25 cho layout shift score của 0.1875.

Session windows: part mọi người nhận sai

Ở đây single phần lớn-misstated fact về CLS, và một I phần lớn muốn bạn để take away. CLS không phải sum của all shifts over trang lifetime. nó được sử dụng để là — đó changed trong June 2021.

Hôm nay: “CLS measures the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page.” (bản dịch) «CLS measures đó largest burst of layout shift scores cho mỗi unexpected layout shift đó occurs during đó entire lifecycle of một trang.» MỘT burst là một session window: “one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration.” (bản dịch) «một hoặc hơn individual layout shifts occur trong rapid succession với ít hơn 1-second trong giữa mỗi shift và một maximum of 5 seconds cho đó total window duration.» CLS là đó score of đó largest such window — không đó sum, không đó average.

Vì sao đó thay đổi? Đó old sum-mọi thứ definition âm thầm punished dài-lived các trang. MỘT single-trang app hoặc an infinite-scroll feed accumulated hơn CLS chỉ by existing lâu hơn, ngay cả khi mỗi individual shift đã là tiny và well-spaced. Đó Chrome Speed Các chỉ số team moved để một maximum session window để dừng penalizing duration, và chose maximum over average để tránh một perverse outcome nơi sửa một nhỏ, phụ shift có thể làm của bạn score tệ hơn. Khi đó thay đổi rolled out, không origin đã nhận mộtệ hơn score, hầu hết saw không thay đổi, và một slice of chậm-UI và infinite-scroll các trang improved. Nếu bạn đọc an older post đó vẫn says “sum of all shifts,” (bản dịch) «sum of all shifts,» đây là out of date.

Điều gì được tính — và Điều gì không

Three exclusions quyết định Điều gì thực ra lands trong của bạn score:

• Dưới đó fold không count. Chỉ shifts of nội dung visible trong đó hiện tại viewport là scored. MỘT shift tại đó bottom of một dài trang đó người dùng không bao giờ scrolls để có không impact. Practically, này có nghĩa là sửa trong-viewport shifts là gần như luôn cao hơn ROI hơn chasing shifts way xuống đó trang.
• Người dùng-initiated shifts nhận một 500 ms truyền. “Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set, so they can be excluded from calculations.” (bản dịch) «Layout shifts đó occur trong 500 milliseconds of người dùng input sẽ có đó hadRecentInput flag set, so they có thể là excluded từ calculations.» Google stance: shifts “that occur in response to user interactions… are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.” (bản dịch) «đó occur trong phản hồi để người dùng interactions… là generally fine, miễn là đó shift occurs close đủ để đó interaction đó đó mối quan hệ là clear để người dùng.» Open an accordion, expand một menu — đó movement là dự kiến, so đây là forgiven.
• Nhưng scrolling không phải một free truyền. Đó 500 ms exclusion chỉ áp dụng để discrete events — tap, nhấp, keypress. Continuous gestures (scrolling, pinch-zoom) làm không trigger đó exclusion window. Nếu nội dung shifts trong khi ai đó scrolls, đó vẫn được tính. Này phân biệt là sai trong một lot of coverage; nhận điều này right.

Thresholds, và nơi score xuất hiện từ

“To provide a good user experience, sites should strive to have a CLS score of 0.1 or less,” (bản dịch) «Để cung cấp một good người dùng experience, các trang nên strive để có một CLS score of 0,1 hoặc ít hơn,» measured tại “the 75th percentile of page loads, segmented across mobile and desktop devices.” (bản dịch) «đó 75th percentile of trang loads, segmented across mobile và desktop devices.» Đó đầy đủ bands:

• Good: ≤ 0,1
• Cần improvement: 0,1 – 0,25
• Poor: > 0,25

Đó 0,1 line không arbitrary. Google người dùng research được tìm thấy đó “levels of shift from 0.15 and higher were consistently perceived as disruptive, while shifts of 0.1 and lower were noticeable but not excessively disruptive.” (bản dịch) «levels of shift từ 0,15 và cao hơn đã là consistently perceived as disruptive, trong khi shifts of 0,1 và thấp hơn đã là noticeable nhưng không excessively disruptive.» They landed on 0,1 thay vì điều gì đó stricter partly vì bên thứ ba embeds (quảng cáo, social) so commonly nguyên nhân shifts đó một tighter bar sẽ là impractical cho đó real web.

Đó “75th percentile of field data” (bản dịch) «75th percentile of trường dữ liệu» part là load-bearing, mà brings us để đó biggest việc đo lường trap.

Lab so với. trường: Vì sao numbers disagree

Đây là nơi phần lớn mọi người nhận burned. Lighthouse và khác lab tools thường báo cáo CLS near 0,0 trong khi trường dữ liệu — và Google — hiển thị điều gì đó nhiều tệ hơn. khoảng trống không phải either tool là dishonest; nó phạm vi. lab chạy là single, ngắn, scripted trang load: nó không scroll, không nhấp, và không stick khoảng, so nó captures ban đầu-load shifts chỉ. Trường dữ liệu (CrUX) aggregates thực visits across nhiều người dùng, devices, và navigations over rolling window, và CLS là được định nghĩa over đểàn bộ trang lifecycle — menus opening, lazy nội dung loading as người dùng scrolls, muộn quảng cáo filling trong, tuy nhiên dài session chạy. ngắn lab chạy structurally có thể’t see phần lớn của đó.

So practical rule là: sử dụng lab dữ liệu để debug cụ thể shift, và trường dữ liệu để know của bạn thực score. Google ranks on trường dữ liệu từ Chrome Người dùng Experience Báo cáo (CrUX), surfaced trong PageSpeed Insights và Search Console. nếu Lighthouse đọc 0,0 nhưng PageSpeed Insights hiển thị 0,18, treat trường number as một đó reflects của bạn thực tế người dùng — sau đó go reproduce shift trong lab by interacting với trang way thực khách truy cập sẽ. Hai nhiều hơn phạm vi gaps worth knowing: phần lớn tools, including Lighthouse, không propagate iframe layout shifts lên để parent document score mặc dù CrUX có thể reflect them, và RUM được xây dựng on Layout Instability API inherits đó giống nhau iframe blind spot — so của bạn own thực-người dùng monitoring có thể dưới-giải thích CrUX number đó looks tệ hơn Điều gì của bạn đầu tiên-party attribution hiển thị.

phổ biến gây ra

Trong rough order của Cách thường I see them:

1. Images và video không có dimensions. Không reserved height có nghĩ là mọi thứ dưới jumps Khi media loads.
2. Quảng cáo, embeds, và iframes không có reserved space. Quảng cáo networks phục vụ dynamic sizes; embeds không announce của họ height trước khi loading.
3. Dynamically injected nội dung trên existing nội dung. Cookie banners, notification bars, “related” widgets, muộn-loading promos — bất cứ điều gì đó pushes xuống Điều gì đã on screen.
4. Web fonts (FOIT/FOUT). Khi custom font swaps trong cho fallback, text reflows nếu của họ các chỉ số differ.
5. Animations on layout-triggering properties. Animating top, left, margin, box-shadow, hoặc box-sizing forces trình duyệt để re-lay-out trang on mỗi frame.

cácách sửa

mỗi khắc phục mirrors của nó nguyên nhân:

• Images/video — reserve đó space. Set width và height các thuộc tính so đó trình duyệt computes đó aspect ratio và holds đó box; pair với img { height: auto; width: 100%; } cho responsive behavior, hoặc dùng đó CSS aspect-ratio property. Này là đó single highest-leverage CLS cách sửa on hầu hết các trang.
• Quảng cáo/embeds/iframes — reserve space cũng. Dùng min-height hoặc aspect-ratio on đó container; cho quảng cáo slots, Google Publisher Tag hướng dẫn là blunt: “Setting a fixed height and width directly on the ad slot div is the most effective way to do this.” (bản dịch) «Setting một fixed height và width trực tiếp on đó quảng cáo slot div là đó hầu hết effective way để làm này.» Cho multi-size slots, reserve cho đó largest configured size. Push muộn-loading nội dung thấp hơn so bất kỳ residual shift là dưới đó fold.
• Dynamic nội dung — không insert vào đó flow. Reserve một placeholder đó matches đó cuối size, hoặc overlay đó nội dung thay vì injecting điều này. Skeleton loaders chỉ help nếu they match đó cuối dimensions chính xác — một skeleton even vài pixels ngắn hơn đó real nội dung vẫn shifts. Ưu tiên người dùng-triggered loads (“Load hơn”) over surprise insertions.
• Fonts — match đó các chỉ số. font-display: optional là đó chỉ giá trị với effectively zero CLS risk; swap minimizes invisible text nhưng có thể shift on đó đổi. Tốt hơn vẫn, dùng đó CSS chỉ số overrides — size-adjust, ascent-override, descent-override, line-gap-override — để size đó fallback font để match đó web font so đó đổi là seamless. Preload cốt yếu fonts.
• Animations — transform chỉ. Animate với transform (translate, scale, rotate) thay vì top/left/margin. Transform-based animations là composited và không trigger layout, so they không shift bất cứ điều gì.

Cách CLS fits vào thứ hạng (giữ nó trong proportion)

CLS là một input để Google trang experience tín hiệu. Google says Cốt lõi Web Chỉ số quan trọng là điều gì đó của nó xếp hạng các hệ thống dùng — nhưng hiện tại Tìm kiếm tài liệu không publish an chính xác CLS weight, một tiebreaker rule, hoặc một xếp hạng bảo đảm, so treat bất kỳ cụ thể mechanism (including “it’s a tiebreaker” (bản dịch) «đây là một tiebreaker») as một hoạt động approximation, không một được ghi lại fact. My standing advice across mọi thứ I ghi về Core Web Vitals: nhận vào đó “good” band và move on. Hầu hết các trang sẽ không see một có ý nghĩa xếp hạng hoặc business lift từ grinding 0,08 xuống để 0,02, và một single score rarely giải thích một revenue hoặc conversion outcome by itself. CLS là bảng stakes — bạn muốn để clear đó bar, nhưng điều này không nên become đó centerpiece of của bạn SEO program tại đó expense of LCP, INP, hoặc, frankly, của bạn thực tế nội dung.

Hai operational notes đó save lot của confusion:

• CrUX lags ~28 days. đây là một rolling 28-day window, so một cách sửa bạn ship hôm nay sẽ không fully register trong PageSpeed Insights hoặc Search Console cho weeks. không panic khi đó number không move đó tiếp theo morning.
• Đó attributed element là thường không đó root nguyên nhân. Đó Layout Shift Attribution API tells bạn mà element moved, nhưng as web.dev notes, “it’s possible that these elements are only indirectly related to the ‘root cause’ of layout instability.” (bản dịch) «đây là có thể đó những elements là chỉ indirectly related để đó ‘root nguyên nhân’ of layout instability.» Đó text đó jumped là thường đó victim of an unsized image trên điều này loading muộn — cách sửa đó nguyên nhân, không đó symptom. Hoạt động điều này as một timestamp-để-trigger loop: note đó shift bắt đầu time, thì kiểm tra điều gì khác changed trong đó giống nhau window — một network yêu cầu finishing, an image hoặc font arriving, một resize, hoặc một class/style thay đổi — và treat đó attributed node as một lead, không proof, until bạn đã khớp điều này để đó trigger.

AI summary

condensed take on Nâng cao version:

• CLS = visual stability, Cốt lõi Web Vital cho unexpected movement của visible nội dung. nó sits alongside Largest Contentful Paint và Interaction để tiếp theo Paint.
• nó unitless score, không time. 0,05 là ratio, không 50 ms.
• Theo-shift formula: impact fraction × distance fraction — Cách nhiều của viewport moved, times Cách far, relative để viewport largest dimension.
• ** chỉ số là largest session window** (≤ 1 s giữa shifts, ≤ 5 s total window) — không lifetime sum. đó changed trong June 2021 để dừng penalizing dài-lived/SPA các trang; maximum là chosen over average.
• Thresholds (75th percentile, trường dữ liệu): Good ≤ 0,1 · Cần improvement ≤ 0,25 · Poor > 0,25.
• Exclusions: dưới—fold shifts không count; shifts trong 500 ms của discrete input (tap/nhấp/mấu chốt) là excluded — scrolling không phải exempt.
• Gây ra: unsized images/video/quảng cáo/iframes/embeds; injected nội dung trên existing nội dung; web fonts; animating layout-triggering properties.
• Cácách sửa: đặt width/height hoặc aspect-ratio; reserve space cho dynamic nội dung (skeletons phải match chính xác dimensions); font-display + size-adjust; animate với transform chỉ.
• Lab ≠ trường. Lighthouse thường đọc near-0 vì nó không interact với trang hoặc chạy đầy đủ lifecycle; trường dữ liệu (CrUX/PageSpeed Insights) là Điều gì Google ranks on. Iframe shifts thường không propagate để parent score trong lab hoặc RUM tools.
• Xếp hạng: một input Google nói của nó xếp hạng các hệ thống sử dụng trong trang experience — không được ghi lại weight hoặc tiebreaker rule, so nhận để “good” và move on thay vì chasing cụ thể mechanism. CrUX lags ~28 days; attributed element là thường không root nguyên nhân.

Tài liệu chính thức

Chính-nguồn tài liệu từ Google / Chrome team.

Cốt lõi CLS tài liệu

• Cumulative Layout Shift (CLS) — canonical definition, impact × distance formula, session windows, thresholds, và hadRecentInput exclusion (Milica Mihajlija và Philip Walton).
• Optimize Cumulative Layout Shift — chính thức gây ra-và-cácách sửa hướng dẫn: images, quảng cáo/embeds, injected nội dung, fonts, animations.
• Debug layout shifts — finding shifts trong Chrome DevTools, Layout Shift Regions overlay, và LayoutShiftAttribution API (Katie Hempenius và Barry Pollard).

Background và việc đo lường

• Evolving Cumulative Layout Shift trong web tooling — Vì sao chỉ số moved từ sum-của-all-shifts để largest session window trong June 2021 (Annie Sullivan và Hongbo Song, Chrome Speed Các chỉ số Team).
• Cách Core Web Vitals các chỉ số thresholds là được định nghĩa — người dùng research và achievability dữ liệu behind 0,1 / 0,25 bands.
• Getting đã bắt đầu với measuring Web Chỉ số quan trọng — lab so với. trường dữ liệu, và Vì sao lab CLS có thể đọc artificially thấp.
• Font thực hành tốt nhất — font-display, chỉ số overrides, và preloading cho font-related CLS.

Quảng cáo và Tìm kiếm

• Minimize layout shift — Google Publisher Tag hướng dẫn cho reserving quảng cáo-slot space.
• Understanding Core Web Vitals và Google kết quả tìm kiếm — Cách CWV (including CLS) factor vào Tìm kiếm.

Quotes từ nguồn

On—record statements từ Google / Chrome team. mỗi link là deep link đó jumps để quoted passage on nguồn trang.

Google — Điều gì CLS là

• “Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It’s an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts.” (bản dịch) «Cumulative Layout Shift (CLS) là một chỉ số Cốt lõi Web Vital ổn định và lấy người dùng làm trung tâm, giúp đo độ ổn định hình ảnh bằng cách định lượng tần suất người dùng gặp phải các dịch chuyển bố cục bất ngờ.» Jump để quote
• “CLS measures the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page.” (bản dịch) «CLS measures đó largest burst of layout shift scores cho mỗi unexpected layout shift đó occurs during đó entire lifecycle of một trang.» Jump để quote

Google — formula

• “layout shift score = impact fraction * distance fraction” (bản dịch) «layout shift score = impact fraction * distance fraction» Jump để quote
• “The impact fraction measures how unstable elements impact the viewport area between two frames.” (bản dịch) «Đó impact fraction measures cách không ổn định elements impact đó viewport area giữa hai frames.» Jump để quote
• “The distance fraction is the greatest horizontal or vertical distance any unstable element has moved in the frame divided by the viewport’s largest dimension (width or height, whichever is greater).” (bản dịch) «Đó distance fraction là đó greatest horizontal hoặc vertical distance bất kỳ không ổn định element có moved trong đó frame divided by đó viewport largest dimension (width hoặc height, whichever là greater).» Jump để quote

Google — session window

• “A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration.” (bản dịch) «MỘT burst of layout shifts, known as một session window, là khi một hoặc hơn individual layout shifts occur trong rapid succession với ít hơn 1-second trong giữa mỗi shift và một maximum of 5 seconds cho đó total window duration.» Jump để quote

Google — thresholds và người dùng input

• “To provide a good user experience, sites should strive to have a CLS score of 0.1 or less… a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.” (bản dịch) «Để cung cấp một good người dùng experience, các trang nên strive để có một CLS score of 0,1 hoặc ít hơn… một good ngưỡng để đo lường là đó 75th percentile of trang loads, segmented across mobile và desktop devices.» Jump để quote
• “Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set, so they can be excluded from calculations.” (bản dịch) «Layout shifts đó occur trong 500 milliseconds of người dùng input sẽ có đó hadRecentInput flag set, so they có thể là excluded từ calculations.» Jump để quote
• “Layout shifts that occur in response to user interactions (such as clicking or tapping a link, pressing a button, or typing in a search box) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.” (bản dịch) «Layout shifts đó occur trong phản hồi để người dùng interactions (such as clicking hoặc tapping một link, pressing một button, hoặc typing trong mộtìm kiếm box) là generally fine, miễn là đó shift occurs close đủ để đó interaction đó đó mối quan hệ là clear để người dùng.» Jump để quote

Google — Cách thresholds là chosen

• “levels of shift from 0.15 and higher were consistently perceived as disruptive, while shifts of 0.1 and lower were noticeable but not excessively disruptive.” (bản dịch) «levels of shift từ 0,15 và cao hơn đã là consistently perceived as disruptive, trong khi shifts of 0,1 và thấp hơn đã là noticeable nhưng không excessively disruptive.» Jump để quote

Google — reserving quảng cáo-slot space

• “Setting a fixed height and width directly on the ad slot div is the most effective way to do this.” (bản dịch) «Setting một fixed height và width trực tiếp on đó quảng cáo slot div là đó hầu hết effective way để làm này.» Jump để quote

Google — attributed element so với. root nguyên nhân

• “elements listed as sources are the elements that shifted during the layout shift. However, it’s possible that these elements are only indirectly related to the ‘root cause’ of layout instability.” (bản dịch) «elements listed as sources là đó elements đó shifted during đó layout shift. Tuy nhiên, đây là có thể đó những elements là chỉ indirectly related để đó ‘root nguyên nhân’ of layout instability.» Jump để quote

CLS gây ra → cácách sửa checklist

Hoạt động top-xuống; đầu tiên hai items khắc phục majority của thực-world CLS.

• mỗi <img> và <video> có width + height (hoặc CSS aspect-ratio), với img { height: auto; width: 100%; } cho responsive layouts.
• Quảng cáo slots, iframes, và embeds reserve space qua min-height / aspect-ratio; multi-size quảng cáo slots reserve cho largest configured size.
• Muộn-loading nội dung sits dưới fold nơi có thể, so bất kỳ residual shift không count.
• Injected nội dung (cookie banners, promos, “related” widgets) là overlaid hoặc pre-reserved — không inserted trên existing nội dung.
• Skeleton placeholders match cuối nội dung chính xác dimensions ( một vài pixels off vẫn shifts).
• Web fonts sử dụng font-display: optional nơi acceptable, hoặc swap plus size-adjust / ascent-override để match fallback các chỉ số; cốt yếu fonts là preloaded.
• Animations sử dụng transform chỉ — không bao giờ top, left, margin, box-shadow, hoặc box-sizing.
• bạn’ve checked score trong trường dữ liệu (PageSpeed Insights / Tìm kiếm Console / CrUX), không chỉ Lighthouse.
• bạn’ve reproduced shifts by interacting với trang — scrolling, opening menus, triggering lazy loads — không chỉ on ban đầu load.
• Quảng cáo/iframe shifts verified trong trường (lab tools thường không propagate them để parent score).

CLS bảng tra nhanh

** numbers**

** definition, trong một line**

• layout shift score = impact fraction × distance fraction (theo shift).
• CLS = largest session window của shifts — ≤ 1 s giữa shifts, ≤ 5 s total window. không lifetime sum (đó là pre-June-2021).
• nó unitless score, không time.

Điều gì excluded

• Shifts dưới fold (không trong hiện tại viewport).
• Shifts trong 500 ms của discrete input (tap/nhấp/keypress) — hadRecentInput.
• không excluded: shifts during scrolling hoặc pinch (continuous gestures).

Gây ra → cácách sửa

Việc đo lường gotchas

• Lighthouse (lab) thường đọc ~0 — nó không interact với trang hoặc chạy đầy đủ lifecycle. CrUX / PageSpeed Insights (trường) là Điều gì Google ranks on.
• CrUX lags ~28 days — cácách sửa take weeks để hiển thị.
• Iframe shifts thường không propagate để parent score trong lab tools.
• attributed element là một đó moved, không nhất thiết root nguyên nhân.

Tools cho measuring và gỡ lỗi CLS

Trường dữ liệu (Điều gì Google ranks on)

• PageSpeed Insights — CrUX trường CLS tại trang và origin level, plus Lighthouse lab chạy side by side. fastest way để see lab-so với-trường khoảng trống cho yourself.
• Search Console — Core Web Vitals báo cáo — theo-URL-group trường CLS across của bạn toàn bộ trang web, grouped by status.
• CrUX (Chrome Người dùng Experience Báo cáo) — underlying trường dataset; explore history qua CrUX dashboards / BigQuery.

Lab dữ liệu (cho gỡ lỗi)

• Chrome DevTools — Performance panel — record trace, sau đó đọc Layout Shifts track; clicking shift highlights elements đó moved và hiển thị shift score. Trực tiếp Các chỉ số hiển thị CLS cập nhật trong thực time as bạn interact.
• Layout Shift Regions overlay — DevTools → Settings → nhiều hơn tools → Kết xuất → Layout Shift Regions. Reload và shifting areas flash so Bạn có thể see them.
• Lighthouse — nhanh lab CLS, nhưng remember nó chỉ captures ban đầu-load shifts.
• WebPageTest — lab CLS với filmstrip và trace.

RUM (của bạn own trường dữ liệu)

• web-chỉ số quan trọng JavaScript library — onCLS() các báo cáo thực-người dùng CLS từ của bạn own khách truy cập (~2 KB); phần lớn chính xác picture của Điều gì mọi người thực ra experience.
• PerformanceObserver (layout-shift) — thô API library wraps, plus LayoutShiftAttribution sources cho mà elements moved.

Cách tools themselves score

trực tiếp ví dụ của chỉ số điều này trang mô tả — well-known trang-speed và monitoring services được xếp hạng on của họ own thực-người dùng mobile CLS (Chrome UX Báo cáo trường dữ liệu):

Mà CLS khắc phục nên bạn làm đầu tiên?

CLS mistakes đó hide thực vấn đề

Treating sạch Lighthouse chạy as proof

Lighthouse có thể finish trước khi consent banner, quảng cáo, hoặc interaction-driven shift occurs. sử dụng lab chạy để debug, nhưng kiểm tra CrUX hoặcủa bạn own thực-người dùng monitoring trước khi declaring vấn đề fixed.

Sửa chỉ element DevTools nói moved

shifted element là thường victim. muộn-loading item trênó có thể là nguyên nhân. Replay trace và inspect Điều gì entered hoặc resized immediately trước khi movement.

Reserving space với guessed fixed height

fixed placeholder có thể tạo thứ hai shift Khi responsive nội dung là taller hoặc ngắn hơn. sử dụng intrinsic dimensions hoặc aspect-ratio nơi nội dung proportions là known.

Animating layout properties

Thay đổi top, left, hoặc margins có thể move xung quanh nội dung. Animate với transform Khi effect không cần để thay đổi document flow.

Diagnose CLS vấn đề by symptom

Trường CLS là poor nhưng lab score là near zero

có khả năng nguyên nhân: shift happens sau khi interaction, during lâu hơn session, hoặc chỉ cho subset của người dùng. khắc phục: reproduce thực journey trong khi recording Performance panel, sau đó thêm web-vitals attribution trong thực-người dùng monitoring. xác nhận: offending interaction và shifted element xuất hiện trong trace hoặc RUM record.

Text jumps Khi custom font arrives

có khả năng nguyên nhân: fallback và web font sử dụng khácác chỉ số. khắc phục: preload chỉ cốt yếu font nơi appropriate và match fallback với font chỉ số overrides. xác nhận: replay với bộ nhớ đệm disabled và verify đó Layout Shifts track không lâu hơn records đổi.

banner hoặc quảng cáo pushes trang xuống

có khả năng nguyên nhân: slot có không reserved dimensions trước khi của nó nội dung arrives. khắc phục: allocate ổn định container hoặc place message nơi nó không displace visible nội dung. xác nhận: throttle load và watch slot retain của nó footprint.

CLS improves trong kiểm thử nhưng không trong PageSpeed Insights

có khả năng nguyên nhân: CrUX là rolling trường dataset thay vì immediate deployment kiểm tra. khắc phục: verify thay đổi trong lab và RUM đầu tiên, sau đó chờ cho trường window để turn over. xác nhận: của bạn own post-phát hành trường distribution improves trước khi công khai CrUX aggregate follows.

Capture layout shifts trong trình duyệt

Paste điều này vào DevTools Console trước khi reproducing vấn đề. nó bỏ qua shifts tied để gần đây người dùng input và prints score plus elements trình duyệt attributed.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.hadRecentInput) continue;
    console.table({
      value: entry.value,
      time: Math.round(entry.startTime),
      elements: entry.sources?.map((source) => source.node),
    });
  }
});

observer.observe({ type: 'layout-shift', buffered: true });

attributed node là lead, không tự động proof của nguyên nhân. So sánh của nó timestamp với network các yêu cầu, font loads, và DOM insertions trong giống nhau trace.

Prove CLS khắc phục worked

Reserved-space kiểm thử

Kiểm thử để chạy: disable bộ nhớ đệm, throttle connection, reload, và record Performance panel Layout Shifts track. Dự kiến kết quả: media hoặc embed giữ giống nhau footprint trước khi và sau khi nó loads. thất bại interpretation: của nó container vẫn phụ thuộc vào muộnội dung cho dimensions. Monitoring window: immediate trong trace. Rollback trigger: new placeholder tạo clipping, excess blank space, hoặc new shift tại responsive breakpoint.

Font-đổi kiểm thử

Kiểm thử để chạy: reload với bộ nhớ đệm disabled trong khi watching text và Layout Shifts track. Dự kiến kết quả: fallback-để-web-font transition tạo không measurable shift. thất bại interpretation: fallback các chỉ số vẫn differ hoặcốt yếu font arrives cũng muộn. Monitoring window: immediate trong repeated lab chạy. Rollback trigger: thay đổi hides text lâu hơn hoặc làm cuối typography materially sai.

Trường xác nhận

Kiểm thử để chạy: so sánh post-phát hành onCLS() dữ liệu cho changed template với của nó pre-phát hành baseline, sau đó watch CrUX. Dự kiến kết quả: thực-người dùng p75 improves không có tệ hơn tail on mấu chốt journeys. thất bại interpretation: một muộn hoặc interaction-driven nguồn vẫn. Monitoring window: RUM as traffic arrives; CrUX over của nó 28-day rolling window. Rollback trigger: CLS hoặc người dùng interaction các lỗi worsen consistently sau khi phát hành.

CLS các chỉ số worth theo dõi

thực-người dùng CLS tại p75

Chỉ số: 75th-percentile CLS cho mỗi quan trọng template và device class. Điều gì nó tells bạn: liệu phần lớn visits đáp ứng visual-stability đích. Cách pull nó: CrUX, PageSpeed Insights, hoặc web-vitals RUM. Benchmark / realistic range: good là 0,1 hoặc ít hơn; 0,1–0,25 cần improvement; trên 0,25 là poor. Cadence: monitor releases trong RUM và review rolling trường trend monthly.

Poor-visit rate

Chỉ số: share của thực visits với CLS trên 0,25. Điều gì nó tells bạn: liệu acceptable p75 hides damaging tail. Cách pull nó: bucket của bạn onCLS() events by template và journey. Benchmark / realistic range: establish trang web baseline và drive poor bucket xuống; traffic mix làm universal đích misleading. Cadence: weekly cho cao-traffic templates và sau khi layout releases.

Shift attribution by nguyên nhân

Chỉ số: layout-shift entries grouped by element hoặc component. Điều gì nó tells bạn: mà recurring implementation owns phần lớn instability. Cách pull nó: attribution xây dựng của web-vitals hoặc PerformanceObserver. Benchmark / realistic range: không universal range; so sánh components by total impact và affected visits. Cadence: review với mỗi template hoặc component phát hành.

các tài nguyên worth của bạn time

Chính thức, trong depth

• Cumulative Layout Shift (CLS) — canonical reference.
• Optimize Cumulative Layout Shift — chính thức khắc phục hướng dẫn.
• Debug layout shifts — DevTools workflow.
• Evolving Cumulative Layout Shift trong web tooling — June 2021 session-window thay đổi, explained by team đó đã làm nó.

Từ practitioners

• Cách sửa Cumulative Layout Shift (CLS) Các vấn đề — Barry Pollard, Smashing Magazine. Goes deep on font descriptors và đó “the element that shifted isn’t the root cause” (bản dịch) «đó element đó shifted không đó root nguyên nhân» vấn đề.
• Cumulative Layout Shift trong thực tế — Nic Jansma (Cloudflare; W3C Web Performance WG). Đó best ghi-lên of việc đo lường nuances: iframe attribution gaps, đó 5-element attribution sample, và tool-để-tool discrepancies.
• Đo lường và Optimize Cumulative Layout Shift — DebugBear.
• Đó Gần như-Hoàn tất Hướng dẫn để Cumulative Layout Shift — Jess Peck. Thorough treatment of các trường hợp biên including SPA navigation shifts và continuous-gesture exclusion nuances.
• Layout shift culprits — Chrome DevTools tài liệu on đó CLS culprit insight panel — hữu ích companion để đó web.dev debug hướng dẫn.
• Cách sửa Cumulative Layout Shift (CLS) — Kinsta. Practical CMS-focused walkthrough covering WordPress-cụ thể gây ra (gallery images, muộn-loading widgets, cookie banners).
• Layout Instability API — WICG spec. Đó underlying trình duyệt API CLS là được xây dựng on; hữu ích nếu bạn là building custom RUM hoặcần chính xác hadRecentInput semantics.

Nơi điều này fits trong my own hoạt động

• CLS cho thấy lên as một “table stakes” (bản dịch) «bảng stakes» chỉ số across my Core Web Vitals coverage — track điều này, nhận vào đó good band, và giữ điều này trong proportion so với LCP, INP, và của bạnội dung. Google không publish an chính xác CLS weight hoặc tiebreaker rule, so đây là một input để watch, không đó game.

Số liệu worth citing

• ** 0,1 ngưỡng là grounded trong perception research.** Google người dùng studies tìm thấy shifts của 0,15 và cao hơn là consistently perceived as disruptive, trong khi 0,1 và thấp hơn là noticeable nhưng không excessively so. Nguồn
• CLS là easiest Cốt lõi Web Vital để truyền. Across my enterprise audits pattern là consistent: lớn majority của các trang clear CLS bar (thường ~80%+), tuy vậy chỉ little over half truyền all three chỉ số quan trọng together — CLS là rarely một holding bạn back.
• ** June 2021 thay đổi helped, không bao giờ hurt.** Khi CLS moved để largest session window, không origin đã nhận tệ hơn score, phần lớn saw không thay đổi, và slice của infinite-scroll và chậm-UI các trang improved. Nguồn
• Unsized media là vẫn mọi nơi. Ngành crawl (Web Almanac) consistently tìm lớn share của các trang shipping images không có rõ ràng dimensions — single phần lớn phổ biến CLS nguyên nhân, và easiest để khắc phục.
• 72% của websites globally hiện tại achieve good CLS (2025 Web Almanac / HTTP Archive dữ liệu), đang làm CLS easiest Cốt lõi Web Vital để truyền — tuy vậy 62% của mobile các trang vẫn ship ít nhất một image không có rõ ràng dimensions, single phần lớn phổ biến nguyên nhân. Nguồn: HTTP Archive / Web Almanac
• Business impact: Rakuten 24 reported 53,37% increase trong revenue theo khách truy cập cho người dùng experiencing thấp CLS versus cao CLS — frequently cited case study, không evidence đó được cho CLS number gây ra cụ thể business outcome on khácác trang. Nguồn: corewebvitals.io case studies

Videos

• Google Search Central / Chrome cho Nhà phát triển (YouTube) — Core Web Vitals và Debug layout shifts walkthroughs, including DevTools demos của Layout Shifts track và Layout Shift Regions overlay. Channel

Tự kiểm tra: Cumulative Layout Shift

Five nhanh cácâu hỏi on measuring và sửa visual instability. Pick câu trả lời cho mỗi, sau đó kiểm tra.

Nhật ký thay đổi