Volver al blog Rendimiento web

Velocidad de carga web: cómo medirla y mejorarla

Contenido revisado y actualizado con fuentes vigentes. Las recomendaciones deben adaptarse al objetivo y al contexto de cada proyecto.

La velocidad de una página no se resume en el tiempo que tarda en aparecer por completo. Una persona percibe si el contenido principal se muestra pronto, si la página responde al tocar un botón y si los elementos permanecen estables mientras carga. Por eso conviene medir varias etapas y corregir la causa concreta de cada demora.

Qué significa que una web sea rápida

Una web rápida entrega pronto el contenido importante y permite interactuar sin bloqueos ni movimientos inesperados. El resultado cambia según el teléfono o computador, la conexión, la ubicación del visitante, el estado de la caché y el contenido de cada página.

Una medición aislada sirve para encontrar problemas, pero no representa a todos los usuarios. Los datos de laboratorio simulan unas condiciones definidas; los datos de campo muestran lo que experimentaron visitantes reales.

Core Web Vitals: las métricas principales

Google utiliza tres métricas para describir aspectos centrales de la experiencia. Una página se considera dentro del rango bueno cuando alcanza los límites recomendados en el percentil 75 de las visitas, evaluando por separado celular y escritorio.

  • LCP (Largest Contentful Paint): mide cuándo aparece el bloque de texto o imagen principal visible. El objetivo es 2,5 segundos o menos.
  • INP (Interaction to Next Paint): mide la capacidad de respuesta durante las interacciones. El objetivo es 200 milisegundos o menos.
  • CLS (Cumulative Layout Shift): mide los movimientos inesperados del contenido. El objetivo es 0,1 o menos.

También son útiles el tiempo hasta el primer byte (TTFB), el primer contenido visible (FCP) y el tiempo total de bloqueo (TBT). Ayudan a diagnosticar el origen del problema, aunque no sustituyen las tres métricas principales.

Datos de campo y pruebas de laboratorio

PageSpeed Insights puede mostrar datos de campo procedentes del Chrome User Experience Report cuando existe suficiente tráfico. Esa sección refleja experiencias reales de los últimos días. Debajo presenta una prueba de laboratorio de Lighthouse, útil para reproducir problemas y consultar recomendaciones técnicas.

Si la URL no dispone de suficientes datos, la herramienta puede mostrar información del dominio completo. Revisa la etiqueta antes de atribuir esos resultados a una página específica. Lighthouse tampoco puede medir INP directamente sin interacciones reales; utiliza TBT como señal de diagnóstico en laboratorio.

Cómo diagnosticar una página lenta

  1. Mide la URL exacta: prueba la página que recibe visitas, tanto en celular como en escritorio.
  2. Revisa los datos reales: confirma si el problema afecta la URL o el dominio y cuál métrica está fuera del rango recomendado.
  3. Identifica el elemento LCP: suele ser una imagen principal, un banner o un bloque grande de texto.
  4. Consulta la secuencia de red: observa cuándo llega el HTML, cuándo empieza la descarga del recurso principal y qué archivos bloquean la visualización.
  5. Corrige una causa por vez: vuelve a medir en condiciones similares para comprobar el efecto.

Causas frecuentes y cómo corregirlas

Respuesta lenta del servidor

Un TTFB alto retrasa todo lo que ocurre después. Revisa la ubicación del servidor, redirecciones innecesarias, consultas lentas, generación dinámica sin caché y capacidad del alojamiento. La caché de página o un CDN pueden ayudar cuando corresponden a la arquitectura, pero no corrigen una aplicación ineficiente por sí solos.

Imagen principal demasiado pesada

Entrega cada imagen con dimensiones acordes al espacio donde se muestra, compresión apropiada y formatos modernos cuando sean compatibles. Usa variantes responsivas para evitar descargar en un teléfono el archivo preparado para una pantalla grande.

La imagen que produce el LCP debe descubrirse y descargarse pronto. Aplicarle carga diferida puede empeorar el resultado. Las imágenes que están más abajo sí pueden utilizar lazy loading.

JavaScript que bloquea la interacción

Los scripts extensos o las tareas largas ocupan el hilo principal y retrasan la respuesta a clics, toques y teclado. Elimina código que no se utiliza, divide tareas pesadas, carga bajo demanda las funciones secundarias y limita etiquetas de terceros que no aporten un resultado medible.

CSS y fuentes que retrasan el contenido

Reduce estilos no utilizados y evita cadenas de archivos que deben descargarse antes de mostrar la página. En las fuentes, usa pocas variantes, archivos ajustados al conjunto de caracteres necesario y una estrategia de visualización que permita leer el texto mientras termina la descarga. Precarga solo los recursos realmente críticos.

Movimientos inesperados

Reserva espacio para imágenes, videos, anuncios y componentes que aparecen después. Define dimensiones o una relación de aspecto, evita insertar contenido encima de lo que la persona ya está leyendo y usa animaciones que no cambien el flujo de la página.

Orden recomendado para mejorar el rendimiento

  1. Confirma la métrica afectada con datos de campo y una prueba reproducible.
  2. Corrige la respuesta del servidor si el HTML llega tarde.
  3. Haz que el recurso LCP se descubra pronto y tenga el peso adecuado.
  4. Reduce los recursos que bloquean la representación y las tareas largas de JavaScript.
  5. Reserva el espacio de los componentes para evitar saltos visuales.
  6. Repite la medición y vigila los datos reales después de publicar.

Qué conviene evitar

  • Perseguir una puntuación de 100 sacrificando contenido, accesibilidad o funciones necesarias.
  • Instalar varios complementos de optimización que duplican minificación, caché o carga diferida.
  • Aplicar carga diferida a la imagen principal sin revisar si es el elemento LCP.
  • Precargar muchas imágenes, fuentes o scripts y competir por el ancho de banda inicial.
  • Tomar una sola prueba de laboratorio como resultado definitivo para todos los visitantes.

Rendimiento en WordPress y otros gestores

En un gestor de contenidos conviene revisar primero el tema, las extensiones activas, las fuentes, las imágenes y las consultas que genera cada plantilla. Un complemento de caché puede ser útil, pero debe configurarse de acuerdo con el servidor y probarse después de cada cambio. Añadir herramientas sin diagnóstico puede aumentar el código y producir conflictos.

Herramientas para comprobar la velocidad

PageSpeed Insights combina datos de campo, cuando están disponibles, con una prueba de laboratorio. Chrome DevTools permite estudiar la actividad de red y del procesador. WebPageTest ayuda a comparar ubicaciones, dispositivos y repeticiones. Consulta la guía de pruebas de velocidad web para elegir la herramienta adecuada sin confundir sus resultados.

Mejorar una web existente

La optimización debe partir de mediciones de la página real y terminar con una comprobación posterior a la publicación. Si necesitas revisar carga, indexación y experiencia móvil, conoce el servicio de SEO y rendimiento web o solicita un diagnóstico.

Fuentes consultadas