ленивая загрузка сессии браузера что это
Ленивая загрузка изображений средствами браузера
Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов и loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.
Если вам не терпится узнать о том, как использование нового атрибута выглядит в коде, то взгляните на этот пример:
Предварительные сведения
Веб-страницы часто включают в себя множество изображений, что влияет на размер страниц, приводит к его чрезмерному увеличению, и влияет на скорость загрузки страниц. Многие из изображений, выводимых на страницах, находятся за пределами их видимой области. Для того чтобы увидеть подобные изображения, пользователю нужно прокрутить страницу.
Исторически сложилось так, что для того чтобы ограничить воздействие на время загрузки страниц изображений, расположенных за пределами видимой области страниц, программистам приходилось использовать JavaScript-библиотеки (вроде LazySizes). Эти библиотеки позволяют отложить загрузку подобных изображений до того момента, когда пользователь, прокручивая страницу, не подберётся к ним достаточно близко.
Страница, загружающая 211 изображений. Версия страницы, при создании которой ленивая загрузка изображений не используется, сразу загружает 10 Мб графических данных. Та же страница, использующая ленивую загрузку (с помощью LazySizes) предварительно загружает лишь 250 Кб графической информации. Всё остальное подгружается по мере продвижения пользователя по странице. Подробности об этом эксперименте можно посмотреть на webpagetest.org.
Атрибут loading
В настоящее время работа над атрибутом loading для элементов и ведётся в рамках стандарта HTML
Примеры
Надо отметить, что мы используем тут формулировки наподобие следующей: «когда пользователь прокрутит страницу так, что её видимая область окажется поблизости от элемента». Точный момент начала загрузки изображения браузер определяет самостоятельно. В целом мы можем надеяться на то, что браузер начнёт загрузку материалов, загрузка которых была отложена, за некоторое время до того, как область страницы, содержащая их, окажется видимой пользователю. Это увеличит шансы того, что загрузка и вывод соответствующих материалов завершатся к тому моменту, когда пользователь их увидит.
Проверка поддержки атрибута loading браузерами
Кросс-браузерная ленивая загрузка изображения
Если важна кросс-браузерная поддержка ленивой загрузки изображений, тогда недостаточно просто определить то, поддерживает ли браузер эту возможность, и, если это не так, воспользоваться соответствующей библиотекой, если при описании изображения в разметке используется конструкция наподобие 
.
Вот пример того, как это может выглядеть:
Рассмотрим некоторые особенности этого кода:
Демонстрационный пример
Тут можно посмотреть на пример страницы, на которой выполняется ленивая загрузка 100 изображений кошек. А вот, если интересно, видео загрузки этой страницы.
Особенности реализации поддержки атрибута loading в Chrome
Мы настоятельно рекомендуем, прежде чем пользоваться атрибутом loading в продакшне, дождаться появления его поддержки в стабильном релизе Chrome. Если же вам не терпится испытать эту возможность, тогда, возможно, вам будет интересно то, о чём мы сейчас поговорим.
Испытание атрибута loading
Настройки браузера
Реализация методики ленивой загрузки материалов в Chrome основана не только на том, насколько близко видимая область страницы находится к этим материалам, но и на скорости соединения. Пороговые значения срабатывания ленивой загрузки материалов для разных скоростей соединения жёстко заданы в коде, но эти значения можно переопределить средствами командной строки. Вот пример переопределения настроек для изображений:
Вышеприведённая команда соответствует текущим настройкам, применяемым по умолчанию. Для того чтобы загрузка изображений начиналась бы в том случае, если позиция прокрутки страницы находится на расстоянии в 400 пикселей от изображения, все значения в этой команде нужно поменять на 400. Ниже приведён пример 1-пиксельной вариации этой команды (такая настройка используется в вышеупомянутом видео).
Весьма вероятно то, что стандартная конфигурация ленивой загрузки в Chrome изменится по мере стабилизации реализации этой возможности в ближайшие недели.
Инструменты разработчика
Особенности реализации поддержки атрибута loading в Chrome заключаются в том, что браузер, при загрузке страницы, запрашивает первые 2 Кб изображений у сервера в том случае, если он поддерживает технологию range request (запрос на диапазон). В первых 2 Кб изображений, наверняка, содержатся сведения об их размерах. Это позволяет браузеру генерировать местозаполнители, имеющие размеры, соответствующие размерам изображений. Кроме того, в эти 2Кб, если речь идёт о небольших изображениях вроде значков, весьма вероятно, входит всё изображение.
Загрузка фрагментов графических файлов
Chrome загружает оставшиеся данные изображений в тот момент, когда пользователь близок к тому, чтобы их увидеть. При работе с инструментами разработчика это может привести к тому, что в панели Network может «появиться» информация о двух загрузках изображения, а в панели Resource Timing будут выведены сведения о двух запросах, выполняемых для загрузки каждого изображения.
Определение сервером поддержки браузером атрибута loading
Если бы мы жили в совершенном мире, то для того чтобы узнать о том, нужно ли, для правильного вывода страницы в некоем браузере, использовать вспомогательную библиотеку, можно было бы не полагаться на анализ браузера средствами клиентского JavaScript. При таком подходе сервер, заранее зная, нужна такая библиотека или нет, включил бы (или не включил бы) её в состав страницы, отправляемой браузеру. Подобную проверку может сделать возможной использование технологии HTTP Client Hint, благодаря которой клиент способен передавать серверу «подсказки» о своих возможностях.
Итоги
Уважаемые читатели! Планируете ли вы использовать атрибут loading в своих проектах?
Lazy loading
Ленивая загрузка может происходить в разные моменты работы приложения, но, как правило, она запускается во время взаимодействия пользователя и системы, например, при скроллинге или навигации.
Обзор
Вместе с ростом web-приложений драматически вырос объем и размеры ресурсов, отправляемых клиентскому приложению. С 2011 по 2019 медианный рост размеров ресурсов вырос с
400KB для настольных компьютеров и с
350KB для мобильных. А размер изображений вырос с
900KB для настольных компьютеров и со
850KB для мобильных.
Стратегии
Ленивая загрузка (Lazy loading) может применяться к разным ресурсам и разными подходами.
Общий подход
Разделение кода (code splitting)
JavaScript, CSS и HTML могут быть разделены на небольшие части, называемые чанками (chunks). При первоначальной загрузке приложения вы можете отправлять не цельное приложение, а только необходимые части, например, только каркас разметки. Данные для заполнения этого каркаса могут быть подгружены позже, например, с помощью AJAX. Есть два вида разделения кода:
JavaScript
Указание типа «module»
Любой тег скрипта с type=»module» рассматривается как JavaScript module, а его загрузка откладывается по умолчанию.
По умолчанию CSS считается ресурсом, блокирующим рендеринг (render blocking). Это означает, что браузер не будет отображать контент до тех пор, пока не будет построена объектная модель CSS (CSSOM). Поэтому CSS-файл должен быть небольшим, чтобы он был доставлен так быстро, насколько это возможно. Рекомендуется использовать медиавыражения, для того чтобы вместо одного монолитного CSS-файла грузить специализированные.
Также в целях ускорения CSS можно применять оптимизации (CSS optimizations).
Шрифты
По умолчанию, загрузка шрифтов откладывается на тот момент, пока дерево рендера (render tree) не сформировано полностью. Это приводит к тому, что текст страницы может появиться не сразу.
Изображения
Очень часто веб-страницы содержат множество изображений, загрузка которых заметно нагружает канал передачи данных и увеличивает длительность загрузки. Подавляющая часть этих изображений находятся за видимой областью экрана и не являются необходимым (non-critical), а для взаимодействия с пользователем требуют действия (например, прокрутки до них).
Атрибут Loading
Атрибут loading элемента (или loading (en-US) атрибут для (en-US)) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.
Полифил
Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифил: loading-attribute-polyfill
Intersection Observer API
Intersection Observers позволяют вам узнать, как наблюдаемый вами элемент входит или выходит из зоны видимости браузера (viewport).
Lazy Loading: Что такое ленивая загрузка?
Ленивая загрузка известна как загрузка по требованию. Lazy Loading это методика оптимизации интернет-контента. Этот метод предполагает, что вместо загрузки всей веб-страницы и ее рендеринга за один раз, загружает и отображает веб-страницу медленно при скроллинге. К примеру, вы наверняка выдели такие сайты, когда листаете вниз, то контент загружается вместе с прокруткой, это и есть Lazy Loading (ленивая загрузка). Точнее говоря, это практика задержки инициализации ресурсов до тех пор, пока они действительно не потребуются для повышения производительности и экономии системных ресурсов. Это позволяет избежать ненужного выполнения кода. WordPress, одна из ведущих веб-платформ для блогов, предлагает решение для отложенной загрузки под названием Infinite Scroll. Однако если вы откроете браузер с несколькими открытыми закрепленными вкладками, содержимое каждой вкладки не будет загружаться, пока вы не нажмете на нее. Если вы считаете это неподходящим, попробуйте отключить «ленивую загрузку». В отличие от традиционного подхода, некоторые пользователи включают Lazy Loading в своих браузерах для изображения. Это ускоряет загрузку веб-сайта, экономит трафик и позволяет пользователям по-настоящему бесперебойно работать в Интернете, особенно. когда загружается много изображений на веб-сайте.
Как включить или отключить Lazy Loading в браузерах
Выше вы узнали недостатки и преимущества ленивой загрузки. Теперь разберем, как включить и отключить её в браузерах. Лично я, использую её на ноутбуках с 3G интернетом, что является разумным применением функции Lazy Loading.
1. Firefox
1. Chrome и Yandex браузер
Эти два браузера одинаковы, точнее Yandex браузер построен на Chrom браузеры. Чтобы отключить или включить Lazy Loading в Chrome или Yandex, вам нужно активировать два флага. Просто скопируйте ниже флаги по очереди и вставьте в адресную строку браузера Chrome или Yandex браузера:
Ленивая загрузка (Lazy loading): что это такое и как ее сделать на сайте
Ленивая загрузка (lazy loading) – это отказ от загрузки всего контента на странице, когда в этом нет нужды. При этом применяется маркер, сообщающий, что данные не загружены, но в случае необходимости их нужно будет загрузить.
Применяя ленивую загрузку, картинки и прочие материалы на сайте подгружаются асинхронно, а конкретнее, после того, как полностью загрузится видимый фрагмент веб-страницы или исключительно при отображении видимой части окна браузера. Например, если посетитель не до конца проскроллит страницу, то изображения расположенные внизу, не будут загружаться.
Lazy loading актуален на многих ресурсах, особенно на тех, где есть изобилие картинок. Посетите любой онлайн-сервис с фотографиями в высоком разрешении и обратите внимание, как площадка подгружает фото только видное на вашем экране, а при скролле вниз новые фото начинают загружаться, как только появляются у вас на экране. По мере скроллинга происходит замена плейсхолдеров на изображения высокого разрешения.
Зачем применять ленивую загрузку на сайте?
Бывают нередкие случаи, когда определенный фрагмент страницы виден не всем, однако на его обработку или передачу материала затрачивается огромное количество ресурсов. Вот тогда и приходит время задуматься об отложенной загрузке, которая исключит генерацию и загрузку скрытых элементов до тех пор, пока их не понадобится просмотреть или использовать.
На заметку. Ленивая загрузка задействуется технологией AJAX, и она порождается событиями, отслеживаемыми посредством JavaScript. Поэтому перед использованием асинхронной загрузки важно учесть, что пользователям, у которых нет JS, функция будет недоступна, а роботы поисковиков не увидят скрытый скриптом контент.
А теперь поговорим о двух весомых причинах, по которым стоит сделать выбор в пользу отложенной загрузки:
Исходя из вышесказанного можно сделать вывод, что ленивая загрузка значительно повышает производительность сайта.
Разновидности ленивой загрузки
Отложенная загрузка бывает 3 видов:
Как сделать ленивую загрузку?
Чтобы улучшить производительность сайта, нужно создать скрипт ленивой загрузки изображений и контента. Существует много вариантов, как это сделать.
5 вариантов ленивой загрузки для изображений
Поговорим о самых распространенных и готовых решений ленивой загрузки для изображений.
№1. Стандартный lazy loading и отображение от David Walsh
В упрощенной версии данный скрипт ленивой загрузки представляет собой замену атрибута src на data-src в теге img:
Элементы img, содержащие атрибуты data-src, скрыты в CSS. После того, как картинки будут загружены, они плавно отображаются с применением переходов:
Затем JavaScript передает всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:
Еще David Walsh предусмотрел фолбек в случае несрабатывания JavaScript, отличающийся эффективностью и простой реализацией. Однако его функции не предусматривают загрузку при скроллинге веб-страницы. Это значит, что браузер подгружает все изображения вне зависимости от того, «дошел» посетитель до них, либо нет. Да, фолбек позволяет показывать страницу быстрее, потому что картинки загружаются после HTML, однако экономии трафика не будет.
№2. Robin Osborne – ленивая загрузка с прогрессивным улучшением
Техника подразумевает ленивую загрузку, в которой JS применяется в качестве улучшения для стандартных CSS и HTML. Прогрессивное улучшение обеспечивает показ изображений для пользователей даже в том случае, если JavaScript, который и отвечает за их отображение, будет отключен или появится ошибка, блокирующая работу скрипта.
Прогрессивное улучшение обладает несколькими преимуществами:
Детальную информацию о решении Osborne можете узнать здесь.
№3. Плагин bLazy.js на простом JS
Данный скрипт мало весит, осуществляет асинхронную загрузку и работу с несколькими изображениями с целью экономии трафика и запросов на сервер. Его применение обеспечивает:
Стандартная реализация. Разметка:
Тег img требуется поменять:
JavaScript: укажите стандартный вызов bLazy и осуществите настройку объекта по карте опций:
№4. Плагин Lazy Load XT jQuery
Отличный плагин для удобного написания своего скрипта ленивой загрузки. Отметим, что есть полная версия jQuery плагина, где посредством асинхронной загрузки можно загружать видео, iframe и прочие теги, содержащие атрибут src, а есть упрощенная, посвященная исключительно простой отложенной загрузке.
Для использования плагина на сайте, нужно перед закрывающим тегом добавить jQuery-библиотеку, указав jquery.lazyloadxt.js (упрощенная версия) или jquery.lazyloadxt.extra.js (расширенная):
Есть также альтернативный вариант, позволяющий не использовать весь плагин – облегченный скрипт jqlight.lazyloadxt.min.js:
В изображениях замените src на атрибут data-src:
Плагин может активироваться автоматически, либо вы можете сделать это самостоятельно. Для этого просто введите:
Lazy Load XT jQuetry добавляет большое количество аддонов. К примеру:
Просмотреть все аддоны и варианты можете по этой ссылке.
№5. Размытое изображение от Craig Buckler
Вы наверняка замечали на некоторых сайтах, как основное изображение статьи сначала размытое, а потом загружается четкая картинка высокого качества. Есть несколько вариантов загрузки фотографий методом размытого эффекта. Один из лучших – Craig Buckler.
Преимущества техники заключаются в:
Скачать код вы можете с хранилища сайта GitHub.
Ленивая загрузка для контента
Для начала нужно подключить библиотеку jQuery:
Суть метода заключается в том, чтобы с использованием AJAX загружать необходимый элемент div с левого файла на целевую страницу.
Далее занимаемся созданием основного блока, к примеру, с изображениями работ. Допустим, вы рисуете иконки, а дальше будете их загружать, нажимая на специальную кнопку. Для этого нужна следующая структура:
Все довольно просто и понятно. Но нужно уделить внимание div с id=»moreButton» и id=»loadingDiv», потому что они находятся в важнейшем скрипте, отвечающем за загрузку контента со сторонних документов. «Контейнером» портфолио выступает SmartPortfolio. MoreButton – кнопка, нажимая на которую происходит загрузка еще одного фрагмента портфолио. LoadingDiv – часть страницы, где будет отображаться текст в случае полного открытия портфолио или возникновения какой-либо ошибки.
К примеру, многие из тех, кто прочтут эту статью, затем протестируют скрипт через индексный файл в браузере, а не загрузив его на сервер. Будут получать оповещение об ошибке. А если еще и слабое интернет-соединение, то файлы будут загружаться дольше. Поэтому актуально написать сообщение или вставить картинку, дающие пользователю понять, что идет загрузка.
Вот и сам скрипт, для подключения которого нужно вставить код перед закрывающимся тегом body:
В структуре веб-ресурса страницы, откуда будут браться данные для загрузки при нажатии, находятся в папке pages. В ней 3 файла, последний из них пустой. Так предусмотрено логикой скрипта. Путь в нем имеет следующий вид:
Но при использовании иного пути важно заменить его в самом скрипте. То же самое нужно сделать, если вы применили другие ID:
Затем, как и упоминалось раньше, перед тегом body (закрывающимся), указываем скрипт:
Заключение
Ленивая загрузка позволяет ускорить производительность сайта и существенно сэкономить трафик за счет того, что объекты, находящиеся вне зоны видимости окна браузера, загружаются только после того, как это понадобится пользователю. Благодаря разнообразию видов асинхронной загрузки и вариантов ее внедрения, ее можно применять для различных типов веб-сайтов и их целевого трафика.
Оцените эту статью. Чтобы мы могли делать лучший контент! Напишите в комментариях, что вам понравилось и не понравилось!
Рейтинг статьи: 4.1 / 5. Кол-во оценок: 46
Пока нет голосов! Будьте первым, кто оценит эту статью.
Lazy loading или «ленивая загрузка» для изображений
Скорость загрузки – ключевой аспект оптимизации сайта, в особенности под Google. Эта метрика влияет на:
Основная причина медленной загрузки страниц – большой размер изображений и видео. Google, посредством PageSpeed Insights, рекомендует несколько способов оптимизации медиафайлов: сжатие, кэширование и lazy loading или «ленивую загрузку». О последнем поговорим в нашей сегодняшней статье:
Что такое «ленивая загрузка»
Lazy loading – это метод оптимизации скорости загрузки медиафайлов, некритичных для отображения страницы или взаимодействия с пользователями. При «отложенной загрузке» изображения не будут загружаться, пока не понадобятся посетителю. В зависимости от настроек, они могут отображаться при скролле до определённой части страницы или нажатии пользователем на элемент.
«Отложенную загрузку» рекомендуется использовать для медиафайлов, которые находятся вне экрана.
Внеэкранные или закадровые элементы – это медиаконтент, который находится ниже той части страницы, которую просматривает пользователь, или, как определяет Web Tools, ниже сгиба.
Поскольку пользователи не видят закадровые изображения при начальной загрузке страницы, нет смысла подгружать их сразу. Кроме того, в таком случае увеличивается время загрузки для взаимодействия (Time to Interactive). Эта метрика сейчас имеет наибольший вес при оценке скорости загрузки на мобильных устройствах.
Для кого нужна «ленивая загрузка»
Рекомендуем использовать ленивую загрузку сайтам:
Почему следует внедрить lazy loading
Есть две весомые причины внедрить отложенную загрузку:
Виды отображения при «отложенной загрузке»
Есть 3 вида отображения контента при реализации lazy loading:
Скроллинг предусматривает, что медиаконтент подгружается только тогда, когда попадает в видимую зону или пользователь доскроллит до определённой части страницы, например, середины, предыдущего изображения и т. д. Такой метод используют на страницах СМИ с бесконечной лентой прокрутки, на листингах интернет-магазинов, страницах каталогов товаров и услуг.
Например, вот так выглядит страница https://unsplash.com/ при скролле листинга с фотографиями:
Однако меньше, чем за секунду, на место квадратов подгружаются фотографии в высоком качестве:
Ещё один вариант реализации: 
Пользователь видит картинку-заглушку, на место которой подставляются изображения.
При втором варианте реализации (клик) контент будет загружаться, когда пользователь перейдёт по ссылке, нажав «Подробнее» или на миниатюру. Так выглядит реализация на карточке товара интернет-центра бронирования:
До нажатия на миниатюру 
После 
Загрузка в фоновом режиме будет полезна только для тех медиафайлов, которые действительно необходимы пользователям для последующей работы. Например, образцы заполнения документов, чертежи. Обязательное условие такой загрузки – пользователь нажал на документ и оставил его открытым. Чтобы определить, нужна ли пользователю такая загрузка, нужно провести A/B тестирование на нескольких страницах и только после этого внедрять на всём сайте.
Как реализовать
Рекомендации Google по реализации lazy loading для картинок
Рекомендации Google для картинок зависят от способа реализации медиаконтента на сайте: встроенные или в CSS. Для встроенных в тег в Справке поисковой системы рекомендуется использовать:
Изображения на страницах также могут быть реализованы через CSS. В отличие от тегов, которые загружаются независимо от их видимости, загрузка изображений в CSS выполняется с большим количеством предположений. Прежде чем запрашивать внешние ресурсы, браузер проверяет, как CSS применяется к документу.
Это может быть использовано для отсрочки загрузки изображений в CSS. С помощью JavaScript можно определить, когда элемент находится в области просмотра, и загрузить фоновое изображение.
Готовые решения
В сети есть 5 готовых решений реализации «отложенной загрузки» для изображений:
Lazy loading от David Walsh
Элементы img, содержащие атрибуты data-src, скрыты в CSS. После того как картинки будут загружены, они плавно отображаются с применением переходов:
Затем JavaScript передаёт всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:
Загрузка с прогрессивным улучшением от Robin Osborne
Разработчик предлагает «ленивую загрузку» на основе прогрессивного улучшения. В его решении lazy loading на JS будет считаться улучшением для HTML и CSS.
При этом ленивая загрузка работает посредством скроллинга, а при реализации не нужно использовать фреймворки или плагины. При прогрессивном улучшении пользователь увидит изображение, даже если скрипт отключён или появилась ошибка, блокирующая его работу.
Плагин bLazy.js на простом JS
Стандартная реализация отложенной загрузки этим методом выглядит так:
Среди преимуществ скрипта: он мало весит, работает с несколькими изображениями одновременно, чтобы сэкономить трафик и уменьшить количество запросов на сервер. Также он поддерживает браузеры устаревших версий, в том числе IE 7 и 8 версии.
Плагин Lazy Load XT jQuery
Подойдёт для написания своего скрипта для «ленивой загрузки». Если нужно реализовать lazy loading только для картинок, рекомендуем воспользоваться упрощённой версией.
Для реализации «отложенной загрузки» с помощью этого плагина нужно добавить jQuery-библиотеку перед закрывающимся тегом и указать jquery.lazyloadxt.js.
Есть альтернативный вариант, который позволяет не использовать весь плагин. Это облегчённый скрипт jqlight.lazyloadxt.min.js:
Плагин активируется автоматически или в ручном режиме. В последнем случае нужно ввести:
Размытое изображение от Craig Buckler
Есть несколько вариантов реализации «ленивой загрузки» с эффектом размытости. Наиболее популярный и простой в реализации – Craig Buckler.
У техники высокая производительность: затрачивает немного больше 1 байта JS-кода и 463 байта CSS. Для работы не нужны дополнительные фреймворки или библиотеки. Есть прогрессивное улучшение для поддержки устаревших браузеров или подгрузки картинок при сломанном JavaScript.
Посмотреть код можно в репозитории на GitHub.
3 плагина для WordPress
BJ Lazy Load 
Количество установок: более 90 тыс.
Последнее обновление: год назад.
С помощью этого плагина можно отложить загрузку картинок в постах, изображений из миниатюр, фотографий пользователей. Контент будет подгружаться по мере приближения к окну браузера при прокрутке страницы.
Lazy Load by WP Rocket 
Количество установок: более 20 тыс.
Последнее обновление: 17 часов назад.
Плагин работает с миниатюрами, всеми изображениями. Подгружает контент только тогда, когда он становится видимым пользователю. Вес скрипта – 10 КБ. Не использует JavaScript библиотеку jQuery.
Loading Page with Loading Screen 
Количество установок: более 10 тыс.
Последнее обновление: 2 дня назад.
Бесплатный плагин, который выполняет предварительную загрузку изображения на сайт и отображает экран загрузки с процентом завершения. Как только всё загружено, экран пропадает.
Какие проблемы могут возникнуть при реализации
Если ленивая загрузка выполнена неправильно, техника может непреднамеренно скрыть контент от Google. Это приводит к тому, что медиаконтент не может участвовать в поиске по картинкам. Сейчас Google в своей Справке рассказал, что их бот может видеть такие элементы, однако просит проверять реализацию.
Как проверить, видит ли Googlebot изображение
В руководстве Google есть рекомендации о том, как убедиться, что ПС может индексировать контент, который грузится в технике «ленивой загрузки».
Для локального тестирования можно использовать скрипт Puppeteer. Чтобы проверить скрипт и запустить его, используйте следующие команды:
После запуска проверки посмотрите скриншоты, сделанные скриптом, и убедитесь, что они содержат весь контент, который должен проиндексировать Googlebot.
Заключение
Lazy loading – один из методов оптимизации загрузки сайта. Его реализация позволяет уменьшить время до первого отображения и взаимодействия пользователя со страницей. При «ленивой загрузке» посетитель сразу видит рабочий сайт, ему не приходится ждать, пока будут выполнены все элементы страницы.
Если у Вас возникли проблемы с оптимизацией, обращайтесь к нам!