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.
¿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
Usa SSR o SSG para entregar HTML completo al navegador:
// 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? Contáctanos para un análisis gratuito.