Как слишком частое использование отложенной загрузки влияет на производительность

Советы по отложенной загрузке изображений с учетом показателей Core Web Vitals.

Felix Arntz

Rick Viscomi

Отложенная загрузка – это метод, который откладывает скачивание ресурса до тех пор, пока он не понадобится. Это позволяет экономить трафик и снижать нагрузку на сеть при загрузке критически важных ресурсов. В 2019 году он стал веб-стандартом, и сегодня атрибут loading="lazy" для изображений поддерживается большинством основных браузеров.

В этом руководстве рассказывается, как мы анализировали общедоступные данные о прозрачности веб-страниц и результаты A/B-тестирования, чтобы понять, как часто используется отложенная загрузка изображений на уровне браузера и как она влияет на производительность. В частности, было установлено, что отложенная загрузка может быть невероятно эффективным инструментом для сокращения ненужных байтов изображений, но чрезмерное использование может негативно повлиять на производительность. В частности, этот анализ показывает, что более активная загрузка изображений в начальной области просмотра и отложенная загрузка остальных изображений могут дать нам лучшее из обоих миров: меньшее количество загруженных байтов и улучшенные Core Web Vitals.

Усыновление и удочерение

Согласно последним данным в HTTP Archive, встроенная отложенная загрузка изображений используется на 29% сайтов, и этот показатель быстро растет.

Запрос первичных данных в проекте HTTP Archive дает нам более четкое представление о том, какие типы веб-сайтов способствуют внедрению: 84% сайтов, использующих отложенную загрузку изображений на уровне браузера, используют WordPress, 2% используют другую CMS, а остальные 14% не используют известную CMS. Эти результаты ясно показывают, что WordPress лидирует по внедрению.

Также стоит отметить скорость внедрения. Год назад, в июле 2020 года, сайты WordPress, использующие отложенную загрузку, составляли десятки тысяч сайтов в корпусе из примерно 6 миллионов (1% от общего числа). Только на платформе WordPress отложенная загрузка используется более чем на миллионе сайтов (14% от общего числа).

Корреляционная эффективность

Более глубокий анализ HTTP Archive позволяет сравнить эффективность страниц с отложенной загрузкой изображений на уровне браузера и без нее по показателю Largest Contentful Paint (LCP). Данные LCP поступают из отчета Chrome User Experience Report (CrUX), а не из синтетических тестов в лаборатории. На следующей диаграмме с усами показано распределение 75-го процентиля LCP для каждой страницы. Линии обозначают 10-й и 90-й процентили, а прямоугольники – 25-й и 75-й процентили.

Для медианной страницы без отложенной загрузки 75-й процентиль LCP составляет 2922 мс, а для медианной страницы с отложенной загрузкой – 3546 мс. В целом сайты, на которых используется отложенная загрузка, обычно имеют более низкую производительность LCP.

Важно отметить, что это корреляционные результаты, и они не обязательно указывают на то, что отложенная загрузка является причиной снижения производительности. Гипотетически, если сайты WordPress, как правило, работают немного медленнее, и учитывая, какую долю они составляют в когорте отложенной загрузки, это могло бы объяснить разницу. Чтобы устранить эту вариативность, можно сосредоточиться на сайтах WordPress.

К сожалению, та же закономерность наблюдается и при детальном анализе страниц WordPress: те, на которых используется отложенная загрузка, как правило, имеют более низкую производительность LCP. Для медианной страницы WordPress без отложенной загрузки показатель LCP в 75-м процентиле составляет 3495 мс, а для медианной страницы с отложенной загрузкой – 3768 мс.

Это не доказывает, что отложенная загрузка вызывает замедление страниц, но ее использование совпадает с более низкой производительностью. Чтобы ответить на вопрос о причинно-следственной связи, было проведено лабораторное A/B-тестирование.

Эффективность причинно-следственных связей

Целью A/B-тестирования было доказать или опровергнуть гипотезу о том, что встроенная отложенная загрузка изображений, реализованная в ядре WordPress, приводит к снижению производительности LCP и уменьшению количества байтов изображений. Для тестирования использовался демосайт WordPress с темой twentytwentyone. С помощью инструмента WebPageTest были протестированы страницы обоих типов (архивные и отдельные, которые похожи на главные страницы и страницы статей) на компьютерах и эмулированных мобильных устройствах. Каждая комбинация страниц с включенной и отключенной отложенной загрузкой была протестирована, и каждый тест был запущен девять раз, чтобы получить медианное значение LCP и количество байтов изображения.

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

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

В этих результатах сравнивается среднее количество байтов изображений (в КБ) для каждого теста. Как и ожидалось, отложенная загрузка позволяет значительно сократить объем передаваемых данных. Если бы реальный пользователь прокрутил страницу до конца, все изображения загрузились бы по мере их появления в области просмотра. Однако результаты теста показывают, что скорость загрузки страницы в целом увеличилась.

Подводя итоги A/B-тестирования, можно сказать, что метод отложенной загрузки, используемый WordPress, явно помогает уменьшить размер изображений за счет задержки LCP.

Тестирование исправления

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

С учетом этих новых данных было создано экспериментальное исправление, которое позволяет избежать отложенной загрузки изображений, находящихся в верхней части страницы. Это исправление было протестировано в тех же условиях, что и первый A/B-тест.

Эти результаты гораздо более многообещающие. Если же отложить загрузку только тех изображений, которые находятся в нижней части страницы, то регрессия LCP будет полностью устранена и, возможно, даже будет наблюдаться небольшое улучшение по сравнению с полным отключением отложенной загрузки. Как это может быть быстрее, чем вообще не использовать отложенную загрузку? Одно из объяснений заключается в том, что при отсутствии загрузки изображений в нижней части страницы возникает меньше конфликтов в сети с изображением LCP, что позволяет загружать его быстрее.

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

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

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

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

Реализация

Теперь, когда мы определили лучший способ отложенной загрузки изображений, который позволяет экономить трафик и улучшать LCP, как сайты могут начать его использовать? Самое важное изменение – отправить исправление в ядро WordPress, чтобы реализовать экспериментальное исправление. Рекомендации в записи блога Отложенная загрузка на уровне браузера для CMS также будут обновлены, чтобы разъяснить негативные последствия отложенной загрузки в верхней части страницы и то, как CMS могут использовать эвристику, чтобы избежать этого.

Поскольку эти рекомендации применимы ко всем веб-разработчикам, возможно, стоит также отмечать антипаттерны отложенной загрузки в таких инструментах, как Lighthouse. Если вы хотите следить за ходом этой проверки, ознакомьтесь с запросом на добавление функции на GitHub. А пока разработчики могут находить элементы LCP, загружаемые с задержкой, добавляя более подробные записи в полевые данные.

new PerformanceObserver((list) => {
  const latestEntry = list.getEntries().at(-1);

  if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
    console.warn('Warning: LCP element was lazy loaded', latestEntry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Приведенный выше фрагмент кода JavaScript оценивает последний элемент LCP и регистрирует предупреждение, если он был загружен с задержкой.

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

Заключение

Если на вашем сайте используется отложенная загрузка изображений на уровне браузера, проверьте, как она реализована, и проведите A/B-тестирование, чтобы лучше понять, как она влияет на производительность. Возможно, стоит ускорить загрузку изображений в верхней части страницы. Если у вас сайт на WordPress, то в скором времени в ядро WordPress будет добавлен патч. Если вы используете другую CMS, убедитесь, что ее разработчики знают о возможных проблемах с производительностью, описанных в этой статье.

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