Optimización de Velocidad Web: Guía para 90+ en PageSpeed

Por qué la velocidad de tu web es clave

Tu web tarda en cargar y lo notas: menos visitas, menos contactos, menos ventas. No es casualidad. La velocidad de carga afecta directamente a:

• SEO: Google usa Core Web Vitals como factor de ranking
• Conversiones: cada segundo de espera es gente que se va antes de ver lo que vendes
• Rebote: por encima de los tres segundos, buena parte de la gente se marcha
• Experiencia: Usuarios frustrados no vuelven

Entendiendo Core Web Vitals

LCP (Largest Contentful Paint)

Qué mide: Tiempo hasta que se renderiza el elemento más grande visible

Objetivo: < 2.5 segundos

Factores: Imágenes grandes, CSS bloqueante, servidor lento

INP (Interaction to Next Paint)

Qué mide: Tiempo de respuesta a interacciones del usuario

Objetivo: < 200 milisegundos

Factores: JavaScript pesado, main thread bloqueado

CLS (Cumulative Layout Shift)

Qué mide: Estabilidad visual (elementos que "saltan")

Objetivo: < 0.1

Factores: Imágenes sin dimensiones, fuentes web, anuncios

¿Tu web va lenta ahora mismo? Empieza por aquí

Si has llegado buscando por qué tu web tarda una eternidad, no hace falta que te leas la guía entera de golpe. La mayoría de los problemas de velocidad salen de cinco sitios, y casi todos se arreglan en una tarde.

1. Mide en PageSpeed Insights y apunta la puntuación que tienes hoy. Sin ese número de partida no sabrás si has mejorado.
2. Mira qué está bloqueando la carga en el apartado de oportunidades del informe.
3. Ataca por orden estas cinco causas.

1. Imágenes sin optimizar (la culpable número uno)

Conviértelas a WebP, activa el lazy loading y pásales un compresor como ShortPixel o Imagify. Suele ser el cambio que más se nota y el que menos cuesta.

2. Hosting lento

Si pagas tres euros al mes por tu hosting, ahí tienes media explicación. Un servidor compartido y saturado no lo arregla ningún plugin.

3. Demasiados plugins

Cada plugin activo carga sus propios scripts y estilos. Desactiva los que no uses y comprueba la diferencia. Menos plugins, más velocidad.

4. Sin caché

Si tu web genera cada página desde cero en cada visita, estás haciendo trabajar al servidor de más. WP Super Cache o W3 Total Cache resuelven el caso básico.

5. JavaScript y CSS sin minificar

Autoptimize combina y minifica sin que tengas que tocar código. A partir de ahí, lo que viene en esta guía.

¿Has probado los cinco y sigue arrastrándose? Entonces el problema está más abajo, y es justo lo que resolvemos en nuestro servicio de optimización web.

Guía de optimización paso a paso

Paso 1: Auditoría inicial

Antes de optimizar, mide:

• PageSpeed Insights: pagespeed.web.dev
• GTmetrix: Para análisis detallado
• WebPageTest: Para ver waterfall completo

Anota tu puntuación actual como baseline.

Paso 2: Optimización de imágenes (impacto alto)

• Convierte a WebP o AVIF (30-50% más pequeñas que JPEG)
• Usa imágenes responsive con srcset
• Implementa lazy loading para imágenes below-the-fold
• Especifica width y height para evitar CLS
• Usa CDN con optimización automática (Cloudflare, Imgix)

Paso 3: Optimización de CSS (impacto alto)

• Critical CSS inline: CSS necesario para above-the-fold en el HTML
• Defer CSS no crítico: Carga asíncrona del resto
• Minifica: Elimina espacios y comentarios
• Purga CSS no usado: Herramientas como PurgeCSS

Paso 4: Optimización de JavaScript (impacto muy alto)

• Defer/async: No bloquees el renderizado
• Code splitting: Carga solo lo necesario por página
• Tree shaking: Elimina código muerto
• Minifica y comprime: Gzip o Brotli
• Evalúa cada librería: ¿Realmente la necesitas?

Paso 5: Optimización del servidor

• Hosting de calidad: No escatimes aquí
• CDN: Cloudflare, Fastly, AWS CloudFront
• HTTP/2 o HTTP/3: Múltiples recursos en paralelo
• Compresión Brotli: Mejor que Gzip
• Cache headers: Aprovecha caché del navegador

Paso 6: Optimización de fuentes

• font-display: swap: Muestra texto mientras carga la fuente
• Preload fuentes críticas: <link rel="preload">
• Subsets: Solo caracteres que uses (latin, no todos)
• Limita variantes: ¿Necesitas 8 pesos diferentes?

Paso 7: Eliminar render-blocking resources

• Identifica recursos que bloquean en PageSpeed
• Inline críticos, defer el resto
• Considera preconnect para recursos de terceros

Checklist de optimización rápida

• ☐ Imágenes en WebP/AVIF
• ☐ Lazy loading en imágenes
• ☐ Dimensiones en todas las imágenes
• ☐ Critical CSS inline
• ☐ JavaScript con defer/async
• ☐ CDN configurado
• ☐ Compresión Brotli activada
• ☐ Cache headers correctos
• ☐ font-display: swap
• ☐ Preconnect a dominios de terceros

Qué medimos antes y después

• Puntuación de PageSpeed, con el informe completo
• Tiempo de carga real, no percibido
• Conversiones, para comprobar si la mejora técnica se traduce en negocio
• Tasa de rebote, para ver si el cambio se nota en el comportamiento

¿Tu web va lenta? En Codanter ofrecemos servicios de optimización web con resultados medibles. Y si prefieres empezar de cero con una web rápida desde el primer día, mira nuestro desarrollo web a medida. Para que tu web siga rápida a largo plazo, te recomendamos un plan de mantenimiento. Si lo que va lento es concretamente tu catálogo de WooCommerce con muchos productos, esta guía general no basta: tenemos una específica para ese caso.