Lazy Loading
A l'hora d'utilitzar plataformes online com llocs web, la velocitat de càrrega i l'optimització esdevenen essencials, amb usuaris que demanen cada cop més velocitat i capacitat de resposta.
Per aquest motiu, el patró de disseny de pàgines conegut com a lazy loading està guanyant més i més importància. Però què és exactament el lazy loading (càrrega diferida)?
Això és el que abordarem a continuació.
Què és el Lazy Loading?
Concretament, el lazy loading és una tècnica, un patró de disseny de programació aplicat a llocs web, en què els elements i recursos no es carreguen del tot, sinó que s'executen sobre la marxa o sota demanda segons l'ús de l'usuari, produint una "càrrega diferida" dels continguts.
D'aquesta manera, els recursos s'optimitzen i el contingut com text, vídeos, imatges i altre material només es carrega quan és requerit, millorant la velocitat, l'ús de memòria i processament, la capacitat de resposta i els temps de càrrega. Això contrasta amb la càrrega completa, on un lloc o pàgina es carrega completament, encara que l'usuari no utilitzi cada element.
Avantatges generals del lazy loading
Com que el propòsit principal del lazy loading és optimitzar la càrrega d'elements només quan s'utilitzen, hi ha múltiples avantatges que es poden resumir com:
- Velocitat a mostrar els elements principals d'un lloc web.
- Millora significativa de l'experiència d'usuari al lloc (UX).
- Millor rendiment en dispositius mòbils, especialment quan tenen recursos de connexió de xarxa limitats; tenir el Lazy Loading actiu permetrà la navegació en pàgines que, sota aquestes pobres condicions de cobertura, d'altra manera serien inviables.
- Optimització global i total dels recursos com CPU, RAM i bateria en dispositius mòbils.
- L'augment del temps de permanència a les nostres pàgines, en no tenir problemes de càrrega, es tradueix indirectament en millores de posicionament.
- Disminució de la taxa de rebot.
De manera similar, l'enfocament de programació lazy loading té avantatges i novetats des d'un punt de vista més tècnic, com:
- El lazy loading és totalment compatible amb frameworks JS com React i Angular, així com plataformes CMS com WordPress. De fet, recentment s'ha informat que el lazy loading per a imatges s'inclourà per defecte a la versió 5.5 de WordPress.
- Gràcies a l'API IntersectionObserver, no oculta imatges als cercadors.
- Suport per a múltiples tipus de contingut com imatges i recursos de classe responsive.
- Permet que les imatges del lloc s'indexin, cosa que és vital per al SEO.
- És un recurs 100% SEO Friendly, ja que millora directament i indirectament molts punts clau en SEO.
Com implementar el lazy loading a WordPress?
Si tenim el nostre lloc a WordPress, hauríem de saber que tenim un gran avantatge ja que hi ha moltes solucions per implementar el lazy loading a les nostres pàgines perquè es carreguin molt més ràpid. Aquesta captura de pantalla mostra algunes de les possibles solucions que tenim al repositori de plugins:
Vista dels plugins de WordPress més destacats per implementar lazy loading.
Per dur a terme aquesta implementació, tenim diverses opcions:
- Triar un plugin específic de lazy loading com "Lazy loader", "a3 lazy load"...
- Triar un plugin d'optimització web com "WP Rocket", que ja té aquesta opció inclosa per defecte juntament amb altres millores.
Aspectes SEO relacionats amb el Lazy Loading
Ja coneixem la missió principal de la càrrega diferida i els seus avantatges clau, i com afecta la millora del rendiment de la nostra pàgina, la nostra UX i el SEO.
Ara, s'ha de fer un ús intel·ligent de la càrrega diferida per treure'n el màxim profit, ja que si s'utilitza incorrectament podria causar l'efecte contrari.
Per exemple, el lazy loading fa ús de la memòria cau per millorar la velocitat, així que si s'hi emmagatzema massa contingut, poden ocórrer alentiments o errors si no s'implementa correctament, fins i tot impedint que Google indexi pàgines i elements, cosa que pot tenir un efecte greu en el posicionament del lloc. Alguns consells són:
- Optimitzar la memòria cau i fer-ne un ús intel·ligent.
- Utilitzar Google Search Console per verificar el contingut que Google rastreja al lloc.
- Afegir text ALT per fer que cada imatge sigui indexable per Google.
- Fer ús sempre de l'API IntersectionObserver.
- Afegir l'atribut loading als iframe o contingut incrustat d'altres pàgines o fonts, gràcies a la funció Blink LazyLoad del navegador Chrome. S'aplica a imatges, fotos, vídeos, text i altre contingut.
Lazy loading i UX
A l'hora d'un lloc web, tant l'optimització tècnica com general per oferir una bona experiència d'usuari (UX) és essencial, respecte als temps de càrrega, capacitat de resposta, ús de recursos i comportament general. Si un lloc no és gaire receptiu, la seva taxa de rebot serà alta, i si ofereix una experiència d'usuari pobra, això afectarà el seu trànsit, visibilitat i fins i tot SEO.
Amb la càrrega diferida, l'objectiu és millorar l'UX d'un lloc dramàticament en un sol pas, carregant el seu contingut progressivament i quan l'usuari ho requereix mentre fa scroll a la pàgina, ja siguin imatges o text, cosa que optimitza l'ús de recursos en comparació amb carregar tota la plataforma, mostrant probablement elements que no són importants per a l'usuari.
Lazy loading natiu (HTML) a Chrome
Demostrant la importància que Google dona a l'UX, des del 2020 i a partir de la versió 75 del seu navegador Chrome, és possible afegir lazy loading natiu a les etiquetes HTML de la pàgina i el seu contingut multimèdia com fotos, vídeos, entre d'altres.
D'aquesta manera, en afegir l'atribut HTML lazy loading automàticament, el navegador Chrome entén que el contingut de la pàgina es carregarà segons la navegació de l'usuari i no tot alhora, millorant la velocitat i la capacitat de resposta. Per utilitzar-lo, l'atribut loading amb valor lazy s'afegeix a cada etiqueta dels recursos visuals i multimèdia, així com els iframes:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Aquest recurs es pot utilitzar tant en imatges, que representen una gran part de la informació que el navegador necessita descarregar, com en iframes; recorda que els utilitzem per incrustar recursos externs al nostre lloc.
És important destacar l'ús en iframes, ja que aquests poden representar punts crítics de càrrega al nostre lloc.
A la part negativa, el lazy loading natiu només és compatible amb Chrome, encara que el seu ús es pot implementar en altres navegadors a través de biblioteques compatibles, en cas que no hi hagi suport com passa a Mozilla Firefox.
Usos del Lazy loading
Com ja hem comentat, el lazy loading se centra a retardar la càrrega d'elements en una pàgina per optimitzar la seva resposta. En aquest sentit, l'ús que es dona a l'eina se centra en tots els recursos visuals, encara que es posa èmfasi en imatges, vídeos i iframes que poden incloure documents i altres fitxers, tot a través de la modificació d'etiquetes i la inclusió de l'atribut loading amb valor lazy, optimitzant la velocitat general del lloc encara que tingui elements pesats o gran contingut multimèdia.
Tens dubtes sobre el lazy loading o vols implementar-lo al teu projecte? Estem a la teva disposició!
Documentació i Referències:
Автор: David Kaufmann
He passat els últims 10+ anys completament obsessionat amb el SEO — i sincerament, no ho canviaria per res.
La meva carrera va fer un salt qualitatiu quan vaig treballar com a especialista SEO sènior a Chess.com — un dels 100 webs més visitats de tot Internet. Operar a aquesta escala em va ensenyar coses que cap curs ni certificació podrien transmetre.
D'aquella experiència vaig fundar SEO Alive — una agència per a marques que es prenen seriosament el creixement orgànic. I com que no trobava cap eina que gestionés bé tant el SEO clàssic com el món de la IA, vaig construir SEOcrawl. Si busques un partner SEO sènior que s'estimi aquest sector de debò — m'encantarà parlar amb tu!
Дізнайтесь більше контенту цього автора
