Как правильно применять атрибут loading="lazy" для оптимизации LCP
Нативная отложенная загрузка изображений на уровне браузера появилась в Chrome 2019 году с введением атрибута loading="lazy". Позже в 2020 году эта функция была добавлена в ядро WordPress версии 5.5. Но в WordPress этот атрибут добавлялся ко всем изображениям, без учета того, отображается ли изображение выше или ниже сгиба (ниже первого экрана, abo…
За материал - спасибо!
Классный пример как доходчиво и наглядно обозначить и разобрать далеко неочевидный нюанс.
"Некоторые плагины для отложенной загрузки изображений позволяют избирательно добавлять атрибуты для изображений на странице. Таким же образом работает и наш плагин для оптимизации изображений True Image & Lazy Load."
Поясните, по возможности, в чем принципиальный + по сравнению, например, с a3 Lazy Load?
Спасибо.
Большинство плагинов lazy load, чтобы отложить загрузку картинок вот так изменяют тег <img>:
<img srs="placeholder.gif" srcset="/moya-kartinka.jpg 1x" />
Наш плагин изменяет:
<img srs="/moya-kartinka.jpg" srcset="placeholder.gif 1x" />
Так как Google бот при анализе страницы "смотрит" атрибут src, то в 1ом случае он "видит" на странице только заглушки placeholder.gif
А во 2ом случае - реально картинки.
Об этой проблеме уже писал здесь https://vc.ru/seo/169540-kak-lazy-load-ubivaet-vashi-sayty-i-chto-s-etim-delat
А вот пример как должно работать Как правильно реализовать Lazy Load изображений на сайте