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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

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

«Эффективный тип соединения»

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Включение LazyLoad

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

Флаги можно активировать, перейдя в браузере Chrome к chrome://flags.

В заключение

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

Автор: Ben Schwarz

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Станьте современным верстальщиком с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree