John Mueller, a Google keresési ügyvédje egy új esettanulmányt emel ki, amely elmagyarázza, hogy a Legnagyobb Tartalmas Festék fejlesztései gyakran miért nem hoznak eredményt. Az üzletenként eltérő elrendezésben előfordulhat, hogy a böngésző rossz elemre fókuszál, így minden további optimalizálás olyasvalamit céloz meg, ami eleve soha nem volt az LCP.
Az esettanulmány június 24-én jelent meg a web.dev webhelyen, és részletezi a Core Web Vitals egy éves munkáját a Nuvemshop e-kereskedelmi platformon. A csapat kezdetben a kép súlyát vagy a szerver késleltetését gyanította a fő problémaként. Elemzésük azonban arra mutatta őket, hogy a böngésző hogyan választotta ki az LCP elemet. Az elemkiválasztás, a képprioritás, a lusta betöltés és az él-gyorsítótárazás optimalizálása után a Nuvemshop jelentése szerint jó LCP-pontszámmal rendelkező üzleteinek aránya 57%-ról 96%-ra nőtt.
Hogyan választják ki a rossz elemet
A Nuvemshopban a kereskedők tetszőleges sorrendben rendezhetik kezdőlapjaikat, így körhinta, bannerek és termékrácsok jelennek meg különböző pozíciókban, különböző témákban. Az esettanulmány szerint a körhinta a kirakatok 85%-án volt jelen, és itt ütközött problémába a mérés.
A probléma a körhinta és a szalaghirdetések CSS-átmeneteiből fakadt. Ezek az átmenetek késtek, amikor az elemek láthatóvá váltak a böngésző LCP-észlelése számára. Míg a vásárlók először látták a körhinta betöltését, a böngésző időnként egy lejjebb lévő szalaghirdetést azonosított LCP elemként, mivel annak láthatóságát nem késleltette az átmenet. Következésképpen a Nuvemshop szerint a korábbi optimalizálási erőfeszítések olyan elemekre összpontosítottak, amelyek soha nem voltak LCP-k.
A vizsgálat három fő okot azonosított. Az átmenetek rossz képkockára tolták az észlelést, a lusta betöltés késleltette a hajtás feletti képeket, amelyeket azonnal be kellett tölteni, a kritikus képek pedig nem kaptak prioritást. Ráadásul a mérések kategória- és termékoldalakról is származtak, nem csak a honlapokról, így a megoldásnak hatékonynak kellett lennie a különböző oldaltípusokon.
A három LCP javítás
Az esettanulmány egy negyedik változtatást is tartalmaz, az éles gyorsítótárat a késleltetés csökkentése érdekében. Az alapvető elemészlelési beállítások azonban három módosítást is tartalmaztak az oldal tetejének megjelenítésében és betöltésében. A Nuvemshop mindhárom változtatást végrehajtotta fő témáiban és oldaltípusaiban. Ezek a módosítások egyszerűek, követve a webes teljesítmény általános bevált gyakorlatait.
A csapat eltávolította a CSS-átmeneteket a felső részekből, hogy azok azonnal megjelenjenek, lehetővé téve a böngésző számára, hogy késedelem nélkül felismerje őket LCP jelöltként.
Húztak is loading="lazy" le az első képről a felső részeken. A web.dev saját útmutatása tompa ezzel kapcsolatban, figyelmeztetve az LCP képfájl lusta betöltésére, mert az mindig betöltési késleltetést ad hozzá.
Az utolsó darab az volt fetchpriority="high" a valószínű LCP-képen, amely arra utasítja a böngésző előtöltési szkennerét, hogy hamarabb fogja meg. A Nuvemshop azt állítja, hogy ezt érvényesítési logikába csomagolta, így a jel csak ott tüzel, ahol az elem valóban az LCP jelölt lehet. A Google azt tanácsolja, hogy egy vagy két kulcsképhez tartsa fenn az attribútumot, hiszen ha minden kiemelt fontosságú, semmi sem az.
Mi másról számol be a Nuvemshop
A Nuvemshop jelentése szerint a Core Web Vitals teljes megfelelési aránya 48%-ról 72%-ra javult az év során, nem csak az LCP értéke.
A vállalat ugyanazokat a brazil üzleteket vizsgálta meg, amelyek 2025. és 2026. januárban is működtek. A Google organikus keresésen keresztül érkező mobilos látogatók esetében 8,9%-os konverziós aránynövekedésről és 8,4%-os kosárelkötelezettségről számolt be.
Ne feledje, hogy ezek önmaga által jelentett adatok, és a vásárlási számok a kohorsz éves összehasonlítását jelentik, nem pedig ellenőrzött tesztet. A Nuvemshop a gyorsasághoz köti az irányt a Deloitte Google által megrendelt kutatására támaszkodva, amely megállapította, hogy a betöltési idő 0,1 másodperccel történő lelassítása 8,4%-kal növelheti a kiskereskedelmi konverziót.
Miért számít ez?
Egy másik hős kép tömörítése előtt ellenőrizze, hogy a böngésző által LCP-ként kezelt elemet optimalizálja-e. Ez különösen fontos sablonvezérelt vagy körhintas elrendezéseknél, ahol esetleg nem tartható.
Saját legutóbbi tudósításunk ugyanott landol. A CMS-platformok Core Web Vitals-jának áttekintése során a HTTP-archívum adatai azt mutatták, hogy a valós LCP hajlamos megszakadni, ha egy platform lassú ahhoz, hogy a böngésző felfedezze a fő képet, vagy amikor arra kényszeríti a képet, hogy túl sok más magas prioritású erőforrással versenyezzen, nem csak akkor, ha egy oldal nehéz. Barry Pollard azt is végigjárta, hogyan lehet nyomon követni egy LCP-problémát a PageSpeed Insights alkalmazásban, mielőtt bármilyen kódot érintene.
A konverziós link az adatok Nuvemshop általi értelmezését tükrözi. Az alapvető webes vitalértékek csak egy kisebb rangsorolási tényezőt jelentenek, és a Google a relevancia fontosabbnak tartotta, ezért a gyorsabb boltot jobb vásárlási élmény növeléseként értelmezni, mint rangsoroló emelőként.
Előre tekintve
Ez csak egy vállalat saját bevallása szerinti tapasztalata, így a vásárlási nyereséget a legjobb iránymutatónak tekinteni. Maga a technika sem új keletű, hiszen a web.dev évek óta szorgalmazza ezt a fajta felfedező és elsőbbségi munkát. Amit az esettanulmány ad hozzá, az egy működő példa a valódi LCP-elem azonosítására az üzletenként eltérő elrendezésekben, ami minden testreszabható platformon a legnehezebb.
