Puntuació de rendiment de Lighthouse

Què comprova aquesta auditoria

Crida l’API de PageSpeed Insights per a la URL de la pàgina i reporta la puntuació general de rendiment (0–100). La puntuació és una mitjana ponderada de cinc mètriques de laboratori: First Contentful Paint, Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift i Speed Index.

Per què importa

El rendiment és un factor de posicionament confirmat a través dels Core Web Vitals i un factor de conversió confirmat per cada estudi de conversió publicat. La puntuació de Lighthouse és el número únic més fàcil de seguir, el mateix Google l’agrupa en tres bandes:

90–100 (verd), ràpid. Aquest és l’objectiu.
50–89 (taronja), cal treball.
0–49 (vermell), lent. Probablement perdent posicionament i conversions.

Una pàgina amb un 30 no és lleugerament pitjor que una amb 80: perd visitants abans que vegin res.

Com solucionar-ho

La feina de rendiment és un esforç per capes. Ataca primer els contribuïdors més grans:

1. Optimitza les imatges més grans (LCP).

La majoria de pàgines lentes ho són per una imatge hero de 2–5 MB. Comprimeix-la, serveix-la en AVIF/WebP, posa-li width i height explícits:

<img
  src="/hero.avif"
  width="1200"
  height="630"
  alt="…"
  fetchpriority="high"
  loading="eager">

fetchpriority="high" indica al navegador que descarregui aquesta imatge abans que els actius no crítics, millora directament l’LCP.

2. Difereix el JavaScript no crític (TBT i INP).

Cada script d’analítica, widget de xat i test A/B s’executa al fil principal abans que els usuaris puguin interactuar. Aplica-hi defer o async:

<script src="/analytics.js" defer></script>
<script src="https://plausible.io/js/plausible.js" defer></script>

Per a React/Next.js: code-split per als components pesats, fes servir dynamic(() => import(...), { ssr: false }) per als widgets below-the-fold i audita els scripts de tercers a la pestanya Performance de DevTools.

3. Posa el CSS crític inline, difereix la resta.

<style>/* CSS crític, visible above the fold */</style>
<link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">

Els extractors de CSS crític (Critters, Beasties per a Next.js, astro:assets per a Astro) automatitzen això.

4. Reserva espai per al contingut dinàmic (CLS).

Cada imatge necessita width i height. Cada embed necessita un contenidor explícit. Cada webfont necessita font-display: swap i una fallback amb mètriques coincidents.

5. Caché, compressió, CDN.

Serveix els actius estàtics des d’una CDN (Cloudflare, Bunny, Fastly). Activa la compressió Brotli a HTML/CSS/JS. Posa Cache-Control: public, max-age=31536000, immutable als actius amb fingerprint.

Eines per fer servir:

PageSpeed Insights, el mateix motor que crida MetricSpot. Mostra les auditories que fallen.
Chrome DevTools → panel Performance, troba el frame realment lent.
npx unlighthouse https://elteudomini.com, Lighthouse contra cada pàgina, no només l’home.
WebPageTest, per provar des de geografies i tipus de connexió concrets.

Comprovacions relacionades: LCP, INP, CLS.

Preguntes freqüents

Per què la meva puntuació local de Lighthouse difereix de PSI?

Lighthouse local fa servir la teva CPU i la teva xarxa; PSI fa servir un dispositiu Android de gamma mitjana amb throttling sobre connexió 4G. PSI és el que Google fa servir per al senyal real, sempre ajusta contra això, no contra la puntuació del teu MacBook M3.

La puntuació afecta directament el posicionament?

Indirectament. Google posiciona pels tres Core Web Vitals (LCP, INP, CLS), no per la puntuació composta. Però una puntuació baixa de Lighthouse gairebé sempre vol dir que les mètriques CWV subjacents també són dolentes. Arregla les mètriques; la puntuació anirà darrere.

La meva puntuació oscil·la entre visites, per què?

Les dades de camp (el que mostra PSI quan la URL té prou tràfic d’usuaris de Chrome) són estables. Les dades de laboratori (una sola execució de Lighthouse) són variables: servidor calent/fred, xarxes publicitàries carregant creativitats diferents, scripts de tercers. Executa PSI tres vegades i agafa la mediana, o confia en les dades de camp de 28 dies quan estiguin disponibles.