Чи сповільнюють нативні віджети ваш сайт? Виміряно вплив на продуктивність

Нативні віджети від Taboola, Outbrain, MGID та Revcontent дійсно додають вимірюваний час завантаження, переважно через сторонній JavaScript, додаткові циклічні запити до рекламного сервера та завантаження графічних активів нижче згину. Наскільки це шкодить, сильно залежить від реалізації: асинхронно завантажений, відкладено відрендерений віджет, розміщений нижче згину, коштує набагато менше, ніж синхронний скрипт, що блокує головний потік біля верху сторінки.

Звідки насправді береться вартість продуктивності#

Віджет рекомендацій контенту — це не один запит. Його встановлення зазвичай запускає:

• Власний тег скрипта видавця, який завантажується асинхронно в більшості сучасних реалізацій, хоча старіші інтеграції іноді досі завантажуються синхронно і блокують рендеринг
• Виклик до рекламного сервера мережі для отримання набору рекомендацій для конкретної сторінки та користувача
• Додаткові циклічні запити з боку попиту та header bidding, якщо мережа проводить програмні аукціони, а не продає інвентар напряму, що може включати кілька партнерів header bidding
• Графічні або мініатюрні активи для кожного рекомендованого елемента, зазвичай від 6 до 12 на екземпляр віджета
• Трекінгові пікселі, що запускаються при рендерингу та кліку, як для мережі, так і для будь-якого подальшого трекінгу рекламодавця

Кожен з них додає затримку, і вони накопичуються. Віджет, який виглядає як «один тег скрипта» у вашій CMS, може запустити дюжину або більше мережевих запитів, коли він фактично відрендериться.

Що це конкретно робить з Core Web Vitals#

Метрики, які найімовірніше зміняться:

CLS — це те, що підводить найбільше видавців, оскільки це також та метрика, на яку сигнали досвіду користувача Google звертають найбільшу увагу. Якщо ваш віджет завантажується без зарезервованого розміру контейнера, сторінка помітно стрибає, коли він заповнюється, що саме і карає CLS.

Чому той самий віджет працює по-різному на різних сайтах#

Два видавці, які запускають технічно однакову інтеграцію Taboola або Outbrain, можуть отримати суттєво різні результати Core Web Vitals, і різниця майже завжди полягає в оточенні сторінки, а не в самому коді віджета. Сторінка, яка вже легка, має мінімум сторонніх скриптів, оптимізовані зображення, швидкий хостинг, поглинає ще один асинхронний віджет з дуже незначним видимим впливом, тому що в бюджеті завантаження сторінки є вільна потужність. Сторінка, яка вже несе кілька інших сторонніх скриптів (аналітика, чат-віджети, друга рекламна мережа, соціальні вбудовування), перетинає поріг, коли запити нативного віджета стають тими, які користувачі фактично помічають, навіть якщо вони можуть становити невелику частку загальної ваги сторінки. Якщо ви вирішуєте проблему з продуктивністю після додавання віджета, спочатку проаналізуйте все інше, що працює на сторінці; віджет часто є найновішим доданим, найпомітнішим підозрюваним, але не обов'язково фактичним вузьким місцем.

Як встановити віджет, не знизивши значно швидкість#

Різниця між віджетом, який вам нічого не коштує у вимірюваному сенсі, і тим, який помітно уповільнює ваш сайт, зазвичай полягає у виборі реалізації, а не в самій мережі:

1. Завантажуйте скрипт асинхронно, ніколи не блокуючим синхронним тегом біля верху сторінки
2. Резервуйте простір контейнера фіксованою висотою або CSS зі співвідношенням сторін до того, як віджет заповниться, щоб запобігти зсуву макета
3. Використовуйте відкладене завантаження для контенту нижче згину, щоб запити віджета не конкурували з вашим основним контентом за пропускну здатність під час початкового завантаження сторінки
4. Розміщуйте його після вашого основного контенту, не лише для досвіду читача, але й тому, що це природним чином відкладає завантаження до після рендерингу контенту, який фактично визначає ваш LCP
5. Обмежуйтеся одним екземпляром віджета на сторінку, де це можливо; нагромадження кількох віджетів рекомендацій множить кількість запитів при зменшенні доходу на одиницю
6. Тестуйте з реальним уповільненням пристрою, а не лише на десктопі з широким каналом; продуктивність на мобільному 4G — це де вага віджета проявляється найболючіше

Чи вартий дохід компромісу зі швидкістю?#

Це і є справжнє рішення, і воно залежить від того, що швидкість сторінки означає для вашого конкретного сайту. Якщо ви сильно залежите від органічного пошукового трафіку і досвід користувача сторінкою суттєво впливає на ваші позиції, погано реалізований віджет, що тягне вниз ваші показники Core Web Vitals, може коштувати вам більше у видимості в пошуку, ніж він приносить дохід від реклами. Якщо ваш трафік надходить переважно з прямих джерел, соціальних мереж або розсилок, де ранжування в пошуку є меншим фактором, вартість швидкості має менше значення порівняно з приростом RPM.

У будь-якому випадку, виправлення рідко полягає в тому, щоб «не запускати нативні віджети». Майже завжди це «виправити реалізацію». Добре реалізований асинхронний, відкладено завантажений, правильно розмірений віджет від Taboola, Outbrain, MGID або Revcontent коштує частку від того, що коштує погано реалізований, за той самий дохід.

Як OpenAdLibrary допомагає порівняти перед тим, як взяти зобов'язання#

Перш ніж додавати віджет від мережі, яку ви раніше не використовували, варто побачити, як насправді виглядає його інвентар і формат на інших сайтах, а не лише в презентації продажів. OpenAdLibrary дозволяє переглядати живу креативнів від Taboola, Outbrain, MGID, Revcontent та інших мереж, щоб побачити формат, щільність зображень і механіку кліків, які ви фактично інтегруватимете, що є більш конкретною основою для рішення про реалізацію, ніж лише демо-акаунт.

Як фактично виміряти вплив на ваш власний сайт#

Не покладайтеся на загальні оцінки впливу, включаючи діапазони в цій статті. Виміряйте свій власний сайт безпосередньо:

1. Спочатку базовий рівень. Проганяйте ваші ключові сторінки через інструмент на кшталт PageSpeed Insights або WebPageTest перед встановленням чогось і записуйте LCP, CLS та INP разом із загальною вагою сторінки та кількістю запитів.
2. Встановіть віджет, потім повторно протестуйте ті самі сторінки в тих же умовах. Використовуйте профіль уповільненого мобільного з'єднання, а не лише необмежений десктоп, оскільки саме там вплив зазвичай проявляється найбільше.
3. Ізолюйте внесок самого віджета, більшість інструментів тестування дозволяють фільтрувати водоспад за джерелом запиту, тому ви можете точно побачити, скільки від загального часу завантаження та кількості запитів відповідає сам віджет порівняно з базовим рівнем вашого сайту.
4. Повторно тестуйте після виправлень реалізації (асинхронне завантаження, зарезервована висота контейнера, відкладене завантаження), а не припускайте, що виправлення спрацювало. Дрібні деталі реалізації, наприклад, чи задана висота контейнера фіксованим значенням у пікселях проти адаптивної рамки зі співвідношенням сторін, можуть давати суттєво різні результати CLS навіть з тим самим базовим віджетом.
5. Повторюйте періодично, а не лише один раз при запуску. Мережі іноді змінюють власну поведінку скриптів або щільність реклами з часом без повідомлення видавцям, тому налаштування, яке вимірювалося чистим півроку тому, варто перевірити знову.

Поширені помилки реалізації#

Кілька повторюваних проблем становлять більшість уникненої вартості продуктивності:

• Відсутність зарезервованої висоти контейнера, тому сторінка помітно стрибає, коли віджет заповнюється, безпосередньо шкодячи CLS
• Розміщення віджета вище або всередині основного контенту, а не після нього, що створює конкуренцію з вашим фактичним контентом за пропускну здатність та пріоритет початкового завантаження
• Нагромадження кількох екземплярів віджета на одній сторінці, що множить кількість запитів при обмеженому додатковому доході
• Використання старого синхронного фрагмента інтеграції, який видавець скопіював роки тому і ніколи не переглядав, коли мережа з тих пір випустила асинхронну версію
• Відсутність тестування саме на мобільних пристроях, де поєднання повільніших з'єднань і менших областей перегляду робить проблеми часу завантаження та зсуву макета більш помітними, ніж вони здаються на десктопі з широким каналом

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

Суть#

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