A bejegyzés durumis AI által generált összefoglalója
A böngésző sorrendben tölti be és jeleníti meg az HTML, CSS, JavaScript és képfájlokat, de az `async`, `defer`, `preload`, `media`, `loading="lazy"`, `srcset`, `sizes` attribútumok használatával optimalizálható a betöltési sebesség.
Különösen a képek esetében a `loading="lazy"`, `srcset` és `sizes` attribútumok segítségével a képernyő mérethez illeszkedő optimális képet választhatjuk ki, és elhalaszthatjuk a szükségtelen képek betöltését, így javítva az oldal betöltési sebességét.
A prefetch, preconnect és dns-prefetch attribútumok a következő oldal erőforrásainak előzetes betöltésére szolgálnak, ezáltal javítva az oldalváltás sebességét.
A böngészők általában az alábbi sorrendben renderelnek.
- html elemzés (fentről lefelé head -> body):
1. HTML elemzés és DOM generálás 2. CSS fájlok betöltése és alkalmazása (renderelés blokkolás) 3. Script fájlok betöltése és futtatása (renderelés blokkolás)
4. A <body> szakasz tartalmának renderelése (képek, szöveg stb.)
A böngésző erőforrás-prioritásának vezérlésével optimalizálható az oldal betöltési sebessége.
Az alábbiakban szeretném dokumentálni a renderelési sorrend javítására szolgáló főbb attribútumokat.
async : párhuzamosan töltődik le a HTML elemzéssel, és letöltés után azonnal lefut. Ha az oldal bármely erőforrása kapcsolódik ehhez a js-hez, akkor jobb eltávolítani az async attribútumot.
defer : párhuzamosan töltődik le a HTML elemzéssel, és a HTML elemzés teljes befejezése után fut le. = A sorrend garantált. Ha a HTML teljes renderelése után kell lefutnia, akkor érdemes hozzáadni a defer attribútumot.
A böngésző alapértelmezés szerint először a HTML-t tölti be, de ha a head tagben van script forrás, akkor a renderelés leáll. A fenti két attribútum hozzáadásával elkerülhető a HTML renderelésének blokkolása.
CSS
styleshee : alapértelmezett érték. Blokkolja a renderelést, és akkor használjuk, ha feltétlenül be kell tölteni a CSS-t.
preload : Nem blokkolja a renderelést, előre betölti. Az onload esemény bekövetkezésekor stylesheet-té változik, és alkalmazza a stílust.
media: A képernyőméret feltételének teljesülése esetén renderel.
Kép
loading="lazy" : A kép akkor töltődik be, amikor megjelenik a képernyőn. (amikor a görgetés pozíciója a kép helyét tartalmazó elem közelében van)
srcset : A képernyőméretnek megfelelő optimális képet választja ki. (Kép optimalizálás)
sizes : Segítséget nyújt a böngészőnek a nézetmérethez illeszkedő kép kiválasztásához.
Az utolsó img tag esetében, ha van egy 480px széles és egy 1024px széles kép, akkor a size attribútum alapján, ha a max-width 600px, akkor a 480px-es képet jeleníti meg, egyébként a 1024px-es képet.
* Az e-kereskedelemben egy oldalon több tucat kép is lehet, ezért a kép méretének csökkentése nagy hatással van a teljesítményre.
Például, a keresési eredmények képernyőjén legalább 20 kép található, és a keresés naponta 100 000-szer történik...
Egyéb
rel="prefetch": Előre betölti az erőforrásokat az oldalváltás előtt, így javítja a következő oldal betöltési sebességét.
rel="preconnect": Előre beállítja a hálózati kapcsolatot egy adott linkhez. (Nagy méretű videók, betűtípusok stb.)
rel="dns-prefetch": Lekéri a külső erőforrás DNS-ét, így gyorsabban tölti be az erőforrásokat. (Főleg külső CDN)
* preconnect vs dns-prefetch
A preconnect TCP kapcsolatot létesít (DNS - TCP handshake - TLS handshake), így erőforrás-igényes művelet. Akkor használjuk, ha gyorsan be kell tölteni a külső erőforrást. (Nagyon fontos erőforrás, és a gyors renderelése fontos)
A dns-prefetch csak a DNS-t keresi fel, ezért könnyebb művelet. Kevésbé fontos erőforrásokhoz és későbbi betöltéshez alkalmas.