Téma
- #Böngésző optimalizálás
- #Erőforrás betöltés
- #Oldal betöltés
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.
- JavaScript: async, defer, module
- CSS: preload, media
- Kép: loading="lazy", srcset, sizes
- Egyéb: prefetch, preconnect, dns-prefetch
JavaScript
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.
Hozzászólások0