Qué es page speed
Page speed es la velocidad con la que una página web carga y se vuelve utilizable para una persona. Incluye el tiempo de respuesta del servidor, la carga del HTML, CSS, JavaScript, fuentes, imágenes, vídeos, recursos externos y la estabilidad del diseño mientras aparece el contenido.
En una auditoría profesional, page speed no se reduce a mirar una nota de 0 a 100. Una página puede tener buena puntuación en una prueba de laboratorio y aun así sentirse lenta en móviles reales, conexiones normales o páginas con muchos scripts de terceros.
En una frase: page speed es la velocidad real y percibida con la que una página muestra contenido útil, responde al usuario y ofrece una experiencia estable sin esperas innecesarias.
Para qué sirve mejorar el page speed
Mejorar el page speed sirve para que una web sea más rápida, más clara y más fácil de usar. Esto tiene impacto directo en la experiencia, la conversión, la percepción de marca y la capacidad técnica de la web para crecer sin volverse pesada.
Reduce fricción
El usuario entiende antes la página, espera menos y puede interactuar sin bloqueos, saltos visuales ni pantallas en blanco.
Mejora acciones
Una landing, ecommerce o página de servicio rápida reduce abandono antes de que el usuario vea el CTA, formulario o producto.
Facilita rastreo
Una web ligera y estable suele facilitar el rastreo, la indexación, la experiencia móvil y la lectura técnica de los recursos críticos.
Métricas clave de page speed
La velocidad de una página no se mide con una sola cifra. Conviene revisar varias métricas porque cada una responde a una pregunta distinta: cuándo aparece el contenido, cuándo responde la web, si se mueve el diseño o si el servidor tarda demasiado.
Indica cuándo se muestra el bloque de contenido principal visible para el usuario: imagen hero, titular, bloque destacado o contenido principal.
Optimizar: servidor, imagen principal, CSS crítico, fuentes y renderizado inicial.
Mide la capacidad de la página para responder a interacciones reales: clics, taps, menús, formularios o filtros.
Optimizar: JavaScript, tareas largas, plugins, scripts de terceros y eventos pesados.
Evalúa si los elementos se mueven de forma inesperada mientras carga la página: banners, imágenes sin tamaño, anuncios o fuentes.
Optimizar: reservar espacio, definir dimensiones y evitar inserciones tardías.
Mide cuánto tarda el servidor en empezar a responder. Afecta a toda la cadena de carga posterior.
Optimizar: hosting, caché, CDN, base de datos, PHP, plugins y consultas.
| Métrica | Qué responde | Problema habitual | Acción prioritaria |
|---|---|---|---|
| FCP | Cuándo aparece el primer contenido visible. | CSS o fuentes bloqueando el renderizado. | CSS crítico, fuentes optimizadas y menos recursos iniciales. |
| LCP | Cuándo aparece el contenido principal. | Imagen hero pesada, servidor lento o CSS bloqueante. | Optimizar hero, preload, compresión y caché. |
| INP | Cómo responde la página a interacciones. | JavaScript pesado o demasiados terceros. | Reducir JS, diferir scripts y dividir tareas largas. |
| CLS | Si el diseño se mueve al cargar. | Imágenes sin tamaño, banners insertados o fuentes tardías. | Reservar espacio y definir dimensiones. |
| TTFB | Velocidad de respuesta del servidor. | Hosting lento, caché ausente, base de datos cargada. | Caché de página, CDN, hosting y limpieza técnica. |
| TBT | Bloqueo del hilo principal en laboratorio. | Demasiado JavaScript ejecutándose al inicio. | Eliminar, retrasar o fragmentar JavaScript. |
Page speed y PageSpeed Insights
PageSpeed Insights es una de las herramientas más usadas para medir velocidad, pero no debe interpretarse como una verdad única. Combina datos reales de usuarios cuando existen con una prueba de laboratorio controlada que ayuda a encontrar oportunidades técnicas.
La nota no lo es todo
Una puntuación baja puede indicar problemas reales, pero una puntuación alta tampoco garantiza que todas las páginas, plantillas, países, móviles o conexiones estén perfectas. El análisis correcto compara datos de campo, datos de laboratorio, tipo de página y objetivo de negocio.
| Dato | Qué significa | Cómo interpretarlo |
|---|---|---|
| Datos de campo | Experiencia real de usuarios agregada cuando hay suficientes datos. | Son muy valiosos para SEO técnico porque reflejan dispositivos, redes y sesiones reales. |
| Datos de laboratorio | Prueba simulada en un entorno controlado. | Sirve para depurar, repetir tests y encontrar causas técnicas concretas. |
| Oportunidades | Sugerencias como reducir CSS, optimizar imágenes o eliminar JS no usado. | No todas tienen el mismo impacto: prioriza lo que afecte a LCP, INP, CLS y conversión. |
| Diagnósticos | Información técnica de recursos, tareas, fuentes, renderizado o red. | Ayuda a decidir si el problema viene de servidor, front-end, terceros, imágenes o plantilla. |
Cómo funciona la velocidad de una página
Cuando alguien abre una página, ocurren varias fases: el navegador resuelve el dominio, contacta con el servidor, recibe el HTML, descarga recursos, construye la página, pinta el contenido y ejecuta JavaScript. Page speed analiza dónde se pierde tiempo en esa cadena.
Medir la plantilla correcta
No basta con analizar la home. Hay que medir páginas de servicio, artículos, categorías, fichas de producto, landings y plantillas con formularios.
Separar móvil y escritorio
La mayoría de problemas graves aparecen en móvil: CPU limitada, redes variables, imágenes demasiado grandes y scripts que bloquean la interacción.
Encontrar el cuello de botella
Puede estar en el servidor, en una imagen principal, en CSS bloqueante, en JavaScript, en fuentes, en plugins, en terceros o en la falta de caché.
Priorizar por impacto
Primero se corrige lo que afecta al contenido principal, la interacción, la estabilidad y la conversión. Después se afinan detalles secundarios.
Validar con datos reales
Después de optimizar, conviene revisar Search Console, PageSpeed Insights, analítica y comportamiento real para confirmar que la mejora se sostiene.
Selector rápido de problema de page speed
Esta herramienta orienta qué revisar primero según el síntoma principal. No sustituye una auditoría, pero ayuda a ordenar prioridades.
Qué optimizar primero
Elige el problema principal y el tipo de web. Verás una recomendación inicial para atacar el cuello de botella más probable.
Revisa la imagen o bloque principal del hero, el TTFB, el CSS crítico, las fuentes y los recursos que bloquean el renderizado inicial.
Ejemplos de problemas de page speed
El mismo problema de velocidad puede tener causas distintas según el tipo de proyecto. Por eso una buena auditoría no aplica una receta universal, sino que identifica la plantilla, el recurso y el momento exacto donde se pierde rendimiento.
| Tipo de página | Problema típico | Impacto | Solución útil |
|---|---|---|---|
| Home corporativa | Hero con imagen enorme, vídeo de fondo o slider pesado. | LCP lento y primera impresión pobre. | Comprimir imagen, usar formato moderno, preload y evitar sliders innecesarios. |
| Landing page | Demasiados scripts de tracking, chat, mapas y formularios cargando al inicio. | INP/TBT peor y menos conversiones. | Retrasar terceros, cargar bajo demanda y reducir JavaScript inicial. |
| Ecommerce | Imágenes de producto grandes, filtros pesados y módulos de recomendación. | Carga lenta en categorías y fichas. | Lazy loading bien aplicado, CDN, caché y optimización de imágenes. |
| Blog SEO | Anuncios, embeds, vídeos, tablas y bloques visuales sin control de tamaño. | CLS alto y lectura incómoda. | Reservar espacios, cargar embeds bajo demanda y simplificar recursos. |
| WordPress | Plugins duplicados, maquetadores pesados, CSS/JS global en todas las páginas. | Peso excesivo incluso en páginas simples. | Desactivar assets por página, caché, limpieza de plugins y revisión de plantilla. |
Page speed vs WPO vs Core Web Vitals
Page speed, WPO y Core Web Vitals están relacionados, pero no significan exactamente lo mismo. Entender la diferencia evita auditorías superficiales basadas solo en una puntuación.
| Concepto | Qué significa | Ejemplo |
|---|---|---|
| Page speed | Velocidad real y percibida de una página concreta. | Una ficha de producto tarda demasiado en mostrar su imagen principal. |
| WPO | Proceso completo de optimización del rendimiento web. | Auditar hosting, caché, CDN, imágenes, CSS, JS, fuentes y terceros. |
| Core Web Vitals | Conjunto de métricas centradas en carga, interacción y estabilidad. | Revisar LCP, INP y CLS por tipo de URL en Search Console. |
| PageSpeed Insights | Herramienta de diagnóstico de Google para rendimiento web. | Ver datos de campo, laboratorio, oportunidades y diagnósticos. |
Cómo influye el page speed en SEO
El page speed influye en SEO porque forma parte de la experiencia técnica de una página. Una web rápida ayuda a que el usuario consuma contenido con menos fricción, puede mejorar el rastreo, reduce problemas móviles y facilita que las páginas importantes no dependan de recursos pesados para ser útiles.
Aun así, velocidad no sustituye a contenido útil, arquitectura clara, intención de búsqueda, enlazado interno, autoridad, indexación ni una buena propuesta. Una página rápida pero pobre en contenido no tiene por qué posicionar mejor que una página más completa y bien resuelta.
Primer contenido útil
La página debe mostrar rápido el contenido principal, especialmente en móvil y en landings con intención comercial.
Menús y CTAs usables
Si el menú, el formulario o el botón tardan en responder, la experiencia real empeora aunque el diseño sea visualmente atractivo.
Sin saltos molestos
Una página que mueve botones, títulos o formularios mientras carga genera errores, clics accidentales y menos confianza.
Checklist para mejorar page speed
Una mejora seria de page speed debe atacar lo que más pesa en la experiencia real. Este checklist está pensado para webs corporativas, WordPress, ecommerce, blogs SEO y landings.
| Área | Revisión | Objetivo |
|---|---|---|
| Servidor | TTFB, PHP, caché de página, base de datos, recursos dinámicos. | Que el HTML inicial llegue rápido. |
| Imágenes | Tamaño real, compresión, formatos modernos, lazy loading y preload del hero. | Reducir peso sin perder calidad visual. |
| CSS | CSS crítico, archivos no usados, estilos globales, render-blocking. | Mostrar antes el contenido visible. |
| JavaScript | Scripts no usados, tareas largas, plugins, terceros, defer/async. | Mejorar interacción y reducir bloqueo. |
| Fuentes | Peso, número de variantes, font-display, preload y alojamiento. | Evitar retrasos y saltos visuales. |
| CDN y caché | Caché de navegador, edge, compresión, headers y recursos estáticos. | Servir recursos más cerca y más rápido. |
| Diseño | Espacios reservados, banners, embeds, popups y elementos insertados tarde. | Reducir CLS y mejorar estabilidad. |
| Medición | Comparar móvil/escritorio, plantillas, campo/lab, antes/después. | Evitar decisiones basadas en una sola prueba. |
<!-- Ejemplo útil: reservar tamaño y priorizar imagen principal -->
<img
src="/imagenes/hero-servicio.webp"
width="1440"
height="760"
alt="Diseño web profesional"
fetchpriority="high"
decoding="async"
/>Errores habituales al optimizar page speed
Perseguir solo el 100
La nota de PageSpeed ayuda, pero no debe sustituir el análisis de usuarios reales, objetivos de negocio y problemas por plantilla.
Optimizar solo la home
Muchas veces las páginas lentas importantes son categorías, fichas, artículos, servicios o landings con formularios.
Instalar más plugins
Añadir plugins de optimización sin criterio puede duplicar cachés, romper CSS, retrasar scripts clave o empeorar el rendimiento real.
FAQ sobre page speed
¿Tu web tiene buena pinta pero carga lenta?
Puedo revisar tu page speed con enfoque práctico: qué está frenando la carga, qué afecta a Core Web Vitals, qué plugins o recursos sobran y qué acciones tienen más impacto en SEO, UX y conversión.
