Il tempo che i browser impiegano a raggiungere delle risorse su un server è una caratteristica fondamentale di un sito web.
Le statistiche infatti dimostrano che dopo il terzo secondo di caricamento il 40% delle persone abbandonano il sito.
Da qualche anno a questa parte i siti web sono sempre più ricchi di immagini e funzionalità che vanno a rallentare inesorabilmente il caricamento delle pagine. Nonostante questo, anche se il peso, o la dimensione del byte, dei nostri siti è in aumento questi non necessariamente aumentano il tempo che un utente deve aspettare prima di visualizzare il contenuto cui si sta cercando di accedere. E’ possibile infatti visualizzare una pagina molto prima che termini il caricamento. Tutte le volte che ci si trova ad utilizzare vari software per il Crawling dei siti web come Seo Tester online o Seo Site Chekup e via dicendo, nei risultati che ci indicano lo “stato di salute SEO” del sito c’è tutta una parte che fa riferimento a:
- Inline CSS Test
- Site Loading Speed Test-Page Cache Test (Server Side Caching)
- JS Minification Test
- CSS Minification Test
Velocizzare il caricamento delle pagine web. Il Percorso di rendering
Tutti questi punti fanno riferimento a quello che accade quando scriviamo su un motori di ricerca una Parola Chiave e ci viene restituita una lista di siti web , ovvero una serie di risorse caricate su server. Questo processo è definito percorso di Rendering e ha inizio con ilParsing ( conversione ) del codice html del sito e poi alla creazione del DOM ( Document Object Model), una sorta di mappa dove i tag HTML vengono relazionati in una struttura ad albero. Questo stesso processo viene seguito con i fogli di stile che il browser trova nei tag link nell’head della pagina e sulla base di questi costruisce il CSSOM
Piu le risorse html e css sono ordinate e pulite e meno tempo ci vorrà per costruire il DOM e il CSSOM. L’unione di queste due risorse consentire al browser di eseguire il rendering dei pixel sullo schermo in una fase definita Costruzione del Render Tree. Il browser scansiona i nodi del DOM elaborando per primi quelli visibili ( escludendo quindi script, meta ) e applicando le regole che trova nel CSSOM ( anch’èsse visibili quindi escludiamo none, hidden ecc.). Una volta collegati i Tag con le rispettive regole CSS il browser può costruire il Layout della pagina in base alla Viwport ovvero la dimensione dello schermo. Per rendere il Caricamento della pagine più veloce quello che dobbiamo fare è abbreviare il percorso di rendering in modo che possa essere completato nel minor numero possibile di passaggi. Una delle cose che possiamo fare è indicare al browser di procedere con il caricamento della pagina in uno dei due modi seguenti:
1)Richiedere i file in modo asincrono in modo che possano essere caricati ed eseguiti durante il rendering della pagina
2) Includere il codice in linea direttamente nella nostra pagina HTML.
Velocizzare il caricamento delle pagine web – RENDERING ASINCRONO
Per il rendering asincrono, possiamo farlo per i file JavaScript, facilmente nei moderni browser aggiungendo un Attributo Asincrono ad un elemento script.
<head>...<script src="/path/to/script.js" async></script>...</head>
però async è supportato solo dai browser più recenti. E’ possibile anche aggiungere del codice JavaScript ( load.js scaricabile al https://github.com/filamentgroup/loadJS/blob/master/loadJS.js) per far si che i file vengano caricati in modo asincrono: Ecco come integrare loadJS nella pagina
<head>...<script>// include loadJS here...function loadJS( src ){ ... }// load a file with loadJSloadJS( "path/to/script.js" );</script>...</head>
Inoltre c’ è una specifica progettata appositamente per caricare risorse come CSS in modo asincrono: rel=”preload”. Ecco un esempio di come possiamo usare rel=”preload” per caricare e applicare un file CSS in modo asincrono (in un browser che lo supporta):
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
alcuni browser non supportano il tag preload , a tale proposito la FilamenGroup ha progettato un loadCSS scaricabile al link (https://github.com/filamentgroup/loadCSS/), ovvero uno script chiamato cssrelpreload. js, che fa funzionare rel=”preload” per i file CSS in browser che non lo supportano nativamente Ecco come usarlo:
webpagetest. org è uno strumento che ci aiuta a capire i tempi di caricamento di ogni risorsa.
Fonti: https://www.filamentgroup.com/lab/async-css.html
https://www.filamentgroup.com/lab/performance-rwd.html