Το CLS συμβαίνει όταν ορατό περιεχόμενο μετακινείται αφού έχει ήδη γίνει paint, μετατοπίζοντας αυτό που κοιτούσε ο χρήστης. Η αιτία είναι σχεδόν πάντα περιεχόμενο που φορτώνει χωρίς δεσμευμένο χώρο.
Το CLS συμβαίνει όταν ορατό περιεχόμενο μετακινείται αφού έχει ήδη γίνει paint, μετατοπίζοντας αυτό που κοιτούσε ο χρήστης. Η αιτία είναι σχεδόν πάντα περιεχόμενο που φορτώνει χωρίς δεσμευμένο χώρο.
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: η δέσμευση χώρου εξαρχής σημαίνει ότι ο browser δεν χρειάζεται ποτέ να κάνει reflow, γι' αυτό το transform υπερτερεί του animation του top.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά