Què és el PageSpeed i per què hauria de ser 100/100

Quan li ensenyes el teu web a un client potencial, el primer que veu és el disseny. Quan Google l’analitza, el primer que mesura és la velocitat. I la nota que li posa té un nom concret: PageSpeed.

PageSpeed és el sistema de puntuació oficial de Google per al rendiment web. Va del 0 al 100, mesura mòbil i escriptori per separat, i és gratuït: pots provar el teu web ara mateix a pagespeed.web.dev. Si la puntuació és inferior a 90, tens un problema. Si està per sota de 50, estàs perdent clients cada dia sense saber-ho.

1. Què mesura realment el PageSpeed

El PageSpeed no és una sola mètrica. És el resultat d’analitzar el teu web amb desenes de paràmetres tècnics i resumir-los en una nota global. Els tres més importants són els Core Web Vitals, que Google va convertir en factor SEO oficial el juny de 2021.

LCP (Largest Contentful Paint): quant triga a aparèixer l’element més gran de la pàgina, normalment la imatge principal o el títol. L’objectiu és per sota de 2,5 segons. Si triga més de 4 segons, el web es considera lent.

INP (Interaction to Next Paint): quant triga la pàgina a respondre quan un usuari hi interactua (fa clic, escriu, fa scroll). L’objectiu és per sota de 200 mil·lisegons. Si triga més de 500 ms, l’experiència es percep com a “lenta i inestable”.

CLS (Cumulative Layout Shift): quant es mouen els elements de la pàgina mentre carrega. Quan estàs a punt de clicar un botó i de cop es desplaça perquè una imatge ha aparegut tard, això és CLS. L’objectiu és per sota de 0,1.

A més dels Core Web Vitals, el PageSpeed mesura altres factors: temps fins al primer byte, mida total de la pàgina, nombre de peticions, ús de JavaScript, optimització d’imatges, fonts personalitzades i cache.

2. Per què Google penalitza les webs lents

Google té un objectiu molt simple: oferir resultats que els usuaris vulguin clicar i que carreguin de pressa. Si envia gent a un web que triga 8 segons a carregar, l’usuari clica enrere i prova un altre resultat. Això li fa perdre confiança al motor de cerca. Per evitar-ho, Google posiciona millor les webs ràpides.

Les dades ho demostren: segons un estudi de Google, els webs amb 1 segon de càrrega tenen una taxa de rebot del 9%. Amb 5 segons de càrrega, la taxa de rebot puja al 38%. El 53% dels usuaris mòbils abandonen una pàgina si triga més de 3 segons a aparèixer.

I no és només un tema de tràfic. La velocitat afecta directament les vendes. Walmart va calcular que cada 100 mil·lisegons de millora en el temps de càrrega augmentaven les seves vendes un 1%. Amazon va arribar a la conclusió similar: 100 ms = 1% més de vendes.

A escala de pime, la manera útil de mirar-ho és fer el càlcul amb els teus propis números: agafa les visites mensuals, la teva taxa de conversió actual i el valor mitjà d’un client. Si la lentitud t’està costant un terç de les conversions, aquesta xifra és el que et costa cada mes de no arreglar-ho. En la majoria de negocis surt més cara que la feina de corregir-ho.

3. Per què la majoria de webs no arriben a 90

Si mesures la web del teu negoci ara mateix amb pagespeed.web.dev, és probable que la puntuació mòbil estigui per sota de 50. No és culpa teva, és una conseqüència previsible de com s’han construït la majoria de webs els últims 10 anys.

Causa #1: WordPress amb massa plugins. Cada plugin afegeix codi JavaScript i CSS al teu web. 30 plugins poden afegir fàcilment 2 MB de codi que es carrega cada vegada que algú obre una pàgina. Plugins pesats com Elementor o WPBakery poden afegir 5 MB ells sols.

Causa #2: Imatges sense optimitzar. Una foto feta amb el mòbil pesa entre 3 i 8 MB. Si la puges directament al web sense optimitzar, cada visitant ha de descarregar aquests megues. Multiplica per 10 imatges per pàgina i tens un web pràcticament inutilitzable des del mòbil.

Causa #3: Scripts de tercers. Google Analytics, Facebook Pixel, xat en viu, mapes de Google Maps, vídeos incrustats. Cada script de tercers afegeix retard. Un web amb 8 scripts externs pot trigar 2 segons només a carregar-los.

Causa #4: Hosting compartit barat. Si pagues 5 EUR al mes pel teu hosting, comparteixes servidor amb 200 webs més. Quan una d’elles té molt de tràfic, la teva s’alenteix. El servidor mai no respon ràpid.

Causa #5: Absència de cache i CDN. Sense cache, cada visita força el servidor a generar la pàgina des de zero. Sense CDN, tots els usuaris descarreguen els teus arxius des d’un sol servidor, afegint mil·lisegons per cada element segons la distància.

4. Què cal per arribar a 100/100

Arribar a 100/100 no és impossible: és una qüestió d’arquitectura. Aquestes són les 6 decisions tècniques que ho fan possible:

1. Pàgines estàtiques pre-generades. En lloc de generar cada pàgina al servidor cada cop que algú la demana, generes totes les pàgines un cop al moment de publicar. El servidor només envia HTML pur, sense executar res. Astro, el framework amb què construïm les webs, funciona així.

2. Imatges en format WebP o AVIF. WebP redueix el pes de les imatges entre un 25% i un 35% respecte a JPG, sense pèrdua de qualitat visible. AVIF redueix encara més (fins al 50%). Cada imatge ha de tenir versió mòbil i versió escriptori, amb mides exactes.

3. JavaScript mínim, només on cal. Una pàgina d’inici no necessita JavaScript per carregar. El menú, els botons, els formularis: tot pot funcionar amb HTML i CSS pur. Només cal afegir JavaScript quan hi ha interactivitat real (un mapa, un xat).

4. Fonts personalitzades amb font-display: swap. Si fas servir Google Fonts o tipografies pròpies, han de carregar-se de manera no bloquejant. Això vol dir que el text es renderitza primer amb una font del sistema i després canvia a la teva quan està descarregada, sense bloquejar la càrrega.

5. CDN global. Vercel, Cloudflare i Netlify distribueixen els teus arxius a centenars de servidors arreu del món. Quan algú visita el teu web des de Berlín, descarrega els arxius des del servidor més proper, no des de l’altra punta del continent.

6. Eliminació total de plugins de tercers innecessaris. Cada xat en viu, cada widget de testimonis, cada banner de cookies pesat, baixa la puntuació. Hi ha alternatives lleugeres per a tot.

5. Com mesurar el PageSpeed correctament

Hi ha tres llocs on pots mesurar el rendiment del teu web. Tots són gratuïts, però et donaran resultats lleugerament diferents.

pagespeed.web.dev és l’eina oficial de Google. Mesura mòbil i escriptori per separat, mostra els Core Web Vitals i et dona una llista de problemes amb suggeriments concrets. És l’opció més fiable per a una primera diagnosi.

Lighthouse és una eina integrada al navegador Chrome (clic dret > Inspeccionar > Lighthouse). Et permet executar auditories des del teu propi ordinador. Útil quan vols provar canvis en local abans de publicar-los.

GTmetrix és una alternativa amb informes més visuals i història de mesures. Útil per fer seguiment de l’evolució del web al llarg del temps.

Important: la puntuació mòbil és la que importa. Google indexa primer la versió mòbil del teu web (mobile-first indexing) i hi ha més usuaris navegant des del mòbil que des de l’escriptori. Si la teva puntuació mòbil és 40 i l’escriptori 95, tens un problema greu.

6. Què passa si tens una puntuació baixa

No tot el món ha de tenir 100. Però hi ha llindars que et marquen el risc:

Si la teva puntuació és inferior a 70, no és un problema cosmètic: és un problema de negoci. Cada mes que passa, perds tràfic, perds conversions i perds posicions.

Com ho plantegem nosaltres

A serpixel construïm les webs amb Astro, un framework pensat des del primer dia per a la velocitat. Generem pàgines estàtiques, optimitzem les imatges a WebP, deixem el JavaScript al mínim imprescindible i servim tot des d’un CDN global.

Això no és un truc de puntuació: és el que fa que la nota alta sigui l’estat normal del web en lloc d’una fita puntual que es desinfla al cap de tres mesos. Cap arquitectura garanteix un número, perquè la puntuació depèn també del que hi afegeixis després (un script de màrqueting, un vídeo incrustat, una imatge pujada sense optimitzar). El que sí que es pot fer és mesurar-ho de manera regular i corregir-ho quan baixa, amb la cadència que s’acordi.

Si vols saber quin PageSpeed té el teu web ara mateix, comença per tu mateix: passa’l per pagespeed.web.dev, mira la puntuació mòbil i apunta els tres problemes que hi surtin a dalt de tot.

Si el número no t’agrada i vols entendre què costaria arreglar-ho de debò, parlem-ne en 30 minuts. Repassem l’informe junts i et diem si és qüestió de retocs o si el problema és l’arquitectura.