La velocidad de carga es crítica. Cada segundo de retraso puede costar conversiones y afectar tu posicionamiento en buscadores. Esta guía te muestra como optimizar tu web para obtener el mejor rendimiento. Si estás valorando un rediseño completo, también puede interesarte nuestra comparativa de Next.js vs Astro en 2026.
¿Por qué importa el rendimiento?
- 53% de usuarios abandonan si una página tarda más de 3 segundos
- 1 segundo de mejora puede aumentar conversiones un 7%
- Google usa la velocidad como factor de ranking
Core Web Vitals
Google mide la experiencia del usuario con tres métricas principales:
LCP (Largest Contentful Paint)
Tiempo hasta que el contenido principal es visible.
- Bueno: < 2.5s
- Necesita mejora: 2.5s - 4s
- Pobre: > 4s
FID (First Input Delay)
Tiempo hasta que la página responde a la primera interacción.
- Bueno: < 100ms
- Necesita mejora: 100ms - 300ms
- Pobre: > 300ms
CLS (Cumulative Layout Shift)
Estabilidad visual durante la carga.
- Bueno: < 0.1
- Necesita mejora: 0.1 - 0.25
- Pobre: > 0.25
Técnicas de optimización
1. Optimización de imágenes
<!-- Usar formatos modernos -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Descripción" loading="lazy">
</picture>2. Carga diferida (Lazy Loading)
// Intersection Observer para lazy loading
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});3. Minificación y compresión
- Minifica CSS, JavaScript y HTML
- Habilita compresión Gzip o Brotli
- Elimina código no utilizado (tree shaking)
4. Caché efectivo
# Configuración de caché en Nginx
location ~* \.(css|js|jpg|png|webp|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}5. Precargar recursos críticos
<head>
<!-- Precargar fuentes -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<!-- Preconectar a orígenes externos -->
<link rel="preconnect" href="https://api.example.com">
</head>6. Renderizado del lado del servidor
Frameworks como Astro o Next.js permiten usar SSR o SSG para entregar HTML completo al navegador, una técnica que aplicamos habitualmente en nuestros proyectos de desarrollo web:
// Ejemplo con Next.js
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 3600 // Regenerar cada hora
};
}Herramientas de medición
- Lighthouse (Chrome DevTools)
- PageSpeed Insights (Google)
- WebPageTest
- GTmetrix
Checklist de optimización
- Imágenes optimizadas y en formato moderno
- Lazy loading implementado
- CSS crítico inline
- JavaScript diferido
- Caché configurado correctamente
- CDN configurado
- Compresión habilitada
- Fuentes optimizadas
Conclusión
La optimización de rendimiento es un proceso continuo. Monitoriza regularmente tus métricas y ajusta según sea necesario.
¿Tu web necesita una auditoría de rendimiento? Agenda una consultoría gratuita para un análisis personalizado.