Addy Osmani

Сторонние ресурсы (такие как встраивания и скрипты) сегодня активно используются в Интернете. Они предоставляют готовые решения для внедрения социальных сетей, видео, аналитики, живого чата, рекламы, A/B-тестирования, персонализации и прочего. Сторонние встраивания — необходимая часть современных веб-сайтов, которая позволяет владельцам сайтов сосредоточиться на своих основных задачах, перегружая при этом стандартные, но важные функции внешним поставщикам.

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

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

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

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

Более глубокий взгляд на сторонние компании

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

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

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

Источник: Сторонние компании по категориям .

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

Как третьи стороны влияют на производительность?

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

1. Размер и затраты на выполнение скрипта . Сторонние компании часто стремятся предоставить значительную функциональность «просто» путем добавления элемента <script> или <iframe> на вашу страницу. Затем эти элементы извлекают сценарии и ресурсы, которые имеют значительный размер и требуют больше времени для загрузки и выполнения. Слишком большое количество JavaScript удерживает основной поток дольше, блокирует рендеринг и задерживает взаимодействие с пользователем. Известно, что некоторые из ведущих сторонних разработчиков блокируют основной поток с 42 мс до 1,6 с для более чем 50% проанализированных сайтов. Заблокированный основной поток приводит к высокому общему времени блокировки (TBT) , которое является одним из показателей, влияющих на оценку производительности сайта. Кроме того, это также задерживает реакцию на взаимодействие с пользователем и ухудшает показатель «Взаимодействие с следующей отрисовкой» (INP) , используемый для измерения скорости реагирования веб-сайтов. Таким образом, затраты на выполнение скрипта оказывают существенное влияние на производительность.

2. Число : в среднем веб-сайты используют около 21 стороннего посредника на мобильных устройствах и в Интернете. Часто сторонние теги добавляются с помощью инструментов управления тегами, которые не контролируются напрямую техническими группами или группами разработчиков. Теги, которые не являются обязательными, могут быть добавлены другими командами без проверки и никогда не будут удалены. Это может существенно повлиять на взаимодействие с пользователем, вес страницы или загрузку ЦП. Создание процесса управления может разрешить такие ситуации и позволить разработчикам проверять влияние каждого поставщика. Было бы полезно, если бы у разработчиков были готовые данные для всех третьих сторон, которые предоставляют конкретную функцию, с их влиянием на производительность, преимуществами и компромиссами для сравнения. Еще одна проблема, с которой сталкиваются команды, заключается в том, что на многих сайтах сторонние теги работают только в рабочей среде, но не в средах разработки, что усложняет их тестирование разработчиками.

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

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

Вследствие вышеизложенного третьи стороны могут повлиять на любой или все компоненты Core Web Vitals. Большинство сторонних разработчиков отрицательно влияют на функцию Largest Contentful Paint (LCP) и задержку первого ввода (FID) . Вставки YouTube блокируют основную ветку на 4,5 секунды для 10% веб-сайтов на мобильных устройствах и как минимум на 1,6 секунды для 50% изученных веб-сайтов. Представьте себе разочарование пользователя, если он наткнулся на страницу с 20 такими скриптами при медленном соединении. Следующая визуализация с сайта Thirdpartyweb.today показывает сторонние компании, которые в настоящее время оказывают наибольшее влияние на производительность.

«На ~4 миллионах крупнейших сайтов на ~2700 источников приходится ~57% всего времени выполнения скриптов, а на 50 крупнейших объектов уже приходится ~47%». - сторонний веб-сайт

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

Мы признаем, что Google продает ряд часто используемых сторонних скриптов, включая Диспетчер тегов Google, встраивания YouTube и ReCaptcha, и это лишь некоторые из них. Мы признаем, что некоторые наши скрипты могут оказывать меньшее влияние на производительность основных веб-показателей, и мы стремимся изучить способы улучшить это влияние, где это возможно.

Как Chrome может помочь?

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

1. Найдите более эффективные способы загрузки сторонних ресурсов в Интернет, не ухудшая при этом пользовательский опыт или бизнес-результаты.

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

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

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

Предлагаемый подход

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

1. **Дайте разработчикам более подробную информацию о влиянии третьих сторон с помощью RUM и инструментов разработчика Chrome.**

   RUM относится к реальным данным пользовательских метрик (также известным как данные полей ), доступным через API-интерфейсы веб-мониторинга производительности . Инструменты разработчика Chrome включают Lighthouse, Chrome DevTools и отчет об опыте использования Chrome. Мы предлагаем улучшить доступные API и инструменты, чтобы разработчики сайтов понимали влияние каждой третьей стороны, которую они использовали на каждой странице. Инструменты также расскажут им о действиях, которые они могут предпринять, чтобы смягчить последствия (например, отложить их или использовать фасады ) и изучить другие потенциальные решения (сторонние сторонние компании или DIY) с компромиссами. Что касается API-интерфейсов мониторинга веб-производительности, мы изучаем способы расширения охвата ресурсов перекрестного происхождения без ущерба для конфиденциальности и безопасности наших пользователей.

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

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

   Мы также хотели бы решить такие проблемы в средах JavaScript и системах управления контентом (CMS), где это более уместно. Такие проекты, как Aurora и WordPress Performance Team, научили нас важности встроенных настроек по умолчанию, которые решают известные проблемы с загрузкой. Параметры по умолчанию, заложенные в фреймворки и CMS, ведут бизнес по хорошо освещенному пути. Они также могут быть полезны для пользовательского агента (например, Chrome) в качестве подсказок, позволяющих применять эвристику для оптимизации загрузки страниц и CWV. Такие подсказки могут помочь пользовательскому агенту решить, когда и как конкретные сторонние приложения должны загружаться в жизненном цикле страницы. (Например, компонент сценария Next.js имеет встроенную настройку по умолчанию для загрузки сторонних сценариев после того, как страница станет интерактивной.)

3. **Стимулируйте сторонние компании снизить влияние на производительность за счет повышения прозрачности.**

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

Проблемы

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

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

Мы надеемся сотрудничать с различными категориями третьих сторон, понимать все нюансы, находить компромиссы и разрабатывать стимулы, которые будут работать для всех. Мы понимаем, что нам нужно работать отдельно с организациями в каждой области, чтобы наша стратегия была эффективной. Сюда входят наши внутренние партнеры, такие как Google Tag Manager, Google Ads и YouTube.

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

2. Мы предлагаем улучшить Chrome, чтобы он мог применять оптимизации, помогающие найти правильный баланс при определении приоритета загрузки собственных и сторонних ресурсов. Ценное изменение становится стандартным для всех браузеров, но на это требуется время. Например, атрибут loading для элементов <img> и <iframe> доступен в Chrome/Edge с 2019 года, но стал доступен в Safari только в 2022 году. Пока функция не будет стандартизирована, пользователям сторонних ресурсов придется гарантировать что они оптимизированы и для других браузеров. Мы поможем, подчеркнув это в наших руководствах, где это уместно.

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

Первоначальные предложения по стандартам

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

LazyEmbeds

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

Вот демонстрация использования LazyEmbeds для отложенной загрузки видео YouTube на страницу. Одна вставка видео YouTube обычно добавляет на страницу 500–600 КБ JavaScript. Мы попытались оптимизировать сообщение в блоге с помощью 14 таких вставок видео с помощью LazyEmbeds. Результаты были многообещающими в отношении времени загрузки страницы и экономии данных.

Чтобы узнать больше об этой работе, ознакомьтесь с нашим пояснением, а также с обсуждением намерений и расширением эксперимента на Blink-dev.

Целевое стороннее регулирование

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

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

Улучшение API RUM

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

1. Отчеты <iframe> . Мы работаем над решениями, которые могут использовать API Performance Timeline для создания межкадровых отчетов. Это позволит авторам страницы верхнего уровня проверять данные о производительности стороннего iframe, встроенного в страницу.

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

Дальнейшие обновления

Мы все еще экспериментируем со многими такими идеями и надеемся опубликовать на GitHub пояснения и проекты спецификаций изменений по мере продвижения. Третьи лица и владельцы сайтов, желающие сотрудничать с нами или оставлять отзывы, могут посредством них участвовать в обсуждениях. Третьи стороны также могут сосредоточиться на оптимизации показателей Core Web Vitals и INP, чтобы гарантировать, что им не приписываются плохие данные Core Web Vitals/INP. На данный момент те, кто активно ищет обновления, могут обратиться к сообщениям в группе Blink-dev .

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

Особая благодарность Лине Сохони-Кастуре, Джереми Вагнеру, Жилберто Кокки, Кенджи Бае, Кохею Уэно, Кентаро Хара, Алексу Н. Хосе, Мелиссе Митчелл, Йоаву Вайсу, Шунья Шишидо и Минору Чикамунэ за их отзывы и вклад.