PageSpeed ​​по-прежнему помечает скрипты Google Ads даже после удаления рекламных блоков — React + ReactSnap ⇐ Javascript

[Anonymous]

У меня есть приложение React, которое использует ReactSnap для статического предварительного рендеринга. На некоторых страницах нет рекламных блоков, но PageSpeed ​​Insights по-прежнему помечает страницу pagead2.googlesyndiction.com в разделе «Уменьшить неиспользуемый JavaScript» на этих страницах.
Мои текущие настройки:
В index.html я загружаю скрипт AdSense глобально для всех страниц:

Код: Выделить всё

window.onload = () => {
if (navigator.userAgent !== 'ReactSnap') {
const script = document.createElement('script');
script.async = true;
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX';
script.crossOrigin = 'anonymous';
document.body.appendChild(script);
}
};

Мой рекламный компонент отображается только тогда, когда он находится в поле зрения (с помощью IntersectionObserver), а на некоторых страницах вообще не используются никакие рекламные компоненты.
Проблема:
Даже на страницах с нулевым количеством отображаемых рекламных блоков PageSpeed ​​по-прежнему сообщает о сценарии AdSense как о ресурсе с коротким сроком службы кэша. Удалить теги со страницы недостаточно — скрипт все равно загружается, поскольку он внедрен глобально в index.html.
Чего я хочу:
Я хочу, чтобы сценарии AdSense загружались только на страницах, которые фактически отображают рекламный блок, чтобы страницы без рекламы были полностью чистыми и не помечались PageSpeed.
Мое предлагаемое решение:
Переместите внедрение скрипта из index.html в сам рекламный компонент, внедрив его один раз при монтировании первого рекламного компонента:

Код: Выделить всё

useEffect(() => {
if (navigator.userAgent === 'ReactSnap') return;
if (!document.querySelector('script[src*="adsbygoogle.js"]')) {
const script = document.createElement('script');
script.async = true;
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX';
script.crossOrigin = 'anonymous';
document.head.appendChild(script);
script.onload = () => {
(window.adsbygoogle = window.adsbygoogle || []).push({});
};
} else {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
}, [adSlot]);

Мои вопросы:
1. Является ли этот подход безопасным и надежным для AdSense? Известны ли проблемы с динамическим внедрением файлаadsbygoogle.js внутри компонента React, а не index.html?
2. Может ли это привести к неправильной загрузке рекламы в некоторых случаях, например, если несколько рекламных компонентов монтируются почти одновременно?
3. Есть ли лучший шаблон для условной загрузки AdSense только на страницах, которые фактически используют рекламу в React SPA?
Среда: React 18, ReactSnap, Cloudflare (с Rocket Loader), развернутые как статический сайт.

Подробнее здесь: https://stackoverflow.com/questions/798 ... nits-react