Com optimitzar la pintura de contingut més gran i un rang més alt

Com mesurar la pintura de contingut més gran del vostre lloc web

Executar a prova gratuïta de velocitat del lloc web trobar. La vostra velocitat LCP es mostrarà immediatament.

Els resultats de la prova de velocitat us indicaran si:

• S’ha assolit el llindar LCP.
• Heu d’optimitzar qualsevol altre Core Web Vital.

Com es calcula la pintura de contingut més gran?

Google analitza el percentil 75 d’experiències, això vol dir que el 25% dels visitants reals del lloc web experimenten temps de càrrega de LCP de 3,09 segons o més, mentre que per al 75% dels usuaris el LCP és inferior a 3,09 segons.

En aquest exemple, el LCP d’usuari real es mostra com a 3,09 segons.

Quins són els resultats de les proves de laboratori a les meves dades principals de vitalitats web?

Amb aquesta prova de velocitat web específica, també veureu mètriques de laboratori que es van recopilar en un entorn de prova controlat. Tot i que aquestes mètriques no afecten directament la classificació de Google, aquestes dades tenen dos avantatges:

1. Les mètriques s’actualitzen tan bon punt milloreu el vostre lloc web, mentre que les dades en temps real de Google trigaran 28 dies a actualitzar-se completament.
2. A més de les mètriques, obteniu informes detallats, que us poden ajudar a optimitzar el vostre lloc web.

A més, PageSpeed ​​Insights també proporciona dades de laboratori, però tingueu en compte que les dades que informa de vegades poden ser enganyoses a causa del acceleració simulada s’utilitza per emular una connexió de xarxa més lenta.

Com trobeu el vostre element de pintura més gran de contingut?

Quan corres a prova de velocitat de la pàgina amb DebugBear, l’element LCP es destaca al resultat de la prova.

De vegades, l’element LCP pot ser una imatge gran i altres vegades pot ser una gran part de text.

Independentment de si el vostre element LCP és una imatge o un fragment de text, el contingut LCP no apareixerà fins que la vostra pàgina no comenci a representar-se.

Per exemple, a la pàgina següent, una imatge de fons és responsable de la pintura més gran.

En canvi, el LCP d’aquesta pàgina és un paràgraf de text.

Per millorar la pintura de contingut més gran (LCP) del vostre lloc web, heu d’assegurar-vos que l’element HTML responsable de l’LCP aparegui ràpidament.

Com millorar la pintura de contingut més gran

Per millorar el LCP cal:

1. Descobriu quins recursos són necessaris perquè aparegui l’element LCP.
2. Vegeu com podeu carregar aquests recursos més ràpidament (o gens).

Per exemple, si l’element LCP és una foto, podeu reduir la mida del fitxer de la imatge.

Després de córrer a Prova de velocitat DebugBearpodeu fer clic a cada mètrica de rendiment per veure més informació sobre com es podria optimitzar.

Els recursos comuns que afecten el LCP són:

• Recursos de bloqueig de renderització.
• Imatges que no estan optimitzades.
• Formats d’imatge obsolets.
• Fonts que no estan optimitzades.

Com reduir els recursos que bloquegen la representació

Recursos de bloqueig de renderització són fitxers que s’han de descarregar abans que el navegador pugui començar a dibuixar el contingut de la pàgina a la pantalla. Els fulls d’estil CSS solen bloquejar la representació, igual que moltes etiquetes d’script.

Per reduir l’impacte en el rendiment dels recursos de bloqueig de renderització, podeu:

1. Identifiqueu quins recursos bloquegen la representació.
2. Revisar si el recurs és necessari.
3. Reviseu si el recurs ha de bloquejar la representació.
4. Vegeu si el recurs es pot carregar més ràpidament, per exemple mitjançant la compressió.

La manera fàcil: Al DebugBear demanar cascadales sol·licituds de recursos de bloqueig de renderització estan marcades amb una etiqueta “Bloqueig”.

Com prioritzar i accelerar les sol·licituds d’imatge LCP

Per a aquesta secció, aprofitarem el nou atribut “fetchpriority” de les imatges per ajudar els navegadors dels vostres visitants a identificar ràpidament quina imatge s’ha de carregar primer.

Utilitzeu aquest atribut al vostre element LCP.

Per què?

Quan només mirem l’HTML, els navegadors sovint no poden dir immediatament quines imatges són importants. Una imatge pot acabar sent una imatge de fons gran, mentre que una altra pot ser una petita part del peu de pàgina del lloc web.

En conseqüència, inicialment, totes les imatges es consideren de baixa prioritat, fins que la pàgina s’ha representat i el navegador sap on apareix la imatge.

Tanmateix, això pot significar que el navegador només comença a descarregar la imatge LCP bastant tard.

El nou Consells prioritaris L’estàndard web permet als propietaris de llocs web proporcionar més informació per ajudar els navegadors a prioritzar imatges i altres recursos.

A l’exemple següent, podem veure que el navegador passa molt de temps esperant, tal com indica la barra grisa.

Escolliríem aquesta imatge LCP per afegir-hi l’atribut “fetchpriority”.

Com afegir l’atribut “FetchPriority” a les imatges

Simplement afegint l’atribut fetchpriority=”high” a una etiqueta HTML img, el navegador prioritzarà la baixada d’aquesta imatge tan aviat com sigui possible.

<img src="https://www.searchenginejournal.com/optimize-largest-contentful-paint-debugbear-spcs/471883/photo.jpg" fetchpriority="high" />

Com utilitzar els formats d’imatge moderns i les imatges de mida adequadament

Les imatges d’alta resolució sovint poden tenir una mida de fitxer gran, el que significa que triguen molt de temps a descarregar-se.

Al resultat de la prova de velocitat a continuació, ho podeu veure mirant les zones ombrejades de color blau fosc. Cada línia indica un tros de la imatge que arriba al navegador.

Hi ha dos enfocaments per reduir la mida de les imatges:

1. Assegureu-vos que la resolució de la imatge sigui tan baixa com sigui possible. Penseu en publicar imatges amb diferents resolucions en funció de la mida del dispositiu de l’usuari.
2. Utilitzeu un modern format d’imatge com WebP, que pot emmagatzemar imatges de la mateixa qualitat amb una mida de fitxer inferior.

Com optimitzar els temps de càrrega de fonts

Si l’element LCP és un encapçalament o un paràgraf HTML, és important carregar ràpidament el tipus de lletra d’aquest fragment de text.

Una manera d’aconseguir-ho seria utilitzar precarrega les etiquetes que pot dir al navegador que carregui els tipus de lletra abans d’hora.

El font-display: intercanviar La regla CSS també pot garantir una renderització accelerada, ja que el navegador renderitza immediatament el text amb una font predeterminada abans de canviar a la font web més endavant.

Superviseu el vostre lloc web per mantenir el LCP ràpid

La supervisió contínua del vostre lloc web no només us permet verificar que les vostres optimitzacions LCP funcionen, sinó que també us garanteix que rebeu una alerta si el vostre LCP empitjora.

DebugBear pot controlar el Core Web Vitals i altres mètriques de velocitat del lloc al llarg del temps. A més d’executar proves de laboratori en profunditat, el producte també fa un seguiment de les mètriques d’usuari real de Google.

Proveu DebugBear amb un prova gratuïta de 14 dies.