Per impostazione predefinita, un browser deve scaricare, analizzare ed elaborare tutti i fogli di stile esterni che incontra prima di poter visualizzare o eseguire il rendering di qualsiasi contenuto sullo schermo.
Non avrebbe senso che un browser tenti di visualizzare il contenuto prima che i fogli di stile siano stati elaborati, perché i fogli di stile potrebbero contenere regole che influenzano lo stile della pagina.
In questa guida, imparerai come rinviare i CSS non critici con l’obiettivo di ottimizzare il percorso di rendering critico e migliorare il First Contentful Paint (FCP)
Per approfondire ti consigliamo Critical Rendering Path è il processo sequenziale del browser
<link href="style.css" rel="stylesheet">
Questo ci informa della presenza di un file esterno nominato style.css
memorizzato separatamente dall’HTML, ogni file esterno deve essere prima scaricato dalla rete per far continuare il parsing* della pagina, aumentando cosi il tempo di apertura della pagina web.
Il CSS non utilizzato rallenta anche la costruzione di un albero di rendering del browser.
L’albero di rendering è come l’albero DOM, con in più l’inclusione degli stili per ciascun nodo. Per costruire l’albero di rendering, un browser deve percorrere l’intero albero DOM e verificare quali regole CSS si applicano a ciascun nodo, per questo un CSS inutilizzato fà perdere più tempo al browser nel calcolo degli stili di ciascun nodo.
*parsing: In informatica, il parsing, analisi sintattica o parsificazione è un processo che analizza un flusso continuo di dati in ingresso (input, letti per esempio da un file o una tastiera) in modo da determinare la correttezza della sua struttura grazie ad una data grammatica formale. Un parser è un programma che esegue questo compito.
coverage
e seleziona Mostra copertura . Viene visualizzata la scheda Copertura.Incorpora gli stili critici richiesti per il first contentful paint all’interno di un blocco <style>
all’inizio della pagina HTML.
<style type="text/css"> .nome-classe{background-color:#ADD8E6;color:#444;} </style>
Una media query è costituita da un media type e da zero o più espressioni che controllano le condizioni di quelle particolari funzioni media.
Vediamone 5 tipici utilizzi
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
Rimandando i CSS non critici ad un caricamento successivo utilizzando un collegamento di preload.
<link rel="preload" href="styles.css" as="style" onload ="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="styles.css"></noscript>
Prendi in considerazione l’idea di automatizzare il processo di estrazione e integrazione del CSS “Above the Fold” utilizzando il Critical Tool.
[ITA] - I cookie necessari sono assolutamente essenziali per il corretto funzionamento del sito Web. Questa categoria include solo i cookie che garantiscono funzionalità di base e caratteristiche di sicurezza del sito Web. Questi cookie non memorizzano alcuna informazione personale.
[ENG] - Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
[ITA] - Qualsiasi cookie che potrebbe non essere particolarmente necessario per il funzionamento del sito Web e viene utilizzato specificamente per raccogliere dati personali dell'utente tramite analisi, pubblicità, altri contenuti incorporati sono definiti come cookie non necessari. È obbligatorio ottenere il consenso dell'utente prima di eseguire questi cookie sul sito Web.
[ENG] - Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.