Cómo probar y optimizar la velocidad de tu web: todas las herramientas explicadas
Medir la velocidad de carga de tu web es el primer paso hacia una web más rápida y mejores resultados de búsqueda. Google utiliza la velocidad de carga como factor de posicionamiento, y según varios estudios el 53 % de los visitantes móviles abandona una web que tarda más de 3 segundos en cargar. En esta guía repasamos todas las herramientas con las que puedes medir la velocidad de carga de tu web y te damos consejos prácticos para mejorar los resultados. Echa también un vistazo a nuestra oferta de hosting rápido.
¿Por qué es tan importante medir la velocidad de tu web?
Medir con regularidad la velocidad de carga de tu web es crucial para su éxito. La velocidad influye directamente en la experiencia de usuario, pero también en tu visibilidad en Google y en tu tasa de conversión.
El impacto de la velocidad de carga en tu web
| Tiempo de carga | Aumento del porcentaje de rebote | Impacto en la conversión | Valoración de Google |
|---|---|---|---|
| 0-2 segundos | Base | Óptimo | Bueno |
| 2-3 segundos | +32% | -7 % por segundo | Aceptable |
| 3-5 segundos | +90% | -20 % o más | Regular |
| 5-10 segundos | +123% | -40 % o más | Malo |
| 10+ segundos | +200%+ | Pérdida dramática | Muy malo |
¿Cuáles son las mejores herramientas para probar la velocidad de tu web?
Hay varias herramientas disponibles para probar la velocidad de tu web. Cada una ofrece información y métricas distintas. Lo mejor es usar varias para tener una visión completa.
Google PageSpeed Insights
Google PageSpeed Insights es la herramienta de referencia para probar la velocidad de una web, porque utiliza las mismas métricas en las que se basa el propio Google para el posicionamiento. La herramienta analiza tu web tanto en móvil como en escritorio y da una puntuación de 0-100 junto con puntos de mejora concretos.
Métricas más importantes en PageSpeed Insights
- Largest Contentful Paint (LCP): cuándo se carga el elemento visible más grande (objetivo: menos de 2,5 s)
- First Input Delay (FID) / Interaction to Next Paint (INP): con qué rapidez responde la web a la interacción (objetivo: menos de 200 ms)
- Cumulative Layout Shift (CLS): cuánto se desplaza el diseño durante la carga (objetivo: menos de 0,1)
- First Contentful Paint (FCP): cuándo se hace visible el primer contenido (objetivo: menos de 1,8 s)
- Time to First Byte (TTFB): con qué rapidez responde el servidor (objetivo: menos de 800 ms)
- Total Blocking Time (TBT): cuánto tiempo está bloqueado el hilo principal (objetivo: menos de 200 ms)
GTmetrix
GTmetrix es una herramienta gratuita muy popular que ofrece diagramas de cascada detallados. Ves con precisión qué recursos se cargan, en qué orden y cuánto tarda cada elemento. GTmetrix combina las métricas de Lighthouse con sus propios indicadores de rendimiento.
WebPageTest
WebPageTest ofrece el análisis más detallado de todas las herramientas para probar la velocidad de una web. Puedes probar desde distintas ubicaciones de todo el mundo, con diferentes navegadores y velocidades de conexión. La vista de película (filmstrip) muestra fotograma a fotograma cómo se carga tu página.
Lighthouse (Chrome DevTools)
Lighthouse está integrado en Google Chrome y ofrece una auditoría completa de rendimiento, accesibilidad, SEO y buenas prácticas. Abre Chrome DevTools (F12) y ve a la pestaña de Lighthouse para ejecutar una auditoría. Es el mismo motor que utiliza Google PageSpeed Insights.
Comparativa de herramientas para probar la velocidad de una web
| Herramienta | Gratis | Ubicaciones de prueba | Diagrama de cascada | Core Web Vitals | Datos históricos |
|---|---|---|---|---|---|
| PageSpeed Insights | Sí | Global (Google) | No | Sí (datos reales) | No |
| GTmetrix | Sí (limitado) | 7 ubicaciones | Sí | Sí (laboratorio) | Premium |
| WebPageTest | Sí | 30+ ubicaciones | Detallado | Sí (laboratorio) | No |
| Lighthouse | Sí (local) | Tu propio navegador | Mediante DevTools | Sí (laboratorio) | No |
| Pingdom | Sí | 7 ubicaciones | Sí | Limitado | Premium |
¿Cómo puedes mejorar la velocidad de tu web?
Después de probar la velocidad de tu web, toca resolver los problemas detectados. Estas son las optimizaciones con más impacto que puedes llevar a cabo.
Mejorar el tiempo de respuesta del servidor (TTFB)
El Time to First Byte determina con qué rapidez empieza a responder tu servidor. Un TTFB lento suele indicar problemas con tu hosting, la base de datos o el código del servidor. Entre las posibles soluciones están pasar a un mejor hosting, activar la caché del servidor y optimizar las consultas a la base de datos.
Optimizar las imágenes
Las imágenes suelen ser el mayor culpable de las webs lentas. Optimízalas usando el formato adecuado (WebP ofrece la mejor compresión), comprimiéndolas sin pérdida visible de calidad, implementando lazy loading en las imágenes que quedan por debajo de la línea de flotación y sirviendo las dimensiones correctas mediante imágenes adaptables (responsive).
Implementar la caché
La caché evita que el navegador tenga que descargar todos los archivos de nuevo en cada visita. Implementa la caché del navegador mediante cabeceras Cache-Control y la caché del servidor para el contenido dinámico. Lee nuestra guía sobre la caché explicada para tener una visión completa.
Optimizar CSS y JavaScript
- Minificación: elimina los espacios en blanco y los comentarios de los archivos CSS/JS
- Agrupación: combina varios archivos para reducir el número de peticiones
- Defer y async: carga JavaScript solo después de analizar el HTML
- CSS crítico: carga solo el CSS necesario para la parte visible sin hacer scroll
- División de código (code splitting): carga solo el código necesario en cada página
- Tree shaking: elimina el código no utilizado de los paquetes
Usar una CDN
Una red de distribución de contenidos (CDN) distribuye tu contenido por servidores de todo el mundo, de modo que los visitantes cargan los archivos desde la ubicación más cercana. Esto reduce considerablemente la latencia. Cloudflare es una opción gratuita muy popular que combina una CDN con protección contra DDoS.
¿Qué optimizaciones de velocidad existen específicamente para WordPress?
Si usas WordPress, hay optimizaciones específicas que puedes aplicar después de probar la velocidad de tu web:
Plugins de caché
- WP Rocket: el plugin de caché más completo (de pago)
- W3 Total Cache: muy completo, pero complejo (gratis)
- LiteSpeed Cache: específico para servidores web LiteSpeed (gratis)
- WP Super Cache: sencillo y fiable (gratis)
Optimización de la base de datos
Una base de datos sobrecargada ralentiza tu web con WordPress. Limpia con regularidad las revisiones, los transients y los comentarios de spam. Usa un plugin como WP-Optimize u optimiza la base de datos manualmente con phpMyAdmin.
Optimizar el tema y los plugins
- Usa un tema ligero optimizado para la velocidad
- Elimina por completo los plugins que no uses
- Limita el uso de constructores de páginas (page builders) pesados
- Desactiva las funciones de WordPress que no utilices
¿Cómo pruebas la velocidad de tu web de forma estructural?
Probar la velocidad de una web no es una actividad puntual, sino un proceso continuo. Programa pruebas de velocidad mensuales y supervisa las Core Web Vitals en Google Search Console.
Flujo de monitorización
- Prueba tu velocidad cada mes con PageSpeed Insights y GTmetrix
- Revisa las Core Web Vitals en Google Search Console
- Identifica los mayores cuellos de botella en los resultados
- Implementa las optimizaciones recomendadas
- Vuelve a probar para medir la mejora
- Documenta tus resultados para analizar tendencias
¿Qué técnicas avanzadas ayudan a optimizar una web?
Para las webs que ya han completado de forma óptima las tareas básicas, existen técnicas avanzadas para mejorar aún más la velocidad después de probarla:
HTTP/3 y QUIC
HTTP/3, basado en el protocolo QUIC, ofrece un establecimiento de conexión más rápido y un mejor rendimiento en redes móviles. Comprueba si tu proveedor de hosting y tu CDN son compatibles con HTTP/3.
Preloading y prefetching
- Preload: carga antes los recursos críticos con la sugerencia preload
- Prefetch: carga recursos por adelantado para la página siguiente
- Preconnect: establece conexiones por adelantado con dominios externos
- DNS prefetch: resuelve el DNS por adelantado para dominios externos
Service Workers y PWA
Los Service Workers permiten implementar una estrategia offline-first, en la que el contenido de los visitantes recurrentes se sirve directamente desde la caché. La funcionalidad de Progressive Web App (PWA) puede mejorar aún más la experiencia, sobre todo en dispositivos móviles.
Probar y optimizar la velocidad de tu web con regularidad es una inversión que se recupera en una mejor experiencia de usuario, más conversiones y mejor posicionamiento en Google. Empieza por las optimizaciones básicas y avanza poco a poco hacia técnicas más avanzadas. Cada décima de segundo ganada cuenta, porque en internet la velocidad lo es todo. Echa también un vistazo a nuestra guía sobre cómo mejorar la velocidad de tu web para más consejos prácticos.
Optimización avanzada de la velocidad después de probar tu web
Tras la primera ronda de pruebas de velocidad y las optimizaciones básicas, existen técnicas avanzadas para seguir mejorando.
Optimización de la ruta crítica de renderizado
La ruta crítica de renderizado determina qué recursos debe cargar el navegador antes de que la página sea visible. Identifica y optimiza los recursos críticos: incluye el CSS esencial en línea (inline), aplica defer al JavaScript no crítico y usa sugerencias preload para los recursos importantes. Al acortar la ruta crítica de renderizado, mejoras de forma significativa las métricas First Contentful Paint y Largest Contentful Paint.
Edge computing y funciones serverless
El edge computing acerca el procesamiento al usuario final ejecutando código en servidores repartidos por todo el mundo. Cloudflare Workers y AWS Lambda@Edge son opciones populares que pueden reducir drásticamente el Time to First Byte en contenido dinámico. Usa el edge computing para tareas como pruebas A/B, redirecciones geográficas y personalización sin aumentar la carga de tu servidor de origen.
Optimización de las consultas a la base de datos
Las consultas lentas a la base de datos suelen ser la causa de un TTFB alto. Después de probar la velocidad de tu web, analiza las consultas más lentas con herramientas como el slow query log de MySQL o el plugin Query Monitor para WordPress. Añade índices en las columnas de uso frecuente, optimiza los joins complejos y plantéate usar caché de consultas con Redis o Memcached para consultas repetidas que dan los mismos resultados.
¿Cómo supervisas la velocidad de tu web a largo plazo?
Un enfoque estructural para probar la velocidad de una web incluye también supervisar el rendimiento durante periodos largos. Configura evaluaciones de rendimiento automáticas que se ejecuten cada semana o a diario con herramientas como SpeedCurve o Calibre. Estas herramientas almacenan datos históricos para que puedas analizar tendencias y medir el impacto de los cambios. Integra la monitorización del rendimiento en tu pipeline de despliegue para que cada cambio de código se pruebe automáticamente en cuanto a su impacto en el rendimiento antes de pasar a producción. Al definir y aplicar presupuestos de rendimiento evitas la degradación gradual del rendimiento, que puede pasar desapercibida cuando no se mide de forma estructural.
¿Cómo optimizas la velocidad de tu web móvil?
Con más del sesenta por ciento del tráfico web procedente de dispositivos móviles, optimizar el rendimiento móvil es esencial. Los usuarios móviles suelen tener conexiones más lentas y procesadores menos potentes, por lo que la optimización tiene aquí aún más impacto. Empieza probando tu web en dispositivos móviles reales en lugar de usar solo la emulación de escritorio de Chrome DevTools. Usa herramientas como BrowserStack o Sauce Labs para probar en distintos dispositivos y sistemas operativos. Optimiza las áreas táctiles para que los botones midan como mínimo 48 por 48 píxeles, para una buena experiencia de usuario. Reduce al mínimo el uso de frameworks de JavaScript pesados en móvil y plantéate servir una versión más ligera a los usuarios móviles. Implementa la carga adaptativa (adaptive loading), de modo que la calidad de las imágenes y los vídeos se ajuste a la velocidad de conexión del usuario. Asegúrate de que el contenido crítico de la parte superior de la página cargue rápido priorizando los recursos de esa parte superior. Usa la sugerencia preconnect para los dominios externos que sepas que se necesitarán, de modo que el navegador abra una conexión por adelantado antes de que se soliciten los recursos.
Probar la velocidad de una web: las Core Web Vitals explicadas
Google utiliza las Core Web Vitals como un factor de posicionamiento importante. Comprender y optimizar estas métricas es esencial cuando pruebas la velocidad de tu web y la mejoras. Cada una de las tres métricas clave mide un aspecto distinto de la experiencia de usuario.
| Métrica | Qué mide | Bueno | Regular | Malo |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Tiempo de carga del elemento visible más grande | Menos de 2,5 segundos | 2,5 a 4,0 s | Más de 4,0 s |
| INP (Interaction to Next Paint) | Capacidad de respuesta a la interacción del usuario | Menos de 200 ms | 200 a 500 ms | Más de 500 ms |
| CLS (Cumulative Layout Shift) | Estabilidad visual durante la carga | Menos de 0,1 | 0,1 - 0,25 | Más de 0,25 |
El LCP suele verse perjudicado por imágenes grandes, tiempos de respuesta del servidor lentos o recursos que bloquean el renderizado. El INP mide con qué rapidez responde tu página cuando un visitante hace clic o escribe. El CLS se produce cuando los elementos de la página se desplazan mientras esta carga, lo que resulta frustrante para los visitantes.
Probar y mejorar la velocidad de una web: optimizaciones del servidor
Muchos administradores web se centran en la optimización del front-end, pero las mejoras en el servidor suelen aportar la mayor ganancia de velocidad. Estas optimizaciones reducen el Time to First Byte (TTFB) y hacen que tu servidor pueda entregar contenido más rápido cuando pruebas la velocidad de tu web.
- Actualizar la versión de PHP: PHP 8.x es hasta 3 veces más rápido que PHP 7.0. Comprueba si tu hosting ofrece la última versión estable de PHP.
- Activar OPcache: PHP OPcache guarda los scripts compilados en memoria, de modo que no hace falta volver a compilarlos en cada petición.
- Optimizar las consultas a la base de datos: las consultas lentas suelen ser el mayor cuello de botella. Usa el slow query log para identificar las consultas problemáticas y añade índices donde haga falta.
- Caché de objetos con Redis: Redis guarda en memoria los resultados de la base de datos que se usan con frecuencia, lo que elimina las consultas repetidas y reduce drásticamente el tiempo de respuesta.
- Activar HTTP/2 o HTTP/3: los protocolos modernos cargan varios archivos a la vez por una sola conexión, lo que mejora considerablemente el tiempo de carga.
La elección del servidor web también tiene mucha influencia. Lee nuestra comparativa de Apache vs Nginx vs LiteSpeed para elegir la opción más rápida para tu situación. Con un VPS tienes control total sobre estos ajustes. Usa herramientas de monitorización de servidores para medir el impacto de tus optimizaciones.
Optimizar la velocidad de una web: lista de comprobación del front-end
Después de las optimizaciones del servidor, toca el front-end. Estos ajustes reducen la cantidad de datos que se envían al navegador y aceleran la visualización. Usa esta lista de comprobación para mejorar la velocidad de tu web de forma sistemática:
- Optimizar las imágenes: usa formatos modernos (WebP, AVIF), ajusta las dimensiones al tamaño de visualización e implementa lazy loading en las imágenes que quedan por debajo de la línea de flotación.
- Minificar CSS y JavaScript: elimina los espacios en blanco innecesarios, los comentarios y el código sin usar de tus hojas de estilo y scripts.
- Incluir el CSS crítico en línea: carga en el propio HTML el CSS necesario para la mitad superior de la página, para evitar el bloqueo del renderizado.
- Diferir JavaScript: usa los atributos defer o async para cargar los scripts solo después de que la página se haya renderizado.
- Configurar la caché del navegador: establece cabeceras de caché largas para los archivos estáticos, de modo que los visitantes que vuelven no tengan que descargarlos de nuevo.
- Usar una CDN: una red de distribución de contenidos sirve tus archivos estáticos desde servidores cercanos al visitante, lo que reduce la latencia.
Mide tus mejoras después de cada cambio. Usa Google PageSpeed Insights, GTmetrix y WebPageTest para comparar el antes y el después. Un buen certificado SSL también contribuye a la velocidad gracias a la compatibilidad con HTTP/2. Descubre cómo instalar Let's Encrypt para tener SSL gratis.
Probar la velocidad de una web: monitorización y optimización continua
Probar y optimizar una sola vez la velocidad de tu web no es suficiente. Las webs cambian continuamente: se añade contenido nuevo, se instalan plugins y cambian las configuraciones del servidor. Sin una monitorización estructural, la velocidad puede empeorar poco a poco sin que te des cuenta.
Configura pruebas de velocidad automatizadas que se ejecuten a diario o cada semana. Herramientas como la API de Google PageSpeed Insights, la API de WebPageTest o SpeedCurve ofrecen acceso programático con el que puedes automatizar las pruebas de velocidad y visualizar tendencias. Define un presupuesto de rendimiento: valores máximos para el tiempo de carga, el tamaño de la página y el número de peticiones HTTP. Cuando un cambio supera el presupuesto, investiga la causa antes de que el cambio pase a producción.
El Real User Monitoring (RUM) permite saber cómo experimentan tu web los visitantes reales. A diferencia de las pruebas sintéticas, que miden desde una ubicación y un dispositivo fijos, el RUM muestra los tiempos de carga reales que viven tus visitantes en sus propios dispositivos y conexiones de red. Google ofrece datos de RUM gratis a través del Chrome User Experience Report (CrUX), que además es la base de las Core Web Vitals en los resultados de búsqueda. Combina las pruebas sintéticas con el RUM para tener una visión completa del rendimiento de tu web y prioriza las optimizaciones según lo que experimentan los usuarios reales.
Probar la velocidad de una web: optimizaciones específicas para cada CMS
El mejor enfoque para probar y mejorar la velocidad de tu web varía según el sistema de gestión de contenidos. Cada CMS tiene sus propios cuellos de botella y las correspondientes posibilidades de optimización que conviene conocer para obtener el mejor resultado.
WordPress se beneficia enormemente de la caché de objetos con Redis, de la caché de página completa mediante plugins como WP Super Cache o W3 Total Cache y de reducir el número de plugins activos. Cada plugin añade consultas a la base de datos y código PHP que se ejecuta en cada visita de página. Audita tus plugins con regularidad y desactiva todo lo que no sea estrictamente necesario.
Las tiendas online con WooCommerce tienen puntos de optimización adicionales: usa caché de fragmentos para los widgets del carrito y los productos vistos recientemente, que cambian según el usuario; optimiza las imágenes de producto con conversión automática a WebP y plantéate un front-end headless con un framework de JavaScript para conseguir la experiencia de compra más rápida. Magento y PrestaShop se benefician de Varnish como caché de página completa y de Elasticsearch para una búsqueda de productos rápida. Los generadores de sitios estáticos como Hugo y Jekyll son, por naturaleza, la opción más rápida, porque generan los archivos HTML de antemano sin procesamiento en el servidor en cada visita. Para el contenido que no cambia a menudo, es una elección ideal que permite tiempos de carga de menos de 100 milisegundos.
Velocidad de la web: impacto en la conversión y los ingresos
La relación entre la velocidad de la web y los resultados empresariales ha quedado demostrada en innumerables estudios. Cada segundo adicional de tiempo de carga reduce la conversión un siete por ciento de media. Para una tienda online con unos ingresos mensuales de 50.000 euros, pasar de tres a dos segundos de tiempo de carga supone potencialmente 3500 euros más de ingresos al mes. Amazon calculó que cada 100 milisegundos adicionales de latencia les cuestan un uno por ciento de las ventas. Google utiliza la velocidad de página como factor de posicionamiento, lo que significa que las webs lentas también reciben menos tráfico orgánico. Por eso, invertir en optimizar la velocidad no solo ofrece una mejor experiencia de usuario, sino también resultados financieros medibles que justifican con creces el coste de la optimización.
Fuentes y referencias
- Google PageSpeed Insights (pagespeed.web.dev)
- WooCommerce: documentación oficial (woocommerce.com)
- Let's Encrypt: certificados SSL gratis (letsencrypt.org)
- Cloudflare: Learning Center (cloudflare.com/learning)
- GTmetrix: pruebas de rendimiento de webs (gtmetrix.com)
