Google PageSpeed Insights è senza dubbio uno strumento utile per i webmaster, gli sviluppatori e i proprietari di siti di ogni tipo. Tuttavia, abbiamo notato che molti passano ore a farsi ossessionare dall’ottimizzazione dei propri siti, per cercare di ottenere il punteggio di 100/100 in questo test.
La verità è che non è questo il modo in cui va utilizzato Google PageSpeed, né tantomeno è un lavoro utile. Se vi concentrate sull’attuazione delle raccomandazioni offerte sulla piattaforma invece di cercare di azzerarne il numero in cima alla pagina, avrete molti più vantaggi per il vostro sito.
Questo articolo è una guida completa per utilizzare Google PageSpeed Insights al meglio. Vi spiegheremo come Google utilizza il vostro punteggio e come attuare i consigli che ricevete.
Cominciamo!
Un’introduzione a Google PageSpeed Insights
Se non avete ancora familiarità con Google PageSpeed Insights, questo è uno strumento utilizzato per testare le prestazioni dei siti web. È possibile inserire qualsiasi URL e farla analizzare:
Google fornisce quindi un punteggio complessivo con un massimo di 100 per il sito web che avete testato, sulla base di diverse best practice di ottimizzazione delle prestazioni:
Oltre a questo risultato, vedrete anche i vari consigli di Google su come migliorare le vostre prestazioni (e quindi anche il vostro punteggio di PageSpeed Insights):
A partire dal 2018, i punteggi di PageSpeed Insights sono calcolati tramite Lighthouse, lo strumento open source automatizzato di Google per migliorare la qualità complessiva delle pagine web. Questa piattaforma è in grado di valutare fattori di ogni tipo, tra cui prestazioni, accessibilità, applicazioni web progressive e altro ancora.
Per vedere la valutazione completa di Lighthouse sul vostro sito, potete utilizzare lo strumento di misurazione di Google:
Oltre a condurre un audit sulle performance molto simile a quello di Google PageSpeed Insights, otterrete punteggi per l’accessibilità, le best practice e l’ottimizzazione per i motori di ricerca (SEO).
La Verità sul Punteggio 100/100 in Google PageSpeed Insights
Come abbiamo accennato all’inizio di questo articolo, vediamo molti proprietari di siti e sviluppatori farsi ossessionare dal raggiungimento di un punteggio perfetto in PageSpeed Insights. Purtroppo, queste persone tendono a trascurare l’aspetto più importante dei risultati del test: le raccomandazioni.
Anche se dovreste certamente sforzarvi di migliorare il più possibile i tempi di caricamento del vostro sito web, ottenere un 100/100 in Google PageSpeed Insights non è in realtà così importante. Tanto per cominciare, non è nemmeno un test per le prestazioni “valido in ogni situazione”.
A differenza di PageSpeed Insights, Pingdom Tools vi permette di testare le prestazioni del vostro sito da varie località:
Potete anche eseguire test su piattaforme come GTmetrix (che combina i vostri punteggi di PageSpeed Insights e YSlow) e WebPageTest. È probabile che i vostri punteggi in questi diversi strumenti non corrispondano esattamente, il che dimostra quanto possano essere arbitrari questi valori.
Ciò che conta davvero è la velocità effettiva del vostro sito web. Per metterla nella giusta prospettiva, abbiamo visto siti con tempi medi di caricamento inferiori a 500 millisecondi (che è estremamente veloce!) che non hanno un punteggio di 100/100 su PageSpeed Insights.
L’altro fattore che dovrebbe influenzare il vostro approccio all’ottimizzazione della velocità è la performance percepita del vostro sito. Ai vostri visitatori non importa quale sia il vostro punteggio in Google PageSpeed Insights. Vogliono solo poter visualizzare i vostri contenuti il più rapidamente possibile.
Il vero scopo di testare le prestazioni del vostro sito con Google PageSpeed Insights non è quello di ottenere un punteggio elevato. Si tratta invece di individuare sul vostro sito i punti problematici, in modo da poterlo ottimizzare e ridurre sia i tempi di caricamento effettivi che quelli percepiti.
Come Google utilizza PageSpeed Insights
Oltre a influenzare la User Experience (UX) del vostro sito, le prestazioni giocano un ruolo importante anche per la SEO. Dato che PageSpeed Insights è gestito dal più grande e popolare motore di ricerca del mondo, è ragionevole pensare che il vostro punteggio possa avere un qualche effetto sul ranking della vostra pagina dei risultati nei motori di ricerca (SERP) (almeno su Google stesso).
La realtà è che Google utilizza PageSpeed Insights per determinare le classifiche – più o meno. La velocità del sito è un fattore di classifica, chiaro e semplice. Il punteggio del vostro test delle prestazioni può darvi un’idea piuttosto chiara della vostra posizione su questo fronte.
Tuttavia, Google non prende in considerazione solo il numero nel cerchio in cima ai risultati di PageSpeed. Raggiungere il 100/100 non vi garantirà un posto al vertice delle SERP.
Detto questo, potete comunque mettere in opera i vostri risultati di PageSpeed Insights quando andate a migliorare la vostra SEO. Ad esempio, dal 2018 la velocità della pagina su mobile è un fattore di ranking per Google. Noterete che il vostro test di performance fornisce dati sia per la versione desktop che per quella mobile del vostro sito:
Poiché oltre il 73% degli utenti della Internet mobile dichiara di essersi imbattuto in un sito che richiede troppo tempo per essere caricato, le informazioni contenute nella scheda Mobile di Google PageSpeed Insights hanno un valore inestimabile. L’utilizzo delle raccomandazioni qui riportate per ridurre i tempi di caricamento su smartphone e altri dispositivi dovrebbe darvi un vantaggio competitivo importante.
Raccomandazioni su Google PageSpeed Insights (24 Modi per Migliorare le Prestazioni)
In questo articolo abbiamo parlato molto delle raccomandazioni di Google PageSpeed Insights. Sono il vero succo dei risultati dei vostri test di prestazione, e sono molto più preziosi del vostro punteggio effettivo. Ecco perché vi abbiamo dedicato il resto di questo post.
Prima di immergerci in profondità nelle singole raccomandazioni, tuttavia, è necessario comprendere la differenza tra i vostri Dati Reali (Field Data) e Dati di Prova (Lab Data). Il primo mette a confronto il vostro sito con altri nel Chrome User Experience Report degli ultimi 30 giorni.
Ci sono anche due grafici che mostrano dove cadono la vostra media di First Contentful Paint (FCP) e First Input Delay (FID):
Nell’immagine qui sopra, l’FCP del nostro sito è circa lo stesso del 45% dei siti nel 75° percentile, e il nostro FID è circa lo stesso del 9% del 95° percentile.
I Dati di Prova mostrano i dati specifici per un carico di pagina simulato:
Noterete che i nostri dati reali e i dati di prova non corrispondono esattamente. È perfettamente normale. I dati di prova vengono creati in condizioni fisse, mentre i dati reali utilizzano le velocità di caricamento effettive raccolte nel tempo.
Se considerati in combinazione, i dati reali e i dati di prova dovrebbero darvi un’idea dei tempi effettivi di caricamento del vostro sito. Come abbiamo detto prima, questo è ancora più importante del vostro punteggio complessivo di PageSpeed, quindi dovreste prestare attenzione a questi numeri.
Dopo aver considerato queste informazioni, è il momento di iniziare a migliorare le prestazioni del vostro sito con le raccomandazioni di Google PageSpeed.
1. Elimina le Risorse di Blocco della Visualizzazione
Una delle raccomandazioni più comuni di Google PageSpeed Insights è quella di eliminare le risorse che bloccano la visualizzazione:
Questo si riferisce a JavaScript e CSS che impediscono il caricamento rapido della pagina. Il browser del visitatore deve scaricare ed elaborare questi file prima di poter visualizzare il resto della pagina, quindi averne molti “above the fold” può influire negativamente sulla velocità del vostro sito.
Potete approfondire questo argomento nella nostra guida all’eliminazione degli script che bloccano la visualizzazione. Per quanto riguarda Google, ci sono due soluzioni da prendere in considerazione:
- Se non avete molti JavaScript e CSS, potrete inserirli in linea per eliminare questo avviso. Questo consiste nell’incorporare il vostro JavaScript e/o CSS nel vostro file HTML. Si può fare con un plugin come Autoptimize. Tuttavia, questo vale in realtà solo per i siti molto piccoli. La maggior parte dei siti WordPress ha abbastanza JavaScript che renderebbe inutile questo metodo.
- L’altra opzione è di differire il vostro JavaScript. L’attributo defer scarica il file JavaScript durante il parsing HTML, ma lo esegue solo dopo che l’analisi è stata completata. Inoltre, gli script con questo attributo vengono eseguiti in ordine di apparizione sulla pagina.
Troverete un elenco delle risorse più interessate da questo problema sotto la raccomandazione corrispondente nei vostri risultati di PageSpeed.
Guardate questo video per saperne di più su come eliminare le risorse che bloccano il rendering:
2. Riduci al Minimo la Profondità delle Richieste Fondamentali
Il concetto di concatenamento delle richieste critiche ha a che fare con il Critical Rendering Path (CRP) e con il modo in cui i browser caricano le vostre pagine. Alcuni elementi – come il JavaScript e i CSS di cui abbiamo parlato sopra – devono essere caricati completamente prima che la vostra pagina diventi visibile.
Nell’ambito di questo suggerimento, Google PageSpeed Insights vi mostrerà le catene di richieste sulla pagina che state analizzando:
Questo diagramma vi mostrerà la serie di richieste dipendenti che devono essere soddisfatte prima che la vostra pagina diventi visibile. Vi darà anche la dimensione di ogni risorsa. In teoria, si dovrebbe ridurre al minimo il numero di richieste dipendenti, così come le loro dimensioni.
Esistono diversi metodi per raggiungere questi obiettivi che analizziamo in questo post, tra cui:
- Elimina le risorse che bloccano la visualizzazione
- Rimanda le immagini fuori schermo
- Minimizza CSS e JavaScript
Inoltre, è possibile ottimizzare l’ordine in cui vengono caricate le risorse, al fine di abbreviare il CRP. Ciò significa spostare il contenuto sopra il fold nella parte superiore del vostro file HTML. Potete saperne di più sull’ottimizzazione del CRP nel nostro post “Come to Optimize the Critical Rendering Path in WordPress“.
È importante notare che non c’è un numero magico di catene di richieste critiche a cui bisogna lavorare. Google PageSpeed Insights non considera questo controllo come “superato” o “fallito”, a differenza di molte altre raccomandazioni. Queste informazioni vengono semplicemente messe a disposizione per aiutarvi a migliorare i tempi di caricamento.
3. Mantieni un Numero Ridotto di Richieste e Dimensioni di Trasferimento Limitate
Più richieste i browser devono fare per caricare le vostre pagine, e maggiori sono le risorse che il vostro server restituisce in risposta, più tempo impiega il vostro sito web a caricare. Pertanto, ha senso che Google vi raccomandi di ridurre al minimo il numero di richieste necessarie e di diminuire le dimensioni delle vostre risorse.
Come la raccomandazione Riduci al Minimo la Profondità delle Richieste Fondamentali, questa non si traduce in un “superato” o “fallito”. Al contrario, vedrete semplicemente un elenco del numero di richieste effettuate e delle loro dimensioni:
Non c’è un numero ideale di richieste o di dimensioni massime da tenere in considerazione. Google raccomanda invece di fissare questi standard per voi stessi creando un budget di performance. Si tratta di un insieme di obiettivi definiti che possono essere collegati ad aspetti quali:
- Dimensioni massime delle immagini
- Numero di web font utilizzati
- Quante chiamate inviate a risorse esterne
- Dimensione degli script e dei framework
La creazione di un budget di performance vi offre una serie di standard a cui dovete rimanere fedeli. Quando si supera il budget, è possibile decidere se eliminare o ottimizzare le risorse per attenersi alle linee guida prestabilite. Per saperne di più su come crearne un budget di performance, consultate la guida di Google.
4. Minimizza CSS
I file CSS sono spesso più grandi del necessario, al fine di renderli più facili da leggere per gli esseri umani. Potrebbero includere diversi ritorni a capo e spazi che non sono necessari ai computer per comprenderne il contenuto.
Minimizzare il vostro CSS significa condensare i vostri file eliminando caratteri, spazi e duplicazioni non necessarie. Google raccomanda questa prassi perché riduce le dimensioni dei file CSS e quindi può migliorare la velocità di caricamento:
Questi vantaggi in termini di velocità sono il motivo per cui Kinsta ha integrato una funzione di minificazione del codice nel cruscotto di MyKinsta. I clienti possono scegliere la minificazione automatica del codice per i loro file CSS e JavaScript, velocizzando i siti senza alcuno sforzo.
Se non siete clienti Kinsta, vi consigliamo di usare un plugin come Autoptimize o WP Rocket per minificare i vostri file CSS.
5. Minimizza JavaScript
Così come è possibile ridurre le dimensioni dei file CSS, lo stesso vale per i file JavaScript:
Autoptimize e WP Rocket possono eseguire questo compito anche per il vostro sito WordPress.
6. Rimuovi il CSS Inutilizzato
Qualsiasi codice nel vostro foglio di stile è un contenuto che deve essere caricato affinché la vostra pagina diventi visibile agli utenti. Se c’è un CSS sul vostro sito che non è effettivamente utile, sta aggiungendo un inutile carico che incide sulle vostre prestazioni.
Ecco perché Google raccomanda di rimuovere tutti i CSS non utilizzati:
La soluzione in questo caso è essenzialmente la stessa utilizzata per l’eliminazione dei CSS che bloccano la visualizzazione. Potete inserirli in linea o differire gli stili nel modo più logico per le vostre pagine. È anche possibile utilizzare uno strumento come Chrome DevTools per trovare i CSS inutilizzati che devono essere ottimizzati.
7. Riduci al Minimo il Lavoro del Thread Principale
Il ‘thread principale’ è l’elemento primario del browser di un utente che ha il compito di trasformare il codice in una pagina web con cui i visitatori possono interagire. Analizza ed esegue HTML, CSS e JavaScript. Inoltre, è responsabile della gestione delle interazioni con gli utenti.
Ciò significa che, quando il thread principale sta lavorando sul codice del vostro sito, non può gestire anche le richieste degli utenti. Se il lavoro principale del vostro sito richiede troppo tempo, questo può comportare una UX scadente e rallentare il caricamento delle pagine.
Google PageSpeed segnalerà le pagine che impiegheranno più di quattro secondi per completare il thread principale e presentare una pagina web utilizzabile:
Alcuni dei metodi utilizzati per ridurre il lavoro sul filo principale sono già stati trattati in altre sezioni di questo post, tra cui quelle dedicate a:
- Minimizzare il vostro codice
- Rimuovere il codice non utilizzato
- Implementare la cache
Tuttavia, si potrebbe anche prendere in considerazione la suddivisione del codice. Questo processo comporta la suddivisione di JavaScript in blocchi che vengono eseguiti solo quando sono necessari, invece di richiedere ai browser di caricarli tutti prima che la pagina diventi interattiva.
Webpack è spesso utilizzato per dividere il codice. Si noti che si tratta di una tecnica abbastanza avanzata e che i principianti dovrebbero evitare di eseguire da soli.
8. Riduci il Tempo di Esecuzione di JavaScript
L’esecuzione di JavaScript dà spesso il contributo più importante al lavoro del thread principale. PageSpeed Insights dà una raccomandazione specifica per farvi sapere se questo task ha un impatto significativo sulle prestazioni del vostro sito:
I metodi suggeriti sopra per ridurre il lavoro del task principale dovrebbero eliminare anche questo avvertimento nei risultati di PageSpeed.
9. Riduci i Tempi di Risposta del Server (TTFB)
Il Time to First Byte (TTFB) è una misura del tempo necessario a un browser per ricevere il primo byte di dati dal server del vostro sito dal momento dell’invio di una richiesta. Anche se non è la velocità complessiva del vostro sito, è comprensibile che, avere un TTFB basso, è positivo per le prestazioni del vostro sito.
E quindi la riduzione dei tempi di risposta del server è tra le raccomandazioni di Google PageSpeed Insights. Se siete in grado di ottenere un basso TTFB, vedrete questo messaggio alla voce Controlli superati:
Ci sono diversi fattori che possono influenzare il vostro TTFB. Tra le soluzioni tecniche per ridurlo ricordiamo:
- Scegliere un provider di web hosting di alta qualità focalizzato sulla velocità
- Utilizzo di temi e plugin leggeri
- Riduzione del numero di plugin installati sul vostro sito
- Utilizzo di una rete di distribuzione dei contenuti (CDN)
- Implementazione della cache del browser
- Scelta di un solido provider di Domain Name System (DNS)
Il nostro post sul TTFB è un’ottima risorsa per trovare dettagli sull’ottimizzazione in questo ambito.
10. Usa Immagini di Dimensioni Adeguate
I file multimediali, come le immagini, possono essere un vero e proprio freno alle prestazioni del vostro sito. Il loro corretto dimensionamento permette di ridurre i tempi di caricamento:
Se la vostra pagina contiene immagini più grandi del necessario, vengono utilizzati i CSS per ridimensionarle in modo appropriato. Questo richiede più tempo rispetto al semplice caricamento iniziale delle immagini nella giusta dimensione, con un conseguente impatto sulle prestazioni della vostra pagina.
Per risolvere questo problema, è possibile caricare le immagini nelle dimensioni appropriate, oppure utilizzare “immagini reattive”. Ciò comporta la creazione di immagini di dimensioni diverse per vari dispositivi.
Si può farlo utilizzando l’attributosrcset, che viene aggiunto ai tag < img> per specificare file immagine alternativi di dimensioni diverse. I browser possono leggere questo elenco, determinare quale sia l’opzione migliore per la schermata corrente e fornire quella versione dell’immagine.
Per esempio, diciamo che avete un’immagine di testa e volete renderla reattiva. Si possono caricare tre versioni a 800, 480 e 320 pixel di larghezza. Poi si applica l’attributo srcset, in questo modo:
<img srcset="header-image-800w.jpg 880w,
Header-image-480w.jpg 480w,
Header-image-320w.jpg 320w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="header-image-800w.jpg">L’attributo srcset specifica i diversi file disponibili e l’attributo sizes indica al browser quale deve essere utilizzato in base alla dimensione corrente dello schermo.
11. Rimanda Immagini Fuori Schermo
Il processo di rinvio delle immagini fuori schermo è più comunemente noto come “lazy loading”. Ciò significa che, invece di far sì che il browser carichi ogni immagine di una pagina prima di visualizzare il contenuto che la precede, caricherà solo le immagini immediatamente visibili.
Meno carico prima che la pagina diventi visibile significa migliori prestazioni, motivo per cui Google raccomanda:
Ci sono diversi plugin di WordPress realizzati appositamente per il lazy load, tra cui a3 Lazy Load e Lazy Load by WP Rocket. Anche diversi plugin per l’ottimizzazione delle immagini e delle prestazioni, come Autoptimize, dispongono di funzioni di lazy load. Date un’occhiata alla nostra guida completa su Come Implementare in WordPress il Lazy Load di Immagini e Video.
12. Codifica in Modo Efficace le Immagini
Come abbiamo accennato in precedenza in questo post, le immagini hanno un impatto significativo sulle prestazioni del vostro sito. Una delle migliori prassi di ottimizzazione più basilari che potreste considerare è la compressione, che può aiutarvi a ridurre le dimensioni dei file in modo che carichino più velocemente. È anche il metodo principale per seguire la raccomandazione di Google di codificare le immagini in modo efficiente:
La chiave è raggiungere le dimensioni più piccole possibili dei file, senza sacrificare la qualità delle immagini stesse. Plugin come Imagify e Smush possono aiutarvi in questo compito. Potete scoprire di più al riguardo nella nostra guida all’ottimizzazione delle immagini.
Altre raccomandazioni che influiscono sul fatto che si “supera” o “fallisce” il controllo delle immagini codificate in modo efficiente comprendono:
- Usa immagini di dimensioni adeguate
- Implementazione del lazy load (Rimanda immagini fuori schermo)
- Pubblica immagini in formati più recenti, come WebP
- Usa formati video per i contenuti animati, come le GIF
Oltre a comprimere le vostre immagini, potete seguire i passaggi per soddisfare queste richieste come descritto in altre parti di questo post.
13. Pubblica Immagini in Formati più Recenti
Ci sono alcuni formati di file immagine che si caricano più velocemente di altri. Sfortunatamente, non sono i formati PNG o JPEG frequentemente utilizzati. Le immagini WebP stanno diventando il nuovo standard e Google PageSpeed vi informerà nel caso in cui le vostre immagini non vi aderiscano:
Questa può sembrare una raccomandazione difficile da rispettare, dato che probabilmente avete già molte immagini sul vostro sito WordPress. Per fortuna, ci sono dei plugin che vi possono aiutare. Ad esempio, Imagify e Smush offrono entrambi una funzione di conversione a WebP.
14. Usa Formati Video per i Contenuti Animati
Le GIF possono costituire una forma efficace di contenuto visuale in molte situazioni. I tutorial, le recensioni delle funzioni e persino le animazioni umoristiche possono alzare il tono dei vostri post e renderli più divertenti e di maggior valore per i lettori.
Purtroppo, questi benefici hanno un costo per le vostre prestazioni. Il caricamento delle GIF richiede risorse, ed è per questo che PageSpeed Insights consiglia di servire invece contenuti video:
Purtroppo, la conversione delle GIF in formati video non la cosa più semplice del mondo. Per prima cosa, dovrete decidere che tipo di video volete usare:
- MP4: produce file leggermente più grandi, ma è compatibile con la maggior parte dei principali browser.
- WebM: è il formato video meglio ottimizzato, anche se ha una limitata compatibilità con i browser.
Una volta fatta la scelta più sensata per il vostro sito, dovrete convertire i formati dei file. Il modo migliore per farlo è tramite riga di comando. Per iniziare, installate FFmpeg. Si tratta di uno strumento open-source per la conversione di formati di file:
Quindi, aprite l’interfaccia della riga di comando ed eseguite questo:
ffmpeg -i input.gif output.mp4Questo comando convertirà la GIF con il nome del file input.gif in un video MP4 con il nome del file output.mp4. Tuttavia, cambiare il formato è solo il primo passo. Ora è necessario incorporare il video risultante sul vostro sito WordPress in un modo che lo faccia apparire come una GIF animata.
Incorporare contenuti video per le animazioni
Come avrete probabilmente notato se avete visto un GIF prima d’ora, sono leggermente diverse dai normali video. Di solito vanno in autoplay e girano in loop, e sono sempre senza suono. Incorporare il vostro nuovo file MP4 o WebM sul vostro sito WordPress non produrrà queste caratteristiche.
Tuttavia, è possibile ricrearli con un codice molto semplice. Caricate il vostro video nella libreria media e poi aggiungete quanto segue alla pagina o al post dove volete includere la vostra GIF:
<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>Questo applicherà gli attributi specificati al vostro video, facendolo apparire più simile a una GIF. Basta adattare il nome del file e il tipo di file in modo che corrisponda a quello della vostra risorsa. Per altri dettagli su questo argomento, suggeriamo di leggere la guida di Google sulla conversione delle GIF in video.
15. Assicurati che il Testo Rimanga Visibile Durante il Caricamento dei Caratteri Web
Come le immagini, i font tendono ad essere file di grandi dimensioni che richiedono molto tempo per essere caricati. In alcuni casi, i browser possono nascondere il vostro testo fino a quando il font che state usando non viene completamente caricato, il che produrrà questa raccomandazione di Google PageSpeed Insights:
Google consiglia di risolvere questo problema applicando la direttiva swap della Font Display API nel vostro stile @font-face. Per farlo, accedete al vostro foglio di stile (style.css) e aggiungete quanto segue dopo l’attributo src sotto @font-face:
font-display: swap
Potete approfondire l’argomento dell’ottimizzazione dei font web nel nostro post “Come Cambiare i Font in WordPress” e nella nostra guida approfondita all’hosting locale dei font.
16. Attiva la Compressione del Testo
La raccomandazione Attiva la Compressione del Testo di Google PageSpeed Insights si riferisce all’uso della compressione GZIP:
In alcuni casi (come si può vedere nell’immagine qui sopra) la compressione del testo sarà attivata automaticamente sul vostro server. Se non è il caso del vostro sito, avete un paio di opzioni per seguire questa raccomandazione.
Il primo è quello di installare un plugin con una funzione di compressione GZIP. WP Rocket è una soluzione praticabile se siete disposti a sostenerne il costo.
È possibile comprimere il testo anche manualmente. Questo comporta la modifica del vostro file .htaccess, che può essere rischioso, quindi assicuratevi di avere un backup recente a portata di mano prima di procedere.
La maggior parte dei siti WordPress funziona su server Apache. Il codice per l‘abilitazione della compressione GZIP si presenta in questo modo:
<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>Dovreste aggiungerlo dopo #END nel vostro file .htaccess. Se vi capita di avere il vostro sito WordPress su un server Nginx, dovreste invece aggiungere il seguente codice al vostro 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;Se volete controllare la compressione del testo del vostro sito, vi consigliamo di utilizzare uno strumento come GiftOfSpeed:
Questo vi dirà se la compressione GZIP è stata implementata con successo, così come il tipo di server su cui il vostro sito è in esecuzione e alcuni altri dettagli importanti.
17. Precollegati alle Origini Necessarie
Ci sono molte probabilità che avete almeno una risorsa di terze parti sul vostro sito – Google Analytics è un esempio comune. Può essere necessario del tempo perché i browser stabiliscano una connessione con queste risorse, e questo rallenta il caricamento.
L’utilizzo degli attributi di preconnect può dire subito ai browser che ci sono script di terze parti sulla vostra pagina che devono essere caricati. La procedura della loro richiesta può quindi iniziare il più presto possibile, migliorando le vostre prestazioni.
Se Google ritiene che la vostra pagina possa trarre beneficio da questa soluzione, vedrete il suggerimento di Precollegati alle Origini Necessarie:
Ci sono diversi modi per implementare questa tecnica di ottimizzazione. Se vi sentite a vostro agio con la modifica dei file del tema di WordPress, potete aggiungere un tag di collegamento al vostro file header.php. Ecco un esempio:
<link rel=“preload” href=“example.com”>In questo caso, il tag dice ai browser che devono stabilire una connessione a example.com il più rapidamente possibile. Google PageSpeed Insights elencherà tutte le risorse rilevanti per le quali è necessario aggiungere i tag di collegamento con gli attributi preconnect.
L’altra soluzione è quella di utilizzare un plugin per ottenere lo stesso effetto. Perfmatters offre una funzione di pre-connessione (disclaimer: sono uno dei fondatori di Perfmatters). I WP Rocket e Pre* Party Resource Hints offrono funzionalità simili.
18. Precarica le Richieste Fondamentali
Simile alla raccomandazione Precollegati alle origini necessarie, seguendo questa raccomandazione potrete ridurre al minimo il numero di richieste che i browser devono fare al server del vostro sito. Invece di collegarsi a risorse di terze parti, tuttavia, Precarica le Richieste Fondamentali si riferisce al caricamento di risorse critiche sul proprio server:
Anche l’applicazione di questa soluzione tecnica è molto simile alla precedente raccomandazione. È possibile aggiungere tag link al file header.php specificando le risorse elencate in PageSpeed Insights:
<link rel=“preload” href=“example.com”>È anche possibile incorporare questo tag utilizzando Perfmatters, WP Rocket, o Pre* Party Resource Hints.
19. Evita i Reindirizzamenti tra Più Pagine
I reindirizzamenti vengono utilizzati quando si vuole che un URL punti ad un altro. Sono comunemente utilizzati quando si sposta o si cancella una pagina del sito. Anche se in generale non c’è nulla di male nell’utilizzare i redirect, questi causano ulteriori ritardi nei tempi di caricamento.
Se avete troppi reindirizzamenti sul vostro sito, potreste vedere questa raccomandazione in Google PageSpeed Insights:
L’unica cosa che si può fare in risposta a questa raccomandazione è assicurarsi di utilizzare i redirect solo quando è assolutamente necessario. Potete saperne di più sulla creazione dei redirect nel nostro articolo “Redirect in WordPress – Best Practice Per Prestazioni Superiori“.
20. Pubblica le Risorse Statiche con Criteri della Cache Efficaci
Se avete utilizzato Google PageSpeed Insights per un po’, potreste ricordare questa raccomandazione come l’avviso sfrutta la cache del browser. Nella versione 5, è ora etichettato come Pubblica le risorse statiche con criteri della cache efficaci:
Questo suggerimento ha alcuni livelli che dobbiamo analizzare. Il primo è il significato di “cache”. In breve, è una procedura attraverso cui i browser salvano le copie delle vostre pagine, in modo che possano essere caricate più velocemente nelle visite future.
Il modo più comune in cui i siti WordPress implementano il caching è con i plugin. WP Rocket e W3 Total Cache sono soluzioni molto popolari. Tuttavia, alcuni provider di hosting – tra cui noi di Kinsta – abilitano la cache attraverso i loro server. Controllate se questo è il caso del vostro host prima di installare un plugin per la cache.
Una volta abilitata la cache per il vostro sito, potete passare della seconda parte di questa raccomandazione, che è l'”efficacia” delle vostre regole di cache. I browser cancellano periodicamente la loro cache per aggiornarla con copie fresche.
In teoria, sarà preferibile che questo intervallo di tempo sia più alto e non più basso. Se si cancella il sito dalla cache dei browser ogni paio d’ore, ciò vanifica lo scopo di utilizzare questa soluzione tecnica. È possibile ottimizzare il periodo di scadenza della cache utilizzando le intestazioni Cache-Control e Expires.
Aggiungere gli header Cache-Control
Utilizzate il seguente codice per aggiungere gli header Cache-Control in Nginx:
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}Dovreste aggiungere questo codice al file di configurazione del vostro server. Nell’esempio sopra riportato, i tipi di file specificati sono impostati per scadere dopo 30 giorni.
Chi è su server Apache dovrebbe invece utilizzare questo frammento nel file .htaccess:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>Aggiungete questo codice prima di #BEGIN WordPress o dopo #END WordPress. In questo esempio, il periodo di scadenza della cache è impostato a 84.600 secondi.
Aggiungere gli Header Expires
Gli header Cache-Control sono ormai praticamente lo standard. Ma ci sono alcuni strumenti (tra cui GTMetrix) che controllano ancora gli header Expires.
Potete aggiungere expire headers a un server Nginx incorporando quanto segue nel blocco del vostro server:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Si dovrebbero impostare tempi di scadenza diversi in base al tipo di file. I server Apache produrranno gli stessi risultati se si aggiunge questo codice 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 image/svg "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 ##Ancora una volta, si dovrebbe aggiungere questo codice prima di #BEGIN WordPress o dopo #END WordPress.
Caching Efficace di Google Analytics
Ironia della sorte, lo script di Google Analytics che potreste aver aggiunto alle intestazioni delle vostre pagine per tenere traccia del comportamento degli utenti ha un periodo di scadenza della cache di appena due ore. Questo probabilmente avviene in modo che, se vengono effettuati aggiornamenti della piattaforma, gli utenti avranno accesso alle modifiche in tempi brevi.
Questo script apparirà nell’elenco delle risorse che richiedono la vostra attenzione sotto la raccomandazione Pubblica le risorse statiche con criteri della cache efficaci. Dato che appartiene a terzi, non è possibile modificare il periodo di scadenza con le intestazioni Cache-Control e Expires.
Se questo è l’unico script elencato sotto questa raccomandazione, è comunque possibile superare il controllo:
Tuttavia, come abbiamo notato in questo post, il vostro punteggio di PageSpeed conta meno della vostra performance effettiva e percepita. Al fine di servire questa risorsa in modo efficace, si può prendere in considerazione la possibilità di ospitare Google Analytics a livello locale.
Potrete farlo con plugin come Complete Analytics Optimization Suite (CAOS) e Perfmatters. Potete leggere di più su questa procedura nella nostra guida completa a questo suggerimento di PageSpeed.
21. Riduci l’Impatto del Codice di Terze Parti
Abbiamo ora accennato ad alcuni modi in cui gli script di terze parti possono avere un impatto negativo sulle vostre prestazioni e portare a controlli non superati di PageSpeed Insights. In teoria, è meglio limitare il ricorso a questi strumenti per evitare effetti negativi.
Tuttavia, in alcuni casi, incorporare uno script di terze parti è la soluzione migliore per un’esigenza particolare del vostro sito. Google Analytics è un ottimo esempio. Altri includono:
- Pulsanti e feed di condivisione dei social media
- Incorporazione di video di YouTube
- iFrame per gli annunci e altri contenuti
- Librerie per JavaScript, font e altri elementi
Nei casi in cui ritenete necessario l’utilizzo di uno script di terze parti, è importante ridurre comunque il suo impatto sulle prestazioni del vostro sito, come vi diranno i risultati dell’analisi di PageSpeed:
Per caricare il codice di terze parti in modo più efficiente, potete considerare una delle soluzioni che abbiamo già presentato in questo post:
- Differire il caricamento di JavaScript
- Utilizzare tag link con gli attributi preconnect
- Host locale di script di terze parti (come abbiamo visto sopra con Google Analytics)
Queste soluzioni dovrebbero ridurre al minimo l’impatto sulle prestazioni del vostro sito.
22. Evita Payload di Rete Enormi
Questa raccomandazione è particolarmente importante per i vostri visitatori mobili. I grandi carichi possono richiedere l’utilizzo di più dati sui cellulari, con un conseguente costo per i vostri utenti. Ridurre al minimo il numero di richieste di rete necessarie per raggiungere le vostre pagine può evitare questo inconveniente:
Google consiglia di mantenere la dimensione totale dei byte a 1.600 KB o meno. I metodi utilizzati più comunemente per raggiungere questo obiettivo si trovano tutti in questo post, e ricordiamo:
- Rinviare CSS, JavaScript e immagini che si trovano sotto il fold
- Minimizzare il codice
- Comprimere i file immagine
- Utilizzare il formato WebP per le immagini
- Implementare la cache
Seguite i passaggi necessari, e dovreste superare questo controllo senza grandi difficoltà.
23. Indicatori e misure User Timing
Questa raccomandazione è rilevante solo se si utilizza la User Timing API. Questo strumento crea timestamp per aiutarvi a valutare le prestazioni del vostro JavaScript. Se avete impostato l’API per il vostro sito, vedrete i vostri mark e le vostre misure sotto questa voce in PageSpeed Insights:
Come potete vedere, questo è un altro suggerimento di Google che non si traduce in un “superato” o “fallito”. PageSpeed Insights rende queste informazioni facilmente reperibili, in modo da poterle utilizzare per valutare le aree che potrebbero richiedere un’ottimizzazione.
Se siete interessati ad incorporare la User Timing API nel vostro sito WordPress, potete saperne di più nella guida di Mozilla.
24. Evita di Usare un DOM di Dimensioni Eccessive
In termini più semplici, il DOM è il modo in cui i browser trasformano l’HTML in oggetti. Si tratta dell’utilizzo di una struttura ad albero costituita da singoli nodi che rappresentano ciascuno un oggetto. Naturalmente, più grande è il DOM della vostra pagina, più tempo ci vorrà per caricarla.
Se la vostra pagina supera certi standard per quanto riguarda le dimensioni del DOM, Google vi consiglierà di ridurre il numero di nodi e la complessità del vostro stile CSS:
Se hai “fallito” questo controllo in PageSpeed Insights, uno dei possibili colpevoli è il vostro tema WordPress. I temi pesanti spesso aggiungono grandi quantità di elementi al DOM, e possono anche includere uno stile contorto che rallenta il sito. In tal caso, potrebbe essere necessario cambiare tema.
Riepilogo
Google PageSpeed Insights dovrebbe essere un punto fermo nella vostra casella degli strumenti di webmaster. Tuttavia, fissarsi sul proprio punteggio e farsi ossessionare dal raggiungimento dell’ambito 100/100 probabilmente non è il modo migliore di utilizzare il proprio tempo. Potrebbe distrarvi da altri task importanti che potrebbero darvi vantaggi più significativi.
In questo post abbiamo trattato i modi in cui il vostro punteggio di Google PageSpeed fa e non fa differenza. Abbiamo anche condiviso alcune brevi linee guida per implementare sui vostri siti le raccomandazioni della piattaforma, al fine di migliorare le prestazioni.
Avete domande su Google PageSpeed Insights o sull’ottimizzazione delle prestazioni del vostro sito? Scrivetele nella sezione dei commenti qui sotto!
Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.
Ciao Kinsta,
un articolo molto interessante. Un altro metodo, che potete inserire nell’articolo, per poter condurre un audit sulle performance è aprire ChromeDevTools, fare clic sulla scheda Audits e eseguire un controllo.
Lo volevo segnalare per chi volesse utilizzare quest’altro metodo.
Grazie e saluti
Una fatica… però quando raggiungi il punteggio lo schermo diventa nero e spuntano i fuochi d’artificio… una grande soddisfazione 😀