Qui da Kinsta lavoriamo con molte agenzie e freelancer che gestiscono quotidianamente molti clienti. Non è raro che i clienti o persino un amministratore delegato di un’azienda chiedano all’agenzia o allo sviluppatore di WordPress di migliorare il proprio punteggio di Google PageSpeed Insights. Google fa un ottimo lavoro nel promuovere questo strumento nei confronti dei clienti, e per questo accade spesso che i clienti non capiscano che un punteggio massimo non è poi la fine del mondo. Questo a volte può essere anche frustrante. Tuttavia, oggi vogliamo condividere con voi alcuni suggerimenti e strategie che possono aiutarvi a ottenere un bel 100/100 in Google PageSpeed Insights con il vostro sito WordPress.

Quanto è importante Google PageSpeed Insights?

Google PageSpeed ​​Insights è uno strumento di performance web creato da Google per aiutarvi a identificare facilmente i modi per rendere il vostro sito più veloce e più adatto alle periferiche mobili, seguendo le raccomandazioni sulle migliori pratiche web. Una cosa molto importante da ricordare, però, è che non si dovrebbe sempre ossessionati dall’idea di ottenere il 100/100. Questo potrebbe non essere possibile in tutte le situazioni, e dipende da come è configurato il vostro sito WordPress. Con molti temi e siti multipurpose, con dozzine di script esterni, sarà semplicemente necessaria una quantità di tempo quasi impossibile per ottenere il punteggio massimo. Cosa che, però, è perfettamente normale.

Vi consigliamo di guardare alla velocità del vostro sito, più che ai punteggi. Punteggi con strumenti come Pingdom, GTMetrix e Google PageSpeed ​​Insights possono a volte portare fuori strada. Soprattutto perché alcuni di loro non supportano ancore nemmeno HTTP/2. Ciò che conta davvero è garantire che il vostro sito carichi velocemente e che anche le prestazioni percepite siano all’altezza. Le prestazioni percepite sono date dalla velocità con cui il vostro sito web viene percepito come carico da parte degli utenti.

Google usa PageSpeed ​​Insights quando si tratta di SEO e del fattore di ranking della velocità della pagina oppure quando si tratta della pura velocità di risposta? Questa è stata una domanda interessante sollevata da un SEO a FDP Group Leeds e discussa su Search Engine Roundtable. Gary Illyes, Webmaster Trends Analyst di Google, ha risposto dicendo “Entrambi”.

Ciò è in parte dovuto al fatto che nella maggior parte dei casi, quando si dispone di un sito Web lento, molto probabilmente si avranno molti avvisi in Google Page Speed Insights. Molte delle raccomandazioni vanno di pari passo con il modo in cui si relazionano rispetto ai puti tempi di risposta. Questi non sono sempre correlati al 100%, ma quello che Gary sta probabilmente dicendo è che se hai un sito lento, sì, probabilmente influenzerà le tue classifiche.

Ottenere 100/100 sia su Hosting Condiviso che su Kinsta

Abbiamo pensato che sarebbe stato interessante esplorare il nuovo tema Twenty Seventeen in WordPress 4.7. Questo è il primo tema WordPress predefinito dedicato alle aziende invece che ai tradizionali blog, e questo è entusiasmante! Quindi oggi vi mostreremo come realizzare il punteggio perfetto del 100/100 sia su desktop che su mobile. Abbiamo installato strumenti e servizi comuni utilizzati da molti siti WordPress, come Google Analytics, Akismet, Yoast SEO, ecc. Abbiamo eseguito test sia su un host condiviso a basso prezzo, sia su Kinsta per mostrare quanta differenza ci possa essere quando ci si confronta con un hosting Google Cloud ben configurato rispetto a un ambiente di hosting condiviso.

Sebbene si tratti di un sito di piccole dimensioni, è un buon punto di partenza per comprendere almeno un po’ come funziona Google PageSpeed Insights. Se sei interessato a vedere alcune ottimizzazioni su un tema multiuso più ampio, consulta il nostro post sull’ottimizzazione del tema Total WordPress.

100 punti su Google PageSpeed Insights

100 punti su Google PageSpeed Insights

100/100 Google PageSpeed Insights con Hosting Condiviso

Per il nostro primo sito di test, abbiamo WordPress 4.7 con il tema Twenty Seventeen in esecuzione su un popolare host condiviso a basso budget (Apache). SSL è configurato e sono installati i seguenti plugin.

  • Yoast SEO
  • Akismet

Abbiamo anche Google Analytics in esecuzione all’interno del <body> del nostro file header.php. L’unica modifica che abbiamo apportato è stata l’aggiunta di un’immagine in primo piano al post iniziale del blog predefinito “Hello world!”. Eseguiamo il nostro sito di prova tramite Google PageSpeed Insights e riceviamo subito un punteggio desktop di 69/100 e un punteggio mobile di 58/100. Quindi abbiamo certamente dei miglioramenti da apportare. Analizziamoli tutti per vedere come possiamo ottimizzare il sito.

Hosting condiviso su Google PageSpeed Insights

Punteggio di un hosting condiviso su Google PageSpeed Insights

Abilita la compressione

Cominciamo innanzi tutto con il desktop, poiché molte delle correzioni apportate qui si applicano anche ai dispositivi mobili. La prima raccomandazione di Google PageSpeed Insights che dobbiamo seguire riguarda l’avviso Abilita Compressione.

Abilita la compressione in Google PageSpeed Insights

Avviso di abilitazione della compressione

Secondo Google, per risolvere questo problema è necessario abilitare la compressione Gzip. Sfortunatamente, l’host condiviso non attiva questa funzionalità in automatico sui server, quindi dobbiamo farlo manualmente.

Tutti i browser moderni supportano e negoziano automaticamente la compressione Gzip per tutte le richieste HTTP. L’abilitazione della compressione Gzip può ridurre le dimensioni della risposta trasferita fino al 90%, il che può ridurre in modo significativo il tempo necessario per scaricare la risorsa, ridurre l’utilizzo dei dati per il client e migliorare il tempo al primo rendering delle pagine.

Ci sono un paio di modi si può fare. Il primo e uno dei più semplici è utilizzare un plugin di caching che supporta l’abilitazione Gzip. WP Rocket ad esempio aggiunge automaticamente le regole di compressione Gzip nel file .htaccess usando il modulo mod_deflate. Anche W3 Total Cache permette di abilitare Gzip nella sezione delle prestazioni.

Il secondo modo per abilitare la compressione Gzip è modificando il file .htaccess. La maggior parte degli host condivisi utilizza Apache, in cui è possibile semplicemente aggiungere al file .htaccess il codice che segue. Il file .htaccess si trova nella root del sito WordPress e vi si accede tramite FTP.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Assicuratevi di aggiungerlo al di sotto del contenuto corrente del file .htaccess. Ad esempio:

Aggiungere il codice per GZIP

Aggiungere il codice per la compressione GZIP

Se vi capita di lavorare su NGINX, aggiungete semplicemente questo codice al file nginx.conf.

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Uno strumento come Check Gzip Compression può mostrare come effettivamente sono stati ridotti i miei byte abilitando la compressione Gzip. Ecco un esempio di quanto abbiamo risparmiato nel nostro sito di prova.

Risparmi della compressione GZIP

Risparmi della compressione GZIP

Se eseguiamo di nuovo il nostro sito tramite Google PageSpeed Insights, possiamo vedere che l’avviso di compressione di Gzip è scomparso e il punteggio del desktop è aumentato da 69/100 a 80/100, mentre il nostro punteggio su mobile da 58/100 a 67/100.

PageSpeed Insights dopo GZIP

PageSpeed Insights dopo l’abilitazione della compressione GZIP

Ottimizza le Immagini

La successiva raccomandazione di Google PageSpeed Insights che dobbiamo eliminare è il suggerimento Ottimizza immagini. Il nostro post predefinito “Hello world!” ha un’immagine in primo piano che genera questo errore.

Ottimizzare le immagini in PageSpeed Insights

Avviso “Ottimizza immagini”

Questo è un suggerimento importante e utile. Secondo HTTP archive, a novembre 2016, le immagini rappresentavano in media il 65% del peso totale delle pagine web. Ottimizzare le vostre immagini può essere uno dei modi più semplici per vedere miglioramenti delle prestazioni dei vostri Web WordPress.

Ci sono un paio di modi per eliminare questa notifica. Il primo è usare un plugin per l’ottimizzazione delle immagini. Un plug-in può effettivamente provvedere a ottimizzare l’intera libreria multimediale di WordPress, oltre che ottimizzare automaticamente i file media al momento del caricamento. Abbiamo già un’intera guida su come ottimizzare le immagini in WordPress. Di seguito sono riportati alcuni plugin per l’ottimizzazione delle immagini:

Questi plug-in risolvono il problema, anche se è possibile comprimere le immagini prima di caricarle, con uno strumento come Adobe Photoshop, Gimp o Affinity Photo. Qui sotto è riportata l’immagine in primo piano che genera quella notifica. Possiamo comprimerla in anticipo, ridimensionandola e abbassandone la qualità. È meglio mantenere le immagini il più piccole possibile. Questa immagine era originariamente di 2,32 MB, dopo la riduzione e la compressione, ora è 99,38 kB. Ricordate, è meglio caricare immagini nella giusta dimensione e non affidarsi a CSS per ridimensionarle. Questo rallenta il sito.

Comprimere le immagini con Affinity Photo

Comprimere le immagini con Affinity Photo

Se eseguiamo di nuovo il nostro sito tramite Google PageSpeed Insights, possiamo vedere che ora l’avviso di ottimizzazione delle immagini non c’è più ed è aumentato il punteggio del desktop da 80/100 a 88/100 e il punteggio mobile da 67/100 a 73/100. Stiamo facendo progressi!

PageSpeed Insights dopo la compressione delle immagini

PageSpeed Insights dopo la compressione delle immagini

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

La successiva notifica di Google PageSpeed Insights che dobbiamo rimuovere è il suggerimento Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold. Su questo argomento abbiamo un intero post approfondito sulla questione JavaScript e CSS che bloccano il rendering.

Elimina JavaScript e CSS che bloccano il rendering

Avviso “Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold”

Quando un browser carica una pagina Web, le risorse JavaScript e CSS di solito impediscono la visualizzazione della pagina finché non vengono scaricate ed elaborate dal browser. Alcune risorse devono essere scaricate ed elaborate prima di visualizzare qualsiasi cosa. Tuttavia, molte risorse CSS e JavaScript sono condizionali, cioè vengono applicate solo in casi specifici, o semplicemente non sono necessarie per il rendering dei contenuti above the fold. Per offrire l’esperienza più rapida possibile per i vostri utenti, dovreste cercare di eliminare tutte le risorse che bloccano il rendering che non sono necessarie a visualizzare il contenuto above-the-fold.

Per quanto riguarda il Render-blocking Javascript, Google fornisce tre suggerimenti:

  • Se non avete molto codice JavaScript, per eliminare questo avviso è possibile inserirlo inline. Potete inserire inline JavaScript con un plug-in come Autoptimize. Tuttavia, ciò è praticabile solo per siti molto piccoli. La maggior parte dei siti WordPress ha abbastanza codice JavaScript da rendere lenta questa soluzione.
  • Il secondo è caricare il vostro codice JavaScript in modalità asincrona. Il caricamento asincrono di Javascript consiste essenzialmente nello scaricare il file durante il parsing HTML e mettere in pausa il parser per eseguirlo solo al termine del download.
  • Il terzo suggerimento è quello di posticipare JavaScript. Anche l’attributo defer scarica il file durante il parsing HTML, ma lo esegue solo dopo che il parsing stesso è stato completato. Inoltre, gli script con questo attributo vengono eseguiti in ordine di apparizione nella pagina. Maggiori informazioni sulle differenze tra async e defer.

Nel nostro esempio, faremo in modo che il nostro JavaScript venga caricato in modo asincrono. Per fare questo useremo un plugin gratuito chiamato Async JavaScript. Potete scaricarlo dalla repository di WordPress o cercarlo all’interno della dashboard di WordPress alla voce “Plugin > Aggiungi nuovo”. Al momento in cui si scrive, il plugin vanta oltre 9.000 installazioni attive con una valutazione di 4,2 stelle su 5. Essenzialmente il plugin aggiunge l’attributo ‘async’ o ‘defer’ a tutto il codice JavaScript caricato dalla funzione wp_enqueue_script di WordPress. Lo sviluppatore distribuisce anche una versione premium che consente di scegliere gli script che si desidera rendere asincroni o postecipare.

Esempio di Async

<script src="file1.js" async></script>

Esempio di Defer

<script src="file1.js" defer></script>

Dopo l’installazione è sufficiente accedere alle impostazioni e abilitare JavaScript asincrono.

Async JavaScript

Async JavaScript

Per i siti più grandi l’esclusione degli script della versione premium può tornare molto utile. In questo esempio non ne avremo bisogno, ma, se avete un sito con un sacco di codice JavaScript, molto probabilmente finirete per fare dei danni se impostate semplicemente tutto su Async o Defer. In tal caso sarà necessario risolvere i problemi, almeno con quelli che vi sarà possibile.

Esclusioni Async

Esclusioni Async

Se non si desidera utilizzare un plugin, ci sono alcune altre alternative. Come, ad esempio, aggiungere il seguente codice al vostro file functions.php.

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Ecco altri due post in cui si discute dell’aggiunta di async o defer senza l’uso di un plug-in:

Gestiamo nuovamente il nostro sito tramite Google PageSpeed Insights e, come si può vedere, la notifica per JavaScript e CSS che bloccano la visualizzazione nei contenuti è stata eliminata e ci rimane l’avviso Optimize CSS Delivery.

Ottimizzare la consegna del CSS

Avviso Optimize CSS delivery

Potete vedere che il primo CSS che dobbiamo ottimizzare è quello dei font di Google (fonts.googleapis.com). Il CSS blocca il rendering di default, e questo riguarda anche i CSS provenienti dai web font. Per risolvere questo problema installeremo il plug-in gratuito Disable Google Fonts. L’autore del plugin, Milan Dinić, lo ha aggiornato di recente e ora include il nuovo font di Twenty Seventeen, Libre Franklin. Dopo aver installato il plugin, i vostri Google Fonts ovviamente non funzioneranno. Quindi dovrete andare su Google Fonts e prelevare il codice da incorporare manualmente. Selezioniamo le stesse dimensioni dei font incluse di default nel tema Twenty Seventeen.

<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
Google Fonts Embed

Google Fonts Embed

Quindi dovrete aggiungerlo al vostro file footer.php, subito prima del tag . Nota: così facendo si incapperà nel cosiddetto FOUT, che è ciò a cui ci si riferise quando si parla di flash di testo non stilizzato. Ma così di si libererà anche del problema del blocco del rendering. Sarete voi a decidere se nei vostro sito il FOUT sia un’esperienza accettabile per i vostri visitatori. É anche possibile utilizzare il Web Font Loader di Google.

Google font nell footer di WordPress

Google font nell footer di WordPress

Abbiamo eseguito nuovamente il nostro sito di prova tramite Google PageSpeed Insights e ora sotto l’avviso Optimizzare la Consegna di CSS ci rimane da modificare un’ultima cosa, il file style.css.

Avviso Optimize CSS Delivery sulle query string

Avviso Optimize CSS Delivery sulle query string

Uno dei modi più semplici di eliminare questa notifica è l’utilizzo di un plugin WordPress gratuito chiamato Autoptimize, sviluppato da Frank Goossens.

Autoptimize

Il plugin Autoptimize per WordPress

Questo plugin è abbastanza leggero, solo 176 KB per la precisione. Al momento in cui si scrive, il plugin vanta oltre 400.000 installazioni attive con una valutazione di 4,5 su 5 stelle. Il plugin è di aiuto nella concatenazione degli script, nella minimizzazione, nell’impostazione della scadenza delle intestazioni e nella possibilità di spostare gli stili nell’header e gli script nel footer delle pagine. Questo plugin è pienamente compatibile con il plugin Async JavaScript che è stato utilizzato in precedenza.

Dopo aver installato il plugin, cliccate sulle impostazioni e selezionate “Ottimizzare il codice CSS”. Quindi fate clic sulla scheda Avanzate e attiva anche “Aggregare anche il CSS inline” e “Incorpora tutti i CSS”. Nota, a seconda del tema su cui state lavorando, potrebbe non essere consigliabile il ricorso a questo metodo. Per i siti di grandi dimensioni, l’incorporazione può essere negativa, nel qual caso sarebbe meglio semplicemente ignorare questo particolare avviso di Google PageSpeed Insights. E ricordate che con HTTP/2, la concatenazione a volte può in realtà rallentare il vostro sito.

Ottimizzare il codice CSS

Ottimizzare il codice CSS

Consigliamo inoltre di abilitare l’opzione “Ottimizzare il codice HTML”.

Ottimizzare il codice HTML in Autoptimize

Ottimizzare il codice HTML

Se eseguiamo nuovamente il nostro sito tramite Google PageSpeed Insights, possiamo vedere che l’avviso Elimina JavaScript e CSS che bloccano il rendering dei contenuti above-the-fold è ora completamente andato! É stato anche corretto l’avviso Minimizza CSS, che era riportato di sotto e non ci eravamo ancora arrivati. Abbiamo aumentato il punteggio del desktop da 88/100 a 92/100 e il nostro punteggio da mobile 73/100 a 89/100. Ci siamo quasi.

PageSpeed Insights dopo l'ottimizzazione di JS e CSS

PageSpeed Insights dopo l’ottimizzazione di JS e CSS

Sfrutta il caching del browser

La successiva raccomandazione di Google PageSpeed Insights da correggere è la notifica Sfrutta il caching del browser. Abbiamo già un post approfondito sul problema del caching del browser, per quello che riguarda WordPress.

Sfruttare la cache del browser in PageSpeed Insights

Avviso “Sfrutta il caching del browser”

Il motivo più comune per cui viene attivato la notifica diattivazione della cache del browser è che il server Web non dispone degli header appropriati. Nello screenshot qui sopra si può vedere che tutti i nostri script interni recano un avviso “scadenza non specificata”. Per quanto riguarda il caching, vengono utilizzati due metodi principali, Cache-Control header ed Expires header. Mentre l’header Cache-Control attiva il caching dal lato client e imposta la durata massima di una risorsa, l’header Expires viene utilizzato per specificare un momento specifico nel tempo dal quale la risorsa non è più valida.

Non è necessario aggiungere entrambe le intestazioni, in quanto sarebbe un po’ ridondante. Cache-Control è più recente e di solito è il metodo consigliato, tuttavia alcuni strumenti di misurazione delle performance Web come GTmetrix continuano a verificare le intestazioni Expires. Questi sono tutti esempi, potete cambiare tipi di file, scadenze, ecc. in base alle vostre esigenze. Qui di seguito sono riportate alcune opzioni. Aggiungeremo semplicemente le intestazioni di scadenza in Apache sul nostro host condiviso utilizzato per questo tutorial.

Aggiungere il Cache-Control Header in Nginx

È possibile aggiungere intestazioni Cache-Control in Nginx aggiungendo quanto segue alla posizione o al blocco di configurazione del server.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Aggiungere gli Expires Headers in Nginx

È possibile aggiungere le intestazioni Expires in Nginx aggiungendo quanto segue al blocco del server. In questo esempio, si può vedere come specificare differenti tempi di scadenza in base ai tipi di file.

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Aggiungere il Cache-Control Header in Apache

Si possono aggiungere le intestazioni Cache-Control in Apache aggiungendo quanto segue al file .htaccess.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

Aggiungere gli Expires Headers in Apache

É possibile aggiungere le intestazioni Expires in Apache aggiungendo quanto segue al file .htaccess.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Ricordate che abbiamo abilitato la compressione Gzip in precedenza? Di seguito è riportato l’aspetto del nostro file .htaccess dopo aver aggiunto anche le intestazioni di scadenza. Lo posizioniamo semplicemente al di sotto del blocco che controlla la compressione.

Header expires

Codice degli header expires

Eseguiamo nuovamente il nostro sito di test tramite Google PageSpeed Insights e ora sotto l’avviso Sfrutta il caching del browser ci rimane solo una cosa, ed è il nostro script di Google Analytics. Questo è un po’ ironico visto che questo è uno script proprio di Google. Il problema è che hanno impostato un tempo di cache basso di 2 ore su questa risorsa, come mostrato nello screenshot qui sotto. Probabilmente lo fanno perché se per qualche ragione dovessero modificare qualcosa, vogliono che tutti gli utenti avvertano le modifiche il più velocemente possibile. Comunque c’è un modo per aggirare questo problema, ed è ospitare localmente lo script di Google Analytics. State attenti, però, perché questa soluzione non è supportata da Google.

Alle prese con i tempi di inattività e problemi di WordPress? Kinsta è la soluzione di hosting progettata per farvi risparmiare tempo! Scopri i nostri servizi
Sfruttare la cache del browser con Google Analytics

Sfruttare la cache del browser con Google Analytics

C’è un piccolo ma ottimo plugin gratuito chiamato Complete Analytics Optimization Suite, creato e sviluppato da Daan van den Bergh, che consente di ospitare Google Analytics localmente sul tuo sito Web WordPress.

Complete Analytics Optimization Suite

Il plugin CAOS per WordPress

Potete scaricare Complete Analytics Optimization Suite dalla repository di WordPress o cercarlo sotto “Aggiungi nuovi” plugin nella dashboard di WordPress. Al momento in cui scriviamo, il plugin vanta oltre 10.000 installazioni attive con una valutazione di 5 stelle su 5. Il plugin consente di ospitare localmente il file JavaScript di Google Analytics (analytics.js) e di tenerlo aggiornato usando wp_cron(). Altre caratteristiche includono la possibilità di rendere facilmente anonimo l’indirizzo IP dei visitatori, impostare una frequenza di rimbalzo regolata e il posizionamento dello script (header o footer).

Installate il plug-in, inserite il vostro ID di tracking di Google Analytics, e il plugin aggiunge il codice di tracking di Google Analytics al vostro sito Web WordPress, scarica e salva il file analytics.js sul vostro server e lo aggiorna utilizzando uno script programmato in wp_cron(). Si consiglia inoltre di impostarlo per essere caricato nel footer. Nota: questo plugin non funziona con altri plugin WordPress di Google Analytics.

Google Analytics locale

Google Analytics locale

Se eseguiamo nuovamente il nostro sito tramite Google PageSpeed Insights, possiamo vedere che la notifica Sfrutta il caching del browser ora è completamente sparita! Abbiamo incrementato il punteggio del desktop da 92/100 a 97/100 e il punteggio del mobile da 89/100 a 96/100. Siamo così vicini da poter quasi assaggiarlo.

PageSpeed Insights dopo lo sfruttamento della cache del browser

PageSpeed Insights dopo aver corretto lo sfruttamento della cache del browser

Riduci il tempo di risposta del server

La successiva notifica di Google PageSpeed Insights che dobbiamo eliminare è il suggerimento Riduci tempo di risposta del server. Molte volte questo problema si verifica quando qualcuno ha un piano di hosting condiviso a basso costo. Il server non è veloce e Google lo sa. Quindi, per risolvere questo problema, è necessario implementare un tipo di caching che acceleri le cose. Ci sono un sacco di ottimi plugin per la cache. Nel nostro esempio, utilizzeremo il plugin gratuito Cache Enabler del team di KeyCDN.

Cache Enabler

Plugin Cache Enabler per WordPress

Al momento in cui si scrive, Cache Enabler vanta oltre 30.000 installazioni attive con 4,6 stelle su 5. Si tratta di un leggero plugin di caching per WordPress che rende più veloce il vostro sito Web generando file HTML statici e supporto WebP. Non ci sono impostazioni da attivare, basta installarlo e il plugin è a posto. Questo plugin è pienamente compatibile con i plugin Async JavaScript e Autoptimize, analizzati in precedenza. Se volete una maggiore velocità, consigliamo di aggiungere anche lo snippet avanzato per bypassare PHP.

Se eseguiamo nuovamente il nostro sito tramite Google PageSpeed Insights, possiamo vedere che l’avviso Riduci tempo di risposta del server è andato! Abbiamo alzato il punteggio del desktop da 97/100 a 99/100 e il punteggio del mobile da 96/100 a 99/100. Stiamo per tagliare il traguardo.

PageSpeed Insights dopo la correzione dei tempi di risposta

PageSpeed Insights dopo la correzione dei tempi di risposta

Normalmente non vedrete mai la raccomandazione “Riduci tempo di risposta del server” qui su Kinsta. Ma è importante notare che ci sono decine di fattori che potrebbero potenzialmente rallentare la risposta del vostro server: tra cui lente interrogazioni del database da parte di plugin, framework, librerie, carenza di risorse della CPU o mancanza di memoria. Noi utilizziamo New Relic per aiutare i clienti a capire meglio da dove potrebbe provenire il problema.

Minimizza JavaScript

L’ultima notifica di Google PageSpeed Insights che dobbiamo eliminare è il suggerimento Minimizza JavaScript.

Avviso Minimizza JavaScript

Avviso Minimizza JavaScript

Per eliminarlo, torneremo nelle impostazioni del plugin Autoptimize e semplicemente abiliteremo l’opzione Ottimizza codice JavaScript. Poiché ora avete un plugin di caching in esecuzione, potreste anche dover svuotare la cache dopo questa operazione per vederne i risultati.

Autoptimize Ottimizzare il codice JavaScript

Autoptimize Ottimizzare il codice JavaScript

E questo è tutto! Abbiamo portato con successo il tema WordPress Twenty Seventeen da 69/100 a 100/100 sia su dispositivi mobili che desktop su un host condiviso a basso costo.

100/100 su Google PageSpeed Insights

Punteggio 100/100 su Google PageSpeed Insights

Ed ecco il punteggi per dispositivi mobili. Non abbiamo dovuto fare nulla di più per i dispositivi mobili. Portare la versione desktop a 100/100 ha aumentato automaticamente anche i punteggi della nostra versione mobile e della user experience a 100/100.

100/100 mobile Google PageSpeed Insights

Punteggio dispositivi mobili 100/100 su Google PageSpeed Insights

Abbiamo anche un prima e un dopo con i test di velocità di Pingdom.

Prima dell’Ottimizzazione del Test di Velocità di PageSpeed Insights

Ecco un test di velocità di Pingdom prima che fossero eseguite le ottimizzazioni sull’host condiviso.

Test velocità prima dell'ottimizzazione in PageSpeed

Test velocità prima dell’ottimizzazione in PageSpeed

Dopo l’Ottimizzazione del Test di Velocità di PageSpeed Insights

Ecco un test di velocità di Pingdom dopo aver eseguito le ottimizzazioni sull’host condiviso.

Test di velocità dopo le ottimizzazioni in PageSpeed

Test di velocità dopo le ottimizzazioni in PageSpeed

100/100 in Google PageSpeed Insights con Kinsta

Il nostro secondo sito di prova è stato configurato esattamente allo stesso modo del primo. È semplicemente su un dominio diverso. Abbiamo WordPress 4.7 con il tema Twenty Seventeen in esecuzione sui nostri server Kinsta (NGINX). SSL è configurato e sono installati i seguenti plugin.

  • Yoast SEO
  • Akismet

Google Analytics è in esecuzione all’interno del <body> del nostro file header.php. L’unica modifica che abbiamo fatto è stata l’aggiunta di un’immagine in primo piano al post predefinito “Hello world!”. Eseguiamo il nostro sito di prova tramite Google PageSpeed ​​Insights e riceviamo subito un punteggio desktop di 73/100 e un punteggio mobile di 63/100. È importante notare che, rispetto al sito di prova su host condiviso di cui sopra, ci sono già molti avvisi che vengono risolti immediatamente, come ad esempio:

  • Abilita la compressione (Kinsta ha già abilitato Gzip su tutti i server, nessuna necessità di abilitare)
  • Riduci i tempi di risposta del server (Kinsta è già molto veloce, ben all’interno dei parametri accettabili di Google, senza alcuna ottimizzazione)
  • Header Expires (non è necessario abilitarle perché Kinsta attiva gli header della cache a livello di server)
PageSpeed Insights con host WordPress gestito

PageSpeed Insights con host WordPress gestito

Su Kinsta dovrete seguire solo alcuni dei suggerimenti di prima:

C’è voluta meno della metà del tempo per far sì che il nostro sito su Kinsta ottenesse il punteggio 100/100 perché c’erano solo pochi passi da compiere.

100/100 su PageSpeed Insights con Kinsta

100/100 su PageSpeed Insights con Kinsta

E qui ci sono i punteggi per i dispositivi mobili.

100/100 PageSpeed Insights mobile con Kinsta

100/100 PageSpeed Insights per dispositivi mobili con Kinsta

Abbiamo anche un prima e un dopo con i test di velocità di Pingdom.

Prima dell’ottimizzazione del test di velocità di PageSpeed Insights

Ecco un test di velocità di Pingdom prima che fossero eseguite tutte le ottimizzazioni su Kinsta. Si noti che il sito non ottimizzato su Kinsta era oltre 200ms più veloce dell’host condiviso ottimizzato!

Test di velocità prima delle ottimizzazioni di PageSpeed

Test di velocità prima delle ottimizzazioni di PageSpeed

Dopo l’ottimizzazione del test di velocità di PageSpeed Insights

Ed ecco un test di velocità di Pingdom dopo aver effettuato le ottimizzazioni su Kinsta.

Test di velocità dopo le ottimizzazioni di PageSpeed

Test di velocità dopo le ottimizzazioni di PageSpeed

Miglioramenti aggiuntivi di PageSpeed

In questo tutorial stiamo semplicemente ottimizzando per Google PageSpeed ​​Insights. In realtà, avremmo potuto ridurre di più i nostri tempi di caricamento se avessimo fatto anche quanto segue:

E, naturalmente, abbiamo un sacco di ottimi consigli nella nostra guida per principianti all’ottimizzazione delle prestazioni dei siti web.

Riepilogo

L’obiettivo di questo tutorial era quello di spiegare e comprendere meglio cosa significano le notifiche di Google PageSpeed ​​Insights e cosa si può fare per rimuoverle. Una volta che le avete comprese meglio, potete utilizzare alcune di queste tecniche sui vostri siti maggiori. Naturalmente, con i siti più grandi probabilmente non riuscirete a totalizzare quel perfetto 100/100, il che va perfettamente bene! Oppure, se lo fate, ci vorrà un bel po’ di lavoro. Raccomandiamo semplicemente di implementare ciò che è possibile, e molto probabilmente vedrete dei miglioramenti nella velocità. Ricordate che la velocità del vostro sito, assieme alle prestazioni percepite, è ciò che conta davvero. Non fatevi ossessionare troppo dai punteggi.

È anche importante notare le differenze viste sopra quando si mettono a confronto hosting condiviso e l’ambiente per WordPress messo a punto da Kinsta. Siamo più veloci rispetto alla maggior parte degli host condivisi ottimizzati. Dovreste chiedervi: quanto vale veramente il mio tempo? Se volete semplicemente essere subito operativi, l’ambiente di hosting gestito di Kinsta può fare per voi.

La prossima volta che un cliente vi chiede di migliorare i punteggi, ora avete alcuni suggerimenti aggiornati che vi aiuteranno a farlo. E se ci siamo persi qualcosa di importante, fatecelo sapere qui sotto nei commenti. Rimanete sintonizzati per casi di studio su larga scala con Google PageSpeed ​​Insights che riporteremo in futuro.