Почему PageSpeed не реагирует на ленивую подгрузку?

Question

[Pipop]

Добрый день. Есть каталог товаров: https://leofashion.ru/for-women/
Для ленивой подгрузки использую плагин lazysizes. При проверке действительно грузит webp, но изначально jpg тоже. Сам PageSpeed не видит ни новый формат (webp), ни саму ленивую подгрузку — советует исправить. Подскажите, пожалуйста, в чем проблема, может, кто-нибудь сталкивался?

Answer 1

[lamer350]

Потому что это все работает у вас не так как нужно.
lazyload должен был удалить на беке src для img, если посмотреть исходный код страницы у вас видно src="/content/catalog/catalog_E19GSANTOS_-BEIOFW)-1.jpg", грузится и сама картинка, и видно же что здесь .jpg
Правильная настройка плагина будет тогда когда у всех img не будет src в коде на фронте, src должен генерировать плагин lazyload и подставлять в DOM

Comments

[Pipop]

Спасибо за ответ.
Тоже было предположение, что проблема в этом, однако и в доке написано про data-src у img в теге picture: https://github.com/aFarkas/lazysizes

[lamer350]

Pipop, data-src и src это разные теги же. Браузер автоматически подгружает src при рендинге страницы, а data-src подхватывает плагин осле рендинга страницы. Я вам не предположения выдвинул, а констатировал факт проблемы.

[Pipop]

lamer350, Вы были правы. Изначально в разметке был src. Большое спасибо

Answer 2

[alexbeglov1989]

Еще достаточно важный пункт по ускорению - оптимизация и сжатие картинок на сайте. Можно оптимизировать вручную каждую картинку (через Photoshop к примеру), можно автоматически (через специальные сервисы). Вот интересная статья на эту тему: https://pr-cy.ru/news/p/6831-kak-i-zachem-optimizi...