WordPress: Migliorare le performance (PageSpeed) del sito rimuovendo CSS inutilizzati

Google Speed Update: La velocità di apertura di un sito influenza il suo posizionamento nelle SERP

Il 17 Gennaio 2018, Google ha annunciato ufficialmente il lancio dello “Speed Update”. La velocità di caricamento delle pagine web è divenuto quindi un fattore di ranking nelle SERP.
La corsa ai ripari è seguita tuttavia dopo lo stravolgimento del posizionamento che ha colpito milioni di siti a partire dal primo agosto 2018.

Misurare la velocità dei siti

Ci sono due tipologie di strumenti per misurare la velocità di apertura dei siti:

Approfondire oltre questo discorso non rientra nell’ambito di questo articolo.

Capire come interpretare i dati

Partiamo col nominare uno dei tool più conosciuti nel settore: GTMetrix è gratuito, semplice da usare e veloce. Un prodotto prezioso per risolvere le problematiche più note, ma basarsi unicamente sul punteggio (PageSpeed Score, YSlow Score) che fornisce sarebbe un errore.

Nell’immagine a fianco vediamo infatti come l’homepage di questo sito, prima dell’ottimizzazione, offrisse comunque punteggi piuttosto elevati (A e 100% è infatti il voto migliore).

L’ottimizzazione delle performance di un sito è un’attività che richiede diversi tipi di competenze (da sistemistiche a quelle da sviluppatore) per questo GTMetrix si basa su una checklist di punti semplificata.

Il punteggio dato da GTMetrix è un valore riassuntivo poco indicativo, pensato per utenti non esperti.

Anche dopo aver ottimizzato molti di quei punti la velocità di caricamento potrebbe essere deludente.

Una misurazione più precisa tramite un altro tool scritto da Google

La velocità è misurata in maniera più precisa e dettagliata da un’altra schermata, quella denominata “Waterfall” che vedremo successivamente, ma prima  voglio mostrare i risultati ottenuti con Google Pagespeed Insight.

Il sito è lento se visitato tramite 3G (cellulare) e considerato che il 50 dei dispositivi che visitano oggi i siti sono appunto smartphone il problema va tenuto in considerazione.

Lo stesso tool ci mostra inoltre quali sono le cause per cui decide di assegnare un voto così basso alla navigazione degli utenti tramite cellulare:

Uno dei problemi è il codice CSS

 

Il 90% del css è inutilizzato!

 

Cos’è il CSS?

CSS sta per Cascading Style Sheet (in italiano fogli di stile a “cascata”) ed è un linguaggio di programmazione usato per definire la formattazione pagine web.

L’introduzione del CSS si è resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione e permettere una programmazione più chiara e facile da utilizzare

Perché il 90% del CSS è inutilizzato? Vuol dire che è inutile?

Da un altro strumento di Google (il Developer Tool dentro Chrome) non solo troviamo una conferma che il 90% del CSS è effettivamente superfluo, ma possiamo anche visualizzare uno di questi fantomatici fogli di stile (è un sinonimo di CSS). Scopiarmo così che un foglio CSS è lungo 40mila righe ed è in un formato leggibile dall’uomo. In pratica un CSS è un normalissimo file di testo, scritto seguendo una serie di regole che lo rendono interpretabile da un pc. Solo che è così lungo da pesare 1 Megabyte e da essere lungo il doppio della divina commedia (408.476 caratteri).

40 mila righe di css

Di chi è la colpa?

Il codice CSS è parte della presentazione grafica del sito. E’ il “tema” di WordPress che abbiamo scelto a introdurlo. Ma perché i programmatori che l’hanno scritto hanno lasciato così tanto codice inutilizzato?

La risposta è semplice: dal backend di WordPress si possono scegliere diversi stili.


Le alternative per il programmatore che ha scritto il tema erano 2:

  • Creare un CSS ottimizzato dinamicamente a seconda delle scelte fatte dall’Admin di WordPress (ad esempio tramite Composer, Grunt, Webpack o una soluzione proprietaria)
  • Creare un mega CSS enorme che comprendesse all’interno lo stile per TUTTI i possibili setting che l’Admin ha a disposizione

Un tema WordPress costa 40$ – 60$ e, beh.. se state pensando che la stragrande maggioranza dei programmatori scelgono di non investire energie per creare un valore che non viene percepito dall’utente, ci avete preso.

Come ottimizzare le performance dei CSS

Anche con l’ausilio dei Developer Tools non è affatto semplice ripulire il codice CSS senza rischiare di rompere il layout dei siti. Nemmeno per un programmatore esperto poiché:

  • Bisogna controllare che uno stile CSS non venga usato nelle diverse pagine del sito (post, homepage, categorie, tag, archivi vari, ecc)
  • Nè il browser, nè tool di reporting possono registrare un errore se abbiamo cancellato parti di CSS necessari

Tool automatici commerciali: Unused CSS

Esistono tuttavia (pochi al momento) tool specializzati che semplificano enormemente questa attività. Un esempio è UnusedCSS

Il tool si occupa di scandire (Web crawling) il sito in automatico e rende disponibili delle versioni ridotte dei CSS. Tiene quindi conto del CSS richiesto dalle diverse pagine del sito.

Qui vi mostriamo come procedere all’atto pratico:

Abbiamo provato ad utilizzarlo e misurare le performance prima e dopo l’ottimizzazione. Come potete vedere dall’immagine prima e dopo indubbiamente c’è stato un interessante miglioramento. Anche se rimangono comunque aperti scenari futuri per ulteriori ottimizzazioni.

Un’altra funzionalità molto interessante è quella offerta dallo strumento “View Results” (visualizza risultati) che permette di navigare su una versione di anteprima del sito con i CSS ottimizzati.

Dato che tutto risultava corretto, subito dopo abbiamo caricato i nuovi CSS ottimizzati sul sito tramite FTP e abbiamo navigato sul sito per controllare che non il sito non avesse subito danni.

Da questo punto di vista – essendo ormai tutti i temi di tipo Responsive – è fondamentale, come mostriamo nel video, controllare che il layout grafico del sito continui a funzionare alle differenti risoluzioni usate dai vari device.

 

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.