PageSpeed Insights: cómo mantener alta la velocidad del sitio

Si administra un sitio web, probablemente haya oído hablar de Google PageSpeed Insights. Es una herramienta gratuita de Google que mide el rendimiento de tus páginas web tanto en dispositivos móviles como de escritorio. Pero obtener una puntuación alta a menudo puede parecer un juego que no puedes ganar.

Hoy haremos una revisión detallada de PageSpeed Insights, veremos todos los posibles problemas que reducen su puntuación y explicaremos exactamente cómo optimizar su sitio web.

¿Por qué es tan importante la velocidad del sitio?

Antes de analizar los problemas técnicos, hablemos de por qué debería importarle. La velocidad del sitio no es sólo una métrica de vanidad. Impacta directamente en su negocio.

En primer lugar, la velocidad es un factor de clasificación importante para el SEO. Google ha declarado oficialmente que utiliza Core Web Vitals para decidir qué tan alta es la clasificación de sus páginas. Si su sitio tarda demasiado en cargarse, Google lo desplazará hacia abajo en los resultados de búsqueda.

En segundo lugar, la velocidad afecta la experiencia del usuario y las tasas de conversión. La mayoría de los usuarios abandonarán una página si tarda más de tres segundos en aparecer. Un sitio rápido mantiene a los visitantes interesados y hace que sea mucho más probable que compren su producto o lean sus artículos.

Comprender las métricas de PageSpeed Insights

Cuando escribe una URL en PageSpeed Insights, le proporciona dos tipos de datos: datos de laboratorio y datos de campo.

Los datos de campo muestran cómo los usuarios reales experimentan su sitio. Se recopila durante 28 días utilizando el Informe de experiencia del usuario de Chrome (CrUX). Esto es lo que realmente importa para tu SEO. Los datos de laboratorio se recopilan en un entorno controlado para ayudarte a depurar problemas.

Las principales métricas a tener en cuenta son:

• Primera pintura contentful (FCP): el tiempo que tarda el navegador en representar el primer fragmento de texto o imagen.
• La pintura con mayor contenido (LCP): el tiempo que tarda el bloque de contenido más grande en hacerse visible.
• Cambio de diseño acumulativo (CLS): mide cuánto cambia el diseño de su página a medida que se carga.
• Interacción con la siguiente pintura (INP): qué tan rápido responde su página después de que un usuario hace clic o toca algo.

Problemas comunes que arruinan tu puntuación

Obtener una mala puntuación es fácil. Para solucionarlo es necesario encontrar la causa raíz. Estos son los problemas más comunes que verá en su informe de diagnóstico de PageSpeed Insights.

1. Recursos de bloqueo de renderizado

Esto sucede cuando tienes archivos javascript o CSS que bloquean completamente la carga de la página. El navegador debe detenerse, descargar el archivo y analizarlo antes de que pueda mostrar algo al usuario.Cómo arreglarlo: debes aplazar o cargar de forma asincrónica todo el javascript no crítico. Para CSS, extraiga el CSS crítico y alineelo en el destino, luego cargue el resto de forma asincrónica.

2. Imágenes enormes no optimizadas

Las imágenes suelen constituir la mayor parte del peso total de una página web. Subir una imagen de 5 MB para un logotipo pequeño es una forma garantizada de ralentizar todo.Cómo arreglarlo: comprime siempre tus imágenes utilizando formatos modernos como WebP. También deberías utilizar elloading="lazy"atributo para que las imágenes debajo del pliegue solo se carguen cuando el usuario se desplaza hacia abajo hasta ellas. Establezca siempre un ancho y una altura explícitos en las etiquetas de imagen para evitar cambios de diseño.

3. Demasiado javascript sin usar

Los sitios web modernos suelen cargar bibliotecas pesadas o scripts de terceros, pero solo utilizan una pequeña fracción del código. El navegador todavía tiene que descargar y evaluar todo, lo que requiere un valioso tiempo de procesamiento.Cómo arreglarlo: elimine los complementos no utilizados e intente dividir su código. Cargue únicamente los scripts que realmente necesita en esa página específica.

4. Tiempos de respuesta lentos del servidor

El tiempo hasta el primer byte (TTFB) mide cuánto tiempo tarda su servidor de alojamiento en devolver el HTML inicial. Si su servidor es lento, todas las demás optimizaciones no importarán mucho.Cómo arreglarlo: utilice un host web rápido. Implemente el almacenamiento en caché del lado del servidor y utilice una red de distribución de contenido (CDN) para servir su sitio desde servidores físicamente más cercanos a sus usuarios.

Esta herramienta es genial porque dice exactamente dónde cometiste un error e incluso te muestra capturas de pantalla exactas. Así que simplemente corrija esos errores paso a paso y su SEO mejorará.

Sugirió convertir imágenes .jpg a .webp para nuestro sitio web, por ejemplo.

PeroNo te enojes si no puedes alcanzar el 100%, en realidad es muy difícil de hacer. Si su sitio web es complejo, necesita muchas imágenes, algunas bibliotecas js específicas, puede pensar – que ya no hay nada que optimizar, ¿por qué mi puntuación sigue siendo del 80-90%? Esto es absolutamente normal. Si su sitio web está en la “zona verde”, eso ya es una buena señal. Además, los resultados pueden incluso variar en unos pocos puntos porcentuales –sin ningún cambio– si pruebas la velocidad en un momento diferente.
Sin embargo, aún debes intentar maximizar tu rendimiento revisando y corrigiendo cada error en la lista.

Por qué nuestro script de traducción mantiene alta su velocidad

Al agregar nuevos widgets a su sitio web, debe tener mucho cuidado con el rendimiento. Es muy común que los complementos de traducción destruyan su puntuación PageSpeed. A menudo cargan bases de datos de idiomas masivas en el lado del cliente, ejecutan grandes retrasos de JavaScript y bloquean la representación mientras deciden qué idioma mostrar.

Creamos nuestro guión de traducción teniendo estrictamente en cuenta el rendimiento. Esta es la razón por la que nuestra solución es liviana y tiene un efecto mínimo en la velocidad de rendimiento:

• Pequeño límite de carga útil: nuestro guión principal es increíblemente pequeño. No agrupamos grandes bibliotecas de terceros. Añade sólo unos pocos kilobytes al tamaño de tu página.
• Carga asincrónica: el script está diseñado para ejecutarse de forma asincrónica. Nunca impide que su contenido principal se represente.
• Entrega global de CDN: entregamos el guión y el texto traducido desde una red global. Esto significa que los datos viajan la distancia más corta posible hasta su visitante.
• Inyección DOM nativa: en lugar de ocultar la página o crear cambios de diseño, nuestro script inyecta de forma nativa cadenas traducidas sin problemas. Se ejecuta en milisegundos, por lo que su cambio de diseño acumulativo permanece perfectamente en cero.

Al mantener la huella técnica lo más pequeña posible, nos aseguramos de que pueda traducir su sitio web por completo sin sacrificar ninguna de sus clasificaciones SEO o experiencia de usuario ganadas con tanto esfuerzo.