Izraz largest contenfull paint sodi na področje t.i. tehnične optimizacije spletnih strani (SEO). Če spletna optimizacija na onsite SEO področju skrbi za ustrezno označevanje t.i. onsite SEO elementov, offsite SEO optimizacija pa za gradnjo povratnih povezav, potem tehnična optimizacija spletnih strani skrbi za hitrost nalaganja spletne strani.

Spodaj so opisane podrobnosti o enem izmed elementov tehnične optimizacije spletnih strani, t.j. o največji vsebinski barvi.

NAMIG: Pred branjem zapisa o tem kako tehnično bolje optimizirati spletno stran, sklepamo, da je postopek kako optimizirati spletno stran iz vidika onsite seo in offsite seo, že osvojen. V nasprotnem, priporočamo članek na povezavi.

Kaj je largest contentfull paint (največja vsebinska barva)

Največja vsebinska barva (LCP) je pomembna tehnična metrika spletne optimizacije, ki je usmerjena predvsem na uporabnika z namenom, da preko nje izmerimo zaznano hitrosti nalaganja največjega vsebinskega elementa na spletni strani (v vsakem trenutku).

Največja vsebinska barva označuje točko na časovnem traku nalaganja spletne strani, ko se je verjetno naložila glavna vsebina strani – hiter LCP pomaga uporabniku zagotoviti, da je stran koristna, hitro razumljiva in hitro uporabna.

V preteklosti je bil za spletne razvijalce problem in izziv izmeriti, kako hitro se glavna vsebina spletne strani naloži in je vidna uporabnikom.

Starejše meritve, kot sta load ali DOMContentLoaded, niso bile dobre, ker niso nujno ustrezale nujno temu, kar uporabnik vidi na svojem zaslonu.

Novejše, uporabniško usmerjene meritve uspešnosti, kot je First Contentful Paint (FCP), zajamejo samo začetek izkušnje z nalaganjem. Če stran prikaže začetni zaslon ali indikator nalaganja, ta trenutek za uporabnika ni zelo pomemben.

V preteklosti so se priporočale še druge meritve učinkovitosti, kot je npr. prva smiselna barva (First meaningful page) in indeks hitrosti (SI) – ki sta oba na voljo v svetilniku (vir 1 – LightHouse), da bi lažje zajeli več izkušenj z nalaganjem po začetni barvi, vendar so te metrike zapletene in jih je težko razložiti, zelo pogosto pa so tudi interpretirane napačno – še vedno se pa hrtai ne prepoznajo, ko se naloži glavna vsebina internetne strani.

Na podlagi razprav v delovni skupini za spletno uspešnost W3C in raziskav pri Googlu je bilo ugotovljeno, da je natančnejši način merjenja hitrosti nalaganja spletne strani, čas, kdaj je naložena glavna vsebina strani, ob upoštevanju pregleda, kdaj je bil največji element na strani, upodobljen.

PRIPOROČILO: Da je celotna SEO optimizacija iz leta v leto, vedno bolj popularna in iskana, pričajo študije, ki smo jih objavili v prispevku SEO optimizacija v Sloveniji. Priporočamo ogled članka.

Merjenje največje vsebinske barve

Meritev največje vsebinske barve (LCP) razloži čas upodabljanja največje slike ali besedilnega bloka, vidnega v vidnem polju.

Dober rezultat nalaganja/upodabljanja največjega vsebinskega bloka je rezultat pod 2,5 sekunde, slab rezultat nalaganja največjega vsebinskega bloga pa je več kot 4,0 sekunde.

Za dobro uporabniško izkušnjo si morajo spletna mesta prizadevati, da se največja vsebinska barva pojavi v prvih 2,5 sekundah po začetku nalaganja strani. Če želite zagotoviti, da boste dosegli ta cilj za večino svojih uporabnikov, je dober prag za merjenje 75. percentil nalaganja strani, segmentiran v mobilne in namizne naprave.

Če želite izvedeti več o raziskavah in metodologiji, ki stojijo za tem priporočilom, glejte: Določitev pragov meritev Core Web Vitals

Na spodnji sliki je prikazana (čez Google Pagespeed Insights) časovnica nalaganja največjega vsebinskega elementa na spletni strani ebonitete.si:

največja vsebinska barva ebonitete.si

Hitrost nalaganja spletne strani lahko izmerite tudi s Pingdom (vir 4). Na spodnji sliki je izmerjena tehnična optimizacija spletne trgovine Pohištvo123.si:

tehnicna optimizacija spletne strani pohistvo123

Kateri elementi so upoštevani znotraj največjega upodobljenega vsebinskega sklopa


Kot je trenutno določeno v API-ju (vir 2) z največjimi vsebinami, so tipi elementov, ki se upoštevajo za največjo vsebinsko barvo:

  • elementi
  • elementi znotraj elementa

Kako se določi velikost elementa

Velikost elementa, o katerem poročajo pri programu Largest Contentful Paint, je običajno velikost, ki je uporabniku vidna v vidnem polju. Če se element razteza zunaj vidnega polja ali če je kateri koli element odrezan ali ima neviden preliv, se ti deli ne upoštevajo pri velikosti elementa.

Za elemente slike, ki jim je bila spremenjena notranja velikost, je sporočena velikost bodisi vidna velikost bodisi notranja velikost, kar koli je manjše. Na primer, slike, ki so zmanjšane na veliko manjšo od njihove notranje velikosti, bodo poročale le o velikosti, na kateri so prikazane, medtem ko bodo slike, ki so raztegnjene ali razširjene na večjo velikost, poročale le o svojih notranjih velikostih.

Pri besedilnih elementih se upošteva samo velikost njihovih besedilnih vozlišč (najmanjši pravokotnik, ki zajema vsa besedilna vozlišča).

Za vse elemente se ne upoštevajo robovi, oblazinjenja ali obrobe, uporabljeni prek CSS.

Določitev, katera besedilna vozlišča pripadajo katerim elementom, je včasih težavna, zlasti za elemente, katerih podrejeni elementi vključujejo vstavljene elemente in vozlišča navadnega besedila, pa tudi elemente na ravni bloka. Ključno je, da vsako besedilno vozlišče pripada (in samo) svojemu najbližjemu elementu prednika na ravni bloka. Povedano specifično: vsako besedilno vozlišče pripada elementu, ki ustvari svoj blok.

NAMIG: Tehnična optimizacija spletnih strani predstavlja v nizu ostalih dveh vej SEO optimizacije (onsite in offsite SEO), vedno večji strošek v celotnem sklopu optimizacije spletnih strani. O cenah in stroških optimizacije spletnih strani smo pisali v članku Kakšna je cena optimizacije spletnih strani.

Kdaj se poročajo o največji vsebinski barvi

Spletne strani se pogosto nalagajo postopoma, zato se največji element na spletni strani lahko spreminja.

Da bi brskalniki prepoznali to spremembo pošljejo t.i. PerformanceEntry podatek, ki identificira največji vsebinski element, takoj, ko je brskalnik naslikal prvi okvir. Potem pa brskalnik znova pošlje performance enty podatek takoj po upodabljanju naslednjih okvirjev vedno znova oz. vsakič, ko se spremeni največji vsebinski element.

Na primer, na strani z besedilom in sliko junaka lahko brskalnik sprva samo upodobi besedilo – takrat brskalnik pošlje podatek o največjji vsebinski barvi.

Kako se izboljša največja vsebinska barva


Element z največjo vsebinsko barvo je lahko slika, video ali blok besedila.

Da bi izboljšali čas nalaganja največje vsebinske barve elementa, morate najprej izmeriti obstoječe nalaganje največje vsebinske barve

Kot smo že rekli je, vse kar je nižje od 2,5 sekund, dober rezultat. Če se vaši največji elementi nad pregibi (above the fold) naložijo hitreje od tega, je vaša spletna stran tehnično optimizirana zelo hitro.

Če želite preveriti, kateri element sproži meritev LCP, odprite stran, ki jo želite analizirati v Chromu, z desno miškino tipko kliknite in izberite »Preveri«. Od tam pojdite na »Uspešnost«. Odprla se vam bo plošča z zmogljivostjo v DevTools.

Kliknite gumb Ponovno naloži in počakajte, da Chrome analizira stran.

Ko je poročilo pripravljeno, boste v razdelku »Časi« našli majhno ikono LCP. Ko ze z kurzorjem miške postavite nad ikono, bo največji element strani pobarval v modro.

Primer podatka o LCP poglejte na spodnji sliki

rgest contentfull paint

Uporabite lahko tudi Web page performance test (vir 3), da dobite še ostale podatke o tem kako hitro se nalagajo ostali elementi na spletni strani. Na ta način bo tehnična optimizacija spletnih strani potekala celovito:

Iz te slike lahko najdete vse vire, ki povzročajo težave, in ugotovite, kako izboljšati čas nalaganja.

Tu je nekaj načinov kako izboljšati LCP:

Pridobite boljši načrt gostovanja vaše spletne strani. Zamenjajte gostitelja (hosting). Hiter odzivni čas strežnika (TTFB) je bistvenega pomena za hitrost nalaganja spletnega mesta. Če uporabljate počasen strežnik za gostovanje v skupni rabi, razmislite o nadgradnji na poseben načrt.

Optimizirajte kritični CSS. Kritični CSS pomeni iskanje CSS, ki je potreben za nalaganje nad vsebino krat, in vstavljanje v oznako glave. Ta tehnika izboljša dejansko in zaznano zmogljivost. Kako naredite to, najdete tukaj.

Zmanjšajte in stisnite kodne datoteke. Minifikacija iz kode odstrani nepotrebne dele, kot so presledki in prelomi vrstic. Stiskanje tudi spremeni kodne datoteke, zaradi česar so manjše. Nekateri ponudniki gostovanja in CDN privzeto izvajajo te tehnike.

Optimizirajte slike. Pogosto je največji razlog za počasno spletno mesto ta, da je slike treba stisniti, spremeniti in pretvoriti v pravo obliko.

Dodatne informacije:

  • Uporabne nasvete o SEO optimizaciji, predvsem na področju onsite SEO in offsite SEO, boste našli tudi med zapisi SEO optimizacija Otroškesobe.com in SEO optimizacija Omega3.si (kjer transparentno objavljajo vse kako se optimizacije lotevajo na omenjenih straneh).
  • Ena najboljšh slovenskih SEO ekip, ki se ukvarja s tehnično optimizacijo spletnih strani, upravlja spletne strani kot so npr. Pikapolonica.si in podobne. V kolikor vas zanima kako tehnično SEO optimizirajo takšne trgovine, priporočamo, da obiščete spletno stran Pikapolonica.

Vir:

1 – Lighthouse
2 – Largest Contentful Paint
3 – WebPageTest
4 – Pingdom