Solución a todos los Diagnósticos y Oportunidades de PageSpeed

¡Te doy la bienvenida al fascinante mundo de la optimización web y la mejora de la velocidad de carga! En esta nueva lección del curso de optimización WordPress aprenderemos a darle solución a todos los Diagnósticos y Oportunidades de PageSpeed, también qué significa cada uno de ellos y cuáles son las causas comunes de estos avisos.

PageSpeed: una palabra que resuena en los oídos de cualquier propietario de un sitio web que busca destacar en la era digital. Con cada clic y desplazamiento, los usuarios exigen una experiencia de carga veloz, y Google, nuestro aliado y juez supremo, evalúa constantemente la velocidad y eficiencia de nuestras páginas.

En esta guía, no solo desglosaremos los diagnósticos y oportunidades de PageSpeed Insights que nos ofrece al analizar nuestra web, sino que también te proporcionaré las herramientas y estrategias necesarias para arreglar y aprobar todos y cada uno de los avisos de PageSpeed.

Así que, si estás listo para transformar tu sitio web en una máquina de velocidad y eficiencia y conseguir el ansiado 100/100 en WordPress, prepárate para descubrir cómo arreglar los problemas de PageSpeed Insights. ¡Comencemos este emocionante viaje hacia la optimización WordPress!

Qué son las Oportunidades y Diagnósticos de PageSpeed

En nuestro viaje para mejorar la velocidad de carga de tu sitio web y optimizar la experiencia del usuario, es esencial comprender en profundidad qué significan los diagnósticos y oportunidades de PageSpeed Insights. Estos dos términos son las brújulas que te guiarán hacia un sitio web más rápido y eficiente.

Oportunidades de PageSpeed: Desvelando las Posibilidades de Mejora

Comencemos por explorar las Oportunidades. Las oportunidades que te indica PageSpeed son sugerencias que debes implementar en tu web para mejorar la velocidad de carga.

Aquí, nos adentramos en:

• Mejoras Posibles: Las oportunidades te indican cómo puedes hacer que tu sitio web sea más rápido y eficiente. Pueden incluir sugerencias para reducir el tamaño de imágenes, minimizar archivos CSS o JavaScript, o aprovechar la memoria caché del navegador. Cada una de estas mejoras potenciales es un paso más cerca de una experiencia del usuario excepcional.
• Impacto en el Rendimiento: PageSpeed Insights también te muestra cómo cada mejora sugerida puede impactar positivamente en el rendimiento de tu sitio. Esto te permite priorizar las acciones que tendrán el mayor beneficio en términos de velocidad y eficiencia.

Al entender a fondo estos avisos y oportunidades de PageSpeed, estarás en una posición sólida para tomar decisiones sobre cómo abordar la optimización de tu sitio web. En esta misma lección desglosaremos cada uno de estos elementos con ejemplos prácticos y estrategias efectivas para arreglar avisos de PageSpeed y corregir errores.

Diagnósticos de PageSpeed: Descubriendo las Advertencias

Ahora, pasemos a los Diagnósticos. En esencia, estos representan las advertencias que PageSpeed Insights te presenta, señalando áreas específicas que necesitan atención inmediata.

Cuando hablamos de diagnósticos, estamos hablando de:

• Avisos de PageSpeed: Estos son como las señales de advertencia en una autopista. Te indican que hay algo en tu sitio que podría ralentizar la velocidad de carga o afectar la experiencia del usuario. No los subestimes, ya que a menudo son los pequeños detalles los que marcan la diferencia.
• Errores de PageSpeed: Aquí, estamos hablando de problemas más críticos. Los errores de PageSpeed pueden ser obstáculos importantes en el camino hacia la eficiencia. Pueden incluir problemas de código, scripts obsoletos o ineficaces, o problemas de carga de recursos, entre otros.

Cuando abordas los diagnósticos de PageSpeed, estás dando los primeros pasos hacia una optimización significativa. Estas advertencias y errores son como piedras en el camino que deben ser retiradas para permitir un tráfico fluido en tu sitio web.

¡Prepárate para convertirte en un maestro de la optimización web! Continúa conmigo en esta emocionante travesía hacia un sitio web más rápido, eficiente y amigable para tus visitantes.

A continuación, profundizaremos en cómo resolver los diagnósticos de PageSpeed, brindándote las herramientas y estrategias necesarias para impulsar tu sitio web al siguiente nivel de rendimiento.

Cómo arreglar diagnósticos de PageSpeed

Reduce el contenido JavaScript que no se use

¿Qué significa “Reducir el contenido JavaScript que no se use”? En términos simples, se refiere a la necesidad de minimizar la cantidad de código JavaScript innecesario que se carga cuando un visitante llega a tu sitio web. Si bien JavaScript es esencial para el funcionamiento de una web, cargar demasiado puede ralentizar significativamente tu página. Esto afecta negativamente la velocidad de carga y también a la experiencia del usuario.

Causas comunes Reduce el contenido JavaScript que no se use

Ahora que comprendemos qué se refiere este diagnóstico, es crucial explorar las causas comunes detrás del exceso de JavaScript. Esto puede incluir:

1. Plugins y temas pesados: Algunos plugins y temas de WordPress pueden incorporar una gran cantidad de scripts de JavaScript que tal vez no necesitas en tu sitio. Cada uno de estos scripts contribuye al tiempo de carga.
2. Funcionalidades no utilizadas: A menudo, las funcionalidades de tu sitio web pueden requerir ciertos scripts de JavaScript. Si no utilizas esas funcionalidades, estos scripts se vuelven innecesarios y deben eliminarse.
3. Código personalizado no optimizado: Si has agregado código JavaScript personalizado, es fundamental asegurarse de que esté bien optimizado y que solo contenga lo necesario para el funcionamiento de tu sitio.

Cómo arreglar Reduce el contenido JavaScript que no se use

Arreglar este diagnóstico de PageSpeed implica tomar medidas específicas:

Reduce el contenido CSS que no se use

Antes de sumergirnos en la solución, es vital comprender qué significa ese misterioso diagnóstico de “Reducir el contenido CSS que no se usa” en PageSpeed Insights. CSS, abreviatura de “Cascading Style Sheets” o Hojas de Estilo en Cascada, es el lenguaje utilizado para diseñar la apariencia y el formato de tu sitio web. Es como el traje que viste tu página web, pero a veces, ese traje tiene más adornos de los necesarios.

Cuando PageSpeed Insights te alerta sobre la necesidad de reducir el contenido CSS no utilizado, está señalando que tu sitio web está cargando más scripts CSS de los que realmente necesita para mostrar la página correctamente. En otras palabras, tu web está llevando consigo peso innecesario, lo que puede ralentizar la velocidad de carga y afectar negativamente la experiencia del usuario.

Causas comunes Reduce el contenido CSS que no se use

Prácticamente y en muchos casos se deben a las mismas causas que el aviso anterior sobre “Reduce el contenido JavaScript que no se use”:

1. Plugins y temas pesados: Algunos plugins y temas de WordPress pueden incorporar una gran cantidad de scripts CSS que tal vez no necesitas en tu sitio. Cada uno de estos scripts contribuye al tiempo de carga.
2. Funcionalidades no utilizadas: A menudo, las funcionalidades de tu sitio web pueden requerir ciertos scripts de CSS. Si no utilizas esas funcionalidades, estos scripts se vuelven innecesarios y deben eliminarse.
3. Acumulación de código CSS antiguo: Esto sucede cuando se realizan cambios en el diseño del sitio a lo largo del tiempo, y las reglas antiguas se quedan atrás, ocupando espacio valioso.

Cómo arreglar Reduce el contenido CSS que no se use

Ahora que sabemos qué es y por qué sucede, es hora de abordar la solución para reducir el contenido CSS que no se utiliza:

Usa formatos de vídeo para incluir contenido animado

Cuando PageSpeed Insights emite el diagnóstico “Usa formatos de vídeo para incluir contenido animado” nos indica que no estamos haciendo uso de los formatos recomendados y adecuados de vídeo para mostrar el contenido animado. En términos sencillos, nunca debes hacer uso de GIFs en tu web.

Cómo arreglar Usa formatos de vídeo para incluir contenido animado

Ahora que sabemos que el único culpable de este aviso son los GIFs vamos a aprender cómo solucionar este aviso sin renunciar al contenido animado:

Rápido y sencillo, verdad?

Reducir el tiempo de respuesta inicial del servidor

El tiempo de respuesta inicial del servidor, también conocido como TTFB (Time To First Byte), es uno de los diagnósticos clave que PageSpeed Insights utiliza para evaluar la eficiencia de tu sitio web. Pero, ¿qué significa exactamente?

En pocas palabras, el TTFB es el tiempo que transcurre desde que un usuario solicita una página web hasta que el servidor web comienza a enviar los primeros datos de respuesta. Es un indicador crucial de la capacidad de tu servidor para procesar solicitudes y entregar contenido rápidamente. Un TTFB lento puede ralentizar drásticamente la velocidad de carga de tu sitio, lo que puede llevar a una experiencia deficiente para el usuario y un impacto negativo en tu clasificación en los motores de búsqueda.

Causas comunes Reducir el tiempo de respuesta inicial del servidor

Estas son algunas de las razones más habituales:

1. Hosting barato o con pocos recursos: La causa #1 de todas las webs lentas. No me canso de repetir lo importantísimo que es contratar un hosting bueno, con suficientes recursos y especializado en WordPress y optimización. Existen varios muy buenos, pero yo recomiendo Siteground por encima de todos.
2. Sobrecarga del servidor: Si en tu hosting se están alojando múltiples web o si experimenta un alto tráfico de usuarios, es posible que se sobrecargue y provoque un TTFB lento.
3. Recursos mal optimizados: Archivos JavaScript, CSS o imágenes no optimizados pueden aumentar el tiempo de respuesta del servidor, ya que el servidor debe procesar estos recursos antes de enviarlos al navegador del usuario. Recuerda que puedes aprender cómo optimizar los scripts con el curso de optimización WordPress.
4. Falta de caché: La falta de una política de caché en tu web puede hacer que el servidor genere contenido repetidamente en lugar de entregar versiones almacenadas en caché, lo que ralentiza el proceso de carga y peticiones a la base de datos.
5. Redirecciones: Debes tener cuidado y vigilar si la web tiene redirecciones que impidan llegar directamente a la URL deseada.

Cómo arreglar Reducir el tiempo de respuesta inicial del servidor

Ahora que sabemos qué es el tiempo de respuesta inicial del servidor y cuáles son las causas comunes de un TTFB lento, veamos cómo podemos abordar este diagnóstico de PageSpeed Insights.

Pospón la carga de imágenes que no aparecen en pantalla

El diagnóstico Pospón la carga de imágenes que no aparecen en pantalla se refiere a la práctica de diferir la carga de imágenes en tu sitio web. ¿Por qué es importante hacerlo? Imagina que tu sitio contiene una gran cantidad de imágenes, algunas de las cuales no son visibles en la pantalla inicial, ya sea porque los usuarios deben hacer scroll para verlas o porque solo aparecen en páginas secundarias.

En lugar de cargar todas estas imágenes de inmediato cuando alguien aterriza en tu sitio, posponer su carga significa que solo se cargarán cuando el usuario las necesite o se acerque a ellas mientras se desplaza por tu sitio. Esto reduce significativamente el tiempo de carga inicial y mejora la experiencia del usuario, lo que, a su vez, puede aumentar tus notas en PageSpeed.

Causas comunes Pospón la carga de imágenes que no aparecen en pantalla

1. No se ha activado el LazyLoad: Sencillo, no has activado la opción LazyLoad para cargar las imágenes en diferido.

Cómo arreglar Pospón la carga de imágenes que no aparecen en pantalla

La solución a este aviso de PageSpeed es bien sencilla:

Publica imágenes con formatos de próxima generación

Cuando hablamos de “formatos de próxima generación” en el contexto de imágenes web, nos referimos a formatos de archivo específicos diseñados para optimizar la velocidad de carga y la calidad visual de las imágenes en un sitio web. Estos formatos son WebP y AVIF y están diseñados para reemplazar a los formatos más antiguos, como JPEG y PNG, ya que ofrecen una mejor compresión sin comprometer la calidad.

Actualmente recomiendo el uso de WebP y no AVIF, ya que WebP tiene mucha más compatibilidad con navegadores que AVIF.

Causas comunes Publica imágenes con formatos de próxima generación

1. Tu web no hace uso de WebP: Sencillo, si PageSpeed te indica este diagnóstico es que tu web no está haciendo uso de los formatos de próxima generación en imágenes. Quiere decir que sigues usando PNG o JPG.

Cómo arreglar Publica imágenes con formatos de próxima generación

Arreglar este diagnóstico es muy sencillo:

Usa un tamaño adecuado para las imágenes

Uno de los diagnósticos más frecuentes de PageSpeed Insights se relaciona con el tamaño de las imágenes. Pero, ¿qué significa exactamente “Usa un tamaño adecuado para las imágenes”? En pocas palabras: estás usando una imagen más grande de los necesario, tanto en peso como en resolución.

Causas comunes Usa un tamaño adecuado para las imágenes

A menudo, las siguientes situaciones contribuyen a imágenes inadecuadas en términos de tamaño:

1. Imágenes no optimizadas: Subir imágenes directamente desde tu cámara o dispositivo puede resultar en archivos de imagen enormes que no son adecuados para su uso web.
2. Falta de compresión: No comprimir las imágenes antes de cargarlas en tu sitio puede aumentar innecesariamente su tamaño de archivo.
3. Dimensiones incorrectas: Utilizar imágenes con dimensiones más grandes de las necesarias puede ser una carga para tu servidor y un obstáculo para la velocidad de carga.
4. Formato inadecuado: Utilizar formatos de imagen ineficientes, como JPG en lugar de WebP, puede aumentar el tamaño de la imagen.

Cómo arreglar Usa un tamaño adecuado para las imágenes

Ahora que hemos identificado las causas comunes, es hora de abordar el diagnóstico “Usa un tamaño adecuado para las imágenes” y tomar medidas concretas para solucionarlo:

Codifica las imágenes de forma eficaz

El diagnóstico “Codifica las imágenes de forma eficaz” es el resultado de los anteriores diagnósticos referentes a las imágenes. Básicamente es un resumen de cómo tus imágenes están siendo procesadas y entregadas a los visitantes de tu sitio web. Si PageSpeed te indica este aviso debes optimizar tus imágenes.

Causas comunes Codifica las imágenes de forma eficaz

Las causas más comunes de este aviso son:

1. Formatos inadecuado: Las imágenes están en formatos que no son los más adecuados para la web, lo que aumenta su tamaño y ralentiza la carga de la página.
2. Falta de compresión: Las imágenes no se comprimen adecuadamente, lo que significa que ocupan más espacio del necesario en tu servidor y se descargan más lentamente para los usuarios.
3. Resolución excesiva: Las imágenes tienen una resolución más alta de lo que realmente se necesita en la pantalla, lo que desperdicia ancho de banda y ralentiza la carga.

Cómo arreglar Codifica las imágenes de forma eficaz

Ahora que comprendemos por qué es importante este diagnóstico, vamos a la parte emocionante: cómo solucionarlo.

Elimina los recursos que bloqueen el renderizado

En términos simples, cuando PageSpeed habla de “recursos que bloquean el renderizado”, se refiere a elementos en tu sitio web que impiden que la página se cargue de manera eficiente y rápida.

Cuando un recurso bloquea el renderizado, significa que ciertos archivos, como scripts JavaScript y/o CSS, están retrasando la visualización de tu contenido. Imagina visitar una tienda donde las puertas se abren increíblemente lentas, impidiendo que puedas entrar en la tienda a comprar; este retraso puede desanimar a los clientes y reducir la tasa de conversión. Lo mismo ocurre en la web: los visitantes quieren ver tu contenido de inmediato, sin esperas.

Causas comunes Elimina los recursos que bloqueen el renderizado

Ahora que sabemos lo que significa, ¿qué provoca estos bloqueos en el renderizado? Identificar las causas comunes es el primer paso para resolver este problema:

1. Scripts y archivos CSS no optimizados: A menudo, los scripts y hojas de estilo pueden estar mal escritos o ser demasiado grandes, lo que ralentiza la carga de la página.
2. Recursos de terceros lentos: Si dependes de recursos externos, como fuentes web o bibliotecas JavaScript, la velocidad de carga de tu página se verá afectada por su rendimiento.
3. Demasiadas solicitudes: Cuantas más solicitudes de recursos haga tu página, más tiempo llevará cargarla. Reducir el número de peticiones a la base de datos puede mejorar significativamente el rendimiento.

Cómo arreglar Elimina los recursos que bloqueen el renderizado

Ahora vamos a aprender cómo eliminar los recursos que bloquean el renderizado:

Evita usar JavaScript antiguo en navegadores modernos

Cuando hablamos de “JavaScript antiguo en navegadores modernos,” nos referimos a la práctica de utilizar código JavaScript que puede no ser eficiente en las versiones más recientes de los navegadores web.

Los navegadores modernos están diseñados para ejecutar código JavaScript de manera eficiente y rápida, pero a medida que la web evoluciona, las mejores prácticas de codificación también cambian. El JavaScript antiguo puede ralentizar la carga de tu sitio web y afectar negativamente a las notas de PageSpeed, incluso a generar errores en la web.

Causas comunes Evita usar JavaScript antiguo en navegadores modernos

Ahora, hablemos de las causas comunes de este problema. A menudo, las páginas web acumulan JavaScript antiguo debido a:

1. No actualización: Si no has actualizado tu WordPress, plugins o tema con regularidad, es probable que estés ejecutando código JavaScript obsoleto. Los desarrolladores a menudo lanzan nuevas versiones de sus plugins y temas para aprovechar las últimas mejoras de rendimiento y seguridad. Asegúrate siempre de tener tu web actualizada.
2. Plugins obsoletos: Existen muchos plugins en el repertorio de WordPress que sus desarrolladores han abandonado por ciertos motivos. Si en la página oficial del repertorio de plugins hay un aviso de que no se ha actualizado en muchos meses lo recomendable es migrar a otro plugin que si esté actualizado y en producción.
3. Compatibilidad obsoleta: A veces, los scripts de servicios de terceros que utilizas en tu sitio pueden no estar actualizados para funcionar correctamente en navegadores modernos. Si un servicio de tercero usa código JavaScript antiguo es hora de migrar a una herramienta más actual y optimizada.

Cómo arreglar Evita usar JavaScript antiguo en navegadores modernos

Ahora que comprendes el problema, es hora de abordar cómo puedes solucionar los diagnósticos de PageSpeed relacionados con el uso de JavaScript antiguo en navegadores modernos:

1. Actualización: El primer paso es asegurarte de que todos los plugins, tema y core de WordPress estén actualizados para no sufrir este error y evitar futuros problemas en la web. Si no tienes tiempo de actualizar tu web o no tienes los suficientes conocimientos yo puedo ayudarte.
2. Migración a herramientas actualizadas: Si el aviso pertenece a algún plugin que no se actualiza en meses o script de terceros debes cambiar de herramienta. Busca alternativas que sí estén en producción y que sean ligeras y optimizadas.
3. Eliminación de código no utilizado: Si tienes código JavaScript que ya no se utiliza en tu sitio, elimínalo. Cuanto menos código tenga que cargar el navegador, más rápido se cargará la página. Puedes excluir scripts que no se usan en tu web con Perfmatters.

Habilita la compresión de texto

Uno de los diagnósticos más frecuentes en PageSpeed Insights es la recomendación de habilitar la compresión de texto. Para entender esto, primero debemos aclarar qué significa la compresión de texto en el contexto de la optimización web.

La compresión es una técnica que reduce el tamaño de los archivos en tu sitio web sin comprometer su calidad ni su legibilidad y se consigue al aplicar la compresión GZIP o Brotli. Estos recursos deben servirse siempre comprimidos para reducir al máximo su peso total.

Causas comunes Habilita la compresión de texto

Las causas de la falta de compresión de texto en tu sitio web pueden variar, pero algunas razones comunes incluyen:

1. Compresión GZIP o Brotli no activada: Este aviso aparecerá cuando el sistema de compresión GZIP o Brotli no esté activo en tu servidor.
2. Configuración incorrecta del servidor: A veces, los servidores (hostings) no tienen activada la compresión GZIP, que debería venir por defecto. Habla con tu servicio técnico para que lo activen o actívalo desde el CPanel de tu hosting.
3. Hosting inadecuado: A día de hoy, aunque parezca mentira, siguen existiendo hostings de mala calidad que no tienen la opción de activar la compresión GZIP o Brotli. Si es tu caso debes cambiar con urgencia a un hosting actual y recomendado como Siteground.

Cómo arreglar Habilita la compresión de texto

Ahora que comprendemos la importancia de habilitar la compresión de texto y las razones detrás de la falta de compresión, veamos cómo puedes abordar este diagnóstico:

Precargar la imagen de renderizado del mayor elemento con contenido

Cuando en PageSpeed aparece el aviso de precargar la imagen de renderizado del mayor elemento con contenido nos está indicando que una imagen que hay en tu Renderizado del mayor elemento con contenido (LCP) se está cargando con retraso.

Cuando hablamos de LCP nos referimos a la parte de tu web que ve tu usuario nada más entrar sin tener que hacer scroll. Es vital entender que el ATF es la parte más importante de nuestra página y la que más debemos cuidar.

Puedes aprender todo lo necesario sobre el LCP en su correspondiente lección, qué es, cómo mejorarlo y recomendaciones

Causas comunes Precargar la imagen de renderizado del mayor elemento con contenido

Las causas son claras y el propio diagnóstico te lo explica:

• No se está precargando la imagen: La imagen a la que hace referencia el aviso de PageSpeed no se está precargando y está afectando negativamente a tus notas y velocidad de carga de la web.

Cómo arreglar Precargar la imagen de renderizado del mayor elemento con contenido

Ahora que sabemos qué significa exactamente este diagnóstico vamos a aprender a solucionarlo:

Cómo arreglar oportunidades de PageSpeed

Asegúrate de que el texto permanece visible mientras se carga la fuente web

Imagina visitar una página web y encontrarte con un espacio en blanco o texto incompleto mientras esperas que se cargue la web por completo. Esto es muy frustrante y confuso para los usuarios, lo que podría llevarlos a abandonar tu sitio antes de que realmente tengan la oportunidad de interactuar con la web.

En resumen, asegúrate de que el texto permanece visible mientras se carga la fuente web, si no la experiencia de usuario se verá afectada negativamente, lo que podría resultar en una pérdida de visitantes y conversiones, además de perjudicar en las notas de PageSpeed.

Causas comunes Asegúrate de que el texto permanece visible mientras se carga la fuente web

¿Por qué el Texto No Permanece Visible?

Hay varias razones por las cuales el texto puede no permanecer visible mientras se carga la fuente web. Algunas de las causas más comunes son:

1. Fuentes no optimizadas: Si usas una gran número de fuentes o fuentes muy pesadas puede aumentarsignificativamente el tiempo de carga, lo que resulta en un retraso en la visualización del texto.
2. JavaScript bloqueante: Si el JavaScript es renderizado de manera que bloquea el proceso de carga de la página, podría ocasionar que el texto tarde en mostrarse.
3. Recursos de terceros lentos: Si tu web carga muchos recursos externos, como scripts o fuentes de terceros, la velocidad de carga de estos recursos puede afectar la visualización del texto.
4. Priorización incorrecta: A veces, el orden en que se cargan los recursos no se optimiza adecuadamente, lo que puede retrasar la aparición del texto.

Cómo arreglar Asegúrate de que el texto permanece visible mientras se carga la fuente web

Ahora vamos a lo que importa: cómo solucionar el aviso asegúrate de que el texto permanece visible mientras se carga al fuente web:

1. Optimiza y reduce el número de fuentes usadas: No es recomendable hacer uso de más de 2 familias de fuentes, esto es algo importantísimo para mantener una coherencia estética y para reducir la velocidad de carga de nuestra web.
2. Carga las fuentes de forma local: Por defecto las fuentes son usadas y cargadas desde los servidores de Google, convirtiéndose en scripts de terceros que perjudicarán la carga y notas de nuestra web. Aprende cómo alojar las fuentes localmente de forma sencilla.
3. Prioriza la carga de las fuentes: Debemos precargar las fuentes para priorizar al máximo su carga y evitar que sea de los últimos elementos en mostrarse. Esto se consigue al aplicarle la etiqueta swap y puedes aprender a precargar tus fuentes en esta lección (tienes disponible un vídeo explicativo).
4. Minimiza el JavaScript bloqueante: Revisa y optimiza tus scripts JavaScript para que no bloqueen la carga de la página. Recuerda que te enseño cómo hacerlo en las lecciones de Perfmatters y WP Rocket.
5. Evalúa y reduce tus recursos de terceros: Si dependes de recursos externos, asegúrate de que sean lo más rápidos posible. Considera la posibilidad de utilizar servidores de contenido de alta velocidad o CDN (Content Delivery Network) para entregar estos recursos de manera eficiente.

Reduce el impacto del código de terceros

Antes de sumergirnos en la solución vamos a entender qué significa “reducir el impacto del código de terceros” en el contexto de PageSpeed Insights.

El código de terceros se refiere a los scripts y recursos que tu sitio web carga desde fuentes externas, es decir: no alojadas en tu servidor. Como Analytics, Google Tag Manager, el píxel de Facebook y otras integraciones de terceros. Estos scripts, si no se gestionan adecuadamente y se reduce su uso a los estrictamente necesarios, pueden ralentizar muchísimo la velocidad de carga de tu sitio y reducir drásticamente las notas de PageSpeed.

Cuando PageSpeed Insights detecta un alto impacto del código de terceros en tu sitio, te está indicando que estos elementos están perjudicando el rendimiento de la página y, por lo tanto, es de vital importancia reducir el uso de scripts de terceros para optimizar la velocidad de tu sitio web y mejorar la experiencia del usuario.

Causas comunes Reduce el impacto del código de terceros

¿Por qué tu sitio web puede estar experimentando un alto impacto del código de terceros? Aquí hay algunas causas comunes:

• Opciones de telemetría activadas: Algunos plugins como WooCommerce tiene la opción de enviar los datos de uso del plugin a sus desarrolladores. Estos son anónimos, pero la gran mayoría de veces añaden un script para poder recabar información de tu web.
• Excesivo uso de servicios de terceros: Lo ideal sería no usar ningún servicio de terceros, pero siendo realista eso a día de hoy es imposible. Estamos casi obligados a cargar los scripts de Google Tag Manager, el píxel de Facebook, etc.
• Plugins no recomendados: Algunos plugins mal programados pueden necesitar de scripts de terceros alojados en los servidores de sus creadores. De ser el caso deja de usarlo de inmediato y busca otro plugin que ofrezca la misma funcionalidad.
• No hacer uso del retraso de ejecución de JavaScript: Si no haces uso de esta opción que traen muchos plugins de optimización de scripts no retrasarás la carga de scripts innecesarios hasta que el usuario interactúe con tu web.

Cómo arreglar Reduce el impacto del código de terceros

Ahora que comprendemos las implicaciones y las causas del alto impacto del código de terceros, es el momento de abordar cómo solucionar este problema y mejorar tus métricas de velocidad.

• Evalúa la necesidad de cada script: Comienza por revisar todos los scripts de terceros que estás utilizando en tu sitio web. Pregunta si realmente necesitas cada uno de ellos. Elimina aquellos que no sean esenciales.
• Desactiva las opciones de telemetría de los plugins: Puedes usar el plugin Disable Telemetry para desactivar todas las peticiones externas y evitar que sigan “vigilando” tu web.
• Activa el retraso de ejecución de JavaScript: Puedes activar la opción de retraso de ejecución de JavaScript tal y como te enseño en su respectiva lección.

Evitar document.write()

Ahora toca hablar del aviso de evitar document.write() y por qué su uso puede provocar un importante retraso en la carga del contenido de la página web, especialmente para usuarios con conexiones lentas, como los dispositivos móviles. 

En términos simples, document.write() es una función de JavaScript empleada para insertar contenido directamente en una página web mientras se carga. A simple vista, podría parecer una herramienta útil, pero su utilización puede tener un impacto negativo en la velocidad y la experiencia del usuario.

Cuando se utiliza document.write(), el proceso de carga de la página se detiene hasta que se haya completado la escritura del contenido. Esto implica que los usuarios deben esperar más tiempo para visualizar el contenido principal de la página, lo que puede generar una sensación de lentitud, además de reducir drásticamente tus notas en PageSpeed.

Chrome bloquea la ejecución document.write()en muchos casos, así que es altamente recomendable prescindir de plugins que usen este tipo de función JavaScript.

Causas comunes Evitar document.write()

Ahora que entendemos qué es “document.write()”, es importante identificar las causas comunes que llevan a esta recomendación de PageSpeed Insights. Algunos escenarios en los que es probable que encuentres este diagnóstico son:

1. Publicidad y rastreo excesivo: Uno de los casos más frecuentes es el uso excesivo de scripts de publicidad y rastreo que emplean document.write() para insertar contenido en tu página. A menudo, los anuncios y los scripts de seguimiento pueden ser una de las principales fuentes de este problema.
2. Plugins y temas obsoletos: Si tu sitio utiliza plugins o temas desactualizados que aún hacen uso de document.write(), es probable que PageSpeed Insights detecte este problema. Es crucial mantener tus plugins y temas actualizados para evitar este diagnóstico y usar siempre las herramientas más actuales.
3. Personalización inadecuada: En algunos casos, los desarrolladores (o tú mismo) pueden haber personalizado tu sitio web de manera inapropiada utilizando document.write() en lugar de enfoques más eficientes, como la carga asicrónica.

Cómo arreglar Evitar document.write()

Ahora que conocemos el qué y el por qué, es hora de abordar el “cómo”. A continuación te muestro cómo puedes arreglar el diagnóstico de PageSpeed “Evitar document.write()”:

1. Identifica los scripts responsables: El primer paso es identificar qué scripts o elementos de tu sitio están utilizando document.write(). El bueno de Google nos lo indicará al analizar nuestra web con Google PageSpeed.
2. Actualiza plugins y temas: Si el uso de document.write() proviene de plugins o temas obsoletos (que será lo más común), asegúrate de actualizarlos a sus versiones más recientes. Los desarrolladores a menudo corrigen estos problemas en las actualizaciones. Si después de actualizar el aviso persiste es momento de cambiar de plugin o de tema a uno actual y recomendado.
3. Minimiza la publicidad y el rastreo: Si la causa principal es la publicidad y el rastreo, considera reducir la cantidad de scripts de terceros en tu sitio. Utiliza solo los servicios que realmente necesitas.

Los elementos de imagen no tienen width y height explícitos

Cuando PageSpeed Insights te alerta sobre “Los elementos de imagen no tienen width y height explícitos” se refiere a que las imágenes en tu sitio web no están configuradas con dimensiones específicas en su código HTML. Esto significa que el navegador no sabe cuánto espacio debe reservar para la imagen antes de que se cargue completamente.

Cuando un navegador procesa una página web, necesita determinar el espacio que ocuparán las imágenes antes de que se carguen. Si no se especifican las dimensiones (width y height) en el código HTML, el navegador debe realizar cálculos adicionales, lo que ralentiza la carga de la página y puede causar un parpadeo o un ajuste en el diseño cuando las imágenes se cargan (algo que Google penaliza mucho).

Causas comunes Los elementos de imagen no tienen width y height explícitos

Ahora vamos a descubrir las causas más comunes de este aviso:

1. Codificación incorrecta: A veces, los desarrolladores web pueden olvidar o descuidar agregar las dimensiones de ancho y alto en el código HTML de las imágenes.
2. Maquetador visual inadecuado: Una de las causas más comunes es hacer uso de un maquetador inadecuado como Visual Composer, WP Bakery, etc.
3. Cambios en el diseño: Si realizaste cambios en tu sitio web, como agregar o reemplazar imágenes, es posible que las dimensiones se hayan perdido en el proceso.

Cómo arreglar Los elementos de imagen no tienen width y height explícitos

Ahora, pasemos a la parte crucial: cómo solucionar este problema y mejorar la velocidad de carga de tu sitio web. Aquí hay algunas acciones que puedes tomar:

1. Añadir dimensiones a las imágenes: La solución más directa es editar el código HTML de tu sitio web y agregar las dimensiones (width y height) a todas las etiquetas de imagen (<img>). Debes establecer estas dimensiones con valores precisos que coincidan con las dimensiones reales de la imagen.
2. Añadir dimensiones en el maquetador visual: Si estás haciendo uso de un plugin de maquetador visual para WordPress recuerda especificar el alto y ancho de la imagen en las opciones del bloque de imagen.
3. Haz uso de un maquetador adecuado: Si tu maquetador no te da la opción de especificar el alto y ancho de las imágenes (o no te lo pone nada fácil) lo recomendable es cambiar a uno recomendado y optimizado como Spectra.
4. Usa un plugin de optimización: WP Rocket te brinda la oportunidad de especificar el alto y ancho de las imágenes de tu web con tan solo 1 clic, pásate y te explico cómo.

Un buen ejemplo de una etiqueta <img> que evitaría el aviso de “Los elementos de imagen no tienen width y height explícitos” es:

<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">

Evita cargas útiles de red de gran tamaño

Cuando hablamos de “evita cargas útiles de red de gran tamaño” en PageSpeed Insights, nos referimos a todos los archivos pesados, como videos, imágenes, scripts CSS o JavaScript, que tiene que cargar tu web y que son más grandes de lo necesario.

En pocas palabras, tu página web está sobrecargada de scripts que no son necesarios para el correcto funcionamiento de esta.

Además, estos archivos grandes también pueden costar dinero a tus usuarios, por ejemplo a tus visitantes que navegan desde el móvil, ya que para cargar tu web deberán gastar muchos más datos móviles de los necesarios. Así que, reducir el tamaño de lo que se descarga es bueno tanto para la experiencia de tus usuarios como para sus billeteras.

¿Quieres saber cuánto dinero cuesta cargar tu página web? Descúbrelo aquí

Causas comunes Evita cargas útiles de red de gran tamaño

Las cargas útiles de red de gran tamaño pueden ser causadas por varias razones comunes:

1. Imágenes no optimizadas: Las imágenes de alta resolución sin comprimir son una causa común de cargas útiles de gran tamaño. Subir imágenes en su tamaño original puede ralentizar tu sitio web.
2. Archivos JavaScript y CSS innecesarios: Esto puede deberse por hacer un uso excesivo de plugins o que estos sean de mala calidad.
3. Falta de compresión: Si no has activado la compresión GZIP o Brotli o tu servidor no lo tiene disponible tus archivos pesarán más de lo necesario.
4. JavaScript y CSS no optimizado: Si no usas WP Rocket u otro plugin de optimización de scripts el navegador tendrá que cargar todos los scripts, aunque no sean necesarios, además de hacerlo con un peso más elevado.

Recuerda que ningún script o imagen debería sobrepasar los 100 KB

Cómo arreglar Evita cargas útiles de red de gran tamaño

Y ahora ha llegado la hora de las soluciones:

1. Utiliza WebP en lugar de JPG o PNG: WebP es un formato de imagen más eficiente en cuanto a la compresión que JPG o PNG. Al convertir tus imágenes a WebP, puedes reducir significativamente el tamaño de los archivos sin perder calidad visual. Usa un plugin como Imagify para convertir tus imágenes a WebP.
2. Reduce el peso de las imágenes: Además de cambiar el formato de imagen, también es importante reducir el peso de las imágenes al mínimo necesario. Ajusta la resolución y utiliza herramientas online gratuitas de compresión de imágenes para eliminar metadatos innecesarios y garantizar que cada imagen sea lo más ligera posible sin sacrificar la calidad visual.
3. Minimiza scripts CSS y JavaScript: Minimiza tus archivos CSS y JavaScript para eliminar cualquier espacio en blanco o código redundante. Esto reducirá el tamaño de estos archivos y acelerará la carga de la página. Puedes utilizar plugins de WordPress para realizar esta tarea de manera automática, como WP Rocket.
4. Habilita la compresión: Aprovecha la compresión Gzip o Brotli en tu servidor web para reducir el tamaño de los archivos antes de enviarlos al navegador del usuario.
5. Haz uso de la caché: Configura la caché en tu web para almacenar en el navegador del usuario ciertos elementos estáticos, como imágenes, scripts y hojas de estilo. Puedes hacerlo con plugins de caché para WordPress, como WP Rocket.
6. Revisa la calidad de tus plugins: Algunos plugins de WordPress pueden aumentar el tiempo de carga de tu sitio debido a su ineficiencia o conflicto con otros plugins. Revisa regularmente tus plugins y desactiva o elimina aquellos que no sean esenciales o que afecten negativamente al rendimiento de tu sitio.
7. Revisa la calidad de tu tema: El tema de tu sitio web puede tener un impacto significativo en el rendimiento. Utiliza temas optimizados y de alta calidad que estén diseñados para cargar rápidamente. Evita temas llenos de funciones innecesarias que puedan ralentizar tu sitio. Usa Astra.
8. Evita usar slider o elementos con grandes cantidades de JavaScript: Los sliders dependen en gran medida de JavaScript pueden aumentar la carga de tu sitio. Considera si realmente necesitas estos elementos en tu diseño y, si es posible, opta por alternativas más ligeras y eficientes. Recuerda que no es nada recomendable usar sliders actualmente.

Publica recursos estáticos con una política de caché eficaz

Uno de los diagnósticos más comunes de PageSpeed. Cuando nos aparece el aviso de “Publica recursos estáticos con una política de caché eficaz” quiere decir que los archivos de nuestra web, tanto propios como externos, no usan una política de caché. Claro y sencillo.

Tener activa una política de caché implica almacenar temporalmente los archivos de la web en el navegador del usuario para acelerar las visitas posteriores a tu sitio, aumentando significativamente la velocidad de carga y experiencia de usuario.

Causas comunes Publica recursos estáticos con una política de caché eficaz

Las causas de este aviso son bastante claras y auto descriptivas: no estás usando una política de caché en tu web.

Cómo arreglar Publica recursos estáticos con una política de caché eficaz

La forma de solucionar este aviso de PageSpeed también es bastante sencillo:

1. Activa la caché para tus archivos: Fácil, si eres alumno del curso descarga e instala de forma gratuita el plugin WP Rocket y tu web ya tendrá una política de caché eficaz en tan solo unos minutos.
2. Retrasa la ejecución de JavaScript para scripts de terceros: Si el aviso de falta de política de caché eficaz hace referencia a scripts que no están alojados en tu servidor, como el píxel de Facebook, debes retrasar su ejecución con WP Rocket.

Evita un tamaño excesivo de DOM

Antes de meternos de lleno en la resolución de este diagnóstico de PageSpeed, vamos a aprender qué significa “tamaño excesivo de DOM”. El Document Object Model (DOM) es una representación estructurada de la página web que permite a los navegadores web interactuar con el contenido. En términos simples, el DOM es como el mapa de tu sitio web para el navegador.

Cuando hablamos de un “tamaño excesivo de DOM”, nos referimos a una página web que tiene una estructura de DOM muy compleja y pesada. Esto ocurre cuando se incluyen demasiados elementos HTML, scripts, estilos, o se anidan demasiado profundamente los elementos.

En ocasiones será complicado deshacernos de este aviso, pero si usamos un buen tema y maquetador y solucionamos el resto de avisos de PageSpeed no nos afectará negativamente en las notas y rendimiento de nuestra web.

Causas comunes Evita un tamaño excesivo de DOM

Aquí hay algunos factores que suelen contribuir a un DOM grande:

1. Tema no optimizado: Hacer uso de un tema optimizado y recomendado es crucial. Si un tema está mal codificado nunca podremos deshacernos ni solucionar de este aviso.
2. Maquetador no optimizado: De la misma forma que el tema ocurre con los maquetadores: si usas maquetadores mal codificados o excesivamente pesados como Divi, WP Bakery o Elementor no podrás solucionar ni deshacerte de este aviso.
3. Uso excesivo de scripts y plugins: La adición de muchos scripts y plugins a una página puede aumentar considerablemente el tamaño del DOM.

Cómo arreglar Evita un tamaño excesivo de DOM

Solucionar este aviso no es algo tan sencillo como otros, que implican hacer una acción o tarea concreta:

1. Cambia de tema: Si quieres aligerar y evitar un tamaño excesivo de DOM en tu web no te queda otra que cambiar tu viejo y poco recomendado tema por uno ligero como Astra.
2. Cambiar de maquetador: Lo mismo ocurre con los maquetadores (incluso puede ser más grave que el propio tema), cambia de inmediato ese pesado maquetador por Spectra, notarás en seguida la diferencia y mejora.
3. Haz limpieza de plugins: Cada plugin instalado son scripts extra que tu servidor debe alojar y tu web cargar. Haz una revisión completa de todos los plugins que tienes instalados y borra aquellos que no tenga una utilidad real y los que dupliquen funcionalidades.

No usa listeners pasivos para mejorar el desplazamiento

Los listeners pasivos son una técnica de programación utilizada en la creación de páginas web para hacer que las interacciones del usuario, como el desplazamiento de la página, sean más suaves y eficientes. Cuando un usuario se desplaza hacia arriba o hacia abajo en una página web, el navegador realiza varias tareas para entender cómo debe reaccionar la página a ese movimiento.

Si no usa listeners pasivos para mejorar el desplazamiento el navegador siempre esperará a que el detector de eventos táctiles y de rueda termine de ejecutarse antes de desplazarse por la página, ya que no pueden anticipar si un detector de eventos podría bloquear dicho desplazamiento.

Al usar listeners pasivos se evitará bloquear el hilo principal del navegador, ya que pueden indicarle a un detector de eventos que nunca impedirá el desplazamiento por la web.

Causas comunes No usa listeners pasivos para mejorar el desplazamiento

Ahora vamos a entender por qué PageSpeed Insights detecta que tu sitio “no usa listeners pasivos para mejorar el desplazamiento”:

1. Falta de implementación: En ocasiones, los desarrolladores pueden no haber implementado adecuadamente los “listeners pasivos” en el código de su sitio web. Esto puede deberse a un error de programación o simplemente a la falta de conocimiento sobre esta técnica.
2. Uso excesivo de eventos: Un exceso de eventos de desplazamiento o de otros tipos en tu sitio web puede sobrecargar el hilo principal del navegador, lo que hace que sea más difícil para el navegador proporcionar un desplazamiento suave.
3. Plugins o bibliotecas obsoletas: Si estás utilizando plugins o bibliotecas de JavaScript obsoletas en tu sitio web, es posible que no estén aprovechando las últimas técnicas de optimización, como los “listeners pasivos”.

Cómo arreglar No usa listeners pasivos para mejorar el desplazamiento

¿Cómo puedes arreglar este aviso y mejorar la velocidad de carga y la experiencia del usuario en tu sitio web?

1. Actualiza tus scripts y plugins: Si utilizas plugins, asegúrate de que estén actualizados a las versiones más recientes. Las actualizaciones suelen incluir mejoras de rendimiento y correcciones de errores que pueden abordar este problema.
2. Plugins obsoletos: Si aún actualizando el plugin a la última versión sigue apareciendo el mismo aviso en PageSeed es hora de cambiar a un plugin mejor y programado de forma correcta y actual.
3. Optimiza el código personalizado: Si tienes código personalizado en tu sitio web, revisa el código JavaScript relacionado con los eventos de desplazamiento. Asegúrate de que estés utilizando “listeners pasivos” cuando sea necesario. Puedes encontrar recursos en línea y documentación específica sobre cómo implementarlos correctamente.
4. Reduce la cantidad de eventos de desplazamiento: Estudia la necesidad de todos los eventos de desplazamiento que hay en tu web. Reducir la cantidad de eventos de desplazamiento innecesarios puede ayudar a aligerar la carga del navegador y mejorar la velocidad de desplazamiento. Recuerda: menos es más.

Minimiza el trabajo del hilo principal

Antes de sumergirnos en la solución, es fundamental entender de qué se trata el diagnóstico “Minimiza el trabajo del hilo principal” de PageSpeed Insights. En términos sencillos, el hilo principal se refiere al proceso de carga principal de una página web. Es como la columna vertebral de tu sitio, se encarga de analizar el HTML y contruir el DOM y analizar y aplicar los scripts CSS y JavaScript para que tu web se vea correctamente.

Cuando PageSpeed Insights identifica un problema con el trabajo del hilo principal, está señalando que este proceso está tomando más tiempo del necesario para completarse.

Cuando el hilo principal está ocupado haciendo otras tareas, tu página web podría no responder a las acciones del usuario, lo que puede causar una experiencia negativa.

Causas comunes Minimiza el trabajo del hilo principal

Vamos a ver las principales causas de este aviso:

1. Exceso de número y peso de CSS y JavaScript: Puede ser debido a un mal tema, un mal maquetador, un diseño web demasiado sobrecargado y/o una falta de optimización general de tu web.
2. Tema no optimizado: Como puedes ver un tema no optimizado como Astra es el causante de la gran mayoría de errores y avisos de PageSpeed.
3. Maquetador no optimizado: Al igual que el tema, un maquetador no optimizado como Spectra puede hacer que velocidad de carga y tus notas en PageSpeed caigan en picado.
4. Imágenes no optimizadas: Si no reduces el peso de tus imágenes y usas la resolución adecuada en cada momento estas pesarán en exceso. Optimiza tus imágenes y alivia el estrés del hilo principal.
5. Exceso de fuentes: Si usas más tipografías de las recomendadas (máximo 2 familias y 2 variaciones) añadirás archivos extra que tendrá que procesar el hilo principal.
6. Scripts no optimizados: Si no aplicas técnicas de optimización a tus scripts CSS y JavaScript no reducirás el número y peso de estas, haciendo que el hilo principal se sature.

Cómo arreglar Minimiza el trabajo del hilo principal

Ahora que hemos identificado las causas comunes, veamos cómo puedes abordar y solucionar el problema de “Minimiza el trabajo del hilo principal” en PageSpeed Insights:

1. Usa un tema y maquetador optimizados: Si usas temas y maquetadores pesados como Avada, Flatsome, XStore, Divi, WP Bakery, entre otros deberías cambiarlos de inmediato por Astra y Spectra.
2. Optimiza tus imágenes: Aplica el Lazy Load, usa una resolución adecuada, reduce su peso y usa el formato WebP, de esta forma conseguirás que tus imágenes pesen lo mínimo posible sin perder calidad.
3. Optimiza las fuentes: Reduce el número de fuentes y variaciones para reducir el peso y números de scripts que debe cargar tu web, además de alojarlas localmente para que no sean una petición externa.
4. Optimiza archivos CSS: Debes intentar reducir el número de scripts lo máximo posible reduciendo el uso de plugins en tu web y optimizando el CSS con WP Rocket.
5. Optimiza archivos JavaScript: Debes intentar reducir el número de scripts lo máximo posible reduciendo el uso de plugins en tu web y optimizando el JavaScript con WP Rocket.

Reduce el tiempo de ejecución de JavaScript

El tiempo de ejecución de JavaScript es un factor muy importante que determinará la velocidad de carga total de tu web y el tiempo que estará bloqueada.

El JavaScript se encarga de la parte dinámica y las funcionalidades de tu web: desde la animación de elementos hasta la interacción con formularios y la carga de contenido en segundo plano.

Cuando hablamos de “tiempo de ejecución,” nos referimos al tiempo en el que el navegador del usuario procesa y ejecuta todos estos scripts de JavaScript. Un alto tiempo de ejecución de JavaScript puede ralentizar significativamente la carga de tu sitio web, lo que afecta negativamente tanto a la experiencia del usuario como a tu posición en los resultados de búsqueda de Google.

PageSpeed muestra un aviso cuando la ejecución de JavaScript tarda más de 2 segundos. La auditoría falla cuando la ejecución tarda más de 3,5 segundos.

Causas comunes Reduce el tiempo de ejecución de JavaScript

¿Por qué el tiempo de ejecución de JavaScript puede ser un problema? Aquí hay algunas causas comunes:

• Exceso de scripts: Cuantos más scripts de JavaScript tengas en tu sitio, más tiempo tomará ejecutarlos. Si utilizas muchos plugins o scripts innecesarios, esto puede contribuir a un alto tiempo de ejecución.
• Scripts no optimizados: La calidad de tus scripts de JavaScript también es crucial. Los scripts mal escritos o no optimizados pueden requerir más tiempo para ejecutarse. Esto incluye scripts que no están minificados (es decir, que no están en su forma más compacta) y scripts que no se cargan de manera eficiente.
• Recursos de terceros: A menudo, los sitios web confían en recursos de terceros, como widgets de redes sociales o herramientas de análisis. Estos recursos pueden agregar tiempo de ejecución si no se gestionan adecuadamente.

Cómo arreglar Reduce el tiempo de ejecución de JavaScript

Reduce el tiempo de ejecución de JavaScript para optimizar la velocidad de carga de tu sitio web y mejorar tu posición en PageSpeed Insights. Aquí hay algunas estrategias para solucionar este problema:

1. Minificación de scripts: Utiliza WP Rocket para minificar y reducir el tamaño de tus archivos de JavaScript. Esto elimina espacios en blanco y comentarios innecesarios, lo que permite una carga más rápida.
2. Elimina scripts innecesarios: Revisa tus plugins y scripts y elimina aquellos que no sean absolutamente necesarios para la funcionalidad de tu sitio web. Cuantos menos scripts tengas, más rápido se ejecutarán.
3. Optimiza la carga de scripts: Utiliza la técnica de “defer” o “async” en las etiquetas de script para cargar scripts de manera más eficiente y evitar bloquear la renderización de la página.
4. Considera el lazy loading: Implementa el “lazy loading” para cargar scripts solo cuando son necesarios, reduciendo así la carga inicial de la página.
5. Evalúa el uso de recursos de terceros: Si utilizas recursos de terceros, asegúrate de que estén optimizados y solo se carguen cuando sea necesario. Esto puede incluir la carga asincrónica de widgets y scripts externos.

La imagen del renderizado del mayor elemento con contenido se ha cargado en diferido

La carga diferida es una técnica que retrasa la carga de un recurso hasta que no sea necesario su uso, lo que ayuda a reducir los tiempos de espera y scripts que el navegador debe cargar para mostrar la página. Esto es algo muy beneficioso y recomendado en la optimización web, pero debemos evitar su uso en el Renderizado del mayor elemento con contenido (LCP) o Largest Contentful Paint.

Causas comunes La imagen del renderizado del mayor elemento con contenido se ha cargado en diferido

El aviso es bastante auto descriptivo: has aplicado Lazy Load a la imagen que aparece en el renderizado del mayor elemento con contenido (LCP) del ATF de tu web.

Cómo arreglar La imagen del renderizado del mayor elemento con contenido se ha cargado en diferido

La solución es rápida y sencilla:

1. Excluye del Lazy Load la imagen del LCP: Recuerda excluir del Lazy Load mediante clase CSS o nombre la imagen del LCP.

Algunos recursos de terceros se pueden cargar en diferido con una fachada

El aviso “Algunos recursos de terceros se pueden cargar en diferido con una fachada” hace referencia a la forma en que tu sitio web maneja los recursos externos, como vídeos de Youtube.

La carga en diferido con una fachada es una técnica que consiste en retrasar la carga de estos recursos externos no esenciales hasta que la página principal se haya cargado.

Una fachada es un elemento estático que sustituye temporalmente al elemento de terceros, por ejemplo un vídeo de Youtube por una portada en JPG.

Causas comunes Algunos recursos de terceros se pueden cargar en diferido con una fachada

Las causas comunes son:

1. Recursos externos pesados: Si tu sitio web utiliza recursos externos de terceros que son grandes o que requieren mucho tiempo para cargar, es probable que PageSpeed Insights detecte esta demora.
2. Uso excesivo de recursos de terceros: Cuantos más recursos de terceros utilice tu sitio, más complicado será gestionarlos de manera eficiente.
3. No retrasar la ejecución de JavaScript: Si no aplicamos esta técnica de optimización nuestra web cargará de forma no optimizada todos los scripts de terceros, aunque no sean necesarios.
4. No usar portadas en vídeos: Si no ponemos portadas (imágenes estáticas) en los vídeos el navegador tendrá que cargar por completo el vídeo aunque el usuario jamás lo reproduzca.

Cómo arreglar Algunos recursos de terceros se pueden cargar en diferido con una fachada

Ahora que hemos explorado las causas comunes, es hora de abordar la solución para este diagnóstico de PageSpeed. Aquí tienes algunos pasos que puedes seguir:

1. Reduce la dependencia de recursos externos: En la medida de lo posible, busca alternativas locales o internas para recursos de terceros que estén ralentizando tu sitio.
2. Carga asincrónica o en diferido: Aprovecha las capacidades de carga asincrónica o en diferido de los recursos externos. Esto se puede configurar fácilmente con WP Rocket.
3. Añade portada a tus vídeos: WP Rocket puede sustituir de forma automática todos los vídeos por imágenes estáticas hasta que el usuario interactue con el vídeo.

Conclusiones

En conclusión, abordar los diagnósticos y oportunidades que PageSpeed Insights nos presenta es esencial para mejorar la velocidad y notas de tu sitio web.

No existe una solución única para todos, pero al seguir buenas prácticas de optimización y tomar decisiones informadas, puedes llevar tu sitio web al siguiente nivel en términos de rendimiento y eficiencia. En este proceso, la clave está en encontrar un equilibrio entre la funcionalidad y la velocidad.

Siempre mantén un enfoque constante en la mejora continua y en la atención a los detalles para garantizar que tu sitio web ofrezca una experiencia excepcional a tus visitantes. La optimización web es un proceso en evolución, y estar al tanto de los diagnósticos y oportunidades de PageSpeed es una parte integral de ese proceso.

Recuerda, si quieres aprobar el examen de PageSpeed y solucionar la grandísima mayoría de avisos sigue estos sencillos pasos:

1. Contrata un buen hosting
2. Usa Astra & Spectra
3. Optimiza WordPress tal y como te enseño en mi curso