Email: support@web-maxs.ru
Email: info@web-maxs.ru
  • Информация
  • admin
  • 77
  • 0

Загрузка стороннего JavaScript на сайт

Загрузка стороннего скриптаВы оптимизировали весь свой код, но ваш сайт по-прежнему загружается слишком медленно?

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

Статья очень большая, так что приготовьтесь к длительному чтению!

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

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

Почему вам нужно быть осторожным со сторонними сценариями?

Они могут быть проблемой производительности

Они могут быть проблемой конфиденциальности

Они могут быть проблемой безопасности

Они могут быть непредсказуемыми и меняться без вашего ведома

Они могут иметь непредвиденные последствия


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

Что подразумевается под сторонними сценариями?

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


Примеры сторонних сценариев включают:

Кнопки социального обмена (например, Twitter, Facebook, G+)

Встраивается видеоплеер (например, YouTube, Vimeo)

Рекламные рамки

Сценарии аналитики и показателей

A/B сценарии тестирования для экспериментов

Вспомогательные библиотеки (например, форматирование даты, анимация, функциональные библиотеки и т.д.)

Пример встраивания видео на YouTube

<iframe  width="560" height="315" src="https://www.youtube.com/embed/mo8thg5XGV0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

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

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

Эти проблемы могут включать:

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

Отправка слишком большого количества jаvascript, из-за чего основной поток занят. Слишком много jаvascript может блокировать построение DOM, задерживая скорость отображения страниц. Интенсивный анализ и выполнение сценариев с использованием процессора может задержать взаимодействие с пользователем и привести к разрядке батареи.

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

Сторонние скрипты, загруженные без осторожности, могут привести к единственной точке отказа (SPOF).

Недостаточное кэширование HTTP, вынуждающее часто извлекать ресурсы из сети

Отсутствие достаточного сжатия ресурсов сервера

Блокировка отображения содержимого до завершения обработки. Это также может быть верно для асинхронных сценариев A/B-тестирования.

Использование устаревших API (например, document.write ()), как известно, вредно для работы пользователя

Чрезмерные элементы DOM или дорогие селекторы CSS.

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

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

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

Как вы идентифицируете сторонний скрипт на странице?

Если вы не знаете, какие сторонние скрипты загружаются вашим сайтом и как они влияют на производительность, невозможно узнать, как их оптимизировать. Многие бесплатные инструменты для тестирования скорости интернета могут выделить дорогостоящие сторонние программы, включая Chrome DevTools, PageSpeed Insights и WebPageTest. 

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

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

teg_google



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

Разбивка домена WebPageTest также может быть полезна для визуализации объема контента, поступающего от сторонних источников. Это разбивается как на общее количество байтов, так и на количество запросов:

content_google

Разбивка контента по доменам (первый просмотр). Показывает процент запросов и байтов для каждой третьей стороны

Когда вы видите проблемный сценарий, выясните, что делает сценарий, и спросите себя, действительно ли он так необходим. Проведите A/B-тест, чтобы сбалансировать воспринимаемую ценность и ее влияние на ключевые показатели вовлеченности пользователей или производительности.

Маркировка сторонних скриптов Chrome DevTools

Chrome DevTools поддерживает выделение сторонних производителей (по названию их продукта) на панели "Сеть". Это позволяет вам получить более полное представление о том, как третьи стороны делают запрос на странице, заходят в консоль и выполняют дорогостоящий jаvascript на вашей странице.

Чтобы отобразить значки сторонних разработчиков, перейдите на любую панель в Chrome DevTools и нажмите CMD + Shift + P, чтобы открыть меню команд. Затем введите "Показать значки третьих лиц". Это позволит включить функцию:

маркировка функций

Включение поддержки функции сторонних значков из меню команд DevTools

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

маркировка функций

Как  измерить влияние стороннего скрипта на страницу?

Аудит времени загрузки jаvascript Lighthouse выделяет сценарии, которые требуют дорогостоящего анализа, компиляции или оценки сценариев. Это может быть полезно для обнаружения сторонних скриптов с интенсивным использованием процессора.

Аудит времени


Аудит полезной нагрузки сети Lighthouse

Аудит полезной нагрузки сети Lighthouse выявляет сетевые запросы (в том числе от третьих лиц), которые могут замедлить время загрузки страницы. Избегание этих запросов или подчеркивание их стоимости для рекламных сетей может сэкономить пользователям деньги, которые они потратили бы на передачу данных сотовой связи.

Аудит времени

Блокировка сетевых запросов Chrome DevTools

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

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

Чтобы включить блокировку запросов, щелкните правой кнопкой мыши на любом запросе на панели "Сеть"и выберите" Заблокировать URL-адрес запроса". В ящике DevTools появится вкладка блокировки запросов, позволяющая управлять тем, какие запросы были заблокированы.

Блокировка сетевых запросов
Панель производительности Chrome DevTools

Панель производительности в Chrome DevTools помогает выявить проблемы с производительностью вашей страницы в Интернете. Нажав кнопку "Запись" и загрузив свою страницу, вы увидите водопад, показывающий, где проводит время ваш сайт. 

В нижней части панели производительности вы увидите панель, начинающуюся с "Резюме". Перейдите на вкладку “Снизу вверх”.

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

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

Панель производительностиПанель производительности DevTools, отображающая представление снизу вверх, сгруппированное по (сторонним) продуктам

Чтобы узнать больше о том, как анализировать производительность загрузки страниц с помощью Chrome DevTools.

Хорошим рабочим процессом для измерения влияния сторонних сценариев является:

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

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

Заблокируйте URL-адреса или домены, ответственные за сторонние сценарии, которые, по вашему мнению, являются проблемой.

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

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

DevTools теперь поддерживает несколько записей на панели производительности, что немного упрощает эту задачу.

Измерение влияния сторонних тегов с помощью WebPageTest

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

В разделе "Дополнительные настройки" находится вкладка "Блок". Это можно использовать для указания списка доменов для блокировки, имитируя, как было бы, если бы они вообще не загружались.

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

Рабочий процесс для использования этой функции заключается в:

Проверьте страницу как обычно

Повторите тест с некоторыми заблокированными третьими лицами

Сравните два результата (обратив внимание на кинопленку). Результаты можно сравнить, выбрав их из истории тестов и нажав кнопку "Сравнить".

WebPageTest отображает опцию сравнения, позволяющую сравнивать два отчета

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

кинопленка разница

ЕСЛИ ВЫ НЕ УСТАЛИ, ПРОДОЛЖАЙТЕ ЧИТАТЬ ДАЛЬШЕ, НАЖАВ НА ПЛЮСИК 


Вывод

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

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

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

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

Другие материалы

Комментарии (0)


Оставить комментарий


Информация


Посетители, не имеющие регистрации на сайте, не могут оставлять комментарии .

Мы в Телеграм Вступайте в
Telegram группу
WEB-MAXS
Наш сайт WEB-MAXS.RU использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.