Velocitat de càrrega web: per què la teva pàgina va lenta i com comprovar-ho

La velocitat de càrrega web es nota abans de llegir ni una paraula: si en obrir la teva pàgina al mòbil el client veu una pantalla en blanc o un cercle que dona voltes, és fàcil que torni enrere i toqui el resultat següent. Google també la té en compte per posicionar, tot i que pesa menys que tenir el contingut que la gent busca. Per totes dues raons, convé saber-la mesurar i entendre què la frena.

Com mesurar la velocitat de càrrega web amb PageSpeed Insights

PageSpeed Insights és l'eina gratuïta de Google: entres a pagespeed.web.dev, enganxes l'adreça d'una pàgina i en un minut tens l'informe, primer el de mòbil (el que importa més) i en una altra pestanya el d'ordinador. Analitza també alguna pàgina de servei i l'article del blog amb més fotos, perquè la portada sol estar més cuidada i dona una idea massa optimista.

L'informe té dues parts que convé no barrejar. A dalt hi ha les dades d'usuaris reals, recollides per Chrome durant els últims 28 dies; si la teva web té poques visites, és normal que digui que no hi ha prou dades. A sota hi ha el diagnòstic de laboratori, una simulació amb un mòbil i una connexió lents, amb la famosa nota de 0 a 100 i la llista de problemes detectats. Aquesta nota serveix per trobar errors, però a nosaltres no ens obsessiona: una web amb un 75 que carrega ràpid per als teus clients reals està bé, i perseguir el 100 de vegades costa més del que aporta.

Si tens Search Console, l'informe de Core Web Vitals agrupa les pàgines de la teva web en bones, millorables i dolentes, amb aquestes mateixes dades d'usuaris reals.

Les Core Web Vitals explicades amb exemples

Són les tres mètriques amb què Google resumeix si una pàgina carrega i respon bé per a qui la fa servir. Per donar-la per bona, es fixa en el que passa com a mínim en tres de cada quatre visites (el que tècnicament s'anomena percentil 75).

LCP: quant triga a veure's el principal

L'LCP (Largest Contentful Paint) mesura quant triga a aparèixer l'element més gran de la primera pantalla, que gairebé sempre és la foto de capçalera o el titular. Google el considera bo per sota de 2,5 segons i dolent per sobre de 4. Un cas molt típic és la web d'un restaurant amb una foto del menjador de 3 MB a pantalla completa: fins que aquesta foto no s'acaba de baixar, el client veu un forat gris, i en un mòbil amb una cobertura normal l'LCP se'n va fàcilment per sobre dels 4 segons.

INP: quant triga a reaccionar quan toques alguna cosa

L'INP (Interaction to Next Paint) va substituir el 2024 l'antiga mètrica FID i mesura el retard entre el moment en què toques un botó, un menú o un camp del formulari i la resposta de la pantalla. És bo per sota de 200 mil·lisegons i dolent per sobre de 500. Ho notes quan toques la icona del menú al mòbil i durant un segon no passa res, perquè el navegador està ocupat executant el codi del xat, el bàner de galetes, els píxels de publicitat i el carrusel de la portada.

CLS: quant es mou la pàgina mentre carrega

El CLS (Cumulative Layout Shift) mesura els salts del contingut. Estàs a punt de tocar «Truca», just llavors s'acaba de carregar una imatge o apareix un avís a sobre, tot baixa un parell de centímetres i acabes tocant «Com arribar-hi». Per sota de 0,1 és bo, i per sobre de 0,25, dolent. Sol passar per culpa d'imatges sense mides definides, bàners que s'insereixen tard i tipografies que canvien de mida en carregar-se.

Per què va lenta una web: les causes que veiem més

Imatges sense preparar

És la causa més freqüent a les webs de pimes que revisem. Les fotos surten del mòbil amb 4.000 píxels d'amplada i uns quants megues, i es pugen tal com són per mostrar-se en un espai de 800 píxels. El correcte és redimensionar-les a la mida en què es veuen, desar-les en un format modern com WebP o AVIF i comprimir-les. Les que queden més avall es poden carregar en diferit (l'anomenada càrrega mandrosa o lazy loading), però la imatge principal de dalt no, perquè endarreriria precisament l'LCP. I totes haurien de tenir indicades l'amplada i l'alçada perquè el navegador els reservi l'espai i no hi hagi salts.

Allotjament barat o saturat

Un allotjament compartit molt barat pot tenir centenars de webs al mateix servidor, i si alguna rep molt de trànsit, la teva ho nota. A PageSpeed es veu com un temps de resposta del servidor alt (el TTFB, temps fins al primer byte): la pàgina triga a començar a arribar, fins i tot abans de carregar cap imatge. També hi influeixen una versió antiga de PHP, la manca de memòria cau al servidor o que aquest sigui en un altre continent. A l'article sobre domini i allotjament web expliquem què cal mirar en contractar-lo.

Extensions, constructors visuals i codi de tercers

Una web feta amb WordPress amb trenta o quaranta extensions (plugins) carrega a cada pàgina el codi de gairebé totes, encara que la majoria només calguin en una pàgina concreta. Els constructors visuals generen molt de codi per aconseguir el disseny, i els carrusels d'imatges de la portada pesen força per al poc que es miren. A això suma-hi el codi de tercers: el xat flotant, les publicacions d'Instagram incrustades, el mapa de Google a totes les pàgines quan només cal a la de contacte, o quatre famílies tipogràfiques diferents.

Què has de fer amb el resultat

Amb l'informe al davant, aquest és l'ordre que seguiríem nosaltres:

1. Revisa la imatge principal de les pàgines amb pitjor LCP i redueix-ne el pes.
2. Repassa la resta d'imatges: mida, format i càrrega diferida per sota de la primera pantalla.
3. Desactiva i esborra les extensions que no facis servir, i treu de cada pàgina el codi de tercers que no necessita.
4. Activa la memòria cau i comprova que el servidor respon ràpid; si el TTFB continua alt, planteja't canviar d'allotjament.
5. Torna a mesurar unes setmanes després amb les dades d'usuaris reals de Search Console, que són més fiables que una sola prova de laboratori.

Si vols veure com encaixa la velocitat amb la resta del que mira Google a cada pàgina, ho tens a l'article de SEO on page per a pimes.

A Webmensual les webs es dissenyen des de zero, sense plantilles carregades de funcions que no fas servir, i l'allotjament, les actualitzacions i el monitoratge van inclosos en la quota mensual, així que de la velocitat ens n'ocupem nosaltres. Si tens un restaurant amb fotos grans a què no vols renunciar, mira com ho resolem a la pàgina de disseny web per a restaurants, i si la teva web actual va lenta, explica'ns el teu cas i t'enviarem una proposta.