Cuando se trata de mejorar el rendimiento de un sitio web, Google PageSpeed Insight es una herramienta invaluable. ¿Pero qué pasa cuando deseas monetizar tu sitio con Google Ads? ¿Se puede tener la mantequilla y la plata de la mantequilla: un sitio rápido y ingresos publicitarios? Afortunadamente, la respuesta es sí. En este artículo, discutiremos técnicas probadas para optimizar tu sitio web mientras utilizas Google Ads, sin sacrificar el rendimiento.
El problema de la velocidad con Google Ads
La adición de Google Ads en tu sitio a menudo puede resultar en una reducción de la velocidad de carga. Este retraso generalmente se debe a que los scripts publicitarios en JavaScript se ejecutan antes de que tu contenido esté completamente cargado. Como resultado, tu sitio puede volverse lento, lo que puede tener un impacto negativo en la experiencia del usuario y, en última instancia, en tu clasificación en los motores de búsqueda.
¿La solución? Es esencial optimizar los scripts y archivos relacionados con Google Ads. No solo mejorará la experiencia del usuario, sino que también aumentará tus posibilidades de obtener una mejor clasificación en Google.
Para lograrlo, tienes varias opciones, incluida la utilización de plugins y modificaciones a nivel de código. Autoptimize es uno de esos plugins que puede ayudarte a acelerar las cosas optimizando tu JavaScript.
¿Cómo utilizar el plugin Autoptimize?
La implementación de Autoptimize es un primer paso crucial para mejorar el rendimiento de tu sitio web. Después de activar el plugin y optimizar el JavaScript, puedes pasar al siguiente paso para un rendimiento aún mejor.
Optimización de CSS para una mayor velocidad
Una vez que hayas marcado la opción «Optimizar JavaScript», es hora de prestar atención a tus archivos CSS. En la configuración de Autoptimize, también marca la opción «Optimizar CSS». Esta acción reduce el tamaño de los archivos CSS de manera similar a lo que hiciste con JavaScript, eliminando espacios innecesarios, comentarios y combinando varios archivos en uno solo. Esta consolidación disminuye la cantidad de solicitudes HTTP necesarias para cargar tu sitio, lo que puede reducir considerablemente el tiempo de carga de las páginas.
- Reducción de solicitudes HTTP: Cada archivo CSS o JavaScript adicional que un navegador debe descargar puede aumentar el tiempo de carga de tu sitio. Al combinarlos, Autoptimize reduce estas solicitudes, acelerando así la visualización de tu sitio.
- Compresión de archivos: Además de combinar los archivos, Autoptimize los comprime, reduciendo su tamaño sin perder calidad ni funcionalidad.
- Gestión de fuentes: Otra opción interesante es la optimización de fuentes. Seleccionar «Optimizar fuentes» permite cargar las fuentes de manera más eficiente, reduciendo bloqueos en el renderizado.
- Carga diferida de imágenes: La carga diferida de imágenes (Lazy Load) es una función que solo carga las imágenes cuando entran en el campo de visión del usuario. Esto ayuda a acelerar el tiempo de carga inicial de la página.
Optimización de imágenes
Otro paso clave para mejorar la velocidad de tu sitio es la optimización de imágenes. Aunque Autoptimize no ofrece directamente una opción de optimización de imágenes, se recomienda encarecidamente utilizar un plugin complementario para ello. Las imágenes optimizadas significan archivos más pequeños para cargar, lo que contribuye en gran medida a la velocidad del sitio.
- Seleccionar el formato correcto: Utiliza formatos de imagen modernos como WebP, que ofrece una calidad similar a los formatos tradicionales pero con un tamaño de archivo considerablemente reducido.
- Compresión inteligente: Herramientas como Imagify o ShortPixel pueden comprimir tus imágenes sin pérdida significativa de calidad, haciendo que la carga de tu sitio sea más rápida sin comprometer la experiencia visual.
- Redimensionamiento de imágenes: Asegúrate de que tus imágenes no sean más grandes de lo que necesitan ser. Las imágenes redimensionadas para adaptarse a los espacios asignados reducen el peso de la página.
Cache y CDN
Finalmente, aprovechar el caché y las redes de distribución de contenido (CDN) puede reducir aún más el tiempo de carga de tu sitio. Autoptimize se integra bien con plugins de caché como WP Rocket o W3 Total Cache, que almacenan una versión estática de tus páginas para servirlas rápidamente a los visitantes recurrentes. El uso de un CDN también puede distribuir tu contenido desde servidores ubicados cerca de tus visitantes, reduciendo así los tiempos de carga.
- Configuración del caché: Una buena configuración de caché permite servir rápidamente páginas precargadas a tus visitantes, disminuyendo el trabajo necesario para generar cada página en el momento.
- Integración CDN: Un CDN almacena copias de tu sitio en varios servidores alrededor del mundo, garantizando que los usuarios siempre estén cerca de una fuente de tu contenido.
Siguiendo estos pasos y aprovechando al máximo las capacidades de Autoptimize, puedes mejorar considerablemente el rendimiento de tu sitio web, ofreciendo así una mejor experiencia a tus usuarios mientras mejoras tu SEO.
Modificación del código: Un paso adicional
Si te sientes cómodo con la codificación, otro paso que puedes tomar es agregar scripts personalizados para optimizar aún más la carga de tus anuncios de Google Ads. Al colocar un cierto código JavaScript justo antes de la etiqueta </body>, puedes retrasar la carga de los anuncios hasta que se detecte la interacción del usuario en la página.
Para comenzar, cuando usas el código de tus anuncios Display (o cualquier otro, todo menos AUTO), el código proporcionado por Google que debes colocar en tu sitio, se ve así:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Para comenzar, vas a eliminar esta parte:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>Para quedar, por lo tanto, en el lugar (o lugares) donde deseas ver tu(s) anuncio(s), solo con este código:
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>La parte de JavaScript que has eliminado es importante, pero no sirve de nada usarla varias veces en caso de anuncios múltiples, además, es mucho mejor colocarla al final de la página, en el archivo footer.php de tu plantilla, justo encima de la etiqueta </body>, ganarás mucho en rendimiento, pero no es suficiente. En lugar de copiar directamente el código al final de la página, te voy a proponer una alternativa aún más poderosa. Aquí está el código que copiarás:
<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>
<script data-ad-client="ca-pub-3xxxxxxxxxx" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-type="lazy"></script>Código para la carga diferida
El script a añadir es bastante simple. Utiliza un conjunto de eventos de interacción del usuario para desencadenar la carga de los scripts de Google Ads. Este método garantiza que los anuncios no ralenticen la carga inicial de la página.
El papel de `data-type=»lazy»`
El script utiliza el atributo data-type="lazy" para identificar los scripts y las iframes que deben ser cargados de forma diferida. Cuando se detecta un evento de interacción, el script reemplaza el atributo data-src por src, desencadenando así la carga del script o del iframe.
Tabla resumen de los pasos
| Paso | Acción | Herramienta/Código utilizado |
|---|---|---|
| 1 | Optimización de JavaScript | Autoptimize |
| 2 | Agrupación de archivos JS | Autoptimize |
| 3 | Agregar el código para carga diferida | Script personalizado |
No olvides: Probar, probar, probar
Antes de implementar estos cambios en tu sitio en vivo, asegúrate de probar su efectividad utilizando Google PageSpeed Insight. Un buen puntaje es un indicador de que estás en el camino correcto, pero no olvides monitorear métricas clave como el tiempo de carga y la tasa de conversión.
Consideraciones para el seguimiento del rendimiento
Monitorear regularmente el rendimiento de tu sitio te dará una idea clara de la efectividad de estas optimizaciones. Utiliza herramientas como Google Analytics además de Google PageSpeed Insights para una evaluación completa.
Evitar problemas de compatibilidad
Ten en cuenta los problemas potenciales de compatibilidad al agregar nuevos plugins o scripts. Siempre prueba estos elementos en un entorno de desarrollo antes de implementarlos en el sitio en producción.
El seguimiento constante es la clave
Al final, la optimización de un sitio web es un proceso continuo. Los métodos que utilizas hoy pueden no ser tan efectivos mañana debido a los cambios constantes en los algoritmos de los motores de búsqueda y las tecnologías web.
Mantén un ojo en el rendimiento de tu sitio y no dudes en ajustar tu estrategia en consecuencia. Una mejor velocidad de sitio no solo es beneficiosa para la clasificación SEO, sino que también contribuye a una mejor experiencia del usuario, lo que puede llevar a tasas de conversión más altas y, en última instancia, a mayores ingresos.
Optimizar un sitio para la velocidad mientras se utiliza Google Ads puede parecer una tarea ardua, pero con las técnicas y herramientas adecuadas, es completamente alcanzable. Los pasos mencionados en este artículo deberían ponerte en el camino correcto hacia un sitio web que sea rápido y rentable.
