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

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

Felix Arntz

Rick Viscomi

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

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

Принятие

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

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

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

Корреляционная производительность

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

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

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

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

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

Причинно-следственная связь

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

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

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

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

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

Возможное исправление

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

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

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

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

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

Реализация (:#реализовать)

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

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

Следующий код оценивает самый последний элемент 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});

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

Заключение

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

Фото Фрэнки Лопеса на Unsplash