CLS (по-известен като Cumulative Layout Shift) е един от важните показатели за скорост на един сайт. Наложен от Google и включен като измерител в Pagespeed Insights, CLS измерва нестабилността на съдържанието чрез сумиране на резултатите от разместванията/преместванията на оформлението, които не се случват в рамките на 500 ms след наличие на user input.
Той проверява колко видимо съдържание се е изместило във viewport-а, както и разстоянието, на което са изместени засегнатите елементи. Казано по-кратко – Cumulative Layout Shift изисква да няма прекалено големи промени по екрана при зареждане на дадено съдържание.
И тук стигаме до елементите, които предизвикват най-често CLS изместване – изображенията!
В днешно време е важно всеки сайт да има responsive design. Така се гарантира на посетителите, че той ще е наличен и ще е подходящ за употреба на всяко едно устройство, без значение от размера на неговия екран.
За съжаление адаптивният дизайн предполага възможност за високи стойности на CLS при картинките. Това се случва поради най-често използваните стойности за CSS width (широчина), а именно 100%. Това на практика казва на браузъра да зареди изображението в оригиналния му размер и след това да го разпъне спрямо широчината на елемента, в който то трябва да се покаже, заемайки цялата тази широчина.
И ако това е важно за дизайна на сайта, то се отразява зле над метриките за Cumulative Layout Shift. Причината е, че изображението ще променя своите размери докато страницата зарежда и това ще става при всяко нейно презареждане.
Ето защо трябва да се подходи така, че да не се предизвиква излишно разместване и оразмеряване на картинките и снимките на всяка страница от сайта. За целта трябва да се въведат няколко промени, касаещи изображенията.
Всяко изображение трябва да бъде съобразено с елемента, в който ще е налично!
За целта трябва да подготвиш различни версии на всяка снимка и картинка, които да пасват на елемента, в който ще се намира тя, спрямо резолюцията, на която ще я зареждаш.
След това трябва да предвидиш начин за промяна на основното изображение с някоя от версиите в зависимост от резолюцията на устройството, на което се зарежда сайта.
Вариантите тук са:
- Използване на Srcset
- Използване на Picture елемент със специфични sources
- Смяна посредством CSS
- Смяна чрез Javascript
Научи повече за тези опции, в частност първите две от този линк, където има предоставени примери и обяснения за процеса на обработка на изображенията при зареждане спрямо браузъра и устройството.
В WordPress можеш да се възползваш от информацията за генериране на такива версии на изображения (наричани миниатюри) от урок № 47.
Намаляване на CLS чрез изрични размери за широчина и височина на изображенията:
След като вече имаш миниатюри (версии на изображението подходящи за различните резолюции) и сайтът ти знае кое изображение да зареди и кога, сега следва да лимитираш оразмеряването на картинките при зареждането им.
Това се постига чрез предоставяне на максимални размери за широчина и височина в пиксели посредством атрибутите width и height.
Тук трябва да се кажат две неща. Първо тази практика беше използвана много често преди ерата на responsive сайтовете. После беше забравена и широчината (в частност) се определяше само на ниво CSS. И второ – според Google това е много добра практика, която ще попречи на голям Cumulative Layout Shift.
Сега логичният въпрос е как да направиш това. Много лесно! Просто в img елемента, преди затварянето на тагът добави width = X и height = Y, като X и Y са числови стойности в пиксели (без да посочваш мерната единица).
Пример за img елемент с тези атрибути е следният:
<img src="kartinka.jpg" width="619" height="330" alt="Примерна картинка" />И финално можеш да зададеш следното в CSS за всички изображения на сайта ти:
img {
aspect-ratio: attr(width) / attr(height);
}Това изчислява съотношение на страните въз основа на атрибутите широчина и височина, преди изображението да се зареди. Тази информация става налична в самото начало на изчислението на оформлението. Веднага след като изображението се определи с конкретна широчина (например широчина: 100%), пропорцията се използва за изчисляване на височината.
С това този пост приключва. Разбира се все още е валидно да оптимизираш снимките и картинките на твоя сайт, както и да използваш съвременни формати за изображения. Комбинацията от всички тези дейности следва да се отрази благоприятно над скоростта на сайта, а конкретно предложенията от този пост следва да намалят Cumulative Layout Shift.
