Bitrix ленивая загрузка: 1С-Битрикс. LazyLoad или ленивая загрузка контента при включенном кешировании

alexxlab

модуль для 1С-Битрикс (Отложенная загрузка картинок, видео и фоновых изображений (Lazy Loading))

ОписаниеУстановкаИсторияТехподдержка

  • Описание
  • Установка
  • История
  • Техподдержка
  • Подходящие редакции 1С-Битрикс: Старт, Стандарт, Эксперт, Малый бизнес, Бизнес
  • Включает в себя: Модуль
  • Категории: Инструменты, Контент-менеджеру, SEO, Маркетинг, реклама, Работа с фото и видео
«Отложенная загрузка картинок, видео и фоновых изображений (Lazy Loading)» — это решение для 1с-Битрикс, реализующее функционал Ленивой загрузки (Отложенной загрузки) изображений и фреймов на Вашем сайте

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

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

2. Отложенная загрузка фоновых изображений
Периодически разработчики размещают часть изображений не как картинки, а как фоны блоков по разным причинам. Решение в большинстве случаев позволяет отложить загрузку фоновых картинок

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

4. Улучшение показателей и исправление проблем PageSpeed


Модуль положительно влияет на оценку Google Page Speed и решает проблему «Отложите загрузку скрытых изображений», на которой монитор Google поддерживает постоянный акцент


  ▷  Простая и гибкая настройка, не требующая навыков программирования
  ▷Решение полностью безопасно — исходные файлы не редактируются
  ▷Корректно работает с CDN от Битрикс
  ▷Работает с картинками, фреймами, ютуб-видео и фоновыми изображениями
  ▷  Умеет дублировать исходную картинку в <noscript> для улучшенной индексации
  ▷  Умеет использовать встроенные современные технологии браузера для реализации отложенной загрузки
  ▷  Ускоряет работу сайта у реальных пользователей, а не только в PageSpeed Insight

Преимущества перед первой версией решения «Отложенная загрузка изображений»:

  ▷  Решение проще в настройке
  ▷Для выборки изображений использован новый подход, больше не требуется подбирать селекторы
  ▷Работа с background-image встроена в решение и теперь не требует ручной адаптации
  ▷Решение значительно менее ресурсоемкое
✔   Корректно работает на пк, смартфоне и планшете  
✔ Поддерживает механизм многосайтовости
✔ Одинаково хорошо работает с кодировками UTF-8 и Windows-1251
✔ Использует стабильные события и работает на большинстве версий 1с-Битрикс
✔ Поддерживает композитный и автокомпозитный режим
✔ Корректно работает с большинством готовых решений и на сайтах с уникальным дизайном
✔   Поддержка версий PHP: 5. 6, 7.x, 8.x

Дополнительные рекомендации:

Для дополнительного ускорения отображения сайта и увеличения рейтинга скорости по Google Pagespeed Вам будут полезны:

— Решение «Ускорение загрузки сайта», решающее проблему «Устраните ресурсы, блокирующие отображение» — смотреть карточку решения

— Решение «Оптимизация и сжатие HTML + CSS», уменьшающее вес отдаваемых html-страниц — смотреть карточку решения

Lazy Load – пишем на чистом JavaScript загрузку изображений

Что такое ленивая загрузка изображений, как её можно реализовать всего в несколько строк, не подключая jQuery?

Что такое Lazy Load или ленивая загрузка изображений

Когда мы открываем страницу, мы загружаем сразу все ресурсы страницы – собираем DOM дерево из HTML, когда браузер видит ссылку, будь-то CSS, JS, IMG (Image – картинка), то сразу же загружает файл по ссылке, делая на сервер запрос. Как вы наверное уже знаете, чтобы избежать множество запросов к серверу для иконок, решили собирать их в спрайтовые изображения (спрайт):

Либо же, использовать шрифты с иконками, такие как FontAwesome. Либо же, использовать SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика). Очень классная штука, рекомендую применять всё вышеперечисленное :). Сейчас еще мэйнстрим на формат изображений webp, которые значительно уменьшают вес изображений.

Вы спросите, а причём тут вообще это? Где статья? 🙂 Чтобы добиться минимального веса страниц, нужно применять все эти рекомендации на своих проектах. И вот однажды, придумали такую классную штуку как Lazy Load. Суть её в том, что вы будете загружать только те изображения, которые попали в “вашу область видимости”. Даже, если вы открыли страницу по середине и нажали F5, будут загружены именно те изображения, которые относятся к данному участку кода.

И это, как по мне, гениально. Если представить насколько меньше станет запросов к серверу, и насколько это уменьшит размер страниц, то это “отвал башки!” 🙂

Как написать Lazy Load на JavaScript

Знакомьтесь, это IntersectionObserver . Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа.

Как это выглядит на практике:

window.onload = () => {
	const observer = new IntersectionObserver((entries, observer) => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				//console.log(entry.target.dataset.src)
				entry.target.src = entry.target.dataset.src
				observer.unobserve(entry.target)
			}
		})
	}, { threshold: 0.5 })
	document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img))
}

Что мы получим в итоге – изображения, в которых есть атрибут data-src, будут загружены по принципу “попало в область браузера – загружаю, и снимаю с этого объекта наблюдение”. observer.unobserve(entry.target) – как раз и снимает “наблюдение”. В коде есть вывод в консоль для браузера, без этой строки код будет еще меньше, он сейчас закомментирован :).

И вот если раньше, я бы подключал мною любимый jQuery, вешал на scroll обработчик, то благодаря такому коду, можно сделать всё куда проще. Кстати говоря, от jQuery сейчас тоже все отказываются, и одна из причин это оптимизация загрузки страницы, а также полный переход на чистый javascript.

Lazy Load для бекграундов на JavaScript

Сначала код:

window.onload = () => {
	const observerBg = new IntersectionObserver((entries, observer) => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				console.log(entry.target.dataset.bg)
				entry.target.style.backgroundImage = "url('"+entry.target.dataset.bg+"')"
				observer.unobserve(entry.target)
			}
		})
	}, { threshold: 0.5 })
	document.querySelectorAll('[data-bg]').forEach(el => observerBg.observe(el))
}

Как видно, мы просто ищем атрибут

[data-bg], в котором хранится путь к изображению (в данном случае браузер не будет загружать такую ссылку, т. к. посчитает эту информацию строкой) и затем добавляем атрибут style в background-image. Напоминаю, что для указания свойств, состоящих из 2 и более символов, нужно указывать через camelCase – поэтому мы пишем backgroundImage.

Таким же образом, можно добавлять\убирать какие-то классы, менять бекграунд, и т.д.

Для чего вообще применяют это API:
– «ленивая» или отложенная загрузка изображений
– бесконечная прокрутка страницы
– получение информации о видимости рекламы для целей расчета стоимости показов
– запуск процесса или анимации, находящихся в поле зрения пользователя

Какие минусы у Lazy Load?

Казалось бы, какие тут минусы, сплошные плюсы. Ан нет! Дело в поисковых роботах, которые анализируют вашу страницу на наличие в них изображений, с рабочими путями. Поэтому будьте внимательны, и если будете применять этот метод, то делайте это для менее важного контента. Например, если вы делаете это на карточке товара или новости – то скорей всего это будет не самой лучшей идеей, а вот если примените код в подгрузке товаров по клику на кнопку “показать еще” через AJAX, то ничего плохого не случится.

HTML если было не понятно:

<img alt="" data-src="/local/templates/site/img/logo.webp">
<div data-bg="/upload/iblock/faf1/m01qfgi7ld3qnbfa0eglxadz7j0lmf5x.webp">..

Спасибо всем за прочтение, надеюсь было интересно :).

Как мы разработали сайт для школы капоэйры Cordão de ouro — креативное агентство OKC.Media

web promo ux frontend bitrix

Мы разработали новый сайт для известной школы капоэйры Cordão de ouro. Сайт помогает новичкам сделать первый шаг в искусстве капоэйры.

Challenge

Cordão de ouro — известная школа капоэйры, основанная местре Суассуна и местре Бразилиа в 1960 году.

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

Результат

web promo ux frontend bitrix

Дата выпуска

01.06.2020

посмотреть кейс

cdo.moscow

Награды и признание

AWWWARDS
Почетное упоминание

AWWWARDS
Мобильное совершенство

Cordão de ouro — глобальная группа, но каждый филиал работает в определенном регионе. Поэтому при разработке структуры сайта мы ориентировались на удобство выбора школы по местонахождению.

Подход и процесс

Мы проанализировали поведение пользователей, используя данные старого сайта и типичные вопросы, задаваемые по телефону. Это определило, как мы рассказываем историю на страницах:

  • Что такое капоэйра?
  • Когда и где проходят занятия?
  • Кто такие инструкторы?
  • Сколько это стоит?
  • С чего начать?

У каждого филиала есть целевая страница, и они объединены с хабом. Эта попытка решала три задачи:

  • Целевая страница для всего российского отделения;
  • возможность поиска ближайшего местного отделения;
  • посадочных страницы для каждого местного отделения в России.

«Капоэйра — это бразильское боевое искусство, сочетающее в себе элементы танца, акробатики и музыки».

Википедия

Что такое капоэйра?

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

Мы сосредоточились на визуальном представлении различных аспектов капоэйры, таких как акробатика, боевые искусства и музыка, и избегали длинных надоедливых текстов. Мы использовали фотографии, видеоматериалы и видео-рассказ «Узнай, что такое капоэйра за 45 секунд».

Найти класс

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

Мобильный опыт

Мы знали, что более 80% пользователей заходят на сайт со своих смартфонов. Вот почему мы разработали веб-сайт, начиная с мобильного интерфейса. Адаптивные версии были созданы от меньшего к большему размеру экрана. Чтобы поддерживать высокую производительность, мы использовали такие приемы, как:

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

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

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