SEO и вставки с YouTube, Twitter, Instagram. Как ускорить загрузку сайта и улучшить поведенческие факторы? Ленивая загрузка iframe
9 сентября 2020

SEO и вставки с YouTube, Twitter, Instagram. Как ускорить загрузку сайта и улучшить поведенческие факторы? Ленивая загрузка iframe

Скорость загрузки сайта влияет на показатель конверсии и результаты ранжирования в поисковой выдаче. Появился атрибут тега iframe, который позволяет ускорить загрузку сайта.

Что за атрибут? Как работает? Как внедрить возможность на своем сайте уже сейчас?

Разберемся с вопросами далее.

Влияние iframe на поисковую оптимизацию


Тег iframe применяется для вставки на страницы видео с YouTube, блоков различных социальных сетей и тому подобных внешних элементов.

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

Проблема использования iframe заключается в замедлении скорости загрузки страниц сайта. Но появился атрибут loading=lazy, который решает проблему.

Загрузка видео YouTube с отложенной загрузкой экономит ~500 килобайт при первой загрузке сайта.

Вставка с Instagram с отложенной загрузкой экономит ~100 килобайт в разархивированном виде при начальной загрузке.

По умолчанию встраивание плагина Facebook Like на страницу использует ~215 килобайт, но теперь поддерживается ленивая загрузка — кнопки лайк.

Движок робота Google обновляется вслед за версией браузера, поэтому уже сейчас поддерживает новый атрибут.

Использование ленивой загрузки содержимого из внешних источников снижает значение метрики Largest Contentful Paint, что улучшает значение фактора Page Experience.

С 2021 года фактор будет влиять на результаты ранжирования сайтов в поисковой выдаче.

Ленивая загрузка iframe в 2020


Google анонсировал атрибут laoding=lazy для iframe. Без поддержки популярных браузеров смысла в использовании было мало, но ситуация уже изменилась. Практически все популярные браузеры поддерживают атрибут:

  • Chrome;
  • Opera;
  • Edge;
  • Safari;
  • Firefox.

Главные преимущества атрибута loading=lazy в нативности, простоте реализации и экономии оперативной памяти.

По аналитическим данным Google ленивая загрузка фреймов приводит к экономии трафика на 2-3%, к оптимизации First Contentful Paint на 1-2%, и к оптимизации First Input Delay.

Как работает loading=lazy


Встройка контента на страницу через iframe охватывают множество сценариев. Например:

  • Встройка видео YouTube и/или публикаций из социальных сетях;
  • Размещение рекламы.

В каждом из сценариев атрибут loading=lazy решает проблему со скоростью загрузки страниц, на которых используется вставка через iframe.

Механизм обработки является встроенным в браузер. Атрибут указывает браузеру, что загрузку iframe следует откладывать до востребования. Иными словами, пока iframe не попадает в окно просмотра. Атрибут loading поддерживает три значения:

  • lazy — загрузка контента по требованию;
  • eager — обязательная загрузка;
  • auto — загрузка по решению браузера.

Атрибут следует прописывать обязательно, так как по умолчанию браузеры и краулер Google обрабатывают страницы по методу eager.

Ленивая загрузка тега iframe в поисковой оптимизации

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

В большинстве случаев браузер не будет использовать ленивую загрузку, если выполняется любое из условий:

  • Размер по ширине и высоте iframe составляет 4 пикселя или меньше;
  • Блок скрыт с использованием тегов display: none или visibility: hidden;
  • iframe вынесен за пределы экрана через отрицательное положение по X или Y.

Как внедрить на сайте


Пример:

<iframe src="https://ru.megaindex.com" loading="lazy" width="1000" height="1000"></iframe>

В сценариях, когда требуется загрузка через JavaScript:

var iframe = document.createElement('iframe');
iframe.src = 'https://megaindex.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

Пример реализации — пример.

На img работает аналогично. Через Google DevTools видно как работает загрузка изображений по запросу.



Как проверить? Код проверки ленивой загрузки:

<iframe src="https://indexoid.com" loading="lazy" onload="alert('loaded!');" />

Рекомендованные материалы в блоге MegaIndex по ссылкам далее:


Выводы


Главная проблема iframe заключается в замедлении сайта. Атрибут loading=lazy позволяет решить проблему.

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

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

Большинство использует мобильные устройства. Интернет на мобильных в большинстве случаев медленный.

Используйте атрибут loading=lazy уже сейчас. В результате:

  • Улучшение показателя конверсии посредством повышения скорости;
  • Улучшение поведенческих факторов посредством повышения скорости;
  • Уменьшение расходов пользователя на трафик;
  • Уменьшение нагрузки на сервер сайта;
  • Уменьшение расхода батареи устройства;
  • Улучшение значения фактора Page Experience;
  • Уменьшение расходов на исходящий трафик сервера.

Для встройки кода систем аналитики следует применять значение loading=eager.

Кстати в MegaIndex есть бесплатный для анализа сайта.

Ссылка на сервис — Анализ сайта.

Остались вопросы, замечания или комментарии по теме использования ленивой загрузки на страницах сайта? Напишите в комментариях.

Обсуждение

k938980405
13:37 3 сентября 2020
Скажите как при вставки гугл карты сделать что бы не тормозило, с ютобом решил а с картами беда, подскажите как решить?
Дмитрий Угниченко
19:17 7 сентября 2020
Спасибо за отклик! Есть вариант использовать свойство contain, но требуется разобраться в деталях — https://ru.megaindex.com/blog/lazy-rendering
webplotnikov
21:53 3 сентября 2020
А не проще открывать видео в всплывающем окне (fancybox)?
Вообще ведь никакой нагрузки не будет.
Дмитрий Угниченко
19:14 7 сентября 2020
Всплывающие окна не лучший вариант в части дизайна страницы сайта
potolokk
17:33 10 сентября 2020
Попробовал добавить и у меня в итоге показатели ухудшились... Хз, почему так.
koks99
21:35 14 сентября 2020
Добавил к двум видео на странице. Был по Pingdom вес видео 3.1 Мб, стало 1.3 Мб. Работает, блин!
Для добавления комментария, пожалуйста, авторизуйтесь