Oldalbetöltési sebesség optimalizálása: csökkentsd a betöltési időt. Képoptimalizálás, gyorsítótárazás, CDN és legjobb gyakorlatok.

Összefoglalás
Az oldalbetöltési sebesség azt mutatja, mennyi idő alatt töltődik be a weboldalad, másodpercben mérve. A gyorsabb oldalak jobb helyezést érnek el, több látogatót váltanak át ügyféllé, és elégedettebbé teszik a felhasználókat. Mobilon 2 másodperc alatti, asztali gépen 1.5 másodperc alatti betöltési időt célozz.
Szeretnél többet megtudni? Kérdezd meg
Az oldalbetöltési sebesség egyszerre SEO-rangsorolási tényező és üzleti mutató. A gyors oldalak a Google-ben magasabbra kerülnek. A gyors oldalak emellett több látogatót váltanak át vásárlóvá. Kutatások szerint az oldalbetöltés 1 másodperces késése 7%-kal kevesebb konverziót eredményez. Webáruházaknál a lassú oldalak naponta több ezer dollárnyi elveszett bevételt jelentenek. Kiadóknak a lassú oldal kevesebb oldalmegtekintést és alacsonyabb hirdetési bevételt jelent. Minden oldalnál kulcsfontosságú az oldalbetöltési sebesség.
A gyors oldalbetöltés referenciaértéke 2 másodperc alatti. A 2 másodperc vagy annál rövidebb betöltést a felhasználók gyorsnak érzékelik. A 3-5 másodpercig tartó betöltés lassúnak tűnik. Az 5 másodpercnél hosszabb betöltés gyakran megszakítja a látogatást. A célod egyszerű: érd el, hogy a betöltési idő 2 másodperc alá kerüljön, majd 1.5 másodperc alá, aztán folytasd az optimalizálást. Minden 100ms javulás számít.
Az oldalbetöltési idő több összetevőből áll. Az első bájt megérkezéséig eltelt idő (TTFB) azt mutatja, mennyi idő alatt válaszol a szerver. A legnagyobb tartalmi elem megjelenése (LCP) az a pont, amikor a fő tartalom láthatóvá válik. A teljes betöltés az az időpont, amikor minden erőforrás letöltődött. Ezek a mutatók nem azonosak, és mindegyik optimalizálásához más módszer kell.
A TTFB a szerver válaszideje. Ha a TTFB 600ms felett van, a szervered lassú. Gyakori okok a nem hatékony háttérkód, az adatbázis-lekérdezések vagy a szerver túlterhelése. A TTFB javítható a háttérkód optimalizálásával, jobb tárhelyre költözéssel, gyorsítótárazás bekapcsolásával vagy tartalomkézbesítő hálózat (CDN) használatával.
A Google teljesítményről szóló tanulóútvonala minden mutatót részletesen bemutat. Az LCP és a többi Core Web Vitals mutató is részletesen szerepel. Ezeknek a mutatóknak az ismerete előfeltétele annak, hogy hatékonyan optimalizáld az oldalbetöltési sebességet.
A képek jellemzően az oldal teljes méretének 50-80%-át teszik ki. Az optimalizálatlan képek a leggyorsabb módja annak, hogy lelassítsd az oldalt. Optimalizáld a képeket úgy, hogy csökkented a fájlméretüket a minőség romlása nélkül. Három módszer:
Tömörítés: Használj képtömörítő eszközt a fájlméret csökkentésére. A JPEG képek 10-40-szeresre tömöríthetők. A PNG képek 2-5-szörösére. Használj olyan eszközöket, mint a TinyPNG, az ImageOptim vagy a CMS-ed bővítményei, amelyek automatikusan tömörítenek. Feltöltés előtt tömörítsd a képeket.
Modern formátumok: A JPEG vagy PNG helyett használj WebP formátumot. A WebP minőségromlás nélkül 25-35%-kal jobban tömörít, mint a JPEG. A böngészők ma már natívan támogatják a WebP-t. Régebbi böngészőkhöz JPEG-et használj tartalék formátumként a `
Lusta betöltés: Csak akkor töltsd be a képeket, amikor a felhasználó közel görget hozzájuk. Használd a natív HTML `loading="lazy"` attribútumot a hajtás alatti képeken. Ez elhalasztja azoknak a képeknek a betöltését, amelyeket a felhasználó talán soha nem lát, így az első betöltés jelentősen gyorsul.
A Google optimalizálási útmutatója konkrét képoptimalizálási technikákat ismertet. A megfelelően optimalizált képek önmagukban gyakran 30-50%-kal csökkentik az oldalbetöltési időt.
A renderelést blokkoló CSS és JavaScript lassítja az oldalbetöltést. A renderelést blokkoló erőforrások megakadályozzák, hogy a böngésző kirajzolja az oldalt, amíg ezek le nem töltődtek és fel nem dolgozódtak. Halaszd a nem kritikus CSS-t és JavaScriptet, hogy a fontos tartalom előbb jelenjen meg.
A JavaScript minimalizálása és halasztása: A nagy JavaScript-fájlok blokkolják a renderelést. Bontsd a JavaScriptet kisebb részekre, és halaszd a nem kritikus szkriptek betöltését. Használd a `
Források
Kutatások szerint egy másodperces késés körülbelül 7%-os konverzióesést okoz. A 2 másodperc alatt betöltődő oldal 2-3-szor jobban konvertál, mint az 5 másodperc alatt betöltődő. Az oldalbetöltési sebesség közvetlenül befolyásolja a bevételt.
Az iparági referenciaértékek szerint mobilon 2 másodperc, asztali gépen 1.5 másodperc alatti betöltést érdemes célul tűzni. A 2 másodperc alatt betöltődő oldalakat a felhasználók gyorsnak érzékelik. A 2 másodperc alá kerüléshez jelentős optimalizálásra van szükség.
Igen. A CDN-ek a tartalmat a felhasználókhoz közeli szervereken szolgálják ki, ezzel 50-80%-kal csökkentik a TTFB-t. Egy Ausztráliában élő felhasználó, aki egy amerikai szerverről éri el a tartalmat, sokkal lassabban töltheti be az oldalt. A CDN-ek nélkülözhetetlenek a globális közönség számára.
A TE ELŐTTED PRÓBÁLTÁK KI A SORANKOT
