Почему loading lazy (ленивая загрузка) не работает?
Чтобы программа PageSpeed дала много очков веб сайту. Одно из правил в HTML5 нужно использовать семантические теги, а в теге IMG советуют ставить аттрибут loading="lazy", т.е. так:
<img src="picture1.webp" loading="lazy" alt="картинка">Я знаю что по правилам нужно вообще-то так, просто иногда меня поддевают специально:
<figure>
<picture>
<source srcset="picture1.webp" type="image/webp">
<source srcset="picture1.jpg" type="image/jpeg">
<img src="picture1.jpg" loading="lazy" alt="картинка">
</picture>
<figcaption>Это картинка</figcaption>
</figure>Но почему-то мне кажется не работает ленивая загрузка.
Аттрибута loading="lazy" потому сделана, чтобы не кодить. Мне что-то неохото делать на JavaScript свою ленивую загрузку. Код я знаю ленивой загрузки на JavaScript, я уже делал, библиотеки какие-то не хочу использовать, всё должно быть компактно и чтобы сайт загружался очень быстро, я всегда делаю очень компактные сайты, чтобы сайт моментально загрузился. Аттрибуту loading="lazy" выбераю только потому, чтобы как раз загружалось изображение только тогда, когда человек прокрутит сайт до нужного места где должно отобразиться изображение. А если не делать ленивую загрузку, то веб браузер будет обращаться ко всем картинкам параллельно, короче PageSpeed снизит очки сайту.
На сайте будут картинки для
Допустим мой последний сайт - мобильная версия загружается за 0.9 секунд, а весрия для ПК за 0.4 секунды, для мобильной версии PageSpeed даёт 97%, для ПК PageSpeed даёт 100%. И SEO 92% для мобильной версии и ПК. Это потому-что я делаю по новым правилам, и CSS сжимаю, для лейаута я не использую картинки вообще а использую CSS3, допустим где нужно закруглённо, там использую border-radius, если тень то использую box-shadow или text-shadow, где градиент там использую linear-gradient, если нужно сделать расплывчетый div там использую либо backdrop-filter:blur(2px), или filter:blur(2px). Если нет тяжёлого JavaScript и сжато, и картинок нет для дизайна, то сайт грузится очень быстро.