Argomento
- #Caricamento risorse
- #Ottimizzazione browser
- #Caricamento pagina
I browser generalmente eseguono il rendering nell'ordine seguente.
- Analisi HTML (dall'alto verso il basso head -> body):
1. Analisi HTML e creazione del DOM
2. Caricamento e applicazione dei file CSS (blocco del rendering)
3. Caricamento ed esecuzione degli script (blocco del rendering)
4. Rendering del contenuto della sezione <body> (immagini, testo, ecc.)
Controllando la priorità delle risorse del browser, è possibile ottimizzare la velocità di caricamento della pagina.
Di seguito si intende registrare i principali attributi che possono migliorare l'ordine di rendering.
- JavaScript: async, defer, module
- CSS: preload, media
- Immagini: loading="lazy", srcset, sizes
- Altro: prefetch, preconnect, dns-prefetch
JavaScript
async : viene scaricato in parallelo con l'analisi HTML e viene eseguito immediatamente dopo il download. Se qualche risorsa della pagina è correlata a questo js, è meglio rimuovere il tag async.
defer : viene scaricato in parallelo con l'analisi HTML e viene eseguito dopo che l'analisi HTML è completamente terminata. = L'ordine è garantito. Se deve essere eseguito dopo che tutto l'HTML è stato renderizzato, è meglio aggiungere il tag defer.
Il browser carica per impostazione predefinita prima l'HTML, ma se nel tag head è presente una sorgente di script, il rendering viene bloccato. Aggiungendo i due tag di cui sopra, è possibile evitare il blocco del rendering HTML.
CSS
styleshee : è il valore predefinito. È un elemento che blocca il rendering e viene utilizzato quando è necessario caricare obbligatoriamente il CSS.
preload : esegue il download anticipato senza bloccare il rendering. Viene cambiato in stylesheet al momento dell'evento onload e viene applicato lo stile.
media: esegue il rendering se soddisfa le condizioni delle dimensioni dello schermo.
Immagini
loading="lazy" : carica l'immagine quando appare sullo schermo. (quando la posizione dello scroll è vicina all'elemento in cui si trova l'immagine)
srcset : seleziona l'immagine ottimale in base alle dimensioni dello schermo. (ottimizzazione delle dimensioni dell'immagine)
sizes : fornisce un suggerimento al browser per selezionare l'immagine appropriata in base alle dimensioni del viewport.
Nel caso dell'ultimo tag img, quando sono disponibili immagini con larghezza 480px e 1024px, l'attributo size fa sì che venga visualizzata l'immagine da 480px se la max-width è 600px, altrimenti l'immagine da 1024px.
* Nell'e-commerce, poiché una pagina può contenere decine di immagini, ridurre le dimensioni delle immagini ha un grande effetto.
Ad esempio, nella schermata dei risultati di ricerca ci sono almeno 20 immagini e la ricerca viene eseguita 100.000 volte al giorno...
Altro
rel="prefetch": migliora la velocità di caricamento della pagina successiva scaricando in anticipo le risorse prima di passare alla pagina.
rel="preconnect": configura in anticipo la connessione di rete per un determinato link. (video di grandi dimensioni, caratteri, ecc.)
rel="dns-prefetch": esegue una query DNS per le risorse esterne per caricare le risorse più velocemente. (principalmente CDN esterne)
* preconnect vs dns-prefetch
preconnect è una connessione TCP (dns - handshake TCP - handshake TLS), quindi è un'operazione pesante che occupa le risorse del browser. Viene utilizzato quando è necessario caricare rapidamente le risorse esterne. (quando una risorsa è molto importante e il suo rendering rapido è importante)
dns-prefetch esegue solo una query DNS, quindi è un'operazione più leggera. È adatto a risorse non importanti e da caricare in seguito.
Commenti0