0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

ПЕРЕВОД Браузерная ленивая загрузка изображений (атрибут loading)

Содержание

[ПЕРЕВОД] Браузерная ленивая загрузка изображений (атрибут loading)

  • Новости 1С-Битрикс
  • Полезные статьи

Поддержка встроенной ленивой загрузки изображений и iframe пришла в веб!
Начиная с Chrome 76 версии, вы можете использовать новый атрибут loading для ленивой загрузки ресурсов без необходимости писать для этого дополнительный код или использовать стороннюю JavaScript-библиотеку. Давайте рассмотрим детали.

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

Это видео демонстрирует пример этой функции:

Почему встроенная ленивая загрузка?

Согласно HTTPArchive, изображения являются наиболее востребованным типом ресурсов на большинстве сайтов и обычно отнимают больше пропускной способности канала, чем любые другие. На 90-м процентиле, сайты отправляют около 4.7 МБ изображений на десктопы и мобильные устройства. Достаточно много фотографий с кошками.

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

В данный момент существует два способа отложить загрузку изображений и фреймов, расположенных за пределами экрана:

  • использование Intersection Observer API
  • использование обработчиков событий scroll , resize или orientationchange

Любой из вариантов может позволить разработчикам включить функционал отложенной загрузки, и многие создали сторонние библиотеки, чтобы предоставить абстракции, которые использовать еще проще. При наличии поддержки ленивой загрузки непосредственно в браузере, не возникнет потребности в сторонней библиотеке. Встроенная ленивая загрузка также гарантирует, что отложенная загрузка изображений и фреймов продолжит работать, даже если JavaScript отключен на стороне клиента.

CSS, JS и HTML

Все современные фреймворки в процессе сборки оптимизируют ваш код (code-splittiong, tree shaking, minification и др.). Что ещё можно придумать?

Читать еще:  Как восстановить закрытые вкладки в Google Chrome

Оптимизация основной HTML-страницы

HTML-документ — это скелет почти всех веб-приложений. При работе с ссылками на внешние ресурсы стоит придерживаться нескольких советов:

  • Помещайте ссылки на CSS вверху HTML-документа для ускорения загрузки страницы.
    Прим. перев. Есть более оптимальные способы ускорения загрузки, например вынесение критичного css в тег style , а для оставшихся стилей (обязательно соберите их в один файл с помощью какого-либо сборщика фронтенда) применять предварительную загрузку или отправлять их с помощью http/2 Server Push;
  • Размещайте JS-скрипты внизу страницы. Это предотвращает блокировку рендеринга страницы тегами

Вопросы и ответы

Зачем нужен атрибут loading?

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

Зачастую множество изображений на странице находятся за пределами так называемого первого экрана пользователя. Атрибут loading позволяет загружать такие изображения по требованию.

Как проверить поддерживается ли атрибут в браузере?

Проверка поддержки атрибута проводится посредством анализа HTMLImageElement.prototype.

Для проверки достаточно открыть ссылку с кодом для анализа.

Каким образом рассчитывается момент для загрузки изображений по требованию?

За момент загрузки изображений отвечает движок браузера пользователя.

Браузер получает весь код страницы и выстраивает очередь загрузки из всех элементов.

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

Система организации ленивой загрузки в браузере основана не только на близости элемента к видимой области на устройстве, но и на скорости соединения с интернетом.

Итак, если для изображений и/или фреймов установлен атрибут loading=auto, то для выбора момента загрузки элементов браузер будет использовать такие данные:

  • Близость элемента к видимой части;
  • Скорость соединение с интернетом.

Пороговые значения для срабатывания ленивой загрузки в отношении скорости соединения с интернетом заданы в исходном коде браузера Chrome.

Как браузер узнает о размере изображений?

Браузер загружает первые 2 килобайта из файла картинки. В таких данных хранятся значения размера картинки.

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

Как включить поддержку атрибута в Google Chrome до глобального релиза?

Любой пользователь Google Chrome может включить/выключить поддержку нового атрибута уже сейчас, до глобального релиза.

Подобная пригодится для тестирования.

Для включения/выключения достаточно открыть chrome://flags/ и активировать значение Enable lazy image loading.

В каких случаях атрибут lazy=loading использовать не следует?

Не следует использовать ленивую загрузку в случае, если по элементам собираются аналитические данные. Если отслеживаются показы в видимой части, то не следует использовать lazy loading для блоков такой рекламы.

Какие браузеры будут поддерживать атрибут?

В перспективе атрибут loading будет поддерживаться всеми популярными браузерами. Такая поддержка стала возможна по причине использования общих стандартов.

В перспективе такие браузеры будут поддерживать атрибут loading=lazy:

  • Chrome;
  • Chrome Android;
  • Opera;
  • Microsoft Edge;
  • Safari;
  • iOS Safari.

Как провести настройку CSS фоновых изображений

Загрузка фоновых изображений CSS требует создания DOM и дерева CSSOM. Это требуется, чтобы определить конкретные задачи по работе с текущим документом. Что это значит на практике? В случае, когда CSS фонового документа изображения к данному документу не применяется, то браузер его и не загрузит. Таким образом, если не применить CSS «background-image» к конкретному элементу до того момента, как он попадёт в зону видимости, браузер и подозревать не будет о его существовании.

Скрипты остаются такими же, но есть нюансы именно в работе CSS. Потребуется найти элементы «bg-image». Как только к «background-image» добавляется «lazy», его требуется изменить на «none». В CSS комбинация использующая «lazy» имеет приоритет выше, нежели просто «background-image». Соответственно, ко всем элементам в которых произведена замена на «none», браузер применит опцию изначально.

В момент, когда изображение попадёт в окно просмотра, браузер автоматически удалит класс «lazy-none» и фоновое изображение начнёт загружаться.

Возможности модуля:

  • можно выбрать, к каким изображениям применять отложенную загрузку: изображениям продуктов, изображениям баннеров, изображениям в описаниях (товаров, категорий и т.д), и зображениям в smarty/html блоках, другим изображениям;
  • можно отложить загрузку всех изображений. В этом случае страница загружается без изображений, а все изображения загружаются по истечении времени задержки;
  • поддерживаются как вертикальная, так и горизонтальная прокрутка, поэтому отложенная загрузка работает и для блоков с горизонтальной прокруткой.
  • можно установить “порог для загрузки изображений”, чтобы изображения загружались раньше. Например, установка порога на 100 заставляет изображение загружаться за 100 пикселей до появления на экране.

Поддержка:

Подробнее о модуле и его установке читайте в документации .

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

Обновления:

Бесплатный доступ к обновлениям на 6 месяцев.

Нативная ленивая загрузка изображений для Интернета

Дата публикации: 2018-09-18

От автора: новая функция Chrome, получившая название «Blink LazyLoad», предназначена для резкого повышения производительности через отложенную загрузку изображений ниже сгиба и сторонних iframe.

Целями этого смелого эксперимента являются улучшение общей скорости рендеринга контента, отображаемого в окне просмотра пользователя (также известного как контент выше сгиба), а также сокращение объема сетевых данных и использования памяти. Ленивая загрузка изображений и iFrame может дать необходимый эффект.

Как это будет работать?

Считается, что временная отсрочка загрузки менее важного контента резко улучшит общую воспринимаемую производительность. Если это предложение будет успешным, автоматическая оптимизация будет выполняться во время фазы загрузки страницы:

Изображения и iFrame будут анализироваться для оценки важности.

Если они считаются несущественными, они будут отложены или вообще не загружены:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

—До тех пор, пока изображение не будет извлечено, будет использоваться пустое изображение заполнителя.

В публичном предложении есть несколько интересных деталей: LazyLoad состоит из двух разных механизмов: LazyImages и LazyFrames.

Отложенные изображения и iFrame будут загружаться, когда пользователь прокручивается страницу в пределах заданного количества пикселей. Количество пикселей будет варьироваться в зависимости от трех факторов:

Это iFrame или изображение

Включен или отключен Data Saver

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

Атрибут lazyload позволит авторам указывать, какие элементы должны или не должны быть отложены. Вот пример, который указывает, что это содержимое несущественно:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Существует три варианта значений:

on — указывает на возможность отложить извлечение ресурса до тех пор, пока содержимое не будет просмотрено.

off — получить этот ресурс немедленно, независимо от того, что просматривается.

auto — оставить решение на усмотрение браузера (тот же эффект, что и без использования атрибута lazyload).

Реализация безопасной политики LazyLoad

Политика функций: LazyLoad предоставляет механизм, позволяющий авторам принудительно указывать варианты или отключать функционал LazyLoad для каждого домена (подобно тому, как работают Политики безопасности контента). Существует еще один пока не реализованный запрос, который описывает, как это может работать.

Что насчет обратной совместимости?

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

Сторонние iFrame используются для большого количества целей, таких как реклама, аналитика или аутентификация. Откладывание или блокировка загрузки критического iFrame (потому что пользователь никогда не прокручивает страницу далеко) может иметь серьезные непредвиденные последствия. Страницы, которые полагаются на изображение или iFrame, загруженные и присутствующие, когда запускается событие onLoad, также могут столкнуться с серьезными проблемами.

Эти автоматические методы оптимизации могут эффективно ускорять скорость рендеринга Chrome без каких-либо заметных проблем для пользователей. Команда Google, стоящая за предложением, тщательно анализирует характеристики производительности эффектов LazyLoad посредством показателей, которые собирает Chrome.

Включение LazyLoad

На момент написания статьи LazyLoad доступен только в Chrome Canary, с двумя обязательными флагами:

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector