Сукупний зсув макета (CLS)

Кумулятивне зміщення макета вимірює візуальну нестабільність, кількісно визначаючи, скільки видимого контенту несподівано переміщується протягом життя сторінки. Це один з основних показників веб-показників Google, і на відміну від показників завантаження та реагування, це безодиничний бал, а не тривалість, розрахований на основі частки області перегляду, на яку вплинуло зміщення, та відстані переміщення контенту. Опублікований Google поріг 0.1 або менше вважає його хорошим на рівні сімдесят п'ятого процентиля реального користувацького досвіду.

Поведінка, яку він фіксує, знайома кожному, хто намагався натиснути на посилання, але над ним завантажувалася реклама, яка переміщала сторінку вниз, або почав читати абзац, який підстрибував, коли веб-шрифт замінювався. Окрім подразнення, практичним наслідком є ​​неправильні кліки: переміщення контенту між моментом, коли користувач вирішує натиснути, і моментом, коли він це робить, призводить до неправильної дії, що в комерційному або банківському інтерфейсі може означати неправильну покупку, неправильне видалення або ненавмисну ​​навігацію.

Причини добре задокументовані та здебільшого їх легко запобігти. Зображення та відео без чітко визначених розмірів спричиняють перекомпонування під час завантаження, оскільки браузер не може заздалегідь зарезервувати правильний простір. Реклама, вбудовування та iframe, вставлені в потік без зарезервованого контейнера, зміщують контент вниз. Веб-шрифти, що замінюються з резервного варіанту з різними метриками, перекомпоновують текст. Контент, динамічно вставлений поверх існуючого контенту, такого як банери, сповіщення та повідомлення про згоду, зміщує все, що знаходиться нижче. Анімації, які змінюють властивості макета, а не трансформують та змінюють непрозорість, запускають перекомпонування на кожному кадрі.

Відповідні виправлення є одними з найдешевших, доступних у сфері продуктивності. Встановлення атрибутів ширини та висоти або співвідношення сторін для медіафайлів резервує місце перед завантаженням. Виділення фіксованих контейнерів для реклами та вбудовування запобігає витісненню контенту вставкою. Зіставлення метрик резервного шрифту з веб-шрифтом та використання відповідних стратегій завантаження шрифтів зменшує перекомпонування під час заміни. Вставка динамічного контенту під згин або в накладання, а не над існуючим контентом, дозволяє уникнути найбільш деструктивної категорії. Анімація лише трансформації та непрозорості утримує рух поза траєкторією макета.

Вимірювання вимагає уваги до сеансу, а не лише до завантаження сторінки. Метрика накопичується протягом усього життя сторінки, включаючи зміни, що відбуваються під час прокручування та взаємодії, а це означає, що сторінка, яка має високі оцінки при початковому завантаженні, все ще може мати низькі загальної оцінки через лінивий завантажений контент, який надходить без зарезервованого простору. Зміни, що відбуваються протягом короткого вікна після взаємодії з користувачем, виключаються, оскільки переміщення контенту у відповідь на навмисну ​​дію є очікуваним, а не руйнівним.

Повідомлення про згоду та рекламні банери заслуговують на особливу увагу, оскільки вони вставляються пізно, зазвичай керуються поза основним процесом розробки та часто витісняють контент. Банер, який з'являється у верхній частині документа після рендерингу, зміщує все вниз саме в той момент, коли відвідувач починає читати або тягнеться за посиланням. Представлення таких елементів, як накладання, які не беруть участі в макеті, або резервування місця для них перед рендерингом вирішує проблему без їх видалення. Оскільки ці компоненти часто налаштовуються маркетинговими або юридичними командами за допомогою сторонніх інструментів, виправлення зазвичай вимагає обговорення між функціями, а не лише зміни коду.

Оскільки причини зазвичай криються в шаблонах, рекламних інтеграціях та вбудовуваннях третіх сторін, а не в окремому компоненті, усунення проблем, як правило, вимагає координації між командами, відповідальними за кожен з них. На практиці це стандартна практика. веб-продуктивність робота, і це одна з областей, де зв'язок з комерційними результатами є найбільш прямим, оскільки нестабільність макета на сторінці продукту або оформлення замовлення призводить до помилкових натискань та відмови, що UX аудит проявляться як проблеми з зручністю використання, без обов'язкового визначення їхньої основної технічної причини.