PageSpeed identifica la imatge principal com a element Largest Contentful Paint. Comprimir-la pot ajudar, però el navegador també ha de descobrir-la, triar una variant, connectar, baixar, descodificar i dibuixar-la. Un fitxer raonablement petit pot aparèixer tard si el tema n’oculta l’URL fins que s’executa JavaScript.
La reparació ha d’actuar en l’etapa que realment consumeix el temps.
Confirmar l’element i dividir el retard
Executa diverses proves i anota l’element LCP. En dissenys adaptables, bàners o lliscadors pot canviar entre execucions.
A Performance de Chrome grava una càrrega neta, localitza el marcador LCP, selecciona l’element i observa quan comença i acaba la petició. Separa quatre parts: resposta del servidor, descobriment del recurs, baixada i renderitzat o descodificació.
Si l’HTML triga dos segons, comprimir la imatge no recuperarà tot aquell temps. Si el document arriba ràpid però la sol·licitud comença tard, el descobriment és la pista principal.
Exposar la imatge a l’HTML inicial
El navegador pot prioritzar una etiqueta visible durant l’anàlisi:
<img
src="/uploads/service-hero-1280.webp"
width="1280"
height="720"
alt="Diagnòstic de rendiment WordPress"
>Un fons CSS ha d’esperar el full d’estils; una imatge inserida per JavaScript espera encara més. No converteixis tots els fons decoratius, però una imatge que comunica el contingut principal sol encaixar millor com a <img> amb text alternatiu útil.
No aplicar càrrega diferida a l’LCP inicial
loading="lazy" és adequat sota el primer plec, no per a la imatge principal visible. Inspecciona l’HTML renderitzat: temes, constructors i connectors poden sobreescriure WordPress.
<img
src="/uploads/service-hero-1280.webp"
width="1280"
height="720"
loading="eager"
fetchpriority="high"
alt="Diagnòstic de rendiment WordPress"
>No marquis diverses imatges com a prioritat alta; el senyal perdria utilitat.
Comprovar la variant triada
La imatge es pot mostrar a 700 píxels i baixar un original de 2400. Consulta currentSrc:
const hero = document.querySelector(".hero img");
console.log({
selected: hero?.currentSrc,
renderedWidth: hero?.getBoundingClientRect().width,
intrinsicWidth: hero?.naturalWidth
});Substitueix el selector per un de verificat. Si l’amplada intrínseca supera clarament la mida visual multiplicada per la densitat de pantalla, revisa srcset i sizes.
Una llista completa de variants pot fallar si sizes descriu malament el disseny. Per a un hero mòbil complet i limitat a l’escriptori:
sizes="(max-width: 767px) 100vw, 1200px"És només un exemple. Considera columnes, farciment i amplada màxima real, i prova diversos punts de ruptura.
Optimitzar qualitat i format
Parteix de dimensions de renderitzat i tipus de contingut. Les fotografies toleren compressió amb pèrdua; logotips, captures i text necessiten vores nítides; transparències i degradats requereixen comprovació específica.
Compara el resultat a la mida real en mòbil i escriptori. Retira metadades innecessàries, però conserva les que tinguin obligació comercial o legal.
WebP i AVIF no garanteixen menys pes. Un WebP mal configurat pot superar un JPEG ben comprimit; AVIF pot suavitzar detalls. Mesura els bytes que rep el navegador, valida Content-Type i no generis formats que la capa de lliurament no seleccioni de manera fiable.
Revisar servidor, CDN i redireccions
Selecciona la petició i comprova espera, estat, redireccions i memòria cau:
curl -I https://example.com/uploads/service-hero-1280.webpHi ha d’haver una resposta correcta, tipus esperat, política de memòria cau deliberada i cap redirecció evitable. No utilitzis memòria cau immutable si el fitxer canvia sota la mateixa URL.
Si un servei redimensiona a la primera petició, compara ruta freda i calenta. El primer visitant no hauria de pagar un processament car sense preescalfament o generació acordats.
Precarregar només quan calgui
Si el fons CSS continua descobrint-se tard, una precàrrega pot avançar-lo:
<link rel="preload" as="image"
href="/uploads/service-hero-1280.webp"
fetchpriority="high">En imatges adaptables, la precàrrega ha de coincidir amb la font utilitzada; altrament es baixaran dos fitxers. Verifica que no competeix amb CSS o fonts crítiques.
Reservar espai i controlar lliscadors
Els atributs width i height permeten calcular la proporció. CSS pot mantenir-la adaptable:
.hero img { display: block; height: auto; max-width: 100%; }Si el mòbil utilitza un altre retall, empra <picture> i reserva l’espai correcte. En un lliscador, renderitza la primera diapositiva en HTML, prioritza només la seva imatge, retarda les següents i conserva controls utilitzables.
Després del canvi prova mòbil, escriptori, memòria cau freda i calenta, consentiment, navegació, CTA, qualitat, LCP i CLS. Per a una avaluació n’hi ha prou amb URL, resultat, element, mode i canvis recents; no calen contrasenyes.