Per poc que busquis, trobaràs referències a l'Optimització SEO des de molts angles: contingut, millores on-page, aconseguir un bon perfil d'enllaços i tot tipus de línies d'acció.
De totes elles, avui centrarem l'atenció sobre les imatges dins l'àmbit del que en termes anglosaxons es coneix com a WPO o Web Performance Optimization. Aquesta branca de loptimització SEO és de naturalesa tècnica i se solapa per sota de les altres formes d'optimització SEO orientades al contingut, impulsant tot el projecte a força de millorar els temps de resposta del servidor web, tots en general.
Quan diem que es tracta de la part tècnica de l'optimització SEO, significa planament que es requereix no només cert grau de coneixement, a més s'ha de tenir un nivell d'accés suficient per dur-ho a terme.
Si ens remetem a un projecte WordPress amb usuaris estàndard, no n'hi hauria prou amb tenir credencials d'editor, aquí cal tot un admin.
Optimització SEO: base tècnica per al teu posicionament web
La importància del rendiment web a SEO
Lacció en loptimització SEO transcorre entre servidors i clients: és a dir, ja que es tracta dàmbit WWW, tot es basa en peticions i lliuraments. Això fa evident que estem davant d'un entorn on la “logística” és, com a mínim, molt important.
La velocitat de càrrega i l'experiència de lusuari són factors fonamentals per a lèxit dun lloc web.
Sabies que Google considera el rendiment web com un dels pilars clau per posicionar pàgines?
Aquest post us ajudarà a comprendre com implementar tècniques intel ligents per millorar la càrrega de recursos i optimitzar el teu lloc en termes de SEO.
Com Agència SEO especialitzada, som conscients daquesta importància i ja advertim que millorar el rendiment del teu lloc web corporatiu i quedar-se en això, no és sinònim dèxit.
El que descrivim avui és una ajuda, uns apunts per tenir en compte com a punt afegit una llista més extensa. Ens centrarem en aquesta optimització SEO concreta: la priorització de càrrega d'imatges.
Una ullada a les tècniques clau
En aquest post, explorarem l'impacte de tècniques del desenvolupament web per ordenar i prioritzar la càrrega de recursos (principalment d'imatge) com ara decoding="async", loading="lazy", i el prefetching, que resulta en una manera entre previsor i especulatiu de preparar futures accions de l'usuari.
Aquestes tècniques han de ser tingudes en compte sota un prisma amb moltes facetes, juntament amb la seva relació amb altres estratègies com lús de CDNs i la compressió de recursos. El hosting web és crític en molts daquests aspectes, però és un llibre de molts capítols que no tocarem avui.
No dubtis que l'allotjament de la teva web serà una de les nostres primeres inspeccions a l'hora de començar a treballar junts. És un punt on la inversió és vital.
La importancia de optimizar la carga de recursos
Velocitat de càrrega i conversió
Alguns estudis al llarg dels últims anys -des que el telèfon intel·ligent s'apoderés del volum de trànsit web- mostren que el 53% dels usuaris abandona un lloc si triga més de 3 segons a carregar. Això subratlla la necessitat destratègies intel·ligents per agilitzar la càrrega de contingut.
Experiencia del usuario
Una pàgina ràpida no només reté visitants, sinó que també millora la percepció de la marca. Optimitzar recursos significa oferir fluïdesa i eficiència. Res menyspreable resulta l'efecte secundari d'aquesta percepció positiva: en navegar de forma fluida i ràpida, la probabilitat que el visitant romangui més temps al teu domini i vegi més contingut és elevada, millorant la possibilitat d'interceptar la intenció de cerca.
La intenció de cerca ho és tot avui dia, cosa que tractarem en una altra ocasió. Per a aquesta ocasió, resultarà més útil conèixer per sobre el concepte del renderitzat.
Què és el renderitzat?
El renderizado de una página web es el proceso mediante el cual el navegador interpreta y transforma el código recibido desde el servidor en el contenido visual e interactivo que ves en la pantalla.
Primer, el navegador processa el fitxer HTML, que defineix l'estructura bàsica de la pàgina: les capçaleres, paràgrafs, imatges i altres elements. Aquest pas estableix el marc o l'esquelet del lloc web.
A continuació, s'aplica el CSS (Fulls d'Estil a la Cascada), que és responsable de la presentació visual. Aquí es defineixen aspectes com ara colors, mides, tipografies i posicionament dels elements, cosa que dóna forma a l'aparença de la pàgina.
Finalment, s'executa el JavaScript, que afegeix interactivitat i funcionalitat dinàmica. Aquest llenguatge permet accions com ara desplegament de menús en fer clic, actualització en temps real de dades o animacions en pantalla.
El navegador combina aquests tres components de manera simultània i en mil·lisegons, i genera la versió final que l'usuari experimenta. Aquest procés és essencial per garantir que la pàgina sigui accessible, funcional i atractiva.
És important entendre que allò que l'usuari veu, no ha de ser exactament el mateix que veurà un rastrejador automatitzat (robot o bot) com puguin ser Googlebot (Google) o Bingbot (Microsoft).
Per això és important i totalment raonable introduir el concepte de disseny web SEO: no només es construeix un lloc web funcional i atractiu, a més se li dota de les característiques necessàries per complir amb la faceta tècnica de l'optimització SEO.
Un cop aclarit senzillament el concepte del renderitzat, seguim endavant amb la càrrega asíncrona d'imatges.
Decoding asíncron per a una càrrega fluida
Què és decoding="async"?
L'atribut decoding="async" permet que les imatges siguin descodificades sense bloquejar la resta de càrrega de la pàgina. Això assegura que el contingut principal es renderitzeu primer.
Beneficis en acció
- Millora la velocitat de renderització inicial.
- Manté la fluïdesa de la interacció de lusuari.
Exemple pràctic
<img src="imagen.jpg" alt="Descripció de la imatge" decoding="async">
Càrrega diferida amb loading="lazy"
La lògica de lazy i eager
L'atribut loading="lazy" posposa la càrrega d'imatges fins que són a prop del viewport, mentre que loading="eager" força una càrrega immediata per a recursos crítics.
Què és el Viewport?
El viewport, o finestra gràfica, és l'àrea visible d'una pàgina web al navegador d'un usuari. És la part de la pàgina que lusuari pot veure sense necessitat de desplaçar-se. El viewport pot variar en mida i resolució segons el dispositiu i el navegador que s'estigui utilitzant.
Aplicació pràctica
- lazy: Ideal per a pàgines amb moltes imatges sota el primer scroll.
- eager: Útil per a contingut visual a la part superior de la pàgina, en llenguatge SEO/Desenvolupament aquest contingut "d'inici" s'anomena above the fold.
Exemple pràctic
<img src="imagen.jpg" alt="Descripción de la imagen" loading="lazy">
Prefetching: anticipant les necessitats de l'usuari
Com funciona el prefetching?
Prefetching carrega en memòria cau recursos que l'usuari podria necessitar ben aviat, optimitzant futures interaccions.
Diferències amb el preloading
El prefetching se centra en recursos “probables”. Mentre llegeixes la pàgina A, el prefetching s'avança a la necessitat potencial per a una millor optimització SEO de la propera pàgina carregada, és a dir que es pre-recullen recursos de la pàgina B. Es podria dir que és una optimització SEO preventiva.
En canvi, el preloading prioritza els recursos essencials per a la pàgina actual.
Exemple pràctic
<link rel="prefetch" href="proximo-recurso.css">
Jugant en equip amb altres tècniques doptimització SEO
CDN (Content Delivery Network)
Les Xarxes de Distribució de Contingut són externes al teu servidor web, de diferents maneres segons cas s'ocupen de fer de mirall als teus continguts, de manera que apropen la càrrega de recursos (normalment estàtics) al punt geogràfic del que s'origina la petició. Així, una CDN distribueix recursos des de servidors globals per reduir la latència.
Funciona perfectament juntament amb loading="lazy" i decoding="async" i és la manera d'arribar en condicions WPO competitives a mercats llunyans. Hi ha criteris tècnics i econòmics per decidir aquest punt segons exportis a la UE oa altres destinacions com els EUA o l'Àsia.
Minificació i compressió
Reduir la mida dels fitxers optimitza el rendiment. Formats com WebP poden complementar la càrrega diferida. La compressió es pot presentar de moltes maneres i aplicada a moltes capes diferents, com ara imatge, text o en general aplicada a la capa de transport o HTTP.
Sabem que van apareixent molts conceptes, però el més interessant és comprendre l'esquema general de la seva interacció, de l'optimització SEO més tècnica sorgeix una interacció eficient i que treballa donant suport a altres aspectes del SEO, com ara SEO on-page, l'estructura del contingut i l'arquitectura de la informació.
Intersection Observer API
Proporciona control avançat per carregar recursos basats en la posició al viewport. No gratem més per no endinsar-nos en una complexitat més gran.
La millor tècnica: el sentit comú
Una cosa que sí que pots fer des del principi en mode DIY o instruint el teu equip, és utilitzar bé els formats d'imatge en cada ocasió i dins d'aquest criteri, intentar aprimar les imatges al màxim perdent un mínim de qualitat.
En resum, crec que hem perdut el compte de les vegades que ens hem trobat imatges megapíxel a les llibreries de les webs que analitzem: és a dir, imatges pujades directament des de càmeres digitals o aplicacions de xat del mòbil...
Recordeu, una imatge per a web no necessita 4000px d'amplada. Tingues en compte també la relació d'aspecte de les imatges.
Casos pràctics: millora en acció
Implementació de l'atribut loading per a optimització SEO
Aplica loading="lazy" per a les imatges i utilitza prefetching per a recursos futurs, com ara scripts i estils. No utilitzis loading="lazy" per a les imatges de primera vista o above the fold (alguns marcs de treball web no permeten fer distinció, però hi ha maniobres per mitigar això).
Mètriques d'abans i després
Fes servir l'anàlisi de PageSpeed de Google per conèixer lestat dels teus temps i eficiència de càrrega, el primer pas de loptimització SEO per rendiment és saber on cal millorar.
Exemple real:
- Abans: Molts llocs web tenen valoracions tan pobres com 65-75 (per a ordinadors de sobretaula). Has d'estar “en verd”.
- Després: Temps de càrrega millorat i optimitzat, amb mètriques properes al màxim possible. Un bon servidor web farà la resta.
L'optimització SEO té capes com una ceba
Implementar aquestes tècniques optimitza el teu lloc, millora lexperiència de lusuari i reforça el teu posicionament SEO.
No obstant això, ha de quedar molt clar que loptimització SEO completa del teu lloc web dependrà de molts aspectes que interactuen. Si no hi ha "comunicació" entre els elements que es consideren optimitzables com a part duna estratègia SEO, cap dels aspectes SEO tinguts en compte guanyarà la batalla per separat.
Quan facis una web amb nosaltres, haurem de treballar força abans de posar-nos a teclejar. Preparar bé el pla produeix una web útil, eficaç per als seus objectius i capaç d'actuar com a plataforma per a una estratègia sòlida i holística de màrqueting digital.
