Per Què la Velocitat del Web Afecta el SEO

Comencem per veure què diu l'evidència. Segons l'estudi de Google del 2016 «The Need for Mobile Speed», el 53% de les visites a llocs web mòbils s'abandonen si una pàgina triga més de 3 segons a carregar. Les pàgines més lentes també tendeixen a convertir pitjor. I Amazon i altres grans minoristes tracten el temps de càrrega com un problema directe d'ingressos. Descobreix-ne més sobre l'impacte de la velocitat del web en els ingressos.

El teu web no és Amazon. Però la lògica s'escala a la baixa de manera proporcional. Si el teu web ingressa €10.000 al mes i carrega lentament, part d'aquests ingressos se'n va. No perquè el teu producte sigui dolent. No perquè el teu màrqueting sigui equivocat. Sinó perquè la gent ha fet clic al botó de tornar enrere abans que la teva pàgina acabés de carregar. Descobreix-ne més sobre com han evolucionat els estàndards web.

La velocitat no és un luxe. Des del 2021, Google ha fet dels Core Web Vitals un factor de posicionament. Els webs lents es posicionen pitjor. I la pròpia recerca de Google relaciona els temps de càrrega més lents amb una probabilitat més alta que els visitants marxin.

Core Web Vitals: les tres mètriques que Google mesura realment

Google no mesura la «velocitat» com un sol número. Per a més informació, consulta l'impacte del rendiment en els ingressos. Fa el seguiment de tres mètriques concretes, i cadascuna explica una història diferent sobre l'experiència del teu usuari.

LCP (Largest Contentful Paint): quant triga a ser visible el contingut principal. Objectiu: menys de 2,5 segons. Mesura quan acaba de renderitzar-se l'element més gran de la pàgina (normalment una imatge de capçalera o un bloc de titular). Si la teva imatge de capçalera és un JPEG sense comprimir de 3 MB, el teu LCP serà terrible.

INP (Interaction to Next Paint): amb quina rapidesa respon la teva pàgina als clics, als tocs i a l'entrada de teclat. Objectiu: menys de 200 mil·lisegons. Va substituir el FID (First Input Delay) el març del 2024. Mesura el retard complet entre una acció de l'usuari i la resposta visual. Els frameworks pesats de JavaScript i els scripts de tercers solen ser els culpables.

CLS (Cumulative Layout Shift): quant salta la pàgina mentre carrega. Objectiu: menys de 0,1. Coneixes l'experiència: estàs a punt de tocar un enllaç i es carrega un anunci a sobre que empeny tot cap avall. Això és un desplaçament de disseny. És exasperant, i Google ho penalitza.

Com comprovar la teva velocitat actual

Abans d'arreglar res, mesura. Hi ha dues eines gratuïtes que hauries de fer servir:

Google PageSpeed Insights (pagespeed.web.dev): introdueix la teva URL i et dona puntuacions tant per a mòbil com per a escriptori, a més de recomanacions concretes. Fixa't en la secció «Oportunitats»: t'explica exactament què t'alenteix i estima l'estalvi de temps.

Google Search Console: a «Core Web Vitals», al menú de l'esquerra, veuràs quantes de les teves pàgines superen o suspenen els llindars de Google. Fa servir dades d'usuaris reals dels navegadors Chrome, de manera que reflecteix l'experiència real dels visitants, no una prova de laboratori.

Una puntuació de 90 o més a PageSpeed Insights és bona. Entre 50 i 89 cal treballar-hi. Per sota de 50 vol dir que estàs perdent activament clients i posicions al cercador.

Les correccions que marquen la diferència més gran

Aquestes són les optimitzacions ordenades per impacte. Comença per dalt.

1. Optimitza les imatges (el guany més gran per a la majoria de webs)

Les imatges solen ser la part més pesada d'una pàgina. La solució és senzilla:

• Converteix les imatges al format WebP o AVIF. Segons l'estudi de compressió WebP de Google, els fitxers WebP amb pèrdua són un 25-34% més petits que el JPEG amb la mateixa qualitat (mesurada amb SSIM). L'AVIF sol ser encara més petit.
• Redimensiona les imatges a les mides que realment es mostren. Si la teva imatge es mostra a 700 px d'amplada, no pugis un original de 4000 px. Redimensiona-la a 1400 px (per a pantalles retina) i deixa que el navegador s'encarregui de la resta.
• Fes servir la càrrega diferida per a les imatges que queden per sota de la línia de flotació. Afegeix loading="lazy" a qualsevol imatge que no sigui visible a la pantalla inicial. Això vol dir que el navegador només descarrega la imatge quan l'usuari s'hi acosta fent scroll.
• Fes servir imatges adaptables amb l'atribut srcset perquè els usuaris de mòbil descarreguin fitxers més petits que els d'escriptori.

En molts llocs web, només l'optimització d'imatges ja millora notablement l'LCP.

2. Redueix el JavaScript

Cada fitxer de JavaScript s'ha de descarregar, analitzar, compilar i executar. Cada pas triga temps. I la majoria de webs carreguen molt més JavaScript del que necessiten.

• Elimina els scripts que no fas servir. Aquell widget per compartir a les xarxes socials que ningú no prem? L'eina d'analítica que vas configurar i vas oblidar? El widget de xat que carrega 400 KB de codi? Audita els teus scripts i elimina tot el que no sigui essencial.
• Ajorna els scripts no crítics. Afegeix defer o async a les etiquetes de script que no calen per a la renderització inicial de la pàgina. L'analítica, els widgets de xat i els scripts socials poden carregar-se després que la pàgina sigui visible.
• Fes servir un framework modern amb seny. React, Next.js i frameworks semblants poden ser ràpids, però només si fas servir renderització al servidor i divisió de codi. Una aplicació React mal configurada pot enviar més de 500 KB de JavaScript al navegador abans que es renderitzi res.

3. Fes servir un CDN (xarxa de lliurament de contingut)

Un CDN emmagatzema còpies del teu web en servidors de tot el món. Quan un usuari a Tòquio visita el teu web allotjat a Barcelona, el CDN serveix la pàgina des d'un servidor a Tòquio, cosa que redueix notablement el temps de càrrega.

Opcions populars de CDN: Cloudflare (el nivell gratuït és excel·lent), AWS CloudFront, Bunny.net. La configuració triga entre 15 i 30 minuts per a la majoria de webs.

4. Activa la memòria cau del navegador

Quan algú visita el teu web per primera vegada, el seu navegador descarrega tot: HTML, CSS, JavaScript, imatges. La memòria cau indica al navegador que desi aquests fitxers localment perquè les visites repetides carreguin gairebé a l'instant.

Configura les capçaleres de memòria cau per emmagatzemar els recursos estàtics (imatges, CSS, fonts) com a mínim 30 dies. El contingut dinàmic (HTML) hauria de tenir temps de memòria cau més curts: unes hores o un dia.

5. Minimitza el CSS i l'HTML

Elimina les regles de CSS no utilitzades (molts webs envien molt CSS que no es fa servir), minifica els teus fulls d'estil i incorpora el CSS crític en línia perquè el navegador pugui renderitzar l'estructura de la pàgina immediatament.

Eines com PurgeCSS o la pestanya Coverage de Chrome DevTools et mostraran exactament quines regles de CSS no s'utilitzen a cada pàgina.

6. Arregla el desplaçament de disseny (CLS)

El desplaçament de disseny sol venir de tres fonts:

• Imatges sense atributs d'amplada/alçada. Estableix sempre dimensions explícites perquè el navegador reservi espai abans que la imatge carregui.
• Fonts que carreguen tard. Fes servir font-display: swap al teu CSS i precarrega el fitxer de la font principal.
• Contingut dinàmic injectat per sobre de la línia de flotació. Anuncis, bàners i avisos de cookies que empenyen el contingut cap avall. Reserva espai per a aquests elements al teu CSS.

La bretxa de velocitat al mòbil

La majoria de la gent comprova la velocitat del seu web a l'ordinador de l'oficina amb una connexió ràpida a Internet. Però una gran part del tràfic web és mòbil, i les velocitats al mòbil solen ser més lentes.

La prova de velocitat de Google fa servir una connexió mòbil simulada i limitada a velocitats aproximades de 4G. El que carrega en 1,5 segons al teu escriptori pot trigar 6 segons en un telèfon. I recorda: segons l'estudi de Google del 2016, més de la meitat de les visites a llocs web mòbils s'abandonen si una pàgina triga més de 3 segons a carregar.

Prova sempre la velocitat al mòbil de manera específica. La teva puntuació mòbil a PageSpeed Insights és la que més importa per al SEO.

Velocitat i cerca amb IA

Aquí tens una cosa que la majoria de la gent no ha considerat: la velocitat de les pàgines afecta indirectament també la teva visibilitat en la cerca amb IA. Perplexity, les AI Overviews de Google i el Copilot de Bing afavoreixen fonts que carreguen ràpid i tenen un HTML net. Quan un rastrejador d'IA arriba al teu web i aquest triga 8 segons a renderitzar-se per una renderització carregada de JavaScript, és possible que el rastrejador no esperi, i no et citaran.

Un HTML net, ràpid i renderitzat al servidor és més fàcil d'analitzar tant per als rastrejadors dels cercadors com per als sistemes d'IA. Les millores de velocitat ajuden a tot arreu.

Un pla realista de millora de la velocitat

No cal que ho facis tot alhora. Aquest és un pla de 4 setmanes:

Setmana 1: executa PageSpeed Insights a les teves 5 pàgines més importants. Converteix totes les imatges a WebP i afegeix càrrega diferida a les imatges que queden per sota de la línia de flotació.

Setmana 2: audita el teu JavaScript. Elimina els scripts que no s'utilitzen i ajorna els no crítics. Configura un CDN gratuït de Cloudflare.

Setmana 3: afegeix amplada/alçada explícites a totes les imatges. Arregla la càrrega de fonts. Reserva espai per als elements dinàmics.

Setmana 4: activa la memòria cau del navegador. Minifica el CSS. Torna a provar les 5 pàgines i compara-les amb la teva referència de la setmana 1.

La majoria de webs que segueixen aquest pla carreguen notablement més ràpid en un mes, cosa que normalment vol dir més visitants que es queden, més pàgines vistes i més conversions. Per veure les dades dures que hi ha darrere d'aquestes afirmacions —inclosos els casos pràctics verificats de Vodafone, Google, Pinterest i Walmart—, consulta Velocitat web i ingressos: dades de 6 empreses.

El web més ràpid no sempre guanya. Però el més lent sempre perd. Si els teus competidors carreguen en 2 segons i tu en 5, comences cada cursa tres segons enrere.

Necessites ajuda per diagnosticar problemes de velocitat? Auditem webs per trobar colls d'ampolla de rendiment i implementem les correccions: des de l'optimització d'imatges fins a millores d'arquitectura completes. Implementem aquestes millores a escala amb el nostre servei de desenvolupament de programari a mida.