Продолжаю делать мелкие фиксы и потихоньку перевожу небольшие участки в документации API EVE Online.

Сегодня занимался фиксами Cumulative Layout Shift (CLS). Суть её в том, что в некоторых случаях после загрузки страницы в браузере недогрузившиеся картинки занимают нулевую высоту, а когда они всё-таки загружаются, то резко сдвигают вниз всё, что под ними находится. Например, ты только собрался нажать какую-то кнопку, как вдруг где-то сверху догрузилась картинка, и кнопка уехала вниз, и тебе нужно опять прокручивать до неё. Ты прокрутил, а всерху ещё одна картинка догрузилась, и всё снова сдвинулось вниз. В некоторых случаях такие вещи могут сильно раздражать. Поисковики обращают внимание на такие вещи и снижают подобным страницам рейтинг.

Суть фикса состоит в том, что нужно просто для каждой картинки в HTML задавать атрибуты `width` и `height`. Я раньше опасался задавать высоту и ширину из-за того, что часто картинки должны подстраиваться под ширину экрана, и у меня было стойкое ощущение, что если я задам ширину и высоту, то картинка перестанет быть адаптируемой. Но, на самом деле, есть возможность сохранить адаптивность картинок и при этом указывать фиксированную высоту и ширину.

Во-первых, большинство браузеров сейчас воспринимают ширину/высоту не только как указание на ширину и высоту, но и как источник того, какое у картинки соотношение сторон. Далее, если браузер видит, что нужно поменять ширину картнки, он, ориентируясь на это соотношение, подстраивает и высоту тоже. Дополнительно, в CSS для картинки можно устанавливать `height: auto;` — это тоже сообщит браузеру, что не нужно искажать пропорции картинки.

Итого, сегодня поправил CLS где-то на паре тысяч страниц. В некоторых местах правки частичные, так как нужно ещё содержимое постов перепроверить вручную, но, всё-таки, большую часть проблем с CLS удалось решить, и, заодно, получил новые знания на эту тему.

---

Спасибо, что дочитали. Не забывайте ставить лайки и делиться с друзьями ссылками на пост, если он вам оказался полезным.