Рекомендации по встраиванию сторонних веб-виджетов
Что такое сторонние встраиваемые ресурсы?
Содержание статьи:
Обычно мы можем найти веб-вставки для видео, сообщений в социальных сетях, каналов, карт или GIF-файлов. И это либо фреймы, либо скрипты, которые мы можем легко добавить на веб-страницу. Однако некоторые из таких интеграций могут отрицательно повлиять на производительность приложения.
Поэтому давайте сначала рассмотрим, как мы можем измерить, влияние вставок на производительность приложения.
Измерение влияния сторонних вставок на производительность приложений
Размер сторонних встраиваемых файлов может отличаться. И влияние на производительность приложения обычно увеличивается с размером. Кроме того, вы можете использовать инструменты мониторинга, такие как Chrome DevTools, Page SpeedInsights и webPageTest, чтобы измерить их влияние на производительность веб-приложений.
В приведенном ниже примере я использовал инструмент WebPageTest, который показывает подробную картину ресурсов, используемых веб-страницей.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вверху изображения вы можете увидеть фактическое содержание вашей веб-страницы. Это всего лишь несколько скриптов, которые загружаются относительно быстро. Но внизу есть много скриптов со значительным временем загрузки. Эти скрипты принадлежат сторонним встраиваемым файлам, используемым приложением.
Кроме того, мы можем использовать расширение Lighthouse для Chrome DevTools, чтобы измерить то же самое. Lighthouse перечисляет все сторонние вложения и их размеры, как показано ниже.
С этими результатами вы можете увидеть предупреждения о полезной нагрузке («Избегайте огромных сетевых нагрузок»), предложенные Lighthouse. Это потому, что дополнительные ресурсы влияют на время загрузки вашего приложения.
Кроме того, Lighthouse также предоставляет подробную информацию о времени выполнения потока для сторонних вставок.
Рекомендации при загрузке сторонних встраиваемых файлов
Как я уже говорил выше, сторонние вставки могут негативно повлиять на производительность веб-сайта. Поэтому давайте рассмотрим несколько рекомендаций, чтобы уменьшить их общее влияние.
1. Ленивая загрузка (Lazy-Loading)
Мы можем использовать ленивую загрузку для загрузки встроенных ресурсов только тогда, когда они необходимы.
Например, любые встроенные рекламные объявления в нижнем колонтитуле должны отображаться, когда пользователь прокручивает страницу вниз. Поэтому вам нужно загружать их только при прокрутке вниз.
Кроме того, вы можете использовать ленивую загрузку на уровне браузера, чтобы отложить загрузку внеэкранных фреймов.
В приведенном ниже примере сторонние вставки в iframe будут загружаться только тогда, когда пользователь переместится к данному iframe:
<iframe src=”https://example.com” loading=”lazy” width=100px height=50px> </iframe>
| 1234 | <iframe src=”https://example.com” loading=”lazy” width=100px height=50px></iframe> |
Большинство браузеров, поддерживающих Chromium, поддерживают атрибут loading со следующими значениями.
Lazy — указывает, что iframe должен быть загружен позже. Когда браузер приближается к области просмотра, он загружает iframe.
Eager — iframe будет загружен сразу после рендеринга страницы. Атрибут eager — это значение атрибута loading по умолчанию.
Auto — браузер имеет право определять время загрузки iframe.
Ленивая загрузка iframe может быть эффективной, если вы работаете с картами или видео. Например, если вы используете API Google MapsEmbed, для отложенной загрузки карты можно использовать следующий код:
<iframe src=”https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID” width=100px height=150px allowfullscreen=”” loading=”lazy”> </iframe>
| 12345 | <iframe src=”https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID” width=100px height=150px allowfullscreen=”” loading=”lazy”></iframe> |
Точно так же вы можете встраивать видео из YouTube с помощью леновой загрузки iframe, чтобы сэкономить почти 500 КБ при загрузке начальной страницы.
<iframe src=”https://www.youtube.com/embed/aKydtOXW8mI” width=100px height=150px loading=”lazy” title=”YouTube Player” frameborder=”None” allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen> </iframe>
| 123456789 | <iframe src=”https://www.youtube.com/embed/aKydtOXW8mI” width=100px height=150px loading=”lazy” title=”YouTube Player” frameborder=”None” allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> |
Примечание. Кроме того, вы можете отложить загрузку фреймов в свое приложение, используя такие пакеты, как LazySizes. Поскольку этот пакет поддерживает встраивание виджетов YouTube, он может стать отличным вариантом для сокращения времени загрузки iframe.
2. Порядок скриптов
В любом приложении сначала необходимо загрузить основной контент. Затем мы можем сосредоточиться на сторонних вставках, поскольку они в основном занимают небольшую область на веб-странице.
Например, текстовое содержание статьи должно быть загружено перед встраиванием любых изображений или видео.
Но иногда сторонние вставки могут мешать загрузке основного контента из-за парсера блокировки JavaScript. Следовательно, нам нужно быть очень осторожными с порядком их загрузки.
Мы можем использовать свойства async и defer в теге script, чтобы упорядочить выполнение сценариев.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
<head> <title>Executing the Page</title> <link rel=”stylesheet” media=”screen” href=”/assets/mainPage.css”> <script src=”index.js”></script> <script src=”https://example.com/3p-library.js” async></script> </head>
| 123456 | <head> <title>Executing the Page</title> <link rel=”stylesheet” media=”screen” href=”/assets/mainPage.css”> <script src=”index.js”></script> <script src=”https://example.com/3p-library.js” async></script></head> |
Использование Async или Defer
Вы можете использовать атрибут async, когда нужно запустить скрипты раньше, в то время как defer можно использовать для неосновных ресурсов. На следующем изображении показано, как работают эти атрибуты.
3. Замените вставки на фасады
Фасады — это нефункциональный статический элемент, аналогичный вставкам.
Поскольку скрипты загружаются и запускаются только тогда, когда пользователь взаимодействует с лениво загруженным элементом, фасад выглядит и работает так же, как и настоящая сторонняя вставка. Таким образом, мы можем заменить вставки на фасады и сократить время загрузки страницы.
Например, на приведенной ниже веб-странице есть статическая карта местоположения (как фасад), встроенная в страницу. И как только пользователь кликнет по статической карте, начнется загрузка функциональной карты.
Есть три метода, которые мы можем использовать для реализации фасадов:
1. Использование плагинов CMS
Пользователи CMS могут использовать плагины, которые предоставляют готовые возможности для замены сторонних вставок на заполнители. Вот несколько бесплатных плагинов, которые предоставляют эту функцию:
Ленивая загрузка видео
Wp youtube liyte
2. Использование фасадов, рекомендованных Google
Доступно множество фасадов, рекомендованных Google. Вы можете использовать их для замены встраиваемых материалов. Однако для некоторых из этих фасадов требуется вставка кода в HTML-код вашей страницы, а для других требуются плагины и библиотеки JavaScript. Примеры фасадов, рекомендованных Google.
Light Youtube embed
Map static API
3. Разработка фасадов
Если вы программист, вы можете сами спроектировать фасады. Рекомендуемый рабочий процесс следующий:
Во время начальной загрузки страницы показывайте фасад вместо сторонних вставок.
Когда пользователь прокручивает или наводит курсор на фасад, используйте ленивую загрузку зависимостей.
Когда пользователь нажимает на фасад, замените его подлинной сторонней вставкой.
4. Уменьшение сдвигов в макете
Иногда вставка сторонних видеороликов или баннеров может вызвать неожиданные сдвиги в макете пользовательского интерфейса. Эти сдвиги известны как совокупные сдвиги макета (CLS), и их важно минимизировать, поскольку они напрямую влияют на взаимодействие с пользователем и рейтинг страницы в Google.
В приведенном ниже примере я проверил домашнюю страницу веб-сайта Forbes. Как видите, при загрузке браузера происходит смещение раздела ленты новостей. Это потому, что в верхней части окна появляется встроенная реклама.
Есть несколько мер, которые мы можем предпринять, чтобы избежать сдвигов макета при встраивании контента.
Указание размеров
Если вы используете тег iframe, video или image для встраивания содержимого, вы должны определить размеры.
<iframe src=”https://www.youtube.com/watch?v=7EKEav7Io5Y&ab_channel=GoogleChromeDevelopers” width=”500″ height=”300″> </iframe>
| 12 | <iframe src=”https://www.youtube.com/watch?v=7EKEav7Io5Y&ab_channel=GoogleChromeDevelopers” width=”500″ height=”300″> </iframe> |
Использование пустых слотов
Лучший способ встраивать контент без сдвига макета — это зарезервировать пустые, но фиксированные слоты в вашем веб-приложении. В приведенном ниже примере показано, как создать специальный слот для ленты Twitter.
<style> .twitterfeed { display: table-cell; vertical-align: top; width: 100px; } .twitter-timeline { height: 400px !important; } </style> <div class=twitterfeed> <a class=”twitter-timeline” href=”https://twitter.com/BBCWorld/with_repliesw” data-tweet-limit=”1″>Tweets by BBC World</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″> </script> </div>
| 12345678910111213141516171819 | <style> .twitterfeed { display: table-cell; vertical-align: top; width: 100px; } .twitter-timeline { height: 400px !important; } </style> <div class=twitterfeed> <a class=”twitter-timeline” href=”https://twitter.com/BBCWorld/with_repliesw” data-tweet-limit=”1″>Tweets by BBC World</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″> </script></div> |
Кроме того, вы можете использовать ограничитель сдвига макета, чтобы уменьшить смещение макета из-за вставок. Он отфильтрует большинство окон iframe и изменит размер в соответствии с размерами области просмотра.
Заключение
Использование сторонних вставок может поднять оценку вашего приложения на совершенно новый уровень с помощью интеграции разнообразных функций. Но, если вы не будете использовать их правильно, сторонние вставки могут негативно повлиять на производительность вашего веб-приложения.
В этой статье я обсудил, как измерить расходы на производительность сторонних вставок и эффективно их использовать. Я надеюсь, что эти правила помогут вам эффективно использовать веб-вставки. И не забудьте поделиться своими мыслями в разделе комментариев. Спасибо за чтение!!!
Автор: Ravidu Perera
Источник: webformyself.com