Cumulative Layout Shift: як наладзіць - Hosta Blanca Вэб-хостынг

Cumulative Layout Shift (CLS) - гэта найважнейшы паказчык прадукцыйнасці, які вымярае, колькі змесціва зрушваецца або перамяшчаецца на вэб-старонцы падчас яе загрузкі. Гэты рух можа выклікаць расчараванне ў карыстальнікаў, бо яны могуць выпадкова націснуць на няправільныя элементы або страціць сваё месца на старонцы. Google таксама нядаўна абвясціў, што CLS стане фактарам ранжыравання ў маі 2021 года, што робіць для ўладальнікаў вэб-сайтаў больш важным, чым калі-небудзь, аптымізаваць свае старонкі для гэтага паказчыка. У гэтым артыкуле мы абмяркуем, што такое CLS, як ён уплывае на карыстацкі досвед і SEO, а таксама лепшыя спосабы наладзіць CLS для павышэння прадукцыйнасці вашага сайта.

Што такое Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) - гэта паказчык, які вымярае, наколькі зрушваецца макет старонкі падчас яе загрузкі. Гэты зрух можа быць выкліканы рознымі фактарамі, у тым ліку выявамі і відэа, якія загружаюцца са спазненнем, або элементамі, памер якіх дынамічна змяняецца па меры загрузкі старонкі. CLS разлічваецца шляхам множання адлегласці, на якую перамясціўся элемент макета, на яго памер. Затым сумаванне гэтых значэнняў для ўсіх зрухаў макета, якія адбываюцца падчас загрузкі старонкі. Вынікам з'яўляецца адзнака ад 0 да 1, прычым меншая адзнака азначае меншы зрух макета.

Чаму CLS важны?

Cumulative Layout Shift з'яўляецца важным паказчыкам па дзвюх асноўных прычынах: карыстацкі досвед і SEO. З пункту гледжання карыстацкага досведу, старонка з высокім CLS можа выклікаць расчараванне і заблытанасць у карыстальнікаў. Калі элементы на старонцы нечакана рухаюцца або зрушваюцца, карыстальнікі могуць страціць сваё месца на старонцы або выпадкова націснуць не тыя элементы. Гэта можа прывесці да дрэннага карыстання і прымусіць карыстальнікаў пакінуць ваш сайт.

З пункту гледжання SEO Google абвясціў, што CLS стане фактарам ранжыравання ў маі 2021 года. Гэта азначае, што старонкі з высокім балам CLS могуць быць аштрафаваны ў рэйтынгу пошуку, у той час як старонкі з нізкім балам CLS могуць павысіцца ў рэйтынгу. Такім чынам, аптымізацыя для CLS мае вырашальнае значэнне, калі вы хочаце палепшыць бачнасць вашага сайта ў пошукавых сістэмах.

Як вымераць Cumulative Layout Shift?

Каб вымераць Cumulative Layout Shift на сваім вэб-сайце вы можаце выкарыстоўваць інструмент Google PageSpeed Insights або Chrome DevTools. Абодва інструменты дадуць вам адзнаку ад 0 да 1, а таксама разбіўку прычын любых зрухаў макета, якія адбыліся падчас загрузкі старонкі. Вы таксама можаце выкарыстоўваць такі інструмент, як WebPageTest, для вымярэння CLS і іншых паказчыкаў прадукцыйнасці вашага сайта.

Як наладзіць CLS?

Вось некалькі крокаў, якія вы можаце зрабіць, каб наладзіць CLS:

Аптымізацыя малюнкаў. Вялікія або неаптымізаваныя выявы могуць выклікаць зрухі макета падчас іх загрузкі. Пераканайцеся, што выявы маюць належны памер і сціснуты, каб паменшыць іх уплыў на CLS.
Выкарыстоўвайце суадносіны бакоў для медыяэлементаў. Калі вы выкарыстоўваеце суадносіны бакоў для выявы або відэа, браўзер ведае, колькі месца яны зоймуць, перш чым загрузіцца. Гэта можа дапамагчы прадухіліць зрухі макета, выкліканыя медыяэлементамі.
Зарэзервуйце месца для рэкламы і ўбудоўванняў: рэклама і ўбудаванні часта загружаюцца асінхронна, што можа выклікаць зрухі макета. Зарэзерваваўшы для іх месца ў макеце, вы можаце прадухіліць гэтыя зрухі.
Пазбягайце дынамічна ўстаўлянага кантэнту. Кантэнт, які ўстаўляецца на старонку пасля яе загрузкі, напрыклад, усплывальныя вокны або вокны чата, можа выклікаць зрухі макета. Старайцеся пазбягаць выкарыстання такога тыпу кантэнту. Пераканайцеся, што ён загружаны такім чынам, каб гэта не паўплывала на макет.
Загружаць шрыфты асінхронна. Калі вы выкарыстоўваеце карыстальніцкія шрыфты на сваім сайце, іх асінхронная загрузка можа дапамагчы прадухіліць зрухі макета, выкліканыя загрузкай шрыфтоў.
Выкарыстоўвайце праграму папярэдняй загрузкі. Папярэдняя загрузка - гэта экран, які з'яўляецца падчас загрузкі вашага сайта. Гэта можа дапамагчы прадухіліць зрухі макета, даючы карыстальніку што-небудзь паглядзець падчас загрузкі старонкі.

Прымаючы гэтыя меры, вы можаце дапамагчы паменшыць уплыў змены макета на вашым сайце і палепшыць карыстацкі досвед. Мы рэкамендуем Hosta Blanca віртуальны хостынг or VPS сервер для вашых вэб-праектаў.