Как оптимизировать получение рекламы из скриптов DFP и диспетчера тегов Google?

Я являюсь частью команды, работающей над улучшением оценки Lighthouse нашего веб-сайта: https://www.bikewale.com/m/royalenfield-bikes/classic-350/

Мы концентрируемся на оптимизации доставки javascript на странице, чтобы сократить время до интерактивности. Однако мы заметили, что сценарии, такие как gtm.js, gpt.js и загрузка рекламы при загрузке страницы, ограничивают наше максимальное улучшение примерно до 70 (оценка производительности маяка).

После оптимизации доставки javascript на нашей стороне мы смогли набрать не более 70 баллов. Мы попытались удалить файлы js для диспетчера тегов Google и gpt и увидели, что результат вырос до 95 (приблизительно). Кроме того, ленивая загрузка всех объявлений и, следовательно, запрос к dfp дает нам повышение примерно до 75 (мы не можем этого сделать, потому что первое объявление находится в первом сгибе).

Обратите внимание, что мы следовали руководствам и передовым методам, указанным в следующих ссылках: gtm - https://developers.google.com/tag-manager/quickstart gpt - https://support.google.com/admanager/answer/7485975

googletag.pubads().refresh(immediateAds); // immediateAds is array of first fold ads Метод обновления снижает производительность.

Есть ли способ оптимизировать доставку рекламы и скриптов gtm, чтобы повысить производительность? Возможно более новая версия скриптов или альтернатива? Есть ли способ загрузить первое объявление сразу и отложить загрузку других объявлений на странице без использования метода refresh()


person Sanjay George    schedule 07.06.2019    source источник


Ответы (1)


Поздравляем с достижением 70 баллов! Это очень респектабельная оценка для сайта электронной коммерции.

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

Снимок экрана Google Lighthouse с рекомендациями по предварительному подключению

Для каждого из этих источников вы должны добавить две подсказки в верхней части страницы:

<link rel="dns-prefetch" href="https://dt.adsafeprotected.com">
<link rel="preconnect" href="https://dt.adsafeprotected.com">

Первая подсказка просит браузер выполнить поиск источника в DNS. Второй просит браузер установить TCP-соединение. Preconnect выполняет все, что делает dns-prefetch, но не все браузеры поддерживают предварительное подключение. Использование обоих советов позволяет добиться максимальной производительности от максимально возможного количества браузеров.

Обе эти подсказки дают браузеру фору для ресурсов, о которых он иначе не узнает до более позднего этапа процесса загрузки страницы.

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

person Michael Crenshaw    schedule 12.06.2019