[Update] Come ottenere il 100 / 100 di PageSpeed
Cosa ho imparato oggi: un semplice “trucco” per ottenere il 100 / 100 (mobile e desktop) sul Google PageSpeed.
Oltre a seguire le solite indicazioni (caching, minifying, compressione), ho spostato tutti i riferimenti ai CSS esterni DOPO il tag </HTML> e ho usato il tool Critical Path CSS Generator di sitelocity per generare un estratto di codice CSS per i soli elementi strutturali da inserire in un tag STYLE nell’HEAD.
Visto che in giro ci sono tanti “geni” che pensano sempre di saperne di più ho dovuto aggiornare questo post.
- La pagina ottimizzata è “semplice”. Si tratta di una pagina basata sul Jumbotron di Bootstrap 4 beta 2. Di default il PageSpeed mi dava un valore intorno ai 50 (su mobile), cosa che ho ritenuto folle così mi sono messo a studiare per migliorarlo.
- Ho fatto tutte le ottimizzazioni suggerite da Google, inclusa quella di mettere i riferimenti ai CSS dopo l'</HTML> (Si, hai letto giusto, e si lo dice Google nella documentazione italiana del PageSpeed). Perchè ho usato questa soluzione invece di un late loading tramite Javascript? Perchè è un progetto messo in piedi in mezza giornata e non avevo voglia di perdere altro tempo (vedi sotto).
- Dopo aver fatto tutto questo, ottenevo comunque intorno al 70 / 100 perchè l’above the fold non veniva renderizzato senza appoggiarsi al CSS esterno. Inoltre il rendering era “progressivo”, la pagina prima appariva senza stile e dopo qualche istante veniva renderizzata correttamente (cosa alquanto fastidiosa). Cercando ancora un po’ ho trovato il tool Critical Path CSS Generator di sitelocity per generare un estratto di codice CSS per i soli elementi strutturali da inserire in un tag STYLE nell’HEAD. L’ho implementato e, oltre ad aver risolto il problema relativo al rendering progressivo, ho raggiunto il 100 / 100.
Con questo non sto dicendo che il PageSpeed sia una metrica su cui basarsi nelle decisioni di business, ne che uno ci si debba ammattire, ne che sia facile da ottimizzare su ogni sito. Il mio obiettivo iniziale non era ottenere 100 / 100 ma di migliorare un po’ l’usabilità della pagina e magari far felice l’algoritmo di Google (non mi aspettavo di certo di ottenere questo risultato). Dall’altro canto, se uno sviluppa un progetto da zero, la strategia migliore dovrebbe essere quella di partire tenendo a mente il PageSpeed ed evitando di introdurre del codice (anche solo dal punto di vista di come lo si sviluppa) che agli occhi di Google penalizza l’esperienza utente.
Post Scriptum
Per tutti coloro che la menano con il discorso che un codice HTML così non è valido (etc. etc.), per prima cosa non sono io ad averlo “inventato”, ho seguito l’esempio offerto da Google, in seconda istanza, c’è sempre la soluzione Javascript / No Script. Per cui:
<noscript data-css="true">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="/css/narrow-jumbotron.min.1.css">
<link rel="stylesheet" href="/font/css/open-iconic-bootstrap.min.1.css">
</noscript>
...
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', document.querySelector("noscript[data-css]").innerText);
});
</script>
Post Post Scriptum
La cosa più importante del “trucco” alla base di questo articolo era l’utilizzo del tool di sitelocity per generare i CSS strutturali da integrare all’interno dell’HTML ma chissà com’è che molti si sono fissati con il discorso dell’HTML. Giuro, non capisco…
Quando incontro qualcosa che viola le mie aspettative positivamente cerco di capire per quale motivo è successo. Negli ultimi anni, invece, continuo a vedere gente che fa di tutto per cercare di abbattere in un modo o nell’altro chi ha mostrato loro che esistono delle alternative al loro modo di pensare.
La prossima volta che vedi qualcosa online che ti fa scattare l’invidia, invece di chiederti “come faccio a sputtanarne l’autore”, prova a domandarti “come diavolo ci è riuscito” e “come posso farlo anche io”. Ti assicuro, ciò ti darà molta più soddisfazione e crescita nel lungo periodo rispetto aver provato a sbugiardare il primo che ti capita a tiro.
