В настоящее время некоторые сайты используют так называемую «ленивую загрузку» («Lazy Loading») для ускорения загрузки веб-страниц и сокращения объема данных, отправленных на ваше устройство.

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

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

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

Тем не менее, если вы готовы на жертвы ради быстрой загрузки сайтов, то вот, что вам нужно сделать: установите Chrome Canary, запустите его, а затем найдите и отметьте следующие флажки:

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

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

Google первоначально разработал эту функцию для мобильной версии Chrome, но позже компания решила перенести ее в десктопную версию. Для этого надо проделать дополнительную работу, поскольку такие функции, как «печать» и «сохранение страницы как», требуют от браузера выключения функции ленивой загрузки и отображения всего содержимого страницы перед ее отправкой на принтер или сохранением в качестве PDF-файла.

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

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

“Ленивая загрузка” или Lazy loading — это не новая технология. Она используется некоторыми сайтами в Интернете для ускорения загрузки веб-страниц. Вместо того, чтобы загрузить весь контент сразу, данная техника позволяет загружать некоторые элементы, когда они требуются или незадолго до того, как они потребуются.

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

Lazy loading в Chrome

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

Совет: чтобы проверить текущую версию Chrome введите в адресную строку:

Чтобы включить данную функцию, вы должны использовать последнюю сборку Chrome Canary:

  • Введите в адресную строку Chrome следующий адрес:
  • Включите флаг Enable lazy image loading, чтобы включить отложенную загрузку изображений в Chrome.
  • Введите в адресную строку Chrome следующий адрес:
  • Включите флаг Enable lazy frame loading, чтобы включить отложенную загрузку фреймов в Chrome.
  • Перезапустите браузер Chrome.

В результате Chrome станет загружать изображения и фреймы по мере прокрутки страницы пользователем.

Какие преимущества для пользователей Chrome?

Техника Lazy loading позволяет улучшить время загрузки некоторых страниц за счет блокировки загрузки некоторых элементов при открытии страницы и загрузки их только при прокрутке страницы. В Chrome данная техника применяется только к изображениям и фреймам.

Ленивая загрузка в основном полезна для медленных подключений. На ПК с высокоскоростным подключением к Интернету разницу заметить сложно. Если вы используете слабые каналы доступа (5 Мбит/сек) или меньше, то вы заметите преимущества отложенной загрузки, особенно на страницах с большим количеством изображений и фреймов.

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

Пока неясно, как новая функция будет работать на сайтах, которые уже используют ленивую загрузку. Будет ли нативная функция Chrome отключаться или будут наблюдаться потенциальные конфликты?

Что такое ленивая загрузка? Как включить или отключить его в Firefox и Chrome

Ленивая загрузка , также называемая загрузкой по требованию, — это метод оптимизации онлайн-контента. Этот метод, вместо загрузки всей веб-страницы и ее рендеринга за один раз, загружает и отображает веб-страницу медленно, в битах. Он загружает объект, когда это необходимо. При продолжении прокрутки вниз контент становится доступным для вашего просмотра. Точнее говоря, это практика задержки инициализации ресурсов до тех пор, пока они действительно не потребуются для повышения производительности и экономии системных ресурсов. Есть преимущества Lazy Loading. Например, это позволяет избежать ненужного выполнения кода. WordPress, одна из ведущих веб-платформ для блогов, предлагает решение для отложенной загрузки под названием Infinite Scroll. Однако если вы откроете браузер с несколькими открытыми закрепленными вкладками, содержимое каждой вкладки не будет загружаться до тех пор, пока вы не нажмете на нее. Если вы считаете это поведение неподходящим, попробуйте отключить Lazy Loading. В этой статье рассказывается, как включить или отключить отложенную загрузку в браузере Firefox.

Что такое Ленивый Загрузка изображений

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

Включить или отключить отложенную загрузку в браузере Firefox

Прежде чем продолжить, давайте сначала выясним, поддерживает ли Firefox Lazy Loading или нет. Чтобы найти это, откройте несколько вкладок в Firefox одновременно.

Затем закройте браузер и снова откройте его (восстановление вкладок из предыдущего сеанса). Вы заметите, что вкладка на переднем плане начнет загружаться. Если это происходит, это означает, что для Firefox включена отложенная загрузка. Чтобы отключить это,

Откройте новую вкладку, введите about: config и нажмите клавишу Enter. Когда появится сообщение с предупреждением, нажмите em ‘ и продолжите.

Теперь введите browser.sessionstore.restore в строке поиска и снова нажмите клавишу Enter или выполните поиск вручную browser.sessionstore.restore_on_demand вручную. Когда его увидят, щелкните его правой кнопкой мыши и выберите «Переключить» , чтобы отключить эту функцию.

Отключить или включить отложенную загрузку в браузере Chrome

Чтобы отключить отложенную загрузку в Chrome, вам нужно активировать два флага в Chrome —

  • хром: // флаги/# включить-ленивым-изображения загрузки
  • хром: // флаги/# включить-ленивым-кадр загрузки

После активации флаги откроют страницу флагов с соответствующей настройкой.

Чтобы отключить их, нажмите стрелку раскрывающегося списка рядом с описанными функциями и выберите параметр Отключено . В конце перезапустите Google Chrome, закрыв его вручную, или нажмите кнопку Перезапустить , чтобы перезапустить браузер и позволить изменениям вступить в силу. Аналогично, переключитесь на ‘ Включено ‘, чтобы снова включить отложенную загрузку.

В Chrome появится «ленивая загрузка»

В стабильной версии браузера Google Chrome в скором времени должна появиться новая функция, которую можно активировать и попробовать в действии уже сейчас. Новая опция получила название «ленивая загрузка».

Пока новая функция остается недоступной для большинства пользователей. Но специалисты поделились секретом о том, как в сборке Chrome Canary уже сегодня можно разблокировать новый функционал.

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

Специалисты отмечают, что технология «ленивой загрузки» не новая. Ее уже довольно давно используют разные сайты, которые стремятся ускорить процесс загрузки страниц в браузерах. При этом они стараются сначала загрузить видимую часть страницы, а потом уже все остальное. Например, человек зашел на сайт и захотел прочитать статью, состоящую из нескольких страниц. С помощью «ленивой загрузки» сначала отобразиться все, что находится на первой странице, а потом начнет подгружаться все остальное. Это позволит сократить время загрузки основной видимой части сайта, а в то время, пока пользователь будет знакомиться с содержимым на 1-й странице, ресурс загрузит все, что расположено на остальных.

Новая функция уже появилась в браузере, правда, она пока еще неактивна. Чтобы активировать ее, придется совершить несколько совершенно несложных действий. Для начала у пользователя должна быть установлена самая последняя версия браузера Chrome Canary. Новая функция находится на странице экспериментальных настроек, располагающейся по адресу chrome://flags/. После открытия этой страницы необходимо отыскать функцию #enable-lazy-image-loading и поставить флажок рядом с ней. После этого нужно найти еще одну опцию под названием #enable-lazy-frame-loading и тоже активировать ее. Чтобы изменения вступили в силу, браузер придется перезагрузить.

Пользователям стоит помнить, что эта функция носит экспериментальный характер, поэтому «ленивая загрузка» может работать некорректно.

Новая опция будет полезна тем пользователям. У которых медленный доступ к Интернету либо же тем, кто вынужден экономить трафик.

Глубокое изучение встроенной ленивой загрузки изображений и фреймов

В настоящее время команда Google Chrome разрабатывает и тестирует встроенный в браузер инструмент ленивой загрузки. Ожидается, что он появится в Chrome 76.

Методы, которые использовались до встроенной ленивой загрузки

До сегодняшнего дня нам приходилось использовать JavaScript, чтобы реализовать ленивую загрузку. Большинство JavaScript-библиотек работает следующим образом:

  • Первоначальный ответ HTML на стороне сервера содержит элемент img без атрибута src поэтому браузер не загружает никаких данных. Вместо этого URL-адрес изображения передается с другим. Например, data-src.
  • Затем загружается и выполняется библиотека ленивой загрузки.
  • Библиотека отслеживает поведение пользователя при прокрутке и заставляет браузер загрузить изображение, когда оно вот-вот появится в окне просмотра. Это реализуется путем копирования значения атрибута data-src в ранее пустой атрибут

Данный способ работает успешно. Но он не идеален. Главная его проблема многоэтапность. Реализация способа состоит из трех этапов:

  1. Загрузка первоначального ответа HTML.
  2. Загрузка библиотеки.
  3. Загрузка файл изображения.

Если использовать данный метод для изображений, расположенных выше сгиба, сайт станет мерцать во время загрузки. Так как первоначально сайт загружается без изображения (после первого или второго шага, в зависимости от того, какой режим использует скрипт – defer или async ). И только потом подгружается изображение. Это будет восприниматься пользователями как медленная загрузка.

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

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

В скором времени браузеры на движке Chromium (в том числе и Google Chrome) получат встроенный механизм ленивой загрузки, реализованный в виде нового атрибута loading .

Включаем встроенную ленивую загрузку

Начиная с Google Chrome 75, в браузере можно вручную активировать ленивую загрузку. Для этого:

  1. Перейдите по адресу chrome://flags в Chromium или Chrome Canary.
  2. Введите в поиск « lazy ».
  3. Активируйте параметры «Enable lazy image loading» и «Enable lazy frame loading».
  4. Перезапустите браузер, нажав кнопку, расположенную в правом нижнем углу экрана.

Параметры встроенной ленивой загрузки в Google Chrome

Чтобы проверить, правильно ли подключена данная функция, откройте консоль Java Script ( F12 ). Должно появиться следующее предупреждение:

[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred.

Атрибут loading

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

Обратите внимание на столбец startTim. В нем указывается время, когда загрузка изображения была отложена после парсинга DOM. Возможно, придется выполнить полную перезагрузку (CTRL + Shift + R) для повторного запуска запросов Range.

Значение auto (или значение unset)

Кот в авто загружается автоматически

Если для атрибута loading задано значение auto (или пустое значение), то браузер принимает решение самостоятельно , загружать изображение с помощью ленивой загрузки или нет. При этом браузер учитывает множество факторов: тип платформы, включен ли режим Data Saver, условия сети, размер изображения, значение свойства CSS display и другие.

Значение eager

Стремительный кот загружается мгновенно

Значение eager говорит браузеру, что изображение должно быть загружено немедленно . Если прежде загрузка была отложена (например, если было установлено значение lazy , а потом JavaScript заменил его на eager ), то браузер должен немедленно загрузить изображение.

Значение lazy

Ленивый кот загружается лениво

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

Принцип работы атрибута loading

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

Событие load запускается, как только загружается полное изображение после первого запроса (для изображений размером менее 2 КБ) или после второго. Это событие может не запускаться для определенных изображений, из-за того, что не выполняется второй запрос.

Возможно, в будущем браузеры будут делать в два раза больше запросов на изображения. Сначала запрос Range, затем запрос целиком.

Убедитесь, что ваши серверы поддерживают HTTP-заголовок Range : 0-2047 и ответьте кодом состояния 206 («Частичный контент»), чтобы исключить доставку полноразмерного изображения дважды.

Поговорим об отложенном контенте. Движок рендеринга Chrome Blink определяет, загрузку какого контента и на какой срок следует отложить. Полный список требований можно найти в документации . Ниже приводится краткое описание ресурсов, загрузка которых может быть отложена:

  • Изображения и фреймы на всех платформах, на которых установлено loading=»lazy».
  • Изображения на Chrome для Android, где включен Data Saver и которые удовлетворяют следующим требованиям:
    • loading=»auto» или значение unset;
    • атрибуты width и height больше 10px;
    • не созданы программно с помощью JavaScript.
  • Фреймы, которые удовлетворяют следующим требованиям:
    • loading=»auto» или значение unset;
    • из стороннего источника (домен или протокол, который отличается от тех, что были на странице встраивания);
    • если высота и ширина превышает 4 пикселя (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
    • если для фреймов не установлено display: none или visibility: hidden (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
    • если они не расположены за границами экрана из-за отрицательных координат x или

Отзывчивые изображения с srcset

Встроенная ленивая загрузка также работает с отзывчивыми элементами img с использованием атрибута srcset. Этот атрибут предлагает браузеру список различных версий файлов изображения. Браузер выберет оптимальное изображение в зависимости от размера экрана устройства пользователя, соотношения пикселей экрана, состояния сети и т. д.

Оптимизация с помощью CDN позволяет предоставить все версии изображений в режиме реального времени.

Поддержка в браузере

На момент написания этой статьи ни один браузер не поддерживает встроенную загрузку по умолчанию. Тем не менее, Google включит эту функцию в Chrome 77. Разработчики других браузеров до сих пор не объявляли о поддержке встроенной ленивой загрузки . Edge – это исключение, потому что скоро он переключится на Chromium.

Поддержку данной функции можно обнаружить с помощью нескольких строк JavaScript:

Встроенная ленивая загрузка поддерживается браузерами, созданными на базе движка Chromium, начиная с версии 75.

Метод с заполнителем для изображений низкого качества

Полезная особенность большинства библиотек ленивой загрузки – это заполнитель для изображений низкого качества (LQIP – от английского Low-Quality Image Placeholder).

Браузеры загружают (вернее сказать, раньше загружали) атрибут src элемента img немедленно, даже если впоследствии его заменят другим URL-адресом. Поэтому можно загрузить файл небольшого размера (изображение низкого качества), а затем заменить его полноразмерной версией.

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

Ленивый код загружается лениво

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

Если браузер не поддерживает встроенную ленивую загрузку, он загружает библиотеку lazysizes и устанавливает в атрибут src элемента img заполнитель изображения низкого качества, размер которого также составляет около 2 КБ. Затем он загружает полноразмерное изображение.

Встроенная ленивая загрузка с диапазоном запросов в 2 КБ не работает из Codepen. Однако все заработает, если скопировать код в пустой файл HTML и запустить на вашем компьютере.

Заключение

Только представьте: самый популярный в мире браузер будет загружать изображения и фреймы ниже сгиба по умолчанию. Благодаря этому сайты будут передавать меньше данных. Кроме этого многие отслеживающие пиксели и фреймы не будут загружаться. А оптимизация изображений с помощью CDN может помочь при возникновении каких-либо проблем.

Данная публикация представляет собой перевод статьи « A Deep Dive into Native Lazy-Loading for Images and Frames » , подготовленной дружной командой проекта Интернет-технологии.ру

В Chrome появится «ленивая загрузка»

В стабильной версии браузера Google Chrome в скором времени должна появиться новая функция, которую можно активировать и попробовать в действии уже сейчас. Новая опция получила название «ленивая загрузка».

Пока новая функция остается недоступной для большинства пользователей. Но специалисты поделились секретом о том, как в сборке Chrome Canary уже сегодня можно разблокировать новый функционал.

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

Специалисты отмечают, что технология «ленивой загрузки» не новая. Ее уже довольно давно используют разные сайты, которые стремятся ускорить процесс загрузки страниц в браузерах. При этом они стараются сначала загрузить видимую часть страницы, а потом уже все остальное. Например, человек зашел на сайт и захотел прочитать статью, состоящую из нескольких страниц. С помощью «ленивой загрузки» сначала отобразиться все, что находится на первой странице, а потом начнет подгружаться все остальное. Это позволит сократить время загрузки основной видимой части сайта, а в то время, пока пользователь будет знакомиться с содержимым на 1-й странице, ресурс загрузит все, что расположено на остальных.

Новая функция уже появилась в браузере, правда, она пока еще неактивна. Чтобы активировать ее, придется совершить несколько совершенно несложных действий. Для начала у пользователя должна быть установлена самая последняя версия браузера Chrome Canary. Новая функция находится на странице экспериментальных настроек, располагающейся по адресу chrome://flags/. После открытия этой страницы необходимо отыскать функцию #enable-lazy-image-loading и поставить флажок рядом с ней. После этого нужно найти еще одну опцию под названием #enable-lazy-frame-loading и тоже активировать ее. Чтобы изменения вступили в силу, браузер придется перезагрузить.

Пользователям стоит помнить, что эта функция носит экспериментальный характер, поэтому «ленивая загрузка» может работать некорректно.

Новая опция будет полезна тем пользователям. У которых медленный доступ к Интернету либо же тем, кто вынужден экономить трафик.

Источник: softaltair.ru

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