CLS ხდება, როცა ხილული შიგთავსი გადაადგილდება მას შემდეგ, რაც უკვე დაიხატა, და წევს იმას, რასაც მომხმარებელი უყურებდა. მიზეზი თითქმის ყოველთვის არის შიგთავსი, რომელიც იტვირთება დათმობილი ადგილის გარეშე.
CLS ხდება, როცა ხილული შიგთავსი გადაადგილდება მას შემდეგ, რაც უკვე დაიხატა, და წევს იმას, რასაც მომხმარებელი უყურებდა. მიზეზი თითქმის ყოველთვის არის შიგთავსი, რომელიც იტვირთება დათმობილი ადგილის გარეშე.
top, height) transform-ის ნაცვლად.width/height (ან aspect-ratio), რომ ადგილი დაიტოვოს ჩატვირთვამდე:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserves the box -->
.hero { aspect-ratio: 16 / 9; } /* reserves ratio for responsive media */
font-display: optional ან swap პლუს size-adjust/preload reflow-ის შესამცირებლად, როცა web font ჩამოვა.position: absolute) ან ქვევიდან უბიძგე.transform/opacity-ით — ისინი composited-ია და layout-ს არ იწვევენ.CLS არის ყველაზე გამოსასწორებელი Core Web Vital — ჩვეულებრივ ის მხოლოდ რამდენიმე გამოტოვებული ზომაა. ინტერვიუერები მას იყენებენ, რომ შეამოწმონ, გესმის თუ არა render pipeline: ადგილის წინასწარ დათმობა ნიშნავს, რომ ბრაუზერს არასდროს უწევს reflow, რის გამოც transform სჯობს top-ის ანიმაციას.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა