Este problema no es un problema simple de simplemente crear e inyectar el archivo de script.

Quiero optimizar mi sitio web que carga archivos de secuencias de comandos de anuncios de Google.

Problema : cuando los archivos de script de los anuncios de Google se cargan en paralelo con los archivos HTML, la velocidad de carga de la página disminuye drásticamente.

Solución que se me ocurrió : decidí cargar los archivos de secuencia de comandos de los anuncios de Google después de que la página web esté completamente cargada al 100% (o incluso 100-200 milisegundos después de que la página esté cargada al 100%)

Las soluciones que probé son las siguientes con detalles:

1. Creó una función para cargar el archivo de script y usó window.onload = loadGoogleSyndication() . Pero en realidad carga el script antes de la carga completa del documento HTML. (puedo observarlo en la prueba de velocidad del sitio)

    function loadGoogleSyndication() { const googleSyndication = document.createElement('script'); googleSyndication.type = 'text/javascript'; googleSyndication.async = true; googleSyndication.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; const script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(googleSyndication, script); } window.onload = loadGoogleSyndication()

2. En segundo lugar, utilicé document.onload = loadGoogleSyndication() . Pero nuevamente carga el archivo antes de completar la carga de la página.

 window.onload = loadGoogleSyndication()

3. El mismo problema es con window.addEventlister("load", loadGoogleSyndication())

La única solución que funcionó : uso la propiedad setTimeout y cargué el archivo después de 2,5 segundos y luego funcionó. (2,5 segundos pueden ser 2 segundos también para una conexión rápida a Internet)

Esto funciona 👇

 window.addEventListener("load", function () { setTimeout(() => { loadGoogleSyndication(); }, 2500); }, true);

Pero, ¿hay alguna otra solución que no sea esta en la que el script se carga exactamente después (o después de 100 milisegundos) del archivo 100% HTML cargado? Debido a que usar la propiedad setTimeout es lanzar un cuchillo en la oscuridad, no sabemos exactamente cuándo se completa la carga del archivo HTML.

Otra solución podría ser cargar el archivo después de que la ventana se desplazara window.onscroll , pero no quiero usarlo.