Рекомендации по использованию сторонних встраиваний

Обзор методов эффективной загрузки популярных сторонних встраиваемых элементов.

Адди Османи
Кэти Хемпениус
Katie Hempenius
X
Лина Сохони
Leena Sohoni
X

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

Контент сторонних разработчиков может влиять на производительность страницы различными способами. Он может блокировать отрисовку, конкурировать с другими критически важными ресурсами сети и пропускной способности или влиять на показатели Core Web Vitals. Встроенный контент сторонних разработчиков также может вызывать смещение макета при загрузке. В этой статье рассматриваются лучшие практики повышения производительности, которые можно использовать при загрузке встроенного контента сторонних разработчиков, эффективные методы загрузки и инструмент Layout Shift Terminator, который помогает уменьшить смещение макета для популярных встроенных элементов.

Что такое встраивание?

Встраиваемый контент от третьей стороны — это любой контент, отображаемый на вашем сайте, который:

  • Автор не вы
  • Размещено на серверах сторонних разработчиков.

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

Встраиваемые элементы часто используются в следующих случаях:

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

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

Влияние встраивания сторонних приложений на производительность

Многие популярные встроенные элементы содержат более 100 КБ JavaScript, а иногда и до 2 МБ. Они дольше загружаются и занимают основной поток во время выполнения. Инструменты мониторинга производительности, такие как Lighthouse и Chrome DevTools, помогают измерить влияние сторонних встроенных элементов на производительность .

Аудит Lighthouse " Снижение влияния стороннего кода " отображает список сторонних поставщиков, используемых страницей, с указанием размера и времени блокировки основного потока. Аудит доступен в инструментах разработчика Chrome на вкладке Lighthouse.

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

Аудит Lighthouse, демонстрирующий влияние каждого фрагмента стороннего кода на страницу.

Рекомендации по загрузке

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

порядок выполнения скриптов

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

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

Запросы на встраивание сторонних элементов могут препятствовать загрузке собственного контента, поэтому положение тега <script> для стороннего контента имеет важное значение. Скрипты могут влиять на последовательность загрузки, поскольку построение DOM приостанавливается на время их выполнения. Размещайте теги <script> для сторонних элементов после ключевых тегов <script> для собственного контента и используйте атрибуты async или defer для их асинхронной загрузки.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

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

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

Отсрочка загрузки контента до момента, когда он действительно понадобится, называется отложенной загрузкой (lazy-loading ). В зависимости от требований и типа встраиваемого контента можно использовать различные методы отложенной загрузки.

Ленивая загрузка браузера для <iframe>

Для сторонних встраиваемых элементов, загружаемых через элементы <iframe> , можно использовать отложенную загрузку на уровне браузера, чтобы отложить загрузку iframe-элементов, находящихся за пределами экрана, до тех пор, пока пользователь не прокрутит страницу рядом с ними. Атрибут loading для <iframe> доступен во всех современных браузерах .

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

Атрибут загрузки поддерживает следующие значения:

  • lazy : Указывает, что браузер должен отложить загрузку iframe. Браузер загрузит iframe, когда тот приблизится к области просмотра. Используйте, если iframe подходит для отложенной загрузки.
  • eager : Загружает iframe немедленно. Используйте, если iframe не подходит для отложенной загрузки. Если атрибут loading не указан, это поведение по умолчанию — за исключением режима Lite .
  • auto : Браузер определяет, следует ли отложенно загружать этот фрейм.

Браузеры, не поддерживающие атрибут loading игнорируют его, поэтому вы можете применять отложенную загрузку на уровне браузера в качестве постепенного улучшения. Браузеры, поддерживающие этот атрибут, могут иметь разные реализации порогового значения расстояния от области просмотра (расстояние, с которого начинается загрузка iframe).

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

  • Видео с YouTube: Чтобы отложенно загружать iframe-элемент видеоплеера YouTube, добавьте атрибут loading к коду встраивания, предоставленному YouTube. Отложенная загрузка встроенного видео YouTube может сэкономить примерно 500 КБ при первоначальной загрузке страницы. 
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>
  • Google Maps: Чтобы добавить атрибут ` loading в iframe с картой Google, включите его в код встраивания iframe, сгенерированный API встраивания Google Maps . Ниже приведен пример кода с заполнителем для ключа API Google Cloud. 
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

библиотека ленивых размеров

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

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

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

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

Обратите внимание, что функция lazysize использует API Intersection Observer для определения момента, когда элемент становится видимым.

Использование data-lazy в Facebook

Facebook предоставляет различные типы социальных плагинов , которые можно встраивать. Сюда входят публикации, комментарии, видео и самая популярная кнопка «Нравится» . Все плагины включают настройку ` data-lazy . Установка значения ` true гарантирует, что плагин будет использовать механизм отложенной загрузки браузера, задав атрибут loading="lazy" для `iframe`.

Ленивая загрузка лент Instagram

Instagram предоставляет блок разметки и скрипт в качестве части встраивания. Скрипт внедряет на страницу элемент <iframe> . Ленивая загрузка этого <iframe> может повысить производительность, поскольку размер встраивания может превышать 100 КБ в сжатом виде. Многие плагины Instagram для сайтов WordPress, такие как WPZoom и Elfsight, предоставляют опцию ленивой загрузки.

Замените встраиваемые элементы фасадами.

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

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

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

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

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

Опция «сделать снимок экрана узла» выделяется в контекстном меню HTML-редактора.

Инструменты разработчика сохраняют изображение в формате png , но для повышения производительности можно также преобразовать его в формат WebP .

Используйте динамические изображения в качестве фасадов.

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

  • Статический API карт : Сервис Google Maps Static API генерирует карту на основе параметров URL, включенных в стандартный HTTP-запрос, и возвращает карту в виде изображения, которое можно отобразить на вашей веб-странице. URL должен содержать ключ Google Maps API и должен быть размещен в теге <img> на странице в качестве атрибута src .

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

    Приведённый ниже фрагмент кода отображает изображение, источником которого является URL-адрес статического API карт. Он включён в тег <link>, что гарантирует доступ к самой карте по клику на изображение. (Примечание: атрибут ключа API не включен в URL-адрес)

    <a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>

  • Скриншоты из Twitter : Подобно скриншотам карт, эта концепция позволяет динамически встраивать скриншот из Twitter вместо ленты новостей. Tweetpik — один из инструментов, который можно использовать для создания скриншотов твитов. API Tweetpik принимает URL-адрес твита и возвращает изображение с его содержимым. API также принимает параметры для настройки фона, цветов, границ и размеров изображения.

Используйте функцию «загрузка по клику» для улучшения внешнего вида фасадов.

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

  1. При загрузке страницы: на странице добавляется фасад или статический элемент.
  2. При наведении курсора мыши: Facade предварительно подключается к стороннему поставщику встраивания.
  3. При нажатии: Фасад заменяется продуктом стороннего разработчика.

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

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

  • Фасад YouTube

    Lite-youtube-embed — это рекомендуемый фасад для проигрывателя YouTube, который выглядит как настоящий проигрыватель, но работает в 224 раза быстрее. Его можно использовать, загрузив скрипт и таблицу стилей, а затем используя тег <lite-youtube> в HTML или JavaScript. Пользовательские параметры проигрывателя, поддерживаемые YouTube, можно указать через атрибут params .

    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

    Ниже приведено сравнение между облегченной версией youtube-embed и полноценной версией youtube-embed.

    Облегченная версия встраивания YouTube
    Облегченная версия встраивания видео с YouTube.
    Встроенный фрагмент видео с YouTube.
    Встроенное видео с YouTube

    Другие похожие фасады, доступные для плееров YouTube и Vimeo, — это lite-youtube , lite-vimeo-embed и lite-vimeo .

  • Фасад виджета чата

    React Live Chat Loader загружает кнопку, которая выглядит как встроенный чат, а не сам встроенный чат. Его можно использовать с различными платформами чат-провайдеров, такими как Intercom, Help Scout, Messenger. Этот похожий виджет намного легче, чем виджет чата, и загружается быстрее. Он может быть заменен настоящим виджетом чата, когда пользователь наводит курсор или нажимает на кнопку, или если страница долгое время находится в режиме ожидания. В тематическом исследовании Postmark объясняется, как они реализовали react-live-chat-loader и каких улучшений производительности им удалось добиться.

    Виджет чата Postmark в HTML-редакторе, отображающий упакованный код.

Если вы обнаружите, что некоторые встроенные элементы сторонних разработчиков загружаются медленно, и использование описанных ранее методов невозможно, проще всего полностью удалить такой элемент. Если вы все же хотите, чтобы пользователи могли получить доступ к содержимому встроенного элемента, вы можете добавить ссылку на него с помощью target="_blank" чтобы пользователь мог щелкнуть по ней и просмотреть содержимое в другой вкладке.

Стабильность компоновки

Хотя динамическая загрузка встроенного контента может улучшить скорость загрузки страницы, иногда она может вызывать неожиданное перемещение содержимого страницы. Это явление известно как смещение макета.

Поскольку визуальная стабильность важна для комфортной работы пользователя, показатель Cumulative Layout Shift (CLS) измеряет, как часто происходят эти изменения и насколько они нарушают привычный порядок вещей.

Сдвиги макета можно избежать, зарезервировав место во время загрузки страницы для элементов, которые будут динамически загружаться позже. Браузер может определить, какое пространство нужно зарезервировать, если ему известны ширина и высота элементов. Этого можно добиться, указав атрибуты width и height для iframe или задав фиксированный размер для статических элементов, куда будет загружен сторонний встраиваемый контент. Например, iframe для встраиваемого видео YouTube должен иметь следующие значения ширины и высоты.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

Популярные сервисы встраивания, такие как YouTube, Google Maps и Facebook, предоставляют код встраивания с указанием размеров. Однако некоторые сервисы могут этого не указывать. Например, этот фрагмент кода не показывает размеры получаемого встраиваемого контента.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

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

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Терминатор смены компоновки

Поскольку встраиваемые сторонние элементы часто не указывают размеры (ширину, высоту) конечного контента, это может привести к значительным изменениям макета страницы. Решить эту проблему без ручной проверки конечных размеров с помощью инструментов разработчика при различных размерах области просмотра может быть непросто.

Теперь существует автоматизированный инструмент, Layout Shift Terminator , который может помочь вам уменьшить смещения макета в популярных встроенных элементах, таких как Twitter, Facebook и другие сервисы.

Терминатор смены компоновки:

  • Загружает встроенный контент на стороне клиента в iframe.
  • Изменяет размер iframe под различные популярные размеры области просмотра.
  • Для каждого популярного области просмотра фиксируются размеры встроенного элемента, которые затем используются для генерации медиа-запросов и запросов к контейнеру.
  • Задает минимальную высоту для обертки вокруг разметки встраивания с помощью медиа-запросов (и запросов контейнера) до инициализации встраивания (после чего стили минимальной высоты удаляются).

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

    Инструмент Layout Shift Terminator отображает вывод кода и предварительный просмотр.

Попробуйте Layout Shift Terminator и не стесняйтесь оставлять свои отзывы в проекте Layout Shift Terminator на GitHub . Инструмент находится в бета-версии и со временем будет улучшаться за счет дальнейших доработок.

Заключение

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