Да и еще очередная фигня какая-то. Например, изображение размером 55 на 43, именно фактическое у изображения, в img так же прописано width="55" height="43", а Гуглу не нравится Присутствуют изображения с некорректным соотношением сторон и пишет отображаемое ай айс 59 x 43 (1.37) вот откуда он это берет вообще
Ну я вот разместил <link rel="preload" href="/uploads/posts/2025-06/burger.webp" as="image" type="image/webp"> и у изображения дописал fetchpriority="high" и тоже самое, как было Элемент "Отрисовка самого крупного контента"6 110 мс так и осталось или я еще что-то с JS не сделал?
Грузите все фото лениво, после загрузки дом дерева, или первую пикчу легковесную
Не совсем вот это понял сейчас. Я помню что у скриптов например defer пишется, где то пишем preload а что в этой одной картинке дописать тогда чтоб на нее не ругалось? Да и точнее там еще есть картинки но они уже не в скорости а загрузка тех которые нет на страничке на экране и им тоже наверное надо параметр задать чтоб не сразу грузились, вопрос вот как это для изображения делается? А то вес их точно не облегчить итак в web сразу их делал и они образно говоря по паре килобайт всего, меньше некуда.
А вот именно в таком виде помогло! Спасибо! Пошел редактировать!!!! Еще раз спасибо большое за помощь! Но там еще куча других вопросов) Может кто поможет советом? Например: Элемент "Отрисовка самого крупного контента"6 060 мс грузится единственная картинка, формат webp, весит копейки, единственное что она вставлена в слайдер (листании вправо влево) но при этом загрузка именно изображения такое большое(
В данном случае проблема решается очень легко и почему бы это не сделать? Просто добавить атрибуты width и height в тег img. CSS в данном случае имеет второстепенное значение, он применяется уже после начала рендеринга. Задав размеры картинки вы подскажете браузеру сколько места резервировать для нее, чтобы не было скачков контента (CLS).
Я согласен в целом, но не в этом конкретно случае.
Чего то не получается все равно.. Вот вписал в <img width="500" height="249"> это фактические размеры картинки. В стилях для этого класса прописал .sale img {border-radius: 20px;max-width: 100%;} и фиг там изображение вытянулось по высоте и стало растянутое
fetchpriority="high"
Ну я вот разместил <link rel="preload" href="/uploads/posts/2025-06/burger.webp" as="image" type="image/webp"> и у изображения дописал fetchpriority="high" и тоже самое, как было Элемент "Отрисовка самого крупного контента" 6 110 мс так и осталось или я еще что-то с JS не сделал?
Это проблема сайтов самописек.
Сейчас WP + нормальная тема по умолчанию выдает хороший результат. Пример, на странице 26 фото ..
Так у меня не самописка а движок DLE
Грузите все фото лениво, после загрузки дом дерева, или первую пикчу легковесную
Спасибо, загуглил!)
Грузите все фото лениво, после загрузки дом дерева, или первую пикчу легковесную
Не совсем вот это понял сейчас. Я помню что у скриптов например defer пишется, где то пишем preload а что в этой одной картинке дописать тогда чтоб на нее не ругалось? Да и точнее там еще есть картинки но они уже не в скорости а загрузка тех которые нет на страничке на экране и им тоже наверное надо параметр задать чтоб не сразу грузились, вопрос вот как это для изображения делается? А то вес их точно не облегчить итак в web сразу их делал и они образно говоря по паре килобайт всего, меньше некуда.
<img src="image.jpg" width="800" height="600" style="width: 100%; height: auto;">
А вот именно в таком виде помогло! Спасибо! Пошел редактировать!!!! Еще раз спасибо большое за помощь! Но там еще куча других вопросов) Может кто поможет советом? Например: Элемент "Отрисовка самого крупного контента" 6 060 мс грузится единственная картинка, формат webp, весит копейки, единственное что она вставлена в слайдер (листании вправо влево) но при этом загрузка именно изображения такое большое(
В данном случае проблема решается очень легко и почему бы это не сделать? Просто добавить атрибуты width и height в тег img. CSS в данном случае имеет второстепенное значение, он применяется уже после начала рендеринга. Задав размеры картинки вы подскажете браузеру сколько места резервировать для нее, чтобы не было скачков контента (CLS).
Задаю размеры и изображение едет по высоте!!!
Я согласен в целом, но не в этом конкретно случае.
Чего то не получается все равно.. Вот вписал в <img width="500" height="249"> это фактические размеры картинки. В стилях для этого класса прописал .sale img {border-radius: 20px;max-width: 100%;} и фиг там изображение вытянулось по высоте и стало растянутое
Ширину и высоту ставьте как у реальной картинки, у нее же есть эти параметры?
Сейчас вот попробую таким способом
Забить по возможности
Судя по всему как раз и придется это сделать по итогу. Дебилизм на дебилизме а speed page 😡