A magánszféra fontos számunkra, ezért lehetőséged van kikapcsolni bizonyos típusú tárolókat, amelyekre a weboldal alapvető működéséhez nincs szükség. A kategóriák letiltása befolyásolhatja a weboldal használatának élményét. További információ
Legnagyobb tartalmi elem megjelenése (LCP) optimalizálása: érd el, hogy az LCP 2.5 másodperc alá kerüljön. Útmutató a képoptimalizáláshoz és a TTFB-hez.
Eszközök
A Sorank alapítója, több mint 7 éves SEO-tapasztalattal, GEO-rajongó.
Összefoglalás
A legnagyobb tartalmi elem megjelenése (LCP) azt méri, mennyi idő alatt válik láthatóvá az oldalad legnagyobb tartalmi eleme, a Google 2.5 másodperc alatti célértékével.
Szeretnél többet megtudni? Kérdezd meg
Az LCP kritikus felhasználói élménymutató és Google-rangsorolási tényező. Amikor a felhasználó megnyitja az oldalt, nem a teljes betöltési idő érdekli. Azt nézi, mikor látja a fő tartalmat, és mikor kezdhet olvasni vagy interakcióba lépni. Az LCP pontosan ezt a pillanatot méri: azt, amikor a legnagyobb tartalmi elem láthatóvá válik. Ha az LCP jó, az oldal gyorsnak tűnik. Ha rossz, az oldal lassúnak érződik, akkor is, ha a többi mutató rendben van.
Az LCP optimalizálása háromirányú megközelítést igényel: a szerver válaszidejének javítását (TTFB), a renderelést blokkoló erőforrások megszüntetését és a képek optimalizálását. Mindegyik más-más LCP-szűk keresztmetszetet old meg. Együtt látványos javulást hoznak.
A legnagyobb tartalmi elem megjelenése (LCP) az oldal legnagyobb látható tartalmi elemének megjelenési ideje. Ez lehet egy nagy kép, videó, főcím vagy szövegblokk. Az LCP attól a pillanattól mérődik, amikor a felhasználó megnyitja az oldalt, egészen addig, amíg ez az elem láthatóvá nem válik. A Google LCP-dokumentációja részletes műszaki információkat és optimalizálási stratégiákat ad.
Az LCP nem egy kétállapotú, megfelelt-nem felelt meg mutató. Folyamatos pontszám. A Google szerint a 2.5 másodperc alatti LCP „jó”, a 2.5-4 másodperc közötti LCP „fejlesztésre szorul”, a 4 másodpercnél hosszabb LCP pedig gyenge. A felhasználók 2 másodperc alatti LCP-vel rendelkező oldalt nagyon gyorsnak érzékelnek. A 3-4 másodperces LCP-vel rendelkező oldalak észrevehetően lassabbnak tűnnek. Az 5 másodpercnél hosszabb LCP-jű oldalakat gyakran elhagyják.
Az LCP a betöltés során változik, ahogy egyre nagyobb tartalmi elemek jelennek meg. Ha egy hatalmas kép a 3. másodpercnél töltődik be, az LCP 1 másodpercről 3 másodpercre ugrik. Ez fontos: nem elég a kezdeti megjelenési időt optimalizálni. Biztosítanod kell, hogy minden nagy tartalmi elem gyorsan betöltődjön.
Az első bájt megérkezéséig eltelt idő (TTFB) a navigáció kezdetétől addig tart, amíg a szerver vissza nem küldi a HTML-dokumentum első bájtját. A TTFB határozza meg az LCP alsó határát. Ha a TTFB 2 másodperc, az LCP nem lehet jobb 2 másodpercnél, mert a böngésző még a HTML-t sem kapta meg. A TTFB csökkentése az LCP csökkentésének előfeltétele.
A jó TTFB 600 milliszekundum alatti. A 600-1800 ms közötti TTFB fejlesztésre szorul. Az 1800 ms feletti TTFB gyenge. Ha a TTFB lassú, először a szerver optimalizálására koncentrálj. Semmilyen frontend-optimalizálás nem pótolja a lassú szervert.
A lassú TTFB gyakori okai: nem hatékony háttérkód, adatbázis-lekérdezések vagy a szerver túlterhelése. A lassú tárhely is magas TTFB-t okoz. A megosztott tárhely gyakran rendkívül lassú. Jobb teljesítményért válts VPS-re vagy felhős tárhelyre. Használj CDN-t, hogy a tartalmat a felhasználókhoz közeli szervereken szolgáld ki, és így csökkentsd a TTFB-t.
A PageSpeed Insights a „Szerver válaszideje” szakaszban mutatja a TTFB-det. Ha a TTFB szűk keresztmetszet, prioritásként jelzi.
Az LCP attól függ, mi a legnagyobb tartalmi elem az oldalon. Egy blogbejegyzésen ez lehet egy nagy főképi kép. Egy termékoldalon egy termékfotó. Egy hírportálon egy cikk főcíme. Az LCP-elem azonosítása az optimalizálás első lépése.
Az LCP-elem azonosításához használd a Chrome DevTools eszközeit. Nyisd meg a DevTools-t, lépj a Performance fülre, indíts felvételt, majd töltsd újra az oldalt. A teljesítményfelvételen keresd a „Largest Contentful Paint” jelölést. Vidd rá az egeret, és láthatod, melyik elem váltotta ki az LCP-t. Ha tudod, melyik az elem, optimalizáld azt.
Az LCP-elem gyakran kép. A képek nagyok, és a HTML feldolgozása után töltődnek be. A képek betöltésének optimalizálása a legnagyobb hatást gyakorolja az LCP-re a legtöbb oldalon. A hajtás alatti képeket lusta betöltéssel lehet kezelni, így a hajtás fölötti tartalom LCP-je gyorsabban megjelenik.
Az előtöltés arra utasítja a böngészőt, hogy még a megjelenítéshez szükséges idő előtt kezdje el letölteni az erőforrást. Töltsd elő az LCP-képedet vagy más kritikus erőforrásokat a HTML fejrészében lévő `` címkékkel. Ez azt üzeni a böngészőnek: „azonnal kezdd letölteni ezt az erőforrást”.
Példa: a `` arra utasítja a böngészőt, hogy azonnal kezdje letölteni a főképet, és ne várja meg a CSS feldolgozását. Ez az erőforrás méretétől függően 100-500 ms-mal csökkentheti az LCP-t.
Az előtöltésnél légy óvatos. Ha túl sok erőforrást töltesz elő, a sávszélességet pazarolod. Csak a legkritikusabb erőforrásokat töltsd elő (főkép, kritikus betűtípusok, alapvető CSS). A Google Core Web Vitals optimalizálási útmutatója ismerteti az előtöltés legjobb gyakorlatait.
Ha az LCP-elem kép, optimalizáld a fájlméretet és a betöltési stratégiát. Három módszer:
Tömörítsd a képet. Használj olyan eszközöket, mint a TinyPNG, az ImageOptim vagy a Squoosh, hogy minőségromlás nélkül tömörítsd. A JPEG tömörítés 10-40-szeresre csökkentheti a fájlméretet. Minden 100 KB képméret 100-200 ms-mal növeli az LCP-t 4G-hálózaton. A tömörítés nagyon jó megtérülésű lépés.
Használj modern formátumokat. A WebP 25-35%-kal kisebb a JPEG-nél. Az AVIF még ennél is kisebb. Használd a HTML `
Add meg a kép méreteit. A szélesség- és magasságattribútumok megakadályozzák az elrendezés eltolódását, és lehetővé teszik a böngészőnek, hogy a kép betöltése előtt lefoglalja a helyet. Ez nem javítja közvetlenül az LCP-t, de javítja a kumulatív elrendezés-eltolódást (CLS), ami egy másik Core Web Vitals mutató.
A renderelést blokkoló CSS megakadályozza, hogy a böngésző kirajzolja az oldalt, amíg a CSS le nem töltődött és fel nem dolgozódott. A nagy CSS-fájlok késleltetik a renderelést. A renderelést blokkoló CSS mennyiségét úgy csökkentheted, hogy a kritikus CSS-t beágyazod, a többit pedig halasztod.
A kritikus CSS a hajtás fölötti tartalomhoz szükséges CSS. Ezt a CSS-t a `
Források
Nem. Az LCP azt méri, mikor válik láthatóvá a fő tartalom. A betöltési idő azt méri, mikor fejeződik be minden erőforrás letöltése. Egy oldalnak lehet jó LCP-je, mégis lassú a teljes betöltése. Az LCP fontosabb, mint a teljes betöltési idő.
Három fő ok: lassú TTFB, renderelést blokkoló CSS és JavaScript, valamint optimalizálatlan képek. A TTFB-t a szerver teljesítményének javításával vagy CDN használatával javíthatod. Halaszd a nem kritikus JavaScriptet, és tömörítsd a képeket.
A képek gyakran a legnagyobb tartalmi elemek, és ők határozzák meg az LCP-t. A képfájlok méretének csökkentése a legnagyobb hatású lépés. A hajtás alatti képek lusta betöltése javítja a kezdeti LCP-t.
A TE ELŐTTED PRÓBÁLTÁK KI A SORANKOT
“Teszteltem a Sorankot egy valódi ügyfél oldalán, és őrület. Mindent megtesz, amiért egy ügynökség $1500-t kérne havonta. Most ennél az ügyfélnél már éles üzemben van.”
Guillaume Guersanguersanguillaume.com“Egy hirdetési ügynökség vagyunk, és végre rendbe akartuk tenni a SEO-nkat. A Sorank tiszta képet adott az oldalunkról, segített sorrendbe állítani az optimalizálásokat, és segített rendesen felépíteni a tartalmainkat. Az eszköz könnyen kezelhető, csapatra jól szabott, és nagyon praktikus, hogy több platform közötti ugrálás nélkül egy helyen követhetjük a munkát. Nagyon szilárd alap ahhoz, hogy újrakezdjük a SEO-nkat.”
Gaspard MadouiHirdetési ügynökség
“Csak hagytam, hogy a Sorank szoftver dolgozzon, és mostanra a DR-em 25, az oldalam pedig magasabban szerepel.”
Lucas Flandrefoundertrace.fr“A Soranknak köszönhetően GEO-szakértő lettem. A GEO-ranglista segítségével megmutathatom az ügyfeleimnek, hol állnak a versenytársakhoz képest a ChatGPT-ben. Ez valódi kereskedelmi előny.”
MélanieSEO szabadúszó“Remek szolgáltatás, jól működik a weboldalunkon, és segít megérteni, hogyan lehet javítani, hogy jobban szerepeljünk a Google-on és másutt. Gratulálok, így tovább, ajánlom.”
Hugo T.E-kereskedelmi kereskedő
