Onderwerp
- #Resource laden
- #Browser optimalisatie
- #Paginaladen
Browsers voeren rendering doorgaans uit in de volgende volgorde.
- HTML parsing (van boven naar beneden, head -> body):
1. HTML parsing en DOM-creatie
2. CSS-bestanden laden en toepassen (blokkeert rendering)
3. Scripts laden en uitvoeren (blokkeert rendering)
4. Rendering van de inhoud van de <body>-sectie (afbeeldingen, tekst, etc.)
Door de prioriteit van browserresources te beheren, kunt u de pagina-laadsnelheid optimaliseren.
Hieronder wil ik de belangrijkste attributen vastleggen waarmee de bovenstaande renderingsvolgorde kan worden verbeterd.
- JavaScript: async, defer, module
- CSS: preload, media
- Afbeeldingen: loading="lazy", srcset, sizes
- Overig: prefetch, preconnect, dns-prefetch
JavaScript
async : wordt parallel aan het HTML-parsen gedownload en onmiddellijk na het downloaden uitgevoerd. Als een resource op de pagina gerelateerd is aan deze js, is het beter om het async-attribuut weg te laten.
defer : wordt parallel aan het HTML-parsen gedownload en uitgevoerd nadat het HTML-parsen volledig is voltooid. = De volgorde is gegarandeerd. Als de uitvoering moet plaatsvinden nadat alle HTML is gerenderd, is het raadzaam om het defer-attribuut toe te voegen.
Browsers laden standaard eerst HTML. Als er echter een scriptsource in de head-tag staat, wordt het renderen geblokkeerd. Door bovenstaande twee attributen toe te voegen, kan het blokkeren van het HTML-renderen worden voorkomen.
CSS
stylesheet : Dit is de standaardwaarde. Het is een element dat rendering blokkeert en wordt gebruikt wanneer CSS absoluut moet worden geladen.
preload : Downloadt vooraf zonder rendering te blokkeren. Wordt na het onload-event gewijzigd in stylesheet, waarna de stijl wordt toegepast.
media: Renderen alleen als aan de schermformaatvoorwaarden wordt voldaan.
Afbeeldingen
loading="lazy" : Laadt afbeeldingen pas wanneer ze op het scherm verschijnen. (Wanneer de positie van de scrollbalk zich in de buurt van het element bevindt waarin de afbeelding zich bevindt)
srcset : Selecteert de optimale afbeelding op basis van het schermformaat. (Optimalisatie van afbeeldingsgrootte)
sizes : Geeft de browser een hint om een geschikte afbeelding te selecteren op basis van de viewport-grootte.
In het geval van de laatste img-tag, als er afbeeldingen met een breedte van 480px en 1024px zijn, zorgt het size-attribuut ervoor dat er een afbeelding van 480px wordt weergegeven als de max-width 600px is, en anders een afbeelding van 1024px.
* Bij e-commerce bevat één pagina tientallen afbeeldingen, dus het verkleinen van de afbeeldingsgrootte heeft een groot effect.
Bijvoorbeeld, als er minstens 20 afbeeldingen op een zoekresultatenpagina staan en het zoeken 100.000 keer per dag wordt uitgevoerd...
Overig
rel="prefetch": Downloadt resources voorafgaand aan navigatie naar een pagina om de laadtijd van de volgende pagina te verbeteren.
rel="preconnect": Stel vooraf een netwerkverbinding in voor een specifieke link. (Grote video's, lettertypen, enz.)
rel="dns-prefetch": Voert een DNS-zoekopdracht uit voor externe resources om resources sneller te laden. (Vooral externe CDN)
* preconnect vs dns-prefetch
preconnect is een TCP-verbinding (DNS - TCP handshake - TLS handshake) en is dus een zware bewerking die browserresources in beslag neemt. Gebruik dit wanneer externe resources snel moeten worden geladen. (Een zeer belangrijke resource en de snelle rendering ervan is belangrijk)
dns-prefetch voert alleen een DNS-zoekopdracht uit en is daarom een lichtere bewerking. Geschikt voor niet-belangrijke resources die later worden opgehaald.
Reacties0