· Equip de The AI Web Factory
El que costa una web lenta, en xifres
Què mesura exactament Google, d'on surten els segons que perd la teva web i els arranjaments per ordre de rendiment. Amb el cas de la nostra: de 88 a 97.
De la velocitat d’una web se’n parla poc perquè sembla cosa de tècnics. I és de les poques coses de tot aquest ofici que es pot mesurar sense discussió, amb una eina gratuïta, en un minut.
Obre PageSpeed Insights, enganxa-hi la teva adreça i mira el número de mòbil. No el d’escriptori, que sempre surt millor i no representa gairebé ningú.
Les tres coses que mesura Google
Des del 2021 Google fa servir tres mesures per ordenar resultats. Tenen noms lletjos i convé entendre-les, perquè cadascuna s’arregla d’una manera diferent.
La primera és el LCP, el temps que triga a aparèixer l’element més gran de la pantalla. Sol ser la foto de capçalera o el titular. Google ho considera acceptable per sota de 2,5 segons.
La segona és el CLS, quant es mou el contingut mentre carrega. Tots hem anat a prémer un enllaç i en l’últim instant ha saltat cap avall perquè a dalt s’acabava de carregar una imatge. Això és el CLS i es mesura de 0 a 1. L’acceptable és menys de 0,1.
La tercera és l’INP, el que triga la pàgina a respondre quan prems alguna cosa. Per sota de 200 mil·lisegons.
De les tres, la que més es descuida és la segona, perquè no es percep com un problema de velocitat. És un problema de nervis.
D’on surten els segons
A les webs que auditem, el pes es reparteix gairebé sempre igual.
Les imatges són el primer. Una foto de capçalera treta de la càmera pesa entre 2 i 5 MB. La mateixa imatge en WebP, a la mida en què es veurà, pesa 150 o 200 KB. És una reducció de més del 90 % i ningú no nota la diferència a simple vista.
Les tipografies són el segon i és el que més gent passa per alt. Carregar una font de Google Fonts des dels seus servidors afegeix una connexió a un altre domini, amb la seva resolució de DNS i la seva negociació de TLS, abans que es pinti una sola lletra. Allotjar-la tu mateix elimina aquest viatge. I de passada evita el problema de privacitat que la IP dels teus visitants acabi en un servidor aliè sense el seu consentiment.
El tercer són els scripts. El xat d’atenció al client, el píxel de Facebook, el mapa incrustat, l’eina de ressenyes. Cadascun porta el seu i entre tots poden sumar mig megabyte de JavaScript que el mòbil ha de descarregar, interpretar i executar. Un telèfon de gamma mitjana de fa quatre anys hi triga força més del que s’imagina qui ho prova des d’un portàtil nou amb fibra.
El cas d’aquesta web
Ho expliquem amb xifres perquè és més útil que una teoria.
La nostra portada tenia un CLS de 0,188, gairebé el doble del límit. Gairebé tot venia del subtítol de la capçalera: el text es pintava amb la font del sistema i, quan acabava de carregar Montserrat, canviava de mida i empenyia tot el que hi havia a sota.
L’arranjament no va ser treure la tipografia. Va ser definir una font de reserva amb les mètriques ajustades a les de Montserrat, de manera que el text provisional ocupa exactament el mateix espai que el definitiu. El salt va desaparèixer: CLS 0. La puntuació general va passar de 88 a 97.
És un canvi d’unes poques línies de CSS que gairebé ningú no fa i que resol d’un cop la mesura que més costa d’arreglar per altres camins.
L’ordre en què convé atacar
Primer les imatges, perquè és on hi ha el pes i on l’arranjament és
mecànic. Converteix-les a WebP, serveix-les a la mida en què es veuen i
posa’ls width i height a l’etiqueta perquè el navegador reservi
l’espai.
Segon, allotja les tipografies al teu propi domini i carrega només els pesos que facis servir de veritat. Si tens sis variants carregades i en fas servir dues, n’estàs pagant quatre de més.
Tercer, revisa els scripts de tercers un per un i pregunta’t si cadascun aporta més del que costa. El xat que rep dues consultes al mes surt car.
Quart, si la teva web es genera cada vegada que algú hi entra, planteja’t generar-la abans. Una web estàtica, que és un munt de fitxers HTML ja fets, no ha de consultar cap base de dades per respondre. Nosaltres treballem així gairebé sempre i per això les nostres webs carreguen ràpid sense haver de lluitar-hi.
El que no cal
Un connector de memòria cau que promet arreglar-ho tot. Sol tapar el símptoma i deixar el problema. Si les teves imatges pesen 4 MB, la memòria cau accelera la segona visita de la mateixa persona i res més.
Tampoc no cal perseguir el 100. La diferència entre 92 i 98 no la nota ningú i cada punt per sobre de 90 costa el doble que l’anterior. El que sí que importa és no estar a 40.
Una cosa més, que no és de velocitat
Tot l’anterior millora també el consum de dades de qui et visita i la durada de la seva bateria. I fa que la teva web es pugui fer servir amb mala cobertura, que és la situació de qualsevol que hi entri des d’un polígon, un aparcament o un poble petit. Per a molts negocis, aquesta és justament la seva clientela.
Si vols saber en quines xifres està la teva web, escriu-nos i t’enviem l’informe amb el que surt i el que costa arreglar-ho.
Comentaris
Per comentar has d'entrar amb un compte. No publiquem el teu correu.
En entrar es desen el teu nom i la teva imatge de perfil al costat del comentari. El pots esborrar quan vulguis. Ho expliquem a lapolítica de privacitat.
