Нужно оптимизировать какую-нибудь стандартную страницу.
На странице небольшой набор изображений, текст, шрифты, стили, скрипты.
Что pagespeed, что lighthouse выдают низкую скорость. Причина в основном в изображениях.
Например такая ошибка:
Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.
Или такая:
Serve images that are appropriately-sized to save cellular data and improve load time.
Использую
lazysizes - v5.3.2 который как раз рекомендует Lighthouse
<img data-src="image.jpg" class="lazyload" />
Что с ним, что без него Performance score не улучшается.
То же и по loading="lazy" , улучшения не значительные + нет поддержки для сафари.
Влияет ли вообще lazyload на производительность или что-то не так использую?
Еще пробую вариант с
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
но этот вариант тоже не дает особых улучшений + очень неудобно - нужно создавать картинки в нескольких разрешениях.
Вот такой еще вариант со страницы
modpagespeed.com пример с lazyload_images.
lighthouse выдает и по before странице и по after - Performance score: около 62% .
Помогает старое доброе сжатие картинок ресурсами вроде
tinypng
Кто, что использует и кому что действительно помогает в оптимизации картинок и скорости страницы, как дотянуть до зеленой зоны Perfomance score в Lighthouse?
Простой
