Il primo step del processo di ottimizzazione delle performance di un sito web consiste nell’identificare le risorse critiche per poi procedere a snellire il percorso di rendering. Tra le operazioni che questo comporta vi è senza dubbio l’audit delle regole CSS.
Il parsing del CSS è necessario per la realizzazione del CSSOM. Quest’ultimo, combinato con il DOM, serve a dar vita al render tree per poi procedere al layout ed al painting dei nodi e delle risorse che compongono la pagina web.
Maggiore è il quantitativo di CSS maggiore sarà il tempo necessario per la realizzazione del CSSOM e quindi dell’intero percorso di rendering.
In particolar modo nei CMS espandibili con plugin di terze parti, come WordPress, elevata è la percentuale di CSS superfluo che mai verrà utilizzato per elaborare la pagina. Tuttavia viene scaricato ed elaborato, con un consistente spreco di risorse e banda.
In questo video tutorial vedremo come identificare il CSS inutilizzato da una pagina web per poi estrarre solo ed esclusivamente le regole CSS necessarie per il corretto rendering della pagina. Tali regole dovranno successivamente essere messe a disposizione del browser il prima possibile affinché la costruzione del CSSOM possa procedere rapidamente e senza intoppi.
Per identificare la quantità di regole CSS inutilizzate da una specifica pagina web occorre aprire la DevTools di Google Chrome e cliccare sul tab Legacy Audits.
Se il tab non è visibile, cliccare sul menu in alto a destra della DevTools, spostare il cursore del mouse su More tools e poi cliccare sulla voce Legacy Audits. Versioni meno recenti di Google Chome chiamano questa opzione semplicemente Audits.
Spuntare le opzioni Web Page Performance e Reload Page and Audit on Load e cliccare su Run. A questo punto la pagina verrà ricaricata ed inizierà il processo di elaborazione che visualizzerà il quantitativo di regole CSS inutilizzate e consentirà di vedere, CSS per CSS, le singole regole ed annotarle.
Nell’esempio riportato nell’immagine successiva, il quantitativo globale di regole CSS inutilizzate corrisponde al 63%. Ciò sta a significare che solo il 37% del CSS caricato serve per l’elaborazione della pagina, le rimanenti regole sono inutili e superflue.
Per estrapolare questo 37% di CSS utilizzeremo un’estensione di Google Chrome denominata CSS Used. L’utilizzo è semplicissimo:
Lo stesso procedimento può essere utilizzato per estrapolare anche il solo quantitativo di regole necessarie per il rendering del contenuto in above the fold.
Le regole CSS estratte possono essere utilizzate durante la fase di creazione della personale politica di ottimizzazione del percorso di rendering critico.
Cloudflare si antepone tra il server di origine e la richiesta dell'utente per servire file…
L'ottimizzazione del database MySQL è tra i tuning più importanti in tema di performance web.…
Cloudflare è un ottimo servizio utilizzato sia per migliorare le performance in caso di traffico…
Una delle tante pratiche di ottimizzazione del tempo di caricamento pagina quando si riceve un…
WebP è un formato di immagine sviluppato da Google ed appositamente pensato per ottimizzare il…
Qualche settimana fa abbiamo visto cosa sono i service worker e come utilizzarli per creare…