Очень медленно открывается сайт на смартфоне. Как оптимизировать?

У себя не видел. У меня файлы CSS в хэдере загружаются.  Хотя, конечно, смещение контента возможно в некоторых случаях, но атрибуты размеров иной раз могут только ухудшить ситуацию. Тут "бабушка надвое сказала".

А чего тут интересного? Тем мешают, что приходится уделять больше внимания как минимум двум моментам:
- следить, чтобы проставленные размеры соответствовали пропорциям самой картинки
- не забывать прописывать height: auto при переопределении размеров в файлах стилей.

Вот, кстати, интересная статья по поводу размеров изображений:
https://habr.com/ru/articles/524918/
Если коротко, то автор настоятельно рекомендует указывать атрибуты размеров, но при этом оговаривается, что не всё так просто, приходится прибегать к трюкам и хакам.

На мой взгляд, решение должно быть не шаблонным, а конкретным применительно к конкретному случаю. В любом случае, гуглпэйджспид зря пугает всех без разбора этим моментом.

Так я не про свои сайты. Как сёрфер, чужие сайты. 9 из 10 плясали. И не только бложики, а и бизнесс.

После того, как гугл начал нагибать за это (хоть что-то хорошее от корпорации "добра"), такого почти не осталось.

Тут всё наоборот - нужно сразу готовить картинки нужных пропорций.

Основное, что меня раздражает - необходимость делать лишние действия. И, как отмечено в статье по ссылке, проблема была бы снята, если бы удалось полноценно использовать функцию CSS attr():

aspect-ratio: attr(width) / attr(height);

Но к сожалению, эта технология пока в значительной степени остаётся экспериментальной.

Я не понимаю какие лишние действия с размерами картинок..

Если ты что-то верстаешь - там сразу задаёшь нужные размеры. Как вообще без размеров верстать.

А для адаптива есть медиазапросы и srcset .

Лишние действия - это задавать размеры, которые всё равно переопределяются стилями.

Вот так вот и верстать, не проставляя размеров. Я, к примеру, могу заверстать лого, воткнув демо-картинку. На хрена мне проставлять размеры этой картинки при вёрстке, если заказчик потом пять раз поменяет эту картинку с лого?
Или картинки в новостях: какой смысл там ставить размеры, если контент менеджер заливает всё, что угодно, но размер при выдаче должен быть 100% ширины контента? При этом кое-кто из контентщиков умудряется втыкать размеры инлайн-стилем прямо в теге, и тогда вообще полный отпад получается.

Да хоть 25. Есть же требования к графике. В данном случае к размерам/пропорциям.

Опять же - есть требования к размерам.

А остальное - либо организационная проблема, либо проблема ТЗ/разработчика - "неправильные" картинки нужно резать под нужные размеры и не допускать возможностей прописывания инлайн-стилей.

А смысл как раз в том, чтобы можно было нормально читать,  а не дёргаться от попрыгушек.

Разговор же не про это. Речь идёт про атрибуты:

<img src="image.jpg" alt="" width="600" height="400">

Дык они в визуальном редакторе задаются, а потом из-за этого приходится в файлах CSS втыкать кучу !important.

А если в базе миллионы ДЛЕ миллионы ссылок типа и размеры картинок очень разные.

<img src="image.jpg">

Как в стилях прописать размеры для подгрузки правильной длины структуры если есть ленивая загрузка? Сайт действительно страдает и теряет в скорости и гугл жалуетс на сильное смещение структуры сайта (если правильно понял LCP). Физически для каждого прописывать размеры нереально, ни времени ни возможности нету.

Да, я там не правильно выразил мысль. Конечно размеры прописываются в html. Но в движках этот html генерируется. Хотя и прописать  вручную (в случае простой статики) не не проблема. Единственное что - про srcset не забывать.

А стилями если что и заменяется, то это не абсолютные размеры картинок, а общий макет. Ну что бы всё корректно масштабировалось вне зависимости от абсолютных размеров. Ну или наоборот - не масштабировалось. Тут от задач зависит.

Вот я как раз о том, что не нужно этого делать. Ни задавать в редакторе, ни тем более !important-ы пихать.
Вот это имею ввиду: