En KoreDesk construimos todos nuestros proyectos con Lighthouse 95+ en rendimiento y SEO. No es magia: es un proceso sistemático que cualquier equipo puede seguir.
¿Qué mide Lighthouse?
Lighthouse evalúa 5 dimensiones (0-100 cada una):
- Performance (rendimiento): velocidad de carga, interactividad, estabilidad visual.
- Accessibility: contraste, navegación por teclado, soporte para lectores de pantalla.
- Best Practices: HTTPS, seguridad, formatos modernos de imagen.
- SEO: metadata, indexabilidad, datos estructurados.
- PWA: capacidad de funcionar offline, instalable.
Las 7 optimizaciones clave para 95+
1. Imágenes optimizadas
Las imágenes son la causa #1 de sitios lentos.
Usa formatos modernos (WebP, AVIF) con compresión sin pérdida perceptible. Implementa carga
diferida (lazy loading) para imágenes que no están en el viewport inicial. Define tamaños
explícitos para evitar Cumulative Layout Shift (CLS). Usa srcset y sizes para servir el
tamaño exacto según la pantalla del usuario.
2. Fuentes optimizadas
Carga fuentes con font-display: swap para que el texto sea visible inmediatamente mientras
la fuente personalizada carga. Subsetea las fuentes para incluir solo los caracteres que
realmente usas. Prefiere formatos WOFF2, que son 30% más pequeños que WOFF.
3. JavaScript eficiente
Elimina JavaScript que no se usa en la carga inicial. Divide el código en chunks más pequeños
(code splitting). Diferencia la carga de scripts no críticos con defer o async.
En Next.js, esto ocurre automáticamente gracias a su sistema de routing y componentes servidor.
4. CSS optimizado
Elimina CSS no utilizado. Minimiza el CSS crítico en línea para que el renderizado inicial sea instantáneo. Usa una metodología como Tailwind CSS que genera solo las clases que usas.
5. Server-Side Rendering (SSR) y Static Generation
Genera páginas estáticas siempre que sea posible (SSG). El HTML se sirve directamente desde un CDN, sin esperar a que JavaScript se ejecute.
Next.js permite elegir entre SSG, SSR o ISR (incremental static regeneration) según las necesidades de cada página.
6. Datos estructurados
El schema.org correcto no solo ayuda al SEO: también contribuye a la puntuación de SEO en Lighthouse. Implementa los tipos de schema que correspondan a tu contenido.
7. Core Web Vitals
Google mide tres métricas principales:
- LCP (Largest Contentful Paint): ideal < 2.5s. Mide la carga del elemento más grande.
- INP (Interaction to Next Paint): ideal < 200ms. Mide la respuesta a interacciones.
- CLS (Cumulative Layout Shift): ideal < 0.1. Mide la estabilidad visual.
Herramientas para monitorear
- PageSpeed Insights: métricas de laboratorio y campo
- Google Search Console: reporte de Core Web Vitals
- Web Vitals extension: monitoreo en tiempo real en Chrome
- Lighthouse CI: integración en tu pipeline de desarrollo
La ventaja de Next.js para Lighthouse
Next.js proporciona optimizaciones automáticas que hacen que alcanzar 95+ sea mucho más fácil:
- Imágenes optimizadas con el componente
next/image - Fuentes optimizadas con
next/font - Code splitting automático por ruta
- Generación estática y server components
- Optimización de scripts y estilos
Por eso construimos todos nuestros proyectos con Next.js. Si aún usas WordPress o constructores visuales, alcanzar 95+ requiere mucho más esfuerzo.
¿Quieres que tu sitio alcance 95+ en Lighthouse? Conversemos.