La teva web d'empresa té 40 imatges a la home, 15 a la pàgina de serveis i un catàleg amb desenes de fotos de producte. Si totes es carreguen alhora, el visitant espera segons abans de veure alguna cosa útil. El lazy loading (càrrega diferida) retarda la descàrrega d'imatges fins que l'usuari les necessita: quan fa scroll o quan entren al viewport.
A aatsoft, agència de desenvolupament web a Manresa (Barcelona), auditem webs corporatives on el disseny és correcte però la càrrega inicial és lenta per imatges mal gestionades. En aquesta guia t'expliquem què és el lazy loading, com accelera el teu lloc, quins errors evitar i com combinar-lo amb altres optimitzacions per millorar l'experiència i el posicionament.
Què és el lazy loading i per què importa a la teva web d'empresa
El lazy loading és una tècnica que carrega recursos (principalment imatges, vídeos i iframes) només quan van a mostrar-se a pantalla. En lloc de descarregar 2 MB de fotos en obrir la pàgina, el navegador carrega primer el visible i deixa la resta per quan l'usuari fa scroll.
Per una web d'empresa, això significa:
- Menys temps fins al primer contingut visible: el visitant veu text i disseny abans, no un espai en blanc.
- Menor consum de dades: rellevant en mòbil, on molts usuaris naveguen amb connexió limitada.
- Millor puntuació en Core Web Vitals: especialment LCP (Largest Contentful Paint) i, en alguns casos, CLS si s'implementa bé.
- Menys càrrega al servidor: no totes les imatges es solliciten en cada visita.
Google valora la velocitat com a factor d'experiència. Si la teva web triga a carregar, perds visites abans que llegeixin la teva proposta de valor. El lazy loading no substitueix una bona optimització d'imatges, però la complementa.
Senyals que la teva web necessita lazy loading
Revisa aquests indicis abans d'assumir que la teva web ja està optimitzada:
- La home triga més de 3 segons a mostrar contingut útil en mòbil.
- PageSpeed Insights o Lighthouse marquen imatges fora de pantalla com a oportunitat de millora.
- A la pestanya Xarxa del navegador, veus desenes de peticions d'imatges en carregar la primera pantalla.
- El teu blog o catàleg té moltes entrades amb fotos grans en llistats llargs.
- Els Core Web Vitals estan en vermell o taronja a Search Console.
Utilitza Google Search Console per veure si la velocitat en mòbil afecta les teves pàgines principals.
Com funciona el lazy loading en la pràctica
Atribut loading="lazy" natiu
Els navegadors moderns (Chrome, Firefox, Safari, Edge) suporten loading="lazy" en etiquetes <img> i <iframe>. És la forma més simple: afegeixes l'atribut i el navegador gestiona la càrrega diferida sense JavaScript addicional.
JavaScript i llibreries
En projectes més complexos o amb navegadors antics, s'utilitzen llibreries com lazysizes o Intersection Observer API. Permeten més control: placeholders, transicions, càrrega progressiva o lazy loading en elements de fons CSS.
Lazy loading en CSS i fons
Les imatges de fons (background-image) no admeten loading="lazy" de forma nativa. Cal usar JavaScript o tècniques com content-visibility per retardar la seva càrrega.
Quines imatges has de carregar amb lazy loading (i quines no)
No totes les imatges s'han de carregar en diferit. La regla general:
- Sí, lazy loading: imatges per sota del plec (below the fold), galeries, catàlegs, avatars en llistats, imatges d'articles relacionats, fotos en pàgines llargues.
- No, càrrega immediata: logo, imatge hero de la home, primera imatge visible en obrir la pàgina, icones crítiques, imatges que defineixen el LCP.
Si apliques lazy loading a la imatge principal de la teva home, empitjores el LCP i Google pot penalitzar l'experiència. Prioritza sempre el que l'usuari veu en els primers segons.
Errors freqüents en implementar lazy loading
- Lazy loading en la imatge LCP: retarda l'element més gran visible i empitjora la mètrica clau de velocitat.
- Sense dimensions width/height: el navegador no reserva espai i el contingut salta en carregar (CLS negatiu).
- Placeholder de baixa qualitat mal implementat: un blur excessiu o un skeleton que parpelleja genera mala experiència.
- Oblidar iframes i vídeos: un mapa de Google Maps o un vídeo incrustat pot pesar més que totes les imatges juntes.
- No combinar amb compressió: lazy loading en una imatge de 3 MB només retarda el problema; primer redueix pes i format (WebP, AVIF).
- SEO mal gestionat: les imatges lazy han de seguir tenint
altdescriptiu i estar en el HTML (no carregar només per JavaScript sense fallback).
Com auditar el lazy loading a la teva web pas a pas
- Obre PageSpeed Insights amb la URL de la teva home i d'una pàgina amb moltes imatges (blog, catàleg).
- Revisa la secció "Oportunitats": busca avisos sobre imatges fora de pantalla o càrrega diferida.
- Inspecciona el HTML: comprova quines imatges tenen
loading="lazy"i si la hero no en té. - Simula mòbil en DevTools: pestanya Xarxa, recarrega i compta quantes imatges es descarreguen abans del primer scroll.
- Mesura LCP i CLS a Search Console o amb Lighthouse per veure l'impacte real.
Com implementar lazy loading sense trencar la teva web
1. Identifica la imatge LCP de cada plantilla
A la home sol ser la hero; en un article de blog, la imatge destacada. Aquestes imatges van amb loading="eager" o sense atribut (eager per defecte).
2. Aplica loading="lazy" a la resta
En llistats de blog, galeries de projectes i catàlegs, afegeix loading="lazy" a cada <img> que quedi fora del primer viewport.
3. Define width i height
Reserva l'espai abans de carregar per evitar salts de layout. Usa CSS aspect-ratio si les dimensions varien.
3. Usa formats moderns
Combina lazy loading amb WebP o AVIF i mides responsive (srcset) perquè cada dispositiu descarregui només el necessari.
5. Prova en mòbil real
Els emuladors ajuden, però prova en un smartphone amb 4G per veure l'experiència real del visitant.
Lazy loading i SEO: el que Google espera
Google rastreja contingut carregat amb lazy loading si està en el HTML inicial. Les imatges amb loading="lazy" segueixen sent indexables si tenen URL i atribut alt en el codi font.
Evita carregar imatges només mitjançant JavaScript sense que apareguin en el HTML: els bots poden no executar l'script. Per contingut crític SEO, mantén les imatges en el markup.
El lazy loading millora la velocitat, i la velocitat és senyal d'experiència. No és un factor de ranking direct per si sol, però una web més ràpida reté més visites i redueix la taxa de rebot.
Taula resum: quan usar lazy loading
| Element | ¿Lazy loading? | Motiu |
|---|---|---|
| Logo i capçalera | No | Visible d'immediat, crític per branding |
| Imatge hero / portada | No | Sol ser el LCP de la pàgina |
| Imatges en articles (cos) | Sí | Below the fold en textos llargs |
| Galeria de projectes | Sí | Moltes imatges, poques visibles a l'inici |
| Catàleg de productes | Sí | Llistats extensos amb fotos repetides |
| Mapes i iframes | Sí | Pesen molt i rarament són el primer que es veu |
Conclusió: carrega només el que el visitant veurà
El lazy loading no és un truc de moda: és una pràctica estàndard per webs amb moltes imatges. Aplicat amb criteri —sense retardar el crític, amb dimensions definides i combinat amb compressió— accelera el teu lloc, millora l'experiència en mòbil i reforça les teves mètriques de rendiment.
Si la teva web d'empresa triga a carregar i tens desenes d'imatges en cada pàgina, és moment d'auditar. A aatsoft ajudem empreses a optimitzar la càrrega dels seus llocs sense sacrificar qualitat visual ni posicionament.
