От автора: новая функция Chrome, получившая название «Blink LazyLoad», предназначена для резкого повышения производительности через отложенную загрузку изображений ниже сгиба и сторонних iframe.
Целями этого смелого эксперимента являются улучшение общей скорости рендеринга контента, отображаемого в окне просмотра пользователя (также известного как контент выше сгиба), а также сокращение объема сетевых данных и использования памяти. Ленивая загрузка изображений и iFrame может дать необходимый эффект.
Как это будет работать?
Считается, что временная отсрочка загрузки менее важного контента резко улучшит общую воспринимаемую производительность. Если это предложение будет успешным, автоматическая оптимизация будет выполняться во время фазы загрузки страницы:
Изображения и iFrame будут анализироваться для оценки важности.
Если они считаются несущественными, они будут отложены или вообще не загружены:
—Отложенные элементы будут загружаться только в том случае, если пользователь прокрутил область.
—До тех пор, пока изображение не будет извлечено, будет использоваться пустое изображение заполнителя.
В публичном предложении есть несколько интересных деталей: LazyLoad состоит из двух разных механизмов: LazyImages и LazyFrames.
Отложенные изображения и iFrame будут загружаться, когда пользователь прокручивается страницу в пределах заданного количества пикселей. Количество пикселей будет варьироваться в зависимости от трех факторов:
Когда браузер установит, что изображение расположено ниже сгиба, он выдаст запрос диапазона для извлечения первых нескольких байтов изображения, чтобы установить его размеры. Затем размеры будут использоваться для создания заполнителя.
Атрибут lazyload позволит авторам указывать, какие элементы должны или не должны быть отложены. Вот пример, который указывает, что это содержимое несущественно:
<iframe src="ads.html" lazyload="on"></iframe>
Существует три варианта значений:
on — указывает на возможность отложить извлечение ресурса до тех пор, пока содержимое не будет просмотрено.
off — получить этот ресурс немедленно, независимо от того, что просматривается.
auto — оставить решение на усмотрение браузера (тот же эффект, что и без использования атрибута lazyload).
Реализация безопасной политики LazyLoad
Политика функций: LazyLoad предоставляет механизм, позволяющий авторам принудительно указывать варианты или отключать функционал LazyLoad для каждого домена (подобно тому, как работают Политики безопасности контента). Существует еще один пока не реализованный запрос, который описывает, как это может работать.
Что насчет обратной совместимости?
На данный момент трудно сказать, могут ли эти методы оптимизации страниц вызвать проблемы совместимости для существующих сайтов.
Сторонние iFrame используются для большого количества целей, таких как реклама, аналитика или аутентификация. Откладывание или блокировка загрузки критического iFrame (потому что пользователь никогда не прокручивает страницу далеко) может иметь серьезные непредвиденные последствия. Страницы, которые полагаются на изображение или iFrame, загруженные и присутствующие, когда запускается событие onLoad, также могут столкнуться с серьезными проблемами.
Эти автоматические методы оптимизации могут эффективно ускорять скорость рендеринга Chrome без каких-либо заметных проблем для пользователей. Команда Google, стоящая за предложением, тщательно анализирует характеристики производительности эффектов LazyLoad посредством показателей, которые собирает Chrome.
Включение LazyLoad
На момент написания статьи LazyLoad доступен только в Chrome Canary, с двумя обязательными флагами:
chrome://flags/#enable-lazy-image-loading chrome://flags/#enable-lazy-frame-loading
Флаги можно активировать, перейдя в браузере Chrome к chrome://flags.
В заключение
Когда мы начинаем приветствовать следующий миллиард пользователей в Интернете, смущает то, что мы только начинаем осмысливать сложность работы браузеров, возможности подключения и опыт пользователя.
Автор: Ben Schwarz
Источник: https://css-tricks.com/
Редакция: Команда webformyself.