Panduan Cumulative Layout Shift (CLS)

TL;DR — Cumulative Layout Shift (CLS) measures bagaimana banyak stuff pada sebuah halaman moves sekitar pada -nya own sementara Anda’re trying untuk baca atau tap ini — image itu memuat late dan shoves text down, button itu jumps right sebagai Anda go untuk click ini. ini adalah scored dari 0 up, dan 0,1 atau lebih sedikit adalah baik. sebagian besar dari ini muncul dari elements itu tidak reserve mereka space sebelum mereka dimuat.

Apa CLS adalah

Anda’ve felt ini bahkan jika Anda’ve tidak pernah heard istilah. Anda’re reading sebuah artikel, sebuah ad atau image finishes memuat di atas di mana Anda’re looking, dan suddenly seluruh halaman jumps down. atau Anda go untuk tap “Cancel” (terjemahan) “Cancel” dan sebuah banner pops di, so Anda tap lands pada “Konfirmasi” (terjemahan) “Konfirmasi” alih-alih. itu unexpected movement adalah sebuah layout shift, dan Cumulative Layout Shift adalah Google’s cara dari putting sebuah angka pada bagaimana buruk ini adalah.

ini adalah satu dari three Core Web Vitals — trio dari halaman-experience metrics Google tracks, alongside Largest Contentful Paint (bagaimana fast main konten memuat) dan Interaction untuk Berikutnya Paint (bagaimana quickly halaman responds ketika Anda tap). CLS adalah satu tentang visual stability: melakukan halaman hold masih?

Bagaimana score berfungsi (roughly)

CLS adalah sebuah score, tidak sebuah time. sebuah CLS dari 0,05 tidak berarti 50 milliseconds dari apa pun — ini adalah sebuah unitless angka. bigger chunk dari screen itu moves, dan farther ini moves, lebih tinggi (worse) score.

targets adalah sederhana:

• 0,1 atau lebih sedikit — baik.
• 0,1 untuk 0,25 — perlu improvement.
• di atas 0,25 — poor.

Satu nice detail: shifts itu happen right setelah Anda melakukan sesuatu — tap sebuah button, open sebuah menu — jangan count terhadap halaman, karena Anda disebabkan them dan Anda expect them. hanya unexpected movement counts.

Mengapa ini happens (dan perbaiki)

Hampir setiap layout shift muncul down untuk yang sama hal: sesuatu dimuat dan took up space halaman hadn’t reserved untuk ini. big ones:

• Images dan videos tanpa sizes. browser tidak know bagaimana tall image adalah until ini arrives, so text di bawah ini mendapatkan pushed down ketika ini melakukan. perbaiki: selalu memberikan images sebuah width dan height (atau sebuah CSS aspect-ratio) so browser holds spot.
• Ads, embeds, dan iframes. sama masalah — reserve space untuk them.
• Web fonts. Ketika sebuah custom font swaps di untuk fallback, text dapat reflow.
• Pop-ins. Cookie banners, “Anda mungkin juga like” (terjemahan) “Anda mungkin juga like” boxes, apa pun injected di atas konten Anda’re sudah looking di.

mental aturan: jika sesuatu adalah going untuk muncul kemudian, leave sebuah celah right size untuk ini so tidak ada apa pun else memiliki untuk move ketika ini menampilkan up.

ingin sebenarnya formula, “session window” (terjemahan) “session window” aturan, mengapa lab dan field CLS angka disagree, dan penuh penyebab-dan-memperbaiki list? Switch untuk Advanced tab.

TL;DR — CLS adalah Core Web Vital untuk visual stability. setiap shift scores sebagai impact fraction × distance fraction; metric itself adalah largest session window dari shifts (≤ 1 s antara shifts, ≤ 5 s window) — tidak lifetime sum, yang adalah apa ini adalah sebelum June 2021. baik adalah ≤ 0,1, perlu improvement ≤ 0,25, poor > 0,25, di 75th percentile dari data lapangan. hanya viewport-terlihat shifts count; shifts di dalam 500 ms dari sebuah discrete input adalah excluded (scrolling tidak). penyebab adalah unsized images/video/ads/iframes/ embeds, web fonts, dan konten injected di atas existing konten; memperbaiki adalah reserving space, font-display/size-adjust, dan transform-hanya animation. trap untuk hindari: Lighthouse (lab) routinely membaca near-0 karena ini tidak interact dengan halaman atau jalankan penuh lifecycle — data lapangan (CrUX) adalah apa Google sebenarnya measures.

Apa CLS measures

Google’s framing: “Cumulative Layout Shift (CLS) adalah a stable Core Web Vital metric. ini an important, user-centric metric untuk measuring visual stability karena it helps quantify bagaimana sering users experience unexpected layout shifts.” (terjemahan) “Cumulative Layout Shift (CLS) adalah sebuah stable Core Web Vital metric. ini adalah sebuah penting, pengguna-centric metric untuk measuring visual stability karena ini helps quantify bagaimana sering pengguna experience unexpected layout shifts.” operative kata adalah unexpected — konten itu moves pada -nya own, tidak karena pengguna melakukan sesuatu.

ini sits di Core Web Vitals trio dengan Largest Contentful Paint (memuat) dan Interaction untuk Berikutnya Paint (responsiveness). Di mana LCP dan INP adalah timed di milliseconds, CLS adalah odd satu out: sebuah unitless ratio score. itu trips orang up constantly. sebuah CLS dari 0,05 adalah tidak 50 ms. ini memiliki Tidak time unit di semua.

formula: impact × distance

Per shift, Google defines ini sebagai:

layout shift score = impact fraction × distance fraction

• Impact fraction “measures bagaimana unstable elements impact itu viewport area antara dua frames” (terjemahan) “measures bagaimana unstable elements impact viewport area antara dua frames” — combined terlihat area moving elements occupied (sebelum dan setelah), sebagai sebuah share dari viewport.
• Distance fraction adalah “itu greatest horizontal atau vertical distance any unstable element memiliki moved di itu frame divided oleh itu viewport’s largest dimension (width atau height, whichever adalah greater).” (terjemahan) “ greatest horizontal atau vertical distance apa pun unstable element memiliki moved di frame divided oleh viewport’s largest dimension (width atau height, whichever adalah greater).”

Keduanya dimensions penting independently. sebuah kecil element itu travels di seluruh sebagian besar dari screen dan sebuah besar element itu barely nudges dapat score very differently. web.dev’s worked contoh: sebuah impact fraction dari 0.75 dan sebuah distance fraction dari 0.25 memberikan sebuah layout shift score dari 0.1875.

Session windows: bagian everyone mendapatkan wrong

Di sini’s single sebagian besar-misstated fact tentang CLS, dan satu I sebagian besar ingin Anda untuk take away. CLS adalah tidak sum dari semua shifts di atas halaman’s lifetime. ini digunakan untuk menjadi — itu changed di June 2021.

Hari ini: “CLS measures itu largest burst dari layout shift scores untuk setiap unexpected layout shift itu occurs during itu entire lifecycle dari a halaman.” (terjemahan) “CLS measures largest burst dari layout shift scores untuk setiap unexpected layout shift itu occurs selama entire lifecycle dari sebuah halaman.” sebuah burst adalah sebuah session window: “satu atau lebih individual layout shifts occur di rapid succession dengan lebih sedikit daripada 1-second di antara setiap shift dan a maximum dari 5 seconds untuk itu total window duration.” (terjemahan) “satu atau lebih individual layout shifts occur di rapid succession dengan lebih sedikit daripada 1-kedua di antara setiap shift dan sebuah maximum dari 5 seconds untuk total window duration.” CLS adalah score dari largest such window — tidak sum, tidak average.

Mengapa perubahan? old sum-semuanya definition diam-diam punished panjang-lived halaman. sebuah single-halaman app atau sebuah infinite-scroll feed accumulated lebih CLS hanya oleh existing lebih lama, bahkan jika setiap individual shift adalah tiny dan well-spaced. Chrome Speed Metrics team moved untuk sebuah maximum session window untuk berhenti penalizing duration, dan chose maximum di atas average untuk hindari sebuah perverse outcome di mana memperbaiki sebuah kecil, sekunder shift dapat membuat Anda score worse. Ketika perubahan rolled out, Tidak origin mendapat sebuah worse score, sebagian besar saw Tidak perubahan, dan sebuah slice dari slow-UI dan infinite-scroll halaman ditingkatkan. jika Anda baca sebuah older post itu masih says “sum dari all shifts,” (terjemahan) “sum dari semua shifts,” ini adalah out dari date.

Apa counts — dan apa tidak

Three exclusions decide apa sebenarnya lands di Anda score:

• Di bawah fold tidak count. hanya shifts dari konten terlihat di saat ini viewport adalah scored. sebuah shift di bottom dari sebuah panjang halaman itu pengguna tidak pernah scrolls untuk memiliki Tidak impact. Practically, ini berarti memperbaiki di-viewport shifts adalah hampir selalu lebih tinggi ROI daripada chasing shifts cara down halaman.
• pengguna-initiated shifts mendapatkan sebuah 500 ms lulus. “Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set, so they can be excluded from calculations.” (terjemahan) “Layout shift yang terjadi dalam 500 milidetik setelah input pengguna akan memiliki flag hadRecentInput yang ditetapkan, sehingga dapat dikecualikan dari perhitungan.” Google’s stance: 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.” (terjemahan) “Pergeseran yang terjadi sebagai respons terhadap interaksi pengguna umumnya wajar selama terjadi cukup dekat dengan interaksi sehingga hubungannya jelas bagi pengguna.” Open sebuah accordion, expand sebuah menu — itu movement adalah yang diharapkan, so ini adalah forgiven.
• tetapi scrolling adalah tidak sebuah free lulus. 500 ms exclusion hanya applies untuk discrete events — tap, click, keypress. Continuous gestures (scrolling, pinch-zoom) melakukan tidak trigger exclusion window. jika konten shifts sementara seseorang scrolls, itu masih counts. ini pembedaan adalah wrong di sebuah lot dari coverage; mendapatkan ini right.

Thresholds, dan di mana score muncul dari

“Untuk sediakan a good user experience, sites seharusnya strive untuk memiliki a CLS score dari 0.1 atau lebih sedikit,” (terjemahan) “untuk menyediakan sebuah baik pengguna experience, situs seharusnya strive untuk memiliki sebuah CLS score dari 0,1 atau lebih sedikit,” diukur di “itu 75th percentile dari halaman loads, segmented across mobile dan desktop devices.” (terjemahan) “ 75th percentile dari halaman memuat, segmented di seluruh mobile dan desktop devices.” penuh bands:

• baik: ≤ 0,1
• perlu improvement: 0,1 – 0,25
• Poor: > 0,25

0,1 line tidak arbitrary. Google’s pengguna research ditemukan itu “levels dari shift dari 0.15 dan lebih tinggi adalah consistently perceived sebagai disruptive, sementara shifts dari 0.1 dan lebih rendah adalah noticeable tetapi tidak excessively disruptive.” (terjemahan) “tingkat dari shift dari 0,15 dan lebih tinggi adalah consistently perceived sebagai disruptive, sementara shifts dari 0,1 dan lebih rendah adalah noticeable tetapi tidak excessively disruptive.” mereka landed pada 0,1 alih-alih sesuatu stricter partly karena ketiga-party embeds (ads, social) so commonly penyebab shifts itu sebuah tighter bar akan menjadi impractical untuk nyata web.

“75th percentile dari field data” (terjemahan) “75th percentile dari data lapangan” bagian adalah muat-bearing, yang brings us untuk biggest pengukuran trap.

Lab vs. field: mengapa angka disagree

ini adalah di mana sebagian besar orang mendapatkan burned. Lighthouse dan lainnya lab alat sering report sebuah CLS near 0,0 sementara data lapangan — dan Google — tampilkan sesuatu banyak worse. kesenjangan tidak either alat menjadi dishonest; ini adalah cakupan. sebuah lab jalankan adalah sebuah single, pendek, scripted pemuatan halaman: ini tidak scroll, tidak click, dan tidak stick sekitar, so ini captures awal-muat shifts hanya. data lapangan (CrUX) aggregates nyata visits di seluruh banyak pengguna, devices, dan navigations di atas sebuah rolling window, dan CLS adalah didefinisikan di atas entire halaman lifecycle — menus opening, lazy konten memuat sebagai pengguna scrolls, late ads filling di, namun panjang session berjalan. sebuah pendek lab jalankan structurally dapat’t see sebagian besar dari itu.

So practical aturan adalah: gunakan data lab untuk debug sebuah spesifik shift, dan data lapangan untuk know Anda nyata score. Google peringkat pada field data dari Chrome pengguna Experience Report (CrUX), surfaced di PageSpeed Insights dan Search Console. jika Lighthouse membaca 0,0 tetapi PageSpeed Insights menampilkan 0,18, treat field angka sebagai satu itu reflects Anda sebenarnya pengguna — lalu go reproduce shift di lab oleh interacting dengan halaman cara sebuah nyata pengunjung akan. Dua lebih cakupan gaps worth knowing: sebagian besar alat, including Lighthouse, jangan propagate iframe layout shifts up untuk parent document’s score bahkan though CrUX dapat reflect them, dan RUM dibangun pada Layout Instability API inherits itu sama iframe blind spot — so Anda own nyata-pengguna monitoring dapat di bawah-jelaskan sebuah CrUX angka itu looks worse daripada apa Anda pertama-party attribution menampilkan.

umum penyebab

di rough order dari bagaimana sering I see them:

1. Images dan video tanpa dimensions. Tidak reserved height berarti semuanya di bawah jumps ketika media memuat.
2. Ads, embeds, dan iframes tanpa reserved space. Ad networks sajikan dynamic sizes; embeds jangan announce mereka height sebelum memuat.
3. Dynamically injected konten di atas existing konten. Cookie banners, notification bars, “related” (terjemahan) “related” widgets, late-memuat promos — apa pun itu pushes down apa sudah pada screen.
4. Web fonts (FOIT/FOUT). Ketika custom font swaps di untuk fallback, text reflows jika mereka metrics differ.
5. Animations pada layout-triggering properties. Animating top, left, margin, box-shadow, atau box-sizing forces browser untuk re-lay-out halaman pada setiap frame.

memperbaiki

setiap perbaiki mirrors -nya penyebab:

• Images/video — reserve space. Set width dan height attributes so browser computes aspect ratio dan holds box; pair dengan img { height: auto; width: 100%; } untuk responsive perilaku, atau gunakan CSS aspect-ratio property. ini adalah single highest-leverage CLS perbaiki pada sebagian besar situs.
• Ads/embeds/iframes — reserve space too. gunakan min-height atau aspect-ratio pada container; untuk ad slots, Google’s Publisher Tag guidance adalah blunt: “Setting a fixed height and width directly on the ad slot div is the most effective way to do this.” (terjemahan) “Menetapkan tinggi dan lebar tetap langsung pada div slot iklan adalah cara paling efektif untuk melakukannya.” untuk multi-size slots, reserve untuk largest configured size. Push late-memuat konten lebih rendah so apa pun residual shift adalah di bawah fold.
• Dynamic konten — jangan insert ke flow. Reserve sebuah placeholder itu matches akhir size, atau overlay konten alih-alih injecting ini. Skeleton loaders hanya help jika mereka match akhir dimensions persis — sebuah skeleton bahkan sebuah sedikit pixels lebih singkat daripada nyata konten masih shifts. Prefer pengguna-triggered memuat (“Load lebih” (terjemahan) “muat lebih”) di atas surprise insertions.
• Fonts — match metrics. font-display: optional adalah satu-satunya nilai dengan effectively zero CLS risk; swap minimizes invisible text tetapi dapat shift pada tukar. Better masih, gunakan CSS metric overrides — size-adjust, ascent-override, descent-override, line-gap-override — untuk size fallback font untuk match web font so tukar adalah seamless. Preload critical fonts.
• Animations — transform hanya. Animate dengan transform (translate, scale, rotate) alih-alih top/left/margin. Transform-based animations adalah composited dan jangan trigger layout, so mereka jangan shift apa pun.

Bagaimana CLS fits ke rankings (pertahankan ini di proportion)

CLS adalah satu input untuk Google’s pengalaman halaman sinyal. Google says Core Web Vitals adalah sesuatu -nya peringkat sistem gunakan — tetapi saat ini Penelusuran documentation tidak publish sebuah tepat CLS weight, sebuah tiebreaker aturan, atau sebuah peringkat jaminan, so treat apa pun spesifik mechanism (including “ini a tiebreaker” (terjemahan) “ini adalah sebuah tiebreaker”) sebagai sebuah berfungsi approximation, tidak sebuah terdokumentasi fact. My standing advice di seluruh semuanya I tulis tentang Core Web Vitals: mendapatkan ke “good” (terjemahan) “baik” band dan move pada. sebagian besar situs tidak akan see sebuah bermakna peringkat atau business lift dari grinding 0,08 down untuk 0,02, dan sebuah single score rarely menjelaskan sebuah revenue atau conversion outcome oleh itself. CLS adalah table stakes — Anda ingin jelas bar, tetapi ini tidak seharusnya become centerpiece dari Anda SEO program di expense dari LCP, INP, atau, frankly, Anda sebenarnya konten.

Dua operational notes itu save sebuah lot dari confusion:

• CrUX lags ~28 days. ini adalah sebuah rolling 28-day window, so sebuah perbaiki Anda ship hari ini tidak akan fully register di PageSpeed Insights atau Search Console untuk weeks. jangan panic ketika angka tidak move berikutnya morning.
• ** attributed element adalah sering tidak root penyebab.** Layout Shift Attribution API tells Anda yang element moved, tetapi sebagai web.dev notes, “ini possible itu ini elements adalah hanya indirectly related untuk itu ‘root penyebab’ dari layout instability.” (terjemahan) “ini adalah mungkin itu ini elements adalah hanya indirectly related untuk ‘root penyebab’ dari layout instability.” text itu jumped adalah biasanya victim dari sebuah unsized image di atas ini memuat late — perbaiki penyebab, tidak symptom. berfungsi ini sebagai sebuah timestamp-untuk-trigger loop: note shift’s mulai time, lalu periksa apa else changed di itu sama window — sebuah network permintaan finishing, sebuah image atau font arriving, sebuah resize, atau sebuah class/style perubahan — dan treat attributed node sebagai sebuah lead, tidak proof, until Anda’ve cocok ini untuk itu trigger.

AI summary

sebuah condensed take pada Advanced versi:

• CLS = visual stability, Core Web Vital untuk unexpected movement dari terlihat konten. ini sits alongside Largest Contentful Paint dan Interaction untuk Berikutnya Paint.
• ini adalah sebuah unitless score, tidak sebuah time. 0,05 adalah sebuah ratio, tidak 50 ms.
• Per-shift formula: impact fraction × distance fraction — bagaimana banyak dari viewport moved, times bagaimana far, relative untuk viewport’s largest dimension.
• ** metric adalah largest session window** (≤ 1 s antara shifts, ≤ 5 s total window) — tidak lifetime sum. itu changed di June 2021 untuk berhenti penalizing panjang-lived/SPA halaman; maximum adalah chosen di atas average.
• Thresholds (75th percentile, data lapangan): baik ≤ 0,1 · perlu improvement ≤ 0,25 · Poor > 0,25.
• Exclusions: di bawah—fold shifts jangan count; shifts di dalam 500 ms dari sebuah discrete input (tap/click/key) adalah excluded — scrolling adalah tidak exempt.
• Penyebab: unsized images/video/ads/iframes/embeds; injected konten di atas existing konten; web fonts; animating layout-triggering properties.
• Memperbaiki: set width/height atau aspect-ratio; reserve space untuk dynamic konten (skeletons harus match tepat dimensions); font-display + size-adjust; animate dengan transform hanya.
• Lab ≠ field. Lighthouse sering membaca near-0 karena ini tidak interact dengan halaman atau jalankan penuh lifecycle; data lapangan (CrUX/PageSpeed Insights) adalah apa Google peringkat pada. Iframe shifts biasanya jangan propagate untuk parent score di lab atau RUM alat.
• peringkat: satu input Google says -nya peringkat sistem gunakan di dalam halaman experience — Tidak terdokumentasi weight atau tiebreaker aturan, so mendapatkan untuk “good” (terjemahan) “baik” dan move pada alih-alih chasing sebuah spesifik mechanism. CrUX lags ~28 days; attributed element adalah sering tidak root penyebab.

Dokumentasi resmi

Utama-sumber documentation dari Google / Chrome team.

Core CLS docs

• Cumulative Layout Shift (CLS) — canonical definition, impact × distance formula, session windows, thresholds, dan hadRecentInput exclusion (Milica Mihajlija dan Philip Walton).
• mengoptimalkan Cumulative Layout Shift — official penyebab-dan-memperbaiki guide: images, ads/embeds, injected konten, fonts, animations.
• Debug layout shifts — finding shifts di Chrome DevTools, Layout Shift Regions overlay, dan LayoutShiftAttribution API (Katie Hempenius dan Barry Pollard).

Background dan pengukuran

• Evolving Cumulative Layout Shift di web tooling — mengapa metric moved dari sum-dari-semua-shifts untuk largest session window di June 2021 (Annie Sullivan dan Hongbo Song, Chrome Speed Metrics Team).
• Bagaimana Core Web Vitals metrics thresholds adalah didefinisikan — pengguna research dan achievability data behind 0,1 / 0,25 bands.
• Getting dimulai dengan measuring Web Vitals — lab vs. data lapangan, dan mengapa lab CLS dapat baca artificially rendah.
• Font best practices — font-display, metric overrides, dan preloading untuk font-related CLS.

Ads dan Penelusuran

• Minimize layout shift — Google Publisher Tag guidance untuk reserving ad-slot space.
• Understanding Core Web Vitals dan Google hasil pencarian — bagaimana CWV (including CLS) factor ke Penelusuran.

Quotes dari sumber

pada—record statements dari Google / Chrome team. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.

Google — apa CLS adalah

• “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.” (terjemahan) “Cumulative Layout Shift (CLS) adalah sebuah stable Core Web Vital metric. ini adalah sebuah penting, pengguna-centric metric untuk measuring visual stability karena ini helps quantify bagaimana sering pengguna experience unexpected layout shifts.” Jump untuk quote
• “CLS measures the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page.” (terjemahan) “CLS measures largest burst dari layout shift scores untuk setiap unexpected layout shift itu occurs selama entire lifecycle dari sebuah halaman.” Jump untuk quote

Google — formula

• “layout shift score = impact fraction * distance fraction” (terjemahan) “layout shift score = impact fraction * distance fraction” Jump untuk quote
• “The impact fraction measures how unstable elements impact the viewport area between two frames.” (terjemahan) “Impact fraction mengukur seberapa besar elemen yang tidak stabil memengaruhi area viewport di antara dua frame.” Jump untuk 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).” (terjemahan) “Distance fraction adalah jarak horizontal atau vertikal terbesar yang ditempuh elemen tidak stabil dalam frame, dibagi dimensi terbesar viewport (lebar atau tinggi, mana pun yang lebih besar).” Jump untuk 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.” (terjemahan) “Burst layout shift, yang disebut session window, terjadi ketika satu atau beberapa layout shift individual terjadi berurutan dengan jeda kurang dari 1 detik dan durasi total maksimum 5 detik.” Jump untuk quote

Google — thresholds dan pengguna 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.” (terjemahan) “Untuk memberikan pengalaman pengguna yang baik, situs sebaiknya berupaya mencapai skor CLS 0,1 atau lebih rendah… ambang yang baik diukur pada persentil ke-75 pemuatan halaman, yang dikelompokkan menurut perangkat seluler dan desktop.” Jump untuk quote
• “Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set, so they can be excluded from calculations.” (terjemahan) “Layout shift yang terjadi dalam 500 milidetik setelah input pengguna akan memiliki flag hadRecentInput yang ditetapkan, sehingga dapat dikecualikan dari perhitungan.” Jump untuk 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.” (terjemahan) “Layout shift sebagai respons terhadap interaksi pengguna umumnya wajar selama terjadi cukup dekat dengan interaksi sehingga hubungannya jelas bagi pengguna.” Jump untuk quote

Google — bagaimana thresholds adalah 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.” (terjemahan) “Level shift mulai 0,15 ke atas secara konsisten dianggap mengganggu, sedangkan shift 0,1 ke bawah terlihat tetapi tidak terlalu mengganggu.” Jump untuk quote

Google — reserving ad-slot space

• “Setting a fixed height and width directly on the ad slot div is the most effective way to do this.” (terjemahan) “Menetapkan tinggi dan lebar tetap langsung pada div slot iklan adalah cara paling efektif untuk melakukannya.” Jump untuk quote

Google — attributed element vs. root penyebab

• “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.” (terjemahan) “Elemen yang tercantum sebagai sumber adalah elemen yang bergeser selama layout shift. Namun, elemen tersebut mungkin hanya berkaitan secara tidak langsung dengan ‘akar penyebab’ ketidakstabilan layout.” Jump untuk quote

CLS penyebab → memperbaiki checklist

berfungsi top-down; pertama dua items perbaiki majority dari dunia nyata CLS.

• setiap <img> dan <video> memiliki width + height (atau sebuah CSS aspect-ratio), dengan img { height: auto; width: 100%; } untuk responsive layouts.
• Ad slots, iframes, dan embeds reserve space melalui min-height / aspect-ratio; multi-size ad slots reserve untuk largest configured size.
• Late-memuat konten sits di bawah fold di mana mungkin, so apa pun residual shift tidak count.
• Injected konten (cookie banners, promos, “related” (terjemahan) “related” widgets) adalah overlaid atau pre-reserved — tidak inserted di atas existing konten.
• Skeleton placeholders match akhir konten’s tepat dimensions (sebuah sedikit pixels off masih shifts).
• Web fonts gunakan font-display: optional di mana acceptable, atau swap plus size-adjust / ascent-override untuk match fallback metrics; critical fonts adalah preloaded.
• Animations gunakan transform hanya — tidak pernah top, left, margin, box-shadow, atau box-sizing.
• Anda’ve diperiksa score di field data (PageSpeed Insights / Penelusuran Console / CrUX), tidak hanya Lighthouse.
• Anda’ve reproduced shifts oleh interacting dengan halaman — scrolling, opening menus, triggering lazy memuat — tidak hanya pada awal muat.
• Ad/iframe shifts verified di lapangan (lab alat sering jangan propagate them untuk parent score).

CLS cheat sheet

** angka**

** definition, di satu line**

• layout shift score = impact fraction × distance fraction (per shift).
• CLS = largest session window dari shifts — ≤ 1 s antara shifts, ≤ 5 s total window. Tidak lifetime sum (itu adalah pre-June-2021).
• ini adalah sebuah unitless score, tidak sebuah time.

apa excluded

• Shifts di bawah fold (tidak di saat ini viewport).
• Shifts di dalam 500 ms dari sebuah discrete input (tap/click/keypress) — hadRecentInput.
• Tidak excluded: shifts selama scrolling atau pinch (continuous gestures).

Penyebab → memperbaiki

pengukuran gotchas

• Lighthouse (lab) sering membaca ~0 — ini tidak interact dengan halaman atau jalankan penuh lifecycle. CrUX / PageSpeed Insights (field) adalah apa Google peringkat pada.
• CrUX lags ~28 days — memperbaiki take weeks untuk tampilkan.
• Iframe shifts biasanya jangan propagate untuk parent score di lab alat.
• attributed element adalah satu itu moved, tidak niscaya root penyebab.

alat untuk measuring dan debugging CLS

data lapangan (apa Google peringkat pada)

• PageSpeed Insights — CrUX field CLS di halaman dan origin tingkat, plus sebuah Lighthouse lab jalankan side oleh side. fastest cara untuk see lab-vs-field kesenjangan untuk yourself.
• Search Console — Core Web Vitals report — per-URL-group field CLS di seluruh Anda seluruh situs, grouped oleh status.
• CrUX (Chrome pengguna Experience Report) — underlying field dataset; explore history melalui CrUX dashboards / BigQuery.

data lab (untuk debugging)

• Chrome DevTools — performa panel — record sebuah trace, lalu baca Layout Shifts track; clicking sebuah shift highlights elements itu moved dan menampilkan shift score. Langsung Metrics menampilkan CLS perbarui di nyata time sebagai Anda interact.
• Layout Shift Regions overlay — DevTools → Settings → Lebih alat → rendering → Layout Shift Regions. Reload dan shifting areas flash so Anda dapat see them.
• Lighthouse — quick lab CLS, tetapi remember ini hanya captures awal-muat shifts.
• WebPageTest — lab CLS dengan filmstrip dan trace.

RUM (Anda own data lapangan)

• web-vitals JavaScript library — onCLS() reports nyata-pengguna CLS dari Anda own pengunjung (~2 KB); paling accurate picture dari apa orang sebenarnya experience.
• PerformanceObserver (layout-shift) — mentah API library wraps, plus LayoutShiftAttribution sources untuk yang elements moved.

Bagaimana alat themselves score

sebuah langsung contoh dari metric ini halaman mendeskripsikan — well-known halaman-speed dan monitoring services diperingkatkan pada mereka own nyata-pengguna mobile CLS (Chrome UX Report data lapangan):

Yang CLS perbaiki seharusnya Anda membuat pertama?

CLS mistakes itu hide nyata masalah

Treating sebuah bersih Lighthouse jalankan sebagai proof

Lighthouse dapat finish sebelum sebuah consent banner, ad, atau interaction-driven shift occurs. gunakan lab jalankan untuk debug, tetapi periksa CrUX atau Anda own nyata-pengguna monitoring sebelum declaring masalah fixed.

Memperbaiki hanya element DevTools says moved

shifted element adalah sering victim. sebuah late-memuat item di atas ini dapat menjadi penyebab. Replay trace dan inspect apa entered atau resized immediately sebelum movement.

Reserving space dengan sebuah guessed fixed height

sebuah fixed placeholder dapat buat kedua shift ketika responsive konten adalah taller atau lebih singkat. gunakan intrinsic dimensions atau aspect-ratio di mana konten’s proportions adalah known.

Animating layout properties

Mengubah top, left, atau margins dapat move sekitarnya konten. Animate dengan transform ketika effect melakukan tidak perlu untuk perubahan document flow.

Diagnose sebuah CLS masalah oleh symptom

Field CLS adalah poor tetapi lab score adalah near zero

mungkin penyebab: shift happens setelah interaction, selama sebuah lebih lama session, atau hanya untuk sebuah subset dari pengguna. Perbaiki: reproduce nyata journey sementara recording performa panel, lalu tambahkan web-vitals attribution di nyata-pengguna monitoring. Konfirmasi: offending interaction dan shifted element muncul di trace atau RUM record.

Text jumps ketika custom font arrives

mungkin penyebab: fallback dan web font gunakan berbeda metrics. Perbaiki: preload hanya critical font di mana appropriate dan match fallback dengan font metric overrides. Konfirmasi: replay dengan cache disabled dan verify itu Layout Shifts track Tidak lebih lama records tukar.

sebuah banner atau ad pushes halaman down

mungkin penyebab: slot memiliki Tidak reserved dimensions sebelum -nya konten arrives. Perbaiki: allocate sebuah stable container atau place message di mana ini melakukan tidak displace terlihat konten. Konfirmasi: throttle muat dan watch slot retain -nya footprint.

CLS improves di testing tetapi tidak di PageSpeed Insights

mungkin penyebab: CrUX adalah sebuah rolling field dataset alih-alih sebuah immediate deployment periksa. Perbaiki: verify perubahan di lab dan RUM pertama, lalu tunggu untuk field window untuk turn di atas. Konfirmasi: Anda own post-rilis field distribution improves sebelum publik CrUX aggregate mengikuti.

Capture layout shifts di browser

Paste ini ke DevTools Console sebelum reproducing masalah. ini ignores shifts tied untuk recent pengguna input dan prints score plus elements browser 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 adalah sebuah lead, tidak automatic proof dari penyebab. Bandingkan -nya timestamp dengan network permintaan, font memuat, dan DOM insertions di yang sama trace.

Prove sebuah CLS perbaiki worked

Reserved-space test

Test untuk jalankan: disable cache, throttle connection, reload, dan record performa panel Layout Shifts track. Yang diharapkan hasil: media atau embed mempertahankan yang sama footprint sebelum dan setelah ini memuat. Failure interpretation: -nya container masih bergantung pada late konten untuk dimensions. Monitoring window: immediate di trace. Rollback trigger: baru placeholder membuat clipping, excess blank space, atau sebuah baru shift di sebuah responsive breakpoint.

Font-tukar test

Test untuk jalankan: reload dengan cache disabled sementara watching text dan Layout Shifts track. Yang diharapkan hasil: fallback-untuk-web-font transition membuat Tidak measurable shift. Failure interpretation: fallback metrics masih differ atau critical font arrives too late. Monitoring window: immediate di repeated lab berjalan. Rollback trigger: perubahan hides text lebih lama atau membuat akhir typography materially wrong.

Field konfirmasi

Test untuk jalankan: bandingkan post-rilis onCLS() data untuk changed template dengan -nya pre-rilis baseline, lalu watch CrUX. Yang diharapkan hasil: nyata-pengguna p75 improves tanpa sebuah worse tail pada key journeys. Failure interpretation: lainnya late atau interaction-driven sumber tetap. Monitoring window: RUM sebagai traffic arrives; CrUX di atas -nya 28-day rolling window. Rollback trigger: CLS atau pengguna interaction errors worsen consistently setelah rilis.

CLS metrics worth tracking

nyata-pengguna CLS di p75

Metric: 75th-percentile CLS untuk setiap penting template dan device class. Apa ini tells Anda: apakah sebagian besar visits memenuhi visual-stability target. cara pull ini: CrUX, PageSpeed Insights, atau web-vitals RUM. Benchmark / realistic range: baik adalah 0,1 atau lebih sedikit; 0,1–0,25 perlu improvement; di atas 0,25 adalah poor. Cadence: monitor releases di RUM dan review rolling field trend monthly.

Poor-visit rate

Metric: share dari nyata visits dengan CLS di atas 0,25. Apa ini tells Anda: apakah sebuah acceptable p75 hides sebuah damaging tail. cara pull ini: bucket Anda onCLS() events oleh template dan journey. Benchmark / realistic range: establish sebuah situs baseline dan drive poor bucket down; traffic mix membuat sebuah universal target misleading. Cadence: weekly untuk tinggi-traffic templates dan setelah layout releases.

Shift attribution oleh penyebab

Metric: layout-shift entries grouped oleh element atau component. Apa ini tells Anda: yang recurring implementation owns paling instability. cara pull ini: attribution bangun dari web-vitals atau PerformanceObserver. Benchmark / realistic range: Tidak universal range; bandingkan components oleh total impact dan affected visits. Cadence: review dengan setiap template atau component rilis.

Resources worth Anda time

Official, secara mendalam

• Cumulative Layout Shift (CLS) — canonical reference.
• mengoptimalkan Cumulative Layout Shift — official perbaiki guide.
• Debug layout shifts — DevTools workflow.
• Evolving Cumulative Layout Shift di web tooling — June 2021 session-window perubahan, dijelaskan oleh team itu dibuat ini.

dari practitioners

• cara Perbaiki Cumulative Layout Shift (CLS) Issues — Barry Pollard, Smashing Magazine. Goes deep pada font descriptors dan “itu element itu shifted tidak itu root penyebab” (terjemahan) “ element itu shifted tidak root penyebab” masalah.
• Cumulative Layout Shift dalam praktik — Nic Jansma (Cloudflare; W3C Web performa WG). best tulis-up dari pengukuran nuances: iframe attribution gaps, 5-element attribution sample, dan alat-untuk-alat discrepancies.
• mengukur dan mengoptimalkan Cumulative Layout Shift — DebugBear.
• Hampir-Menyelesaikan Guide untuk Cumulative Layout Shift — Jess Peck. Thorough treatment dari edge cases including SPA navigation shifts dan continuous-gesture exclusion nuances.
• Layout shift culprits — Chrome DevTools documentation pada CLS culprit insight panel — berguna companion untuk web.dev debug guide.
• cara Perbaiki Cumulative Layout Shift (CLS) — Kinsta. Practical CMS-focused walkthrough covering WordPress-spesifik penyebab (gallery images, late-memuat widgets, cookie banners).
• Layout Instability API — WICG spec. underlying browser API CLS adalah dibangun pada; berguna jika Anda’re membangun custom RUM atau perlu tepat hadRecentInput semantics.

Di mana ini fits di my own berfungsi

• CLS menampilkan up sebagai sebuah “table stakes” (terjemahan) “table stakes” metric di seluruh my Core Web Vitals coverage — track ini, mendapatkan ke baik band, dan pertahankan ini di proportion terhadap LCP, INP, dan Anda konten. Google tidak publish sebuah tepat CLS weight atau tiebreaker aturan, so ini adalah satu input untuk watch, tidak game.

Stats worth citing

• ** 0,1 threshold adalah grounded di perception research.** Google’s pengguna studies ditemukan shifts dari 0,15 dan lebih tinggi adalah consistently perceived sebagai disruptive, sementara 0,1 dan lebih rendah adalah noticeable tetapi tidak excessively so. Sumber
• CLS adalah easiest Core Web Vital untuk lulus. di seluruh my enterprise audits pattern adalah consistent: sebuah besar majority dari situs jelas CLS bar (sering ~80%+), namun hanya sebuah little di atas half lulus semua three vitals together — CLS adalah rarely satu holding Anda back.
• ** June 2021 perubahan helped, tidak pernah hurt.** Ketika CLS moved untuk largest session window, Tidak origin diterima sebuah worse score, sebagian besar saw Tidak perubahan, dan sebuah slice dari infinite-scroll dan slow-UI halaman ditingkatkan. Sumber
• Unsized media adalah masih di mana-mana. Industry melakukan crawl (Web Almanac) consistently temukan sebuah besar share dari halaman shipping images tanpa jelas dimensions — single sebagian besar umum CLS penyebab, dan easiest untuk perbaiki.
• 72% dari situs web globally now achieve baik CLS (2025 Web Almanac / HTTP Archive data), membuat CLS easiest Core Web Vital untuk lulus — namun 62% dari mobile halaman masih ship setidaknya satu image tanpa jelas dimensions, single sebagian besar umum penyebab. Sumber: HTTP Archive / Web Almanac
• Business impact: Rakuten 24 reported sebuah 53,37% increase di revenue per pengunjung untuk pengguna experiencing rendah CLS versus tinggi CLS — sebuah frequently cited case study, tidak evidence itu sebuah diberikan CLS angka penyebab sebuah spesifik business outcome pada lainnya situs. Sumber: corewebvitals.io case studies

Videos

• Google Search Central / Chrome untuk Developers (YouTube) — Core Web Vitals dan Debug layout shifts walkthroughs, including DevTools demos dari Layout Shifts track dan Layout Shift Regions overlay. Channel

Uji pemahaman Anda: Cumulative Layout Shift

Five quick pertanyaan pada measuring dan memperbaiki visual instability. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan