Зачем нужна ленивая загрузка?
Ленивая загрузка (lazy loading) — это техника, при которой контент (чаще всего изображения) загружается только тогда, когда он попадает в поле зрения пользователя. Это позволяет:
- Ускорить первоначальную загрузку страницы
- Снизить потребление трафика и памяти
- Улучшить метрики Google Core Web Vitals (LCP, FID и др.)
- Повысить удобство для пользователей на слабых устройствах и медленном интернете
В этой статье — простой и эффективный способ реализовать lazy loading на чистом JavaScript без сторонних библиотек.
Как это работает?
Мы используем современный Intersection Observer API, который позволяет отслеживать, когда элемент появляется в области просмотра. Это энергоэффективно и не вызывает «лагов» при прокрутке, в отличие от обработки события scroll.
HTML-разметка
Изображения сначала содержат плейсхолдер (можно использовать маленькое размытое изображение или просто оставить src пустым), а реальный путь к картинке хранится в атрибуте data-src:
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E</svg>"
data-src="путь/к/реальной/картинке.jpg"
alt="Описание изображения"
class="lazy">
Плейсхолдер в src — это 1×1 прозрачный SVG. Он гарантирует, что браузер не будет пытаться загрузить «пустой» src, и при этом изображение не «прыгает» при загрузке.
JavaScript-скрипт ленивой загрузки
Добавьте этот скрипт перед закрывающим тегом </body> или оберните в DOMContentLoaded:
document.addEventListener("DOMContentLoaded", () => {
const lazyImages = document.querySelectorAll("img.lazy");
if ("IntersectionObserver" in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove("lazy");
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
} else {
// Fallback для старых браузеров (например, IE11)
lazyImages.forEach(img => {
img.src = img.dataset.src;
img.classList.remove("lazy");
});
}
});
Почему это работает для SEO и Google?
- Поисковые роботы Google корректно индексируют изображения с
data-src, особенно если указаныaltи семантическое описание. - Первоначальная загрузка страницы становится быстрее — это напрямую влияет на LCP (Largest Contentful Paint).
- Нет внешних зависимостей — скрипт легковесный и не блокирует рендеринг.
Что дальше?
Этот подход можно расширить:
- Ленивая загрузка фоновых изображений (
data-bg) - Отложенная инициализация видео или iframe
- Интеграция с вашей CMS или генератором статических сайтов
Если вы используете PHP, React или другой фреймворк — логика остаётся той же: подставляйте data-src вместо src, а скрипт сам подгрузит картинку в нужный момент.
Заключение
Ленивая загрузка — один из самых простых и эффективных способов ускорить сайт. Реализация на чистом JavaScript занимает меньше 20 строк кода, но даёт ощутимый прирост в производительности и UX. Внедряйте — и ваши пользователи (и Google) скажут вам спасибо.
Есть вопросы или идеи для улучшения? Пишите в комментарии — обсудим!
Комментарии
Пока нет комментариев. Будьте первым!