{"id":47978,"date":"2021-09-30T09:43:12","date_gmt":"2021-09-30T07:43:12","guid":{"rendered":"https:\/\/kinsta.com\/?p=102244"},"modified":"2024-05-28T07:15:39","modified_gmt":"2024-05-28T06:15:39","slug":"ottimizzare-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/ottimizzare-css\/","title":{"rendered":"Come Ottimizzare i CSS per Ottenere le Massime Prestazioni dal Sito"},"content":{"rendered":"

Anche nel 2021, le prestazioni web rimangono un problema. Secondo HTTP Archive, una pagina media richiede un download di 2 MB<\/a>, fa pi\u00f9 di 60 richieste HTTP e pu\u00f2 impiegare 18 secondi<\/a> per caricarsi completamente su un dispositivo mobile. I fogli di stile rappresentano 60 kB divisi in sette richieste, quindi raramente sono una priorit\u00e0 assoluta quando si cerca di affrontare i problemi di prestazioni.<\/p>\n

Tuttavia, i CSS hanno un effetto, per quanto lieve possa sembrare. Una volta che avete affrontato il vostro JavaScript<\/a>, imparare a ottimizzare correttamente il CSS dovrebbe essere la priorit\u00e0.<\/p>\n

Parliamone!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

In Che Modo i CSS Influenzano le Prestazioni della Pagina<\/h2>\n

I CSS sembrano innocenti ma possono richiedere un’elaborazione pesante.<\/p>\n

I CSS Bloccano il Rendering<\/h3>\n

Quando il vostro browser incontra un tag <link><\/code> ferma gli altri download e l’elaborazione del browser mentre recupera e analizza il file CSS.<\/p>\n

Anche JavaScript pu\u00f2 bloccare il rendering<\/a> del browser, ma l’elaborazione asincrona \u00e8 possibile grazie a:<\/p>\n

    \n
  1. L’attributo async<\/code> per scaricare gli script in parallelo, che vengono eseguiti immediatamente quando sono pronti.<\/li>\n
  2. L’attributo defer<\/code> per scaricare in parallelo, quindi eseguire secondo l’ordine quando il DOM \u00e8 pronto.<\/li>\n
  3. L’attributo type=\"module\"<\/code> per caricare un modulo ES (che si comporta come il defer<\/code>).<\/li>\n<\/ol>\n

    Le risorse come le immagini spesso richiedono pi\u00f9 larghezza di banda, ma sono disponibili formati efficienti<\/a> e possono essere caricate in lazy-loading<\/a> (attributo loading=\"lazy\"<\/code> ) senza bloccare il rendering del browser.<\/p>\n

    Niente di tutto questo \u00e8 possibile con i CSS. Il file viene memorizzato nella cache, quindi i successivi caricamenti della pagina dovrebbero<\/em> essere pi\u00f9 veloci, ma il blocco del rendering rimane.<\/p>\n\n

    I File CSS di Grandi Dimensioni Richiedono Tempo per Essere Processati<\/h3>\n

    Pi\u00f9 grande \u00e8 il vostro foglio di stile, pi\u00f9 tempo ci vuole per scaricarlo ed elaborarlo in un CSSOM (CSS Object Model), che il browser e le API JavaScript possono usare per visualizzare la pagina. Anche se i fogli di stile CSS sono pi\u00f9 piccoli della maggior parte degli altri file web, non sono immuni dalla regola empirica “pi\u00f9 piccolo \u00e8, meglio \u00e8”.<\/p>\n

    I File CSS Crescono<\/h3>\n

    Pu\u00f2 essere difficile identificare gli stili che non sono pi\u00f9 utilizzati e rimuovere quelli sbagliati pu\u00f2 generare il caos in un sito. Chi lavora nello sviluppo, di solito opta per l’approccio pi\u00f9 sicuro “conserva tutto”. Gli stili di pagina<\/a>, i componenti<\/a> e i widget che non sono pi\u00f9 utilizzati continuano a esistere nei CSS. Il risultato? La dimensione del file, la complessit\u00e0 e lo sforzo di manutenzione aumentano esponenzialmente, e questo significa meno propensione da parte dei professionisti dello sviluppo a rimuovere il codice ridondante.<\/p>\n

    I Fogli di Stile Possono Fare Riferimento ad Altre Risorse<\/h3>\n

    I CSS possono fare riferimento ad altri fogli di stile grazie alle regole @import. Queste importazioni bloccano l’elaborazione del foglio di stile corrente e caricano altri file CSS in serie<\/strong>.<\/p>\n

    Anche altre risorse, come font e immagini, possono essere referenziate. Il browser cercher\u00e0 di ottimizzare i download, ma in caso di dubbio, li recuperer\u00e0 immediatamente. I file codificati in base64 subiscono ancora un’ulteriore elaborazione.<\/p>\n

    Rendering degli Effetti CSS<\/h3>\n

    I browser hanno tre fasi di rendering<\/a>:<\/p>\n

      \n
    1. La fase di layout<\/strong> (o reflow<\/strong>) calcola le dimensioni di ogni elemento e come esso influisce sulla dimensione o sul posizionamento degli elementi intorno ad esso.<\/li>\n
    2. La fase di paint<\/strong> disegna le parti visive di ogni elemento su livelli separati: testo, colori, immagini, bordi, ombre, ecc.<\/li>\n
    3. Il composite<\/strong> disegna ogni strato sulla pagina nell’ordine corretto secondo i contesti di impilamento, posizionamento, z-index, ecc.<\/li>\n<\/ol>\n

      Se non prestate attenzione, i cambiamenti di propriet\u00e0 CSS e le animazioni possono causare un nuovo rendering di tutte e tre le fasi. Alcune propriet\u00e0, come le ombre e i gradienti, sono anche computazionalmente pi\u00f9 costose dei colori del blocco e dei margini.<\/p>\n

      Strumenti di Analisi delle Prestazioni CSS<\/h2>\n

      Ammettere di avere un problema di prestazioni CSS \u00e8 il primo passo sulla strada verso il recupero! Trovare e risolvere le cause \u00e8 un’altra questione.<\/p>\n

      I seguenti strumenti e servizi (non classificati in un ordine specifico) possono aiutarvi a identificare i colli di bottiglia degli stili nel vostro codice.<\/p>\n

      1. Pannello Network in DevTools<\/h3>\n

      Gli specialisti delle prestazioni web passano molto tempo su DevTools<\/a> e nel pannello Network (o Rete)<\/strong> in particolare. DevTools \u00e8 nativo per la maggior parte dei browser moderni<\/a>, ma noi useremo Google Chrome per gli esempi.<\/p>\n

      DevTools pu\u00f2 essere aperto dal menu del browser, di solito da Altri strumenti<\/strong> > Strumenti di sviluppo<\/strong>, o tramite le scorciatoie da tastiera Ctrl | Cmd + Shift + I<\/strong> o F12<\/strong>.<\/p>\n

      Andate alla scheda Rete<\/strong> e verificate che l\u2019opzione Disabilita la cache<\/strong> sia selezionata per evitare che i file nella cache influenzino il rapporto. Potete anche cambiare l’opzione throttling per simulare le reti mobili pi\u00f9 lente.<\/p>\n

      Aggiornate la pagina per visualizzare il grafico a cascata del download e dell’elaborazione:<\/p>\n

      \"Pannello<\/a>
      Pannello di rete di DevTools<\/figcaption><\/figure>\n

      Qualsiasi barra lunga nel grafico \u00e8 motivo di preoccupazione, ma dovreste focalizzarvi in particolare sulle barre lunghe bloccate o in stallo (mostrate in bianco). In questo esempio, la riga evidenziata e tutte le righe seguenti non potevano iniziare il download fino a quando i file CSS e JavaScript che bloccano il rendering non fossero stati elaborati all’inizio della pagina HTML.<\/p>\n

      La casella Filtro<\/strong> vi permette di mostrare o nascondere risorse specifiche:<\/p>\n