Основная причина снижения производительности веб-приложений и необходимость отложенной загрузки

В современных веб-приложениях изображения являются одним из ключевых элементов, определяющих пользовательский опыт (UX) и веб-производительность. С увеличением использования изображений высокого разрешения и ростом доли изображения в контенте страницы, замедление загрузки веб-сайта стало неотъемлемой проблемой. Загрузка всех изображений одновременно при начальной загрузке вызывает следующее критическое узкое место в производительности.

  • Увеличение времени начальной загрузки (задержка FCP, LCP): загрузка изображений, находящихся вне области просмотра, значительно задерживает момент, когда пользователь фактически может увидеть контент (First Contentful Paint), и момент загрузки самого большого элемента контента (Largest Contentful Paint). Это также негативно сказывается на показателях Core Web Vitals.

  • Необходимое использование полосы пропускания: расход сетевых ресурсов на изображения, которые пользователь не прокручивает, увеличивает расходы на данные в мобильной среде и мешает загрузке других важных ресурсов в настольной среде из-за ненужных сетевых запросов.

  • Повышенная нагрузка на сервер: одновременные запросы на все изображения создают чрезмерную нагрузку на сервер, что может привести к ухудшению стабильности сервиса.

Одной из самых эффективных стратегий для решения этих проблем является отложенная загрузка изображений. Отложенная загрузка — это технология, при которой вместо загрузки всех изображений при начальной загрузке веб-страницы, изображения загружаются асинхронно, когда они попадают в область просмотра пользователя или достигают критической точки.

Принцип работы и способы применения отложенной загрузки изображений

Есть два основных способа применения отложенной загрузки, и необходимо понимать их преимущества и недостатки, чтобы выбрать тот, который соответствует требованиям проекта.

1. Родная отложенная загрузка браузера (loading="lazy")

Самый простой и в то же время мощный способ — это просто добавить атрибут loading="lazy" в тег HTML <img>. Это поддерживается большинством современных браузеров, и браузер самостоятельно обрабатывает отложенную загрузку оптимальным образом.

<img src="placeholder.jpg"
     data-src="actual-image.jpg"
     alt="Описание изображения"
     loading="lazy"
     width="500"
     height="300">

  • Преимущества:

    • Легкость реализации: его можно применить, просто добавив HTML-атрибут, без необходимости в отдельном JavaScript-коде.

    • Оптимизация производительности: поскольку это реализуется на уровне движка браузера, оно может работать более эффективно и быстрее, чем решения на основе JavaScript.

    • Снижение нагрузки на разработчиков: это обрабатывается самим браузером без необходимости в сложном управлении Intersection Observer API или обработчиками событий.

  • Недостатки:

    • Поддержка браузерами: не все устаревшие браузеры могут поддерживать его полностью. (Тем не менее, большинство современных браузеров поддерживают)

    • Отсутствие тонкой настройки: разработчикам сложно контролировать порог загрузки или стратегию загрузки.

Рекомендации: если специальных требований к контролю нет, лучше сначала применить родную отложенную загрузку.

2. Отложенная загрузка на основе JavaScript (использование Intersection Observer API)

Если требуется более точный контроль или необходимо резервное решение для браузеров, которые не поддерживают loading="lazy", можно реализовать отложенную загрузку на основе JavaScript. Ранее в основном использовался способ с обработкой событий прокрутки, но из-за проблем с производительностью стандартом стало использование Intersection Observer API.

Основная логика реализации:

  1. Изначально задается Placeholder изображение в атрибуте src или сохраняется URL реального изображения в атрибуте data-src.

  2. Создается экземпляр Intersection Observer и наблюдаются элементы изображения.

  3. Когда элементы изображения входят в область просмотра или достигают установленного порога, вызывается обратный вызов наблюдателя.

  4. Внутри обратного вызова фактический URL изображения, сохраненный в data-src, перемещается в атрибут src, и изображение загружается.

  5. После завершения загрузки изображения наблюдение за этим элементом останавливается (unobserve).

// HTML (пример)
// <img class="lazyload" data-src="actual-image.jpg" alt="Описание">

// JavaScript
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    // lazyImage.srcset = lazyImage.dataset.srcset; // если нужно и srcset
                    lazyImage.classList.remove("lazyload");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        }, {
            // Root Margin: область предзагрузки изображений от краев области просмотра (px или %)
            // Пример: "0px 0px 200px 0px" означает предзагрузку на 200px вниз
            rootMargin: "0px 0px 200px 0px"
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Резервное решение для браузеров, которые не поддерживают IntersectionObserver
        // (например, использовать обработчики событий прокрутки или загружать все изображения сразу)
        // Этот вариант не рекомендуется для производительности, поэтому стоит учесть ключевые браузеры
        lazyImages.forEach(function(lazyImage) {
            lazyImage.src = lazyImage.dataset.src;
        });
    }
});

  • Популярные библиотеки для отложенной загрузки на JavaScript:

    • lazysizes: очень легкая, SEO-дружественная библиотека, поддерживающая различные форматы изображений, включая srcset и picture. Может использоваться как резервное решение для родной отложенной загрузки.

    • lozad.js: предлагает маленький размер пакета и высокую производительность.

Соображения и советы по оптимизации при применении отложенной загрузки

Отложенная загрузка — это мощная технология оптимизации производительности, но не следует применять ее бездумно ко всем изображениям, так как это может ухудшить пользовательский опыт.

  1. Управление изображениями «над сгибом»: Не следует применять отложенную загрузку к изображениям, которые сразу видимы на начальном экране (Above the Fold). Эти изображения напрямую влияют на Largest Contentful Paint (LCP) страницы, поэтому их следует загружать немедленно, указав loading="eager" или исключив из отложенной загрузки.
<img src="logo.png" alt="Логотип компании" width="100" height="50" loading="eager">

Анализ разбивки LCP

  1. Указание атрибутов width и height: необходимо явно указывать width и height изображений в HTML, чтобы предотвратить сдвиг макета (Cumulative Layout Shift, CLS). Это позволяет браузеру заранее выделить пространство для изображения до его загрузки, предотвращая появление колебаний макета во время загрузки. Это критически важно для повышения оценки Core Web Vitals.

  2. Использование изображений-заполнителей: для снижения визуальных пробелов для пользователей до загрузки изображений, которые подлежат отложенной загрузке, рекомендуется использовать размытие или заполнители с фоновым цветом. Это сигнализирует пользователю о том, что страница загружается.

  3. Использование srcset и <picture>: использование адаптивных изображений (srcset) и арт-дирекции (picture) вместе с отложенной загрузкой позволяет предоставлять изображения, оптимизированные для различных размеров экранов и разрешений, сокращая ненужные загрузки изображений.

<picture>
    <source srcset="image-large.webp" type="image/webp" media="(min-width: 1200px)" loading="lazy">
    <source srcset="image-medium.webp" type="image/webp" media="(min-width: 768px)" loading="lazy">
    <img src="placeholder.jpg" data-src="image-small.jpg" alt="Описание" loading="lazy">
</picture>

Оценка производительности Lighthouse

Заключение: отложенная загрузка как способ достичь производительности и пользовательского опыта

Отложенная загрузка изображений — это не просто задержка загрузки изображений; это необходимая техника веб-оптимизации, которая значительно улучшает начальную производительность загрузки веб-страниц, оптимизирует использование полосы пропускания и снижает нагрузку на сервер. С увеличением важности таких показателей производительности, как Core Web Vitals, стратегическое применение отложенной загрузки стало необходимым вопросом для разработчиков.

Рекомендуется в первую очередь рассмотреть родную отложенную загрузку, но в случае необходимости более тонкого контроля или поддержки конкретной среды браузера следует также рассмотреть реализации на основе JavaScript с использованием Intersection Observer API или библиотек. Кроме того, с применением советов по оптимизации, таких как управление изображениями «над сгибом», указание width/height, использование заполнителей и так далее, вы сможете обеспечить пользователям быстрый и комфортный веб-опыт.