19.01.2022

Рекомендации по встраиванию сторонних веб-виджетов

Советы по встраиванию сторонних веб-виджетов

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

Что такое посторонние встраиваемые ресурсы?

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

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

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

Размер посторониих встраиваемых файлов может отличаться. И воздействие на производительность приложения обычно увеличивается с размером. Не считая того, вы можете использовать инструменты мониторинга, такие как Chrome DevTools, Page SpeedInsights и webPageTest, чтоб измерить их влияние на производительность веб-приложений.

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

Советы по встраиванию сторонних веб-виджетов

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

Не считая того, мы можем использовать расширение Lighthouse для Chrome DevTools, чтоб измерить то же самое. Lighthouse перечисляет все посторонние вложения и их размеры, как показано ниже.

Советы по встраиванию сторонних веб-виджетов

С этими плодами вы можете увидеть предупреждения о полезной нагрузке («Опасайтесь огромных сетевых нагрузок»), предложенные Lighthouse. Это поэтому, что дополнительные ресурсы влияют на время загрузки вашего приложения.

Не считая того, Lighthouse также предоставляет подробную информацию о времени выполнения потока для посторониих вставок.

Советы по встраиванию сторонних веб-виджетов

Советы при загрузке сторонних встраиваемых файлов

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

1. Ленивая загрузка (Lazy-Loading)

Мы можем использовать ленивую загрузку для загрузки интегрированных ресурсов только тогда, когда они нужны.

Советы по встраиванию сторонних веб-виджетов

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

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

В приведенном ниже примере посторонние вставки в iframe будут загружаться только тогда, когда юзер переместится к данному iframe:

Большая часть браузеров, поддерживающих Chromium, поддерживают атрибут loading со последующими значениями.

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

Eager — iframe будет загружен сходу после рендеринга страницы. Атрибут eager — это значение атрибута loading по умолчанию.

Auto — браузер имеет право определять время загрузки iframe.

Ленивая загрузка iframe может быть действенной, если вы работаете с картами либо видео. Например, если вы используете API Гугл MapsEmbed, для отложенной загрузки карты можно использовать последующий код:

Точно так же вы сможете встраивать видео из YouTube с помощью леновой загрузки iframe, чтоб сэкономить почти 500 КБ при загрузке исходной страницы.

Примечание. Не считая того, вы можете отложить загрузку фреймов в свое приложение, используя такие пакеты, как LazySizes. Так как этот пакет поддерживает встраивание виджетов YouTube, он может стать хорошим вариантом для сокращения времени загрузки iframe.

2. Порядок скриптов

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

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

Мы можем использовать характеристики async и defer в теге script, чтоб упорядочить выполнение сценариев.

Внедрение Async или Defer

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

Советы по встраиванию сторонних веб-виджетов

3. Поменяйте вставки на фасады

Фасады — это нефункциональный статический элемент, аналогичный вставкам.

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

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

Советы по встраиванию сторонних веб-виджетов

Есть три способа, которые мы можем использовать для реализации фасадов:

1. Внедрение плагинов CMS

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

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

Wp youtube liyte

2. Внедрение фасадов, рекомендованных Google

Доступно огромное количество фасадов, рекомендованных Google. Вы можете использовать их для подмены встраиваемых материалов. Однако для некоторых из этих фасадов требуется вставка кода в HTML-код вашей странички, а для других требуются плагины и библиотеки JavaScript. Примеры фасадов, рекомендованных Гугл.

Light Youtube embed

Map static API

3. Разработка фасадов

Если вы программер, вы можете сами спроектировать фасады. Рекомендуемый рабочий процесс последующий:

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

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

Когда юзер нажимает на фасад, замените его подлинной посторонней вставкой.

4. Уменьшение сдвигов в макете

Время от времени вставка сторонних видеороликов или баннеров может вызвать внезапные сдвиги в макете пользовательского интерфейса. Эти сдвиги известны как совокупные сдвиги макета (CLS), и их принципиально минимизировать, поскольку они напрямую влияют на взаимодействие с юзером и рейтинг страницы в Google.

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

Советы по встраиванию сторонних веб-виджетов

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

Указание размеров

Если вы используете тег iframe, video либо image для встраивания содержимого, вы должны найти размеры.

Внедрение пустых слотов

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

Не считая того, вы можете использовать ограничитель сдвига макета, чтоб уменьшить смещение макета из-за вставок. Он отфильтрует большая часть окон iframe и изменит размер в согласовании с размерами области просмотра.

Заключение

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

В этой статье я обсудил, как измерить расходы на производительность посторониих вставок и эффективно их использовать. Я надеюсь, что эти правила посодействуют вам эффективно использовать веб-вставки. И не забудьте поделиться своими идеями в разделе комментариев. Спасибо за чтение!!!

По материалам webformyself.com

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

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