Top.Mail.Ru
Ответы

Почему loading lazy (ленивая загрузка) не работает?

Чтобы программа PageSpeed дала много очков веб сайту. Одно из правил в HTML5 нужно использовать семантические теги, а в теге IMG советуют ставить аттрибут loading="lazy", т.е. так:

1
<img src="picture1.webp" loading="lazy" alt="картинка">

Я знаю что по правилам нужно вообще-то так, просто иногда меня поддевают специально:

12345678
<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 и сжато, и картинок нет для дизайна, то сайт грузится очень быстро.



Видео по теме