Performance

Cómo llegar a 100/100 en Lighthouse (fácil de verdad)

Una guía práctica y sin vueltas para optimizar tu sitio y clavar el 100 en Lighthouse

Cómo llegar a 100/100 en Lighthouse (fácil de verdad)
Una guía práctica y sin vueltas para optimizar tu sitio y clavar el 100 en Lighthouse

Cómo llegar a 100/100 en Lighthouse (fácil de verdad)

Llegar a un puntaje perfecto en Lighthouse ⓘ no es magia. Es seguir un par de reglas simples, evitar cosas innecesarias y entender cómo piensa el navegador. Te dejo una guía concreta para llegar al 100 sin volverte loco.

1. El elemento Picture para imágenes responsive

Nunca más subas una imagen gigante que se carga en todos lados. Usá el elemento <picture> para servir diferentes tamaños según el dispositivo:

<picture>
  <!-- Imagen móvil -->
  <source media="(max-width: 600px)" srcset="/images/cabinets-m.webp" />
  <!-- Imagen desktop -->
  <source media="(min-width: 601px)" srcset="/images/cabinets.webp" />
  <!-- Fallback -->
  <img
    loading="lazy"
    decoding="async"
    src="/images/cabinets.webp"
    alt="cabinets"
    width="1920"
    height="1280"
  />
</picture>

En móvil cargan imágenes más chicas, en desktop las normales. Simple.

2. Crop tus imágenes al tamaño real de display

No subas una imagen de 4000px si la mostrás a 600px. Medí exactamente cuánto ocupa en tu diseño y crop a 2x ese tamaño (para pantallas retina ⓘ).

Si tu imagen se muestra a 551x250px, crop a 1102x500px. En móvil si se ve a 292x213px, crop a 584x426px y guardalo como imagen-m.webp.

Una imagen de 1MB se convierte en 108KB solo con esto. 90% menos peso.

3. Comprimí TODO

Usá compressor.io para comprimir en lote. Tu imagen de 108KB se convierte en 52KB. En móvil de 52KB a 26KB.

Apunta a 20-40KB para imágenes móviles. Background images pueden ser más grandes pero nunca más de 100KB.

4. Convertí a WebP

WebP ⓘ es 30% más chico que JPG y 26% más chico que PNG. Usá cloudconvert.com o cualquier conversor.

Con crop + compresión + WebP, tu imagen de 1MB original se convierte en 26KB en móvil. Eso es 97% menos peso.

5. Lazy loading en TODO lo que está abajo del fold

<img
  src="/foto.webp"
  loading="lazy"
  decoding="async"
  width="600"
  height="400"
  alt="Ejemplo"
/>

NUNCA lazy load imágenes above the fold ⓘ. Causa CLS ⓘ y te baja el score.

6. Decoding async en todas las imágenes

<img decoding="async" src="/imagen.webp" alt="ejemplo" />

Le dice al navegador que puede decodificar la imagen después, mientras muestra el texto. Mejora el rendimiento.

7. Crop inteligente para imágenes de landing

Para la imagen principal de tu landing page, crop el centro a 800px de ancho para móvil. El navegador va a cortar los lados de todas formas, ¿por qué cargar todo?

8. Preload de imágenes críticas

En el <head> de tu HTML:

<link rel="preload" as="image" href="/landing-m.webp" />
<link rel="preload" as="image" href="/logo.webp" />

Solo para imágenes above the fold que son críticas para el primer render.

9. Lazy load background images con Picture

En lugar de usar librerías, poné un <picture> al final del contenedor que tiene el background:

<div class="hero-section">
  <!-- Todo tu contenido -->

  <picture class="bg-image">
    <source media="(max-width: 600px)" srcset="/hero-m.webp" />
    <source media="(min-width: 601px)" srcset="/hero.webp" />
    <img
      src="/hero.webp"
      alt=""
      aria-hidden="true"
      loading="lazy"
      decoding="async"
    />
  </picture>
</div>

Y en CSS:

.hero-section {
  position: relative;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

10. Fuentes locales, no Google Fonts

Bajá tu fuente, convertí a WOFF2 ⓘ y alojala localmente. Google Fonts es lento y bloquea el render.

11. Preload de fuentes críticas

<link
  rel="preload"
  href="/fonts/inter.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Solo para fuentes que usás above the fold.

12. Eliminá el Flash of Unstyled Content (FOUT ⓘ)

Usá Font Style Matcher para encontrar la fuente del sistema que más se parezca a la tuya. Subí tu fuente y probá con Arial, Helvetica, etc.

Cuando encuentres la que más se parezca, usala como fallback:

body {
  font-family: "Inter", Arial, sans-serif;
}

Ajustá el line-height gradualmente hasta que no haya CLS. Si ves saltos grandes, es porque una palabra extra cabe en una línea con la fuente del sistema pero no con tu fuente. Reducí el font-size hasta que no pase.

13. Eliminá scripts que bloquean el render

Google Analytics va al final del <head>, justo antes del </head>:

<head>
  <!-- Todo tu CSS y meta tags -->
  <script
    async
    src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
  ></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());
    gtag("config", "GA_MEASUREMENT_ID");
  </script>
</head>

14. Minificá CSS y JS

Si usás Netlify o Vercel, activalo en las opciones de build. Si no, usá minificadores online gratuitos.

15. Usá SVGs en lugar de icon fonts

Font Awesome es pesado. Bajá SVGs ⓘ de Flaticon y optimizalos con SVGOMG.

<img src="/icons/phone.svg" alt="phone" width="24" height="24" />

16. Defer JavaScript no esencial

<script defer src="/nav.js"></script>
<script defer src="/animations.js"></script>

Todo lo que no sea crítico para el primer render va con defer.

17. Eliminá jQuery y scripts de terceros

JavaScript moderno puede hacer todo lo que hacía jQuery. Font Awesome, librerías de iconos pesadas, etc. Todo afuera.

18. CSS crítico + defer del resto

Separá tu CSS en dos archivos:

critical.css - Solo estilos above the fold main.css - Todo el resto

<link rel="stylesheet" href="/css/critical.css" />
<link
  rel="stylesheet"
  href="/css/main.css"
  media="print"
  onload="this.media='all'; this.onload=null;"
/>
<noscript>
  <link rel="stylesheet" href="/css/main.css" />
</noscript>

Esto carga primero los estilos críticos, luego difiere el resto. El noscript es para usuarios sin JavaScript.

19. Habilitá compresión Gzip/Brotli

Vercel y Netlify ya lo tienen. Si estás en tu servidor, activalo. Reduce automáticamente el tamaño de todos los archivos.

20. Medí, arreglá y repetí

Corré Lighthouse en modo incognito, sin extensiones, en móvil. Andá arreglando lo que te tira. Vas a notar que llegás al 100 bastante rápido si seguís estos pasos.

Cierre

Esto no es humo ni teoría. Estas prácticas están probadas y te van a dar un sitio más rápido, más pro y con mejor experiencia para el usuario. Ah, y sí: con 100/100 en Lighthouse.

La clave está en no cargar lo que no necesitás, optimizar lo que sí cargás, y entender que el navegador es tu amigo si le das las herramientas correctas.

Posts Relacionados

Web Vitals: qué son y por qué importan para tu web 10 Consejos Pro para Dominar Tailwind CSS