Velocidad de la web: ¿Por qué es importante aumentarla?

La velocidad de la web es parte crucial del SEO, y en un entorno digital cada vez más competitivo, la optimización se vuelve más importante que nunca. Esta es una parte fundamental de tu estrategia de Marketing Digital que debes cuidar para ofrecer una excelente experiencia a los usuarios que visitan tu sitio.

Desde hace años, Google ha enfatizado la importancia de la velocidad de carga. Un estudio clásico de Google (con datos anónimos de Google Analytics) reveló que el 53% de los usuarios de dispositivos móviles abandona una página si esta tarda más de 3 segundos en cargar. Esta cifra, aunque de un estudio de 2018, sigue siendo un indicador clave del comportamiento del usuario. Google siempre ha priorizado las necesidades de los usuarios, dando preferencia a los sitios web más rápidos y con mejor rendimiento en sus resultados de búsqueda.

¿Qué significa esto? Que si tu web es rápida, tendrá más posibilidades de posicionarse entre los primeros resultados de Google. Esta relevancia ha crecido exponencialmente con el auge de los smartphones y, más recientemente, con la introducción de métricas específicas como las Core Web Vitals.

¿Cuáles son los aspectos más importantes que debes comprender acerca de la velocidad de tu página y cómo puedes mejorarla? A continuación, te damos todos los detalles.

¿Cómo se carga una página web?

Para entender por qué un sitio puede ser más lento, es importante conocer qué sucede al cargar una web:

1. Un usuario abre su navegador de Internet, escribe la dirección de tu sitio web y el navegador genera una solicitud de DNS (Domain Name System). En otras palabras, consulta a un sistema para saber dónde está alojado el sitio web (lo que conocemos como hosting).
2. Esta respuesta del DNS entrega la dirección IP o identificador donde se alojan los archivos de tu página web.
3. El navegador entonces le pide a ese hosting que le envíe todos los archivos que componen la web que quieres ver.
4. El navegador recibe los archivos y comienza a cargar todo el HTML, CSS y JavaScript. Finalmente, el visitante a tu web puede ver tu contenido.

Este proceso simplificado tiene varios puntos que pueden hacer que tu web sea rápida o lenta, y los vamos a explicar a continuación.

¿Qué podría estar ralentizando tu web?

Los problemas más comunes que pueden hacer que una página sea lenta son los siguientes:

Imágenes muy pesadas

Las imágenes son una parte esencial de cualquier sitio web, ya que ayudan a transmitir un mensaje o contar una historia de forma visual. Sin embargo, si no se optimizan correctamente, pueden ralentizar significativamente un sitio web. Esto se debe a que las imágenes suelen ser archivos de gran tamaño y pueden consumir mucho ancho de banda.

Para asegurar que tu sitio web se cargue rápidamente, es crucial optimizar tus imágenes. Esto significa reducir su peso sin comprometer la calidad visual. Puedes lograrlo utilizando el formato de archivo correcto, comprimiéndolas, ajustando sus dimensiones (tamaño en píxeles) y reduciendo la profundidad de color.

El tamaño ideal para una imagen en la web es que tenga un peso máximo de 400 kb. Esto implica una cuidadosa gestión de la profundidad de bits del color, las dimensiones en píxeles e incluso el formato de las fotos (por ejemplo, los archivos.png suelen pesar más que los.jpg).

Si no eres diseñador o no manejas herramientas avanzadas de edición de imágenes, existen aplicaciones online como compressor.io o TinyPNG que te permiten realizar el proceso de compresión de manera rápida y sencilla. Además, es fundamental considerar:

• Formatos de nueva generación: Utiliza formatos modernos como WebP o AVIF.
• WebP: Creado por Google en 2010, ofrece compresión sin pérdidas y con pérdidas. Los archivos WebP suelen ser un 25-34% más pequeños que los JPEG y ofrecen mejor calidad que los GIF o PNG con tamaños de archivo similares. Su compatibilidad con navegadores es casi universal hoy en día.
• AVIF: Un formato aún más reciente y eficiente, que puede ofrecer compresiones superiores a WebP y JPEG con una calidad visual excelente. Aunque su compatibilidad es alta, es recomendable usarlo con un "fallback" a WebP o JPEG.
• Carga diferida (Lazy Loading): Asegúrate de que las imágenes solo se carguen cuando el usuario las necesite, es decir, cuando estén a punto de aparecer en la pantalla.
• Redes de entrega de contenido (CDN): Utiliza un CDN para distribuir tus imágenes desde servidores cercanos a tus usuarios, reduciendo los tiempos de carga.

Este blog que estás leyendo usa imágenes WebP generadas gracias al plugin Siteground Optimizer que nos pone a disposición nuestro proveedor de hosting como valor agregado. Puedes comprobarlo intentando descargar la siguiente foto: la obtendrás en formato WebP.

El hosting podría reducir la velocidad de la web

Todo el contenido de un sitio web debe estar alojado en un servidor. Y si bien el alojamiento o hosting puede tener muchos beneficios, también puede afectar drásticamente la velocidad de la web. A continuación, veremos algunas de las razones por las cuales el alojamiento puede reducir la velocidad de tu sitio:

1. Hosting de mala calidad: A menudo, lo barato sale caro. Un hosting de baja calidad puede implicar poca capacidad de procesamiento, el uso de discos duros convencionales (en lugar de unidades de estado sólido o SSD), poca memoria RAM o un ancho de banda limitado.
2. Configuración inadecuada del hosting: Para optimizar la velocidad de tu web, es crucial contar con expertos que sepan configurar apropiadamente funciones como la compresión Gzip, la versión de PHP y sus parámetros, y sistemas de caché avanzados como Litespeed o Varnish. Dado que esto es bastante técnico, es recomendable dejarlo en manos de personal especializado.

Otros problemas que pueden reducir la velocidad de la web

1. Scripts de terceros: Complementos, aplicaciones, widgets y cualquier script externo pueden añadir una carga significativa y ralentizar el tiempo de carga.
2. Tema y archivos grandes: Un tema de diseño web pesado o archivos CSS/JavaScript sin optimizar pueden impactar negativamente la velocidad.
3. Redirecciones excesivas: Una gran cantidad de saltos o redirecciones necesarias para acceder a una página web puede ralentizar el proceso de carga.
4. Bases de datos no optimizadas: Un sitio web con bases de datos grandes y sin una optimización adecuada puede generar demoras.
5. Exceso de plugins: Si utilizas un sistema de gestión de contenidos (CMS) como WordPress, tener demasiados plugins o plugins mal codificados puede provocar un rendimiento deficiente en velocidad.
6. Falta de caché: No implementar un sistema de caché adecuado para almacenar versiones estáticas de tu sitio puede obligar al servidor a procesar cada solicitud desde cero, ralentizando la entrega.
7. Código no minificado: Archivos HTML, CSS y JavaScript con espacios en blanco, comentarios y caracteres innecesarios aumentan el tamaño de los archivos y el tiempo de descarga. La minificación elimina estos elementos sin afectar la funcionalidad.

Herramientas y recursos relacionados con la velocidad de página

Estas herramientas son las más recomendadas para analizar la velocidad de tu página y la de tus competidores, y te permitirán realizar los cambios necesarios para mejorar:

Informe de Experiencia del Usuario de Chrome (CrUX)

Este es el conjunto de datos de usuario reales (Real User Monitoring o RUM) de Chrome. Aunque está más disponible para sitios web con suficiente tráfico, permite obtener datos muy valiosos sobre la experiencia real de los usuarios. Está alojado en BigQuery, por lo que se necesitan algunos conocimientos básicos de SQL para consultarlo directamente.

Lighthouse

Lighthouse está disponible en Chrome Dev Tools. Si estás en una página web y haces clic en “Inspeccionar elemento” y abres Chrome Dev Tools, en la pestaña de la derecha donde dice “Auditoría”, puedes ejecutar un informe de Lighthouse directamente en tu navegador.

PageSpeed Insights

PageSpeed Insights es una herramienta fundamental. Analiza cómo está configurado tu sitio, proporciona comentarios detallados y asigna una puntuación de rendimiento. Además, permite probar la velocidad y el rendimiento de tu sitio web tanto en dispositivos móviles como de escritorio, basándose en datos de laboratorio y, cuando están disponibles, en datos de campo de CrUX.

Otras herramientas muy útiles son Pingdom y GTmetrix, que ofrecen análisis detallados y recomendaciones para mejorar la velocidad.

Métricas de velocidad de la web y Core Web Vitals

Para comprender y mejorar la velocidad de tu página, es fundamental analizar métricas clave. Desde 2021, Google ha puesto un énfasis especial en las Core Web Vitals, un conjunto de métricas que evalúan la experiencia del usuario en términos de carga, interactividad y estabilidad visual.

Core Web Vitals: Las métricas esenciales de Google

Las Core Web Vitals son un conjunto de métricas específicas que Google considera cruciales para la experiencia del usuario. Se centran en tres aspectos principales:

• Largest Contentful Paint (LCP): Mide el tiempo que tarda en cargarse el elemento de contenido más grande visible en la ventana gráfica. Un buen LCP debe ser inferior a 2.5 segundos.
• First Input Delay (FID): Mide el tiempo desde que un usuario interactúa por primera vez con una página (por ejemplo, haciendo clic en un botón) hasta que el navegador puede responder a esa interacción. Un buen FID debe ser inferior a 100 milisegundos.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual de una página. Cuantifica la cantidad de cambios inesperados en el diseño del contenido visible. Un buen CLS debe ser inferior a 0.1.

Optimizar estas métricas no solo mejora la experiencia del usuario, sino que también es un factor importante para el posicionamiento SEO en Google.

First Paint (FP) y First Contentful Paint (FCP)

First Paint (FP) es el primer momento en que algo se renderiza en la pantalla, es decir, el primer cambio de píxel que no es en blanco. Este es un indicador básico de que la página está comenzando a cargar.

First Contentful Paint (FCP) es cuando aparece el primer contenido del DOM (Document Object Model), como texto, imágenes o elementos no blancos del SVG o canvas. Es el momento en que el usuario ve algo significativo en la pantalla, más allá de un fondo en blanco. Un FCP rápido es crucial para la percepción de velocidad del usuario.

¿Qué es First Paint significativo? Se refiere al momento en que el contenido principal y más relevante de la página es visible. Es cuando el usuario obtiene esa reacción de «Sí, esto es para lo que vine a esta página», lo que indica que el contenido esencial está disponible.

Tiempo para interactuar (Time to Interactive - TTI)

Todos hemos experimentado ir a una página web que parece visualmente cargada, pero aún no responde a las interacciones (clics, scroll, etc.). El Tiempo para interactuar (TTI) mide el tiempo que tarda una página en ser completamente interactiva. Esto significa que el contenido principal es visible, los controladores de eventos para los elementos visibles están registrados y la página responde a las interacciones del usuario en un plazo de 50 milisegundos.

Un TTI bajo es fundamental para una buena experiencia de usuario, ya que evita la frustración de intentar interactuar con una página que aún no está lista.