Ottenere PageSpeed Insights al 100% con Blogger

Conosci google PageSpeed Insights?
PageSpeed è uno strumento che ti consente di misurare la velocità del tuo sito internet, sia per la versione desktop che mobile.

Un sito (blogger e non) che ha PageSpeed 100/100 (ovvero 100%) è un sito top di gamma per quanto riguarda la sua struttura, un sito più veloce nel caricamento e quindi anche più apprezzato da google ed i motori di ricerca in generale.

Che cosa vuol dire questo?
Semplice: più è alto il voto preso con page speed e meglio verrà posizionato il tuo sito nei risultati di google.

Come ottenere PageSpeed Insights al 100% con Blogger / blogspot

Se hai un sito sviluppato sulla piattaforma blogger, ovviamente, essendo un sistema un po' più chiuso rispetto a wordpress, ottenere 100/100 di PageSpeed è un po' più complicato, ma non impossibile.

Quello che dovrai fare è modificare il codice html del tuo template blogger (andando in Modello -> Modifica HTML).

Cerca la seguente riga:
<b:skin><![CDATA[
e sostituiscila con:
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>

Poi cerca:
]]></b:skin>
e sostituisci con:
</style>

Usando questo barbatrucco (remove bundle css 4 blogger), avrai commentato i seguenti fogli di stile (css), rendendoli non eseguibili dalla pagina:
https://www.blogger.com/static/v1/widgets/454518911-widget_css_bundle.css
https://www.blogger.com/dyn-css/authorization.css?targetBlogID=codice&zx=codice

Perchè è importante commentare queste righe di codice?
Perchè sono dei richiami a fogli di stile esterni che rallentano l'esecuzione della pagina.
Infatti PageSpeed riportava queste testuali parole prima di questo mio intervento:
"Non è stato possibile visualizzare alcun contenuto above-the-fold della pagina senza dover attendere il caricamento delle seguenti risorse. Prova a rimandare o a caricare in modo asincrono le risorse di blocco oppure incorpora le parti fondamentali di tali risorse direttamente nel codice HTML."

Ovviamente però, commentando questi css qualcosa potrebbe non funzionare più bene sul nostro sito.
Quindi possiamo rimediare in due modi, o copiando nel nostro template il codice css che troviamo aprendo il file ...-widget_css_bundle.css, oppure includendoli come li includeva blogger, ma usando il caricamento asincrono.

Nel primo caso si tratta sostanzialmente di scrivere una cosa così dentro il tag <head> del nostro template:
<style type="text/css">
INCOLLA QUI IL CODICE CSS PRESO DA https://www.blogger.com/static/v1/widgets/454518911-widget_css_bundle.css
</style>

Nel secondo caso invece, il codice dovrebbe essere una cosa del genere:
<link async='async' type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/454518911-widget_css_bundle.css' />
Tuttavia ho verificato che contrariamente al discorso javascript, sui css questo metodo sembra non funzionare, quindi meglio adottare il primo metodo ed includere tutto il codice css direttamente dentro il nostro template.

Ecco cosa avevo preso su PageSpeed prima di queste modifiche:

Ed ecco dopo:

Non male vero?
Ma non siamo ancora al 100/100 page, quindi eccoti altre dritte utili per blogger.

Altri suggerimenti per ottenere PageSpeed Insights 100/100

Ecco altri accorgimenti che puoi adottare su blogger (ma non solo), per cercare di ottenere PageSpeed Insights al 100%:

Ottimizza tutte le immagini per il web
Riduci il peso delle immagini con appositi programmi (gratuiti) prima di caricarle online.
Se vuoi saperne di più leggi questo post
Metti il caricamento asincrono per tutte le risorse esterne
Si tratta sostanzialmente di aggiungere il seguente attributo async='async' quando vengono richiamati i file js.
Ecco un esempio:
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
Togli tutti i plugin inutili
Per questo consiglio non occorre essere smanettoni, ma solo avere buon senso.
Inutile riempire il nostro blog blogger di funzioni poco utili che rallentano il sito e che magari non usa nessuno
Rimuovi il widget.js di default da blogger
Puoi provare a far ciò leggendo questo post
Comprimi css e javascript
Questa cosa per fortuna la fa di default il server google, facendo risparmiare banda ai naviganti
Usa la cache per alcune risorse
Qui purtroppo non possiamo far niente su blogger (se si è amministratori di una macchina con su wordpress invece la cosa è diversa), perchè si tratta ad esempio di risorse incluse tipo http://www.google-analytics.com/ga.js, che è il codice di google analytics, il quale è comunque cachato, ma non possiamo comunque cambiarne la durata della scadenza della cache come suggerisce pagespeed (essendo 2 strumenti di google, è da sperare che un giorno riescano a mettersi d'accordo da soli :p).

Se seguirai tutti questi consigli (almeno quelli attuabili per il tuo sito), otterrai un punteggio Google PageSpeed Insights molto alto, per non dire il 100 su 100.
Spero di esserti stato utile (cit.)

PS Se non sai come testare la velocità del tuo sito, leggi questo post.

EDIT 2018

Rifacendo di recente un check su pagespeed mi sono accorto che il mio punteggio di velocità è nuovamente sceso sul 70/80%.
Questo perchè periodicamente blogger mette mano ai propri template / alla propria piattaforma, per aggiungere nuove funzionalità / migliorie.
Ad esempio mi sono trovato questo codice che rallenta la velocità del sito mobile:
<link href='https://www.blogger.com/static/v1/widgets/...-widget_css_mobile_bundle.css' rel='stylesheet' type='text/css'/>
Siccome guardando l'html non ho trovato un giusto metodo per farlo sparire, ho provato ad inserire direttamente io il codice con il giusto attributo async, ed ha funzionato!
Ho infatti aggiunto subito dopo l'apertura del tag <head>, il seguente codice html:
<link async='async' href='https://www.blogger.com/static/v1/widgets/...-widget_css_mobile_bundle.css' rel='stylesheet' type='text/css'/>
Codice che blogger ha digerito e sostituito al suo, migliorando così di fatto il punteggio pagespeed del sito.

Usando quindi questo metodo, in teoria si dovrebbe poter sostituire ogni tag non digerito bene da google.