Velocitat Web: Per Què Cada Segon Compta (i Com Optimitzar)

La velocitat de càrrega impacta directament en les teves vendes i el teu SEO. Aprèn a optimitzar el teu web amb Core Web Vitals, compressió d'imatges i caching.

La velocitat del teu web no és un detall tècnic: és un factor de negoci. Un retard d'1 segon en la càrrega pot reduir les teves conversions un 7%. Amazon va estimar que cada 100ms de latència li costava un 1% en vendes. Quant et costa a tu?

El 70% dels consumidors admeten que la velocitat de càrrega influeix en la seva decisió de compra — Unbounce.

Core Web Vitals: Les Mètriques que Importen

Google utilitza les Core Web Vitals com a factor de rànquing:

• LCP (Largest Contentful Paint): mesura quan apareix el contingut principal — objectiu: menys de 2.5s
• INP (Interaction to Next Paint): mesura la capacitat de resposta — objectiu: menys de 200ms
• CLS (Cumulative Layout Shift): mesura l'estabilitat visual — objectiu: menys de 0.1

Si falles en qualsevol d'aquestes tres mètriques, Google et penalitza. Un LCP de més de 4 segons provoca un 53% d'abandonament en mòbil.

Els llocs que compleixen les tres Core Web Vitals veuen un 24% menys d'abandonament — Google Chrome UX Report.

Optimització d'Imatges: El Quick Win

L'optimització d'imatges és el quick win més efectiu perquè representen el 50-60% del pes total:

• WebP: 25-35% més lleuger que JPEG amb la mateixa qualitat visual
• AVIF: 50% més lleuger que JPEG. El format del futur
• Dimensiona a la mida exacta: no carreguis una imatge de 4000×3000 per mostrar-la a 800×600
• Lazy loading natiu: loading="lazy" en totes les imatges fora del viewport inicial
• srcset per a responsive: serveix diferents mides segons el dispositiu
• Compressió intel·ligent: qualitat 75-85% és visualment indistingible del 100%

Estratègies de Càrrega de Fonts

Les fonts tipogràfiques són un factor de rendiment freqüentment ignorat:

• font-display: swap: mostra text immediatament amb font del sistema
• Preload: per a la font del heading
• Fonts variables: un sol arxiu reemplaça 4-8 arxius estàtics, estalviant 100-400KB
• Subsetting: genera versions que només incloguin latin/latin-extended
• Fallback fonts mètricament compatibles: redueix el CLS durant el swap

Un canvi de font-display: block a font-display: swap pot reduir el LCP en 300-800ms.

Caching Intel·ligent i CDN

• Assets estàtics: Cache-Control: max-age=31536000 per a CSS/JS amb hash al filename
• HTML: Cache-Control: max-age=0, must-revalidate per a contingut dinàmic
• Imatges: max-age=2592000 (30 dies) com a mínim
• CDN: Cloudflare, Vercel Edge o Fastly per servir des del servidor més proper

Un CDN pot reduir el TTFB de 500ms a 50ms per a usuaris geogràficament llunyans. Per a un negoci a Barcelona que atén clients a tota Espanya i Europa, la diferència és enorme.

Auditoria de Scripts de Tercers

Els scripts de tercers són l'enemic silenciós del rendiment:

• Google Analytics: 15-25KB + 200ms de temps d'execució
• Chat widgets (Intercom, Drift): 200-500KB + 500ms-1s de latència
• Pixels de xarxes socials: 50-150KB cadascun
• Fonts externes (Google Fonts): 50-200KB + DNS lookup addicional

Eliminar scripts innecessaris de tercers pot millorar el LCP en 1-3 segons — web.dev.

Minimització i Code Splitting

• Tree-shaking: elimina codi no utilitzat automàticament al build
• Code splitting: divideix el bundle en chunks que es carreguen sota demanda
• CSS crític inline: inclou el CSS del above-the-fold directament al HTML
• Compressió Brotli: 15-20% millor que gzip per a arxius de text
• Pressupost de rendiment: un bundle JS >200KB sense comprimir és senyal d'alarma

L'Impacte en Ingressos: Números Reals

• Walmart: cada segon de millora en càrrega va augmentar les conversions un 2%
• COOK: reduir el temps de càrrega 0.85s va incrementar les conversions un 7%
• Mobify: cada 100ms de millora va generar un 1.11% d'augment en conversions
• AutoAnything: reduir el temps de càrrega a la meitat va incrementar les vendes un 13%

Al mercat digital competitiu, cada mil·lisegon que guanyes és un avantatge competitiu directe.

Mesura Abans d'Optimitzar

• Google PageSpeed Insights: diagnòstic ràpid amb dades de camp i de laboratori
• Lighthouse: auditoria completa de rendiment, accessibilitat, SEO i bones pràctiques
• GTmetrix: anàlisi detallada amb cascada de peticions
• WebPageTest: testing avançat des de múltiples ubicacions i dispositius
• Chrome DevTools Performance: profiling en temps real

Estableix un "pressupost de rendiment" (LCP <2.5s, bundle JS <200KB, pes total <2MB) i monitoritza'l amb cada desplegament.

Conclusió

La velocitat web no és optimització tècnica: és optimització de negoci. Cada mil·lisegon que reduïes del teu temps de càrrega es tradueix directament en més conversions, millor posicionament SEO i usuaris més satisfets. No és una despesa — és la inversió amb millor ROI que pots fer en la teva presència digital.