Рекомендации на основе данных по отложенной загрузке изображений с учетом основных веб-показателей.
Отложенная загрузка — это метод, который откладывает загрузку ресурса до тех пор, пока он не понадобится, чтобы сохранить данные и уменьшить конкуренцию в сети за критически важные ресурсы. В 2019 году он стал веб-стандартом, и сегодня loading="lazy" для изображений поддерживается большинством основных браузеров.
В этом руководстве описывается, как были проанализированы общедоступные данные веб-прозрачности и специальное A/B-тестирование, чтобы понять внедрение и характеристики производительности отложенной загрузки изображений на уровне браузера. Результаты показали, что отложенная загрузка может быть удивительно эффективным инструментом для уменьшения ненужных байтов изображений, но чрезмерное использование может отрицательно повлиять на производительность. В частности, этот анализ показывает, что более активная загрузка изображений в исходном окне просмотра — при более ленивой загрузке остальных — может дать нам лучшее из обоих миров: меньше загружаемых байтов и улучшенные основные веб-показатели .
Принятие
Согласно последним данным HTTP Archive , встроенная отложенная загрузка изображений используется на 29% веб-сайтов, и ее распространение быстро растет.
Запрос необработанных данных в проекте HTTP Archive дает нам более четкое представление о том, какие типы веб-сайтов способствуют распространению: 84% сайтов, использующих отложенную загрузку изображений на уровне браузера, используют WordPress, 2% используют другую CMS, а остальные 14% этого не делают. Использую известную CMS. Эти результаты ясно показывают, насколько WordPress лидирует в распространении.
Стоит также отметить скорость внедрения . Год назад, в июле 2020 года, сайты WordPress, использующие отложенную загрузку, составляли десятки тысяч веб-сайтов в корпусе около 6 миллионов (1% от общего числа). С тех пор распространение ленивой загрузки только в 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 без отложенной загрузки имеет 75-й процентиль LCP, равный 3495 миллисекундам, по сравнению с 3768 миллисекундами для медианной страницы с отложенной загрузкой.
Это еще не доказывает, что отложенная загрузка приводит к замедлению работы страниц, но ее использование действительно приводит к снижению производительности. Чтобы попытаться ответить на вопрос о причинно-следственной связи, был проведен лабораторный A/B-тест.
Причинно-следственная связь
Целью A/B-теста было доказать или опровергнуть гипотезу о том, что встроенная отложенная загрузка изображений, реализованная в ядре WordPress, приводит к снижению производительности LCP и уменьшению количества байтов изображений. Используемая методология заключалась в тестировании демонстрационного веб-сайта WordPress с темой двадцать один . Были протестированы как архивные, так и отдельные типы страниц, которые похожи на домашнюю страницу и страницы статей, на настольных компьютерах и эмулированных мобильных устройствах с помощью WebPageTest . Была протестирована каждая комбинация страниц с включенной отложенной загрузкой и без нее, и каждый тест выполнялся девять раз, чтобы получить среднее значение LCP и количество байтов изображения.
| Ряд | по умолчанию | неполноценный | Отличие от стандартного |
|---|---|---|---|
| двадцатьдвадцать один-архив-рабочий стол | 2029 | 1759 | -13% |
| двадцатьдвадцать один-архив-мобильный | 1657 | 1403 | -15% |
| двадцатьдвадцать один-один рабочий стол | 1655 | 1726 | 4% |
| двадцатьдвадцать один-одиночный мобильный | 1352 | 1384 | 2% |
Эти результаты сравнивают медианное значение LCP в миллисекундах для тестов архива и отдельных страниц для настольных компьютеров и мобильных устройств. Когда на страницах архива была отключена отложенная загрузка, LCP значительно улучшился. Однако на отдельных страницах это имело меньшее значение.
Отключение отложенной загрузки, похоже, делает отдельные страницы немного быстрее. Однако разница в LCP составляет менее одного стандартного отклонения как для настольных, так и для мобильных тестов, поэтому это можно отнести к дисперсии и в целом считать изменение нейтральным. Для сравнения, разница для страниц архива составляет около двух-трех стандартных отклонений.
| Ряд | по умолчанию | неполноценный | Отличие от стандартного |
|---|---|---|---|
| двадцатьдвадцать один-архив-рабочий стол | 577 | 1173 | 103% |
| двадцатьдвадцать один-архив-мобильный | 172 | 378 | 120% |
| двадцатьдвадцать один-один рабочий стол | 301 | 850 | 183% |
| двадцатьдвадцать один-одиночный мобильный | 114 | 378 | 233% |
Эти результаты сравнивают среднее количество байтов изображения (в КБ) для каждого теста. Как и ожидалось, отложенная загрузка оказывает очень явный положительный эффект на уменьшение количества байтов изображения. Если бы реальный пользователь прокручивал всю страницу, все изображения в любом случае загружались бы, когда они попадают в область просмотра, но эти результаты показывают улучшенную производительность начальной загрузки страницы.
Подводя итоги A/B-теста, можно сказать, что метод отложенной загрузки, используемый WordPress, очень явно помогает уменьшить количество байтов изображения за счет задержки LCP.
Тестирование исправления
Наиболее важным аспектом текущей реализации отложенной загрузки WordPress для этого эксперимента является то, что она загружает изображения в области просмотра ( над сгибом ) отложенной загрузкой. В блоге CMS признается , что этого следует избегать, но экспериментальные данные того времени показали, что влияние на LCP было минимальным и стоит упростить реализацию в ядре WordPress.
Учитывая эти новые данные, было создано экспериментальное исправление, позволяющее избежать ленивой загрузки изображений, находящихся над сгибом, и исправление было протестировано в тех же условиях, что и первый A/B-тест.
| Ряд | по умолчанию | неполноценный | исправить | Отличие от стандартного | Отличие от инвалида |
|---|---|---|---|---|---|
| двадцатьдвадцать один-архив-рабочий стол | 2029 | 1759 | 1749 | -14% | -1% |
| двадцатьдвадцать один-архив-мобильный | 1657 | 1403 | 1352 | -18% | -4% |
| двадцатьдвадцать один-один рабочий стол | 1655 | 1726 | 1676 | 1% | -3% |
| двадцатьдвадцать один-одиночный мобильный | 1352 | 1384 | 1342 | -1% | -3% |
Эти результаты гораздо более многообещающие. Отложенная загрузка только изображений ниже сгиба приводит к полному обращению регрессии LCP и, возможно, даже к небольшому улучшению по сравнению с полным отключением отложенной загрузки. Как это может быть быстрее, чем отсутствие ленивой загрузки вообще? Одно из объяснений заключается в том, что, если не загружать изображения ниже сгиба, возникает меньше конфликтов в сети с изображением LCP, что позволяет ему загружаться быстрее.
| Ряд | по умолчанию | неполноценный | исправить | Отличие от стандартного | Отличие от инвалида |
|---|---|---|---|---|---|
| двадцатьдвадцать один-архив-рабочий стол | 577 | 1173 | 577 | 0% | -51% |
| двадцатьдвадцать один-архив-мобильный | 172 | 378 | 172 | 0% | -54% |
| двадцатьдвадцать один-один рабочий стол | 301 | 850 | 301 | 0% | -65% |
| двадцатьдвадцать один-одиночный мобильный | 114 | 378 | 114 | 0% | -70% |
Что касается байтов изображения, исправление не имеет абсолютно никаких изменений по сравнению с поведением по умолчанию. Это здорово, потому что это одна из сильных сторон нынешнего подхода.
Это исправление имеет некоторые оговорки. 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-интерфейсов веб-платформы может быть сопряжено как с риском, так и с вознаграждением — их не зря называют передовыми функциями. Хотя мы начинаем понимать всю сложность ленивой загрузки изображений на уровне браузера, мы также видим и положительные стороны того, как ее использовать для достижения большей производительности.
Фото Фрэнки Лопеса на Unsplash