Chiudere Google PageSpeed

Shut up Google PageSpeed! Correggi i messaggi di errore più importanti

PageSpeed Insights Google è un ottimo modo per avere rapidamente una panoramica del potenziale di ottimizzazione del tuo sito web. Oggi ti mostrerò come sfruttare questo potenziale e aumentare il tuo PageSpeed Score. Tuttavia, non devi seguire pedissequamente i risultati di Google. Perché i messaggi di errore di PageSpeednon sono sempre utili.

PageSpeed InsightsQualche tempo fa, Caspar Hübinger ha trovato parole molto chiare per il risultato di Google in uno dei suoi blogpost. E critica non solo lo strumento, ma anche l'utilizzo dello stesso. Infatti, se non sai come interpretare e correggere i singoli suggerimenti per l'ottimizzazione, puoi perderti rapidamente nella caccia insensata a un punteggio di 100. Ma questo non è saggio. Ma non sarebbe saggio. Dopo tutto, i punteggi utopici di Google PageSpeed sono di solito una perdita di tempo. L'ottimizzazione dei tempi di caricamento è più importante.

PageSpeed Insights Oggi ti mostrerò come interpretare i messaggi di errore più importanti di Google e ottimizzare il tuo sito web di conseguenza.

PageSpeed Insights Ma prima di mostrarti come interpretare i singoli messaggi di errore e come correggere gli errori, vorrei approfondire come utilizzare correttamente Google. Abbiamo già visto che alcune persone sono molto attente al loro PageSpeed Score senza tenere d'occhio il tempo di caricamento del loro sito web.

Se non sei interessato a questa sezione, saltala e scopri direttamente come risolvere il messaggio di errore "Comprimi CSS".

I messaggi di errore di Google PageSpeed non sempre sono corretti e importanti

PageSpeed Insights Non dovresti mai affidarti esclusivamente ai risultati o ai messaggi di errore di Google. Perché lo strumento di Google non misura il parametro più importante del tuo sito web: il tempo di caricamento della pagina. Per misurarlo correttamente, ti consiglioWebpagetest.org.

Solo se hai in mente il tempo di caricamento della pagina fin dall'inizio quando ottimizzi il tuo sito web, puoi fare affermazioni significative sul successo dell'ottimizzazione. Perché l'obiettivo di ogni ottimizzazione deve sempre essere il miglioramento dell'esperienza dell'utente. Nel caso dell'ottimizzazione delle prestazioni, si tratta ovviamente del tempo di caricamento della pagina e del tempo di caricamento della pagina percepito.

RICORDA.

Misura sempre il tempo di caricamento della pagina prima di ottimizzare le prestazioni del tuo sito web. Solo così potrai valutare il successo dell'ottimizzazione.

Per l'esperienza dell'utente, tempi di caricamento delle pagine più rapidi e dimensioni ridotte sono sempre vantaggiosi. La pazienza e la capacità di attenzione delle persone continuano a diminuire(come dimostra questo studio di Microsoft) - questo è particolarmente cruciale per l'e-commerce - e sempre più traffico arriva tramite dispositivi mobili. Già nel 2016, il 56% dei tedeschi accedeva regolarmente a internet tramite smartphone o tablet. In questo caso, le velocità di connessione e i volumi di dati non sono sempre illimitati. Per questo motivo è opportuno creare siti web snelli e veloci.

Google PageSpeed, tuttavia, fornisce solo informazioni sul potenziale di ottimizzazione del tuo sito web e permette di trarre solo alcune conclusioni sull'esperienza dell'utente. Lo scarso valore informativo dei messaggi d'errore di Google PageSpeed è rafforzato dal fatto che lo strumento non può essere attenuato in alcune aree, o solo con un notevole sforzo aggiuntivo.

Ad esempio, il riferimento alla cache del browser appare sempre quando vengono integrate risorse esterne, compresi i servizi di Google. Tuttavia, queste risorse non possono essere coperte dalla cache del browser del tuo sito web. Il messaggio di errore non ha quindi alcuna rilevanza per l'esperienza utente del tuo sito web, ma è prodotto dalla logica dello strumento stesso. Nel peggiore dei casi, il messaggio viene interpretato come se non fosse attivo il caching del browser.

Quindi non concentratevi principalmente sulla valutazione di Google, ma sul tempo di caricamento. Questo è l'unico parametro veramente importante.

Ma cosa ne sarà del mio posizionamento su Google?

L'esempio del messaggio con la cache del browser mancante chiarisce perché non dovresti lasciarti turbare da un risultato di PageSpeed apparentemente scarso.

Se hai integrato Google Maps o Google Analytics nel tuo sito web, ad esempio, questi genereranno il seguente messaggio di errore:

Lo stesso vale per altri servizi di terze parti. Ad esempio, la nostra chat di assistenza.

PageSpeed Insights Pertanto, ogni volta che testiamo il nostro sito web a , questo punto viene cancellato. Ciò significa che sappiamo che questo fattore altera sempre i nostri risultati in modo negativo e quindi lo ignoriamo.

Per la SEO del tuo sito web, questo significa che il tempo di caricamento e l'esperienza dell'utente sono molto più importanti per il posizionamento su Google rispetto al punteggio specifico di PageSpeed.

Perché se ottimizzi il tempo di caricamento del tuo sito web, lavorerai automaticamente su molte delle aree importanti per Google. Il miglioramento del tempo di caricamento e il Google PageSpeed Score sono quindi collegati in un certo modo.

A mio parere, però, non perdetevi nella caccia al punteggio di 100.

Ma ora passiamo alle fasi di ottimizzazione!

Messaggio di errore 1: Comprimere i CSS

Secondo la nostra esperienza, questo è uno dei messaggi di errore più fastidiosi di Google PageSpeed Insights.

Shut up Google PageSpeed! Correggi i messaggi di errore più importanti

Significato: questo messaggio di errore indica che i file CSS del tuo sito web possono ancora essere compressi (o, nel caso precedente, che ciò è già stato fatto con successo). Con questa riduzione, il numero di caratteri dei documenti si riduce. Questo riduce le dimensioni del file. I commenti, gli spazi e la formattazione, ad esempio, vengono eliminati.

Implementazione: anche se questo suggerimento sembra scoraggiante, l'implementazione è plausibilmente semplice. In linea di principio, ci sono due possibili soluzioni per questo caso: Se sei un utente esperto di CSS, puoi ridurre manualmente il numero di file CSS e utilizzare una notazione abbreviata per la loro creazione. Puoi anche ridurre le dimensioni dei file CSS utilizzando strumenti online come CSS Minifier.

Shut up Google PageSpeed! Correggi i messaggi di errore più importanti

Naturalmente, esiste anche la comoda soluzione dei plugin per la minificazione dei CSS in WordPress. Alcuni plugin fanno un lavoro a tutto tondo e possono comprimere e ottimizzare non solo i CSS, ma anche JavaScript e HTML.

Ulteriori informazioni

Per una spiegazione dettagliata dei modi in cui è possibile ridurre HTML, CSS e JavaScript in WordPress , vedere questo articolo.

Con HTTP/2, la fusione dei CSS non ha necessariamente senso.

I plugin Minify appena citati sono molto utilizzati. Questo perché sono comodi e si occupano di comprimere e unire i CSS (e molto altro) in modo completamente automatico. Fino a poco tempo fa, unire i file CSS aveva anche molto senso. Nel frattempo, le cose sono cambiate: da quando è stato introdotto lo standard HTTP/2, i browser sono in grado di caricare diversi file dal server web contemporaneamente.

Ciò significa che i dati non devono più essere necessariamente combinati, perché con HTTP/2 è possibile scambiare più pacchetti di dati contemporaneamente. HTTP/2 deve essere impostato dall'hoster, ad esempio, e può essere utilizzato solo con un certificato SSL.

Quindi, prima di decidere per un Plugin con diverse decine di funzioni e opzioni di configurazione, pensate attentamente se ne hai bisogno. Soprattutto se sei sicuri di ottimizzare i CSS da soli.

Perché un plugin aggiuntivo può rendere il tuo sito web più lento in determinate circostanze. Soprattutto se le altre funzioni dei plugin tuttofare non possono dispiegare tutto il loro potenziale.

Messaggio di errore 2: Rimuovi le risorse che bloccano il rendering

Questo messaggio fa sudare la fronte di molte persone, perché non è così facile da implementare ed è anche uno degli eterni punti critici di Google PageSpeed.

Shut up Google PageSpeed! Correggi i messaggi di errore più importanti

Significato: un sito web è costruito in un certo ordine. Questo ordine di caricamento può essere ottimizzato. PageSpeed si lamenta quasi sempre del fatto che i file CSS bloccano questo ordine di caricamento ottimale. E questo vale anche per i siti web che sono già stati ottimizzati molto bene(come dimostra il caso di Caspar Hübinger). Tuttavia, il suggerimento può essere molto utile per ottimizzare i tempi di caricamento. In pratica, questo suggerimento ti dice che il codice JavaScript o CSS importante per il caricamento di un elemento - ad esempio un colore di sfondo - non è ancora disponibile nel momento in cui l'elemento viene caricato. Ciò significa che non verrà visualizzato fino a quando non sarà stato caricato il comando CSS corrispondente. Questo non aumenta il tempo di caricamento del tuo sito web, ma ha un impatto sull'esperienza dell'utente, che ha l'impressione che il sito web impieghi più tempo a caricarsi.

Implementazione: Una soluzione comune è quella di implementare una regola empirica: CSS nell'intestazione. Ciò significa che devi spostare il codice CSS dalla parte principale del documento HTML, il "corpo", all'inizio del documento, la "testa", e includerlo come "stile".

Questo esempio chiarisce cosa intendo. Il frammento di codice qui sotto definisce un colore di sfondo per un blog. L'elemento "style" viene caricato nella "testa" del documento HTML. In questo modo, lo sfondo della pagina non viene caricato alla fine del documento e non crea un antiestetico salto di colore o addirittura blocca il rendering.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

Puoi implementare questa misura di ottimizzazione in due modi: Puoi toccare il codice da solo e spostare i codici CSS nell'intestazione, oppure puoi lasciare che sia un plugin a fare il lavoro.

Il plugin Autoptimize, ad esempio, adotta un approccio globale: Qui puoi selezionare le opzioni per tutti i file CSS che non sono esclusi dal processo.

L'estratto delle opzioni del plug-in lo dimostra: Anche la variante del plug-in non può essere implementata senza una conoscenza di base del processo. Quindi devi anche familiarizzare con i plugin.

"*" indica i campi obbligatori

Desidero iscrivermi alla newsletter per essere informato sui nuovi articoli del blog, sugli ebook, sulle funzionalità e sulle novità di WordPress. Posso ritirare il mio consenso in qualsiasi momento. Si prega di prendere nota della nostra Politica sulla Privacy.
Questo campo è per la convalida e non deve essere modificato.

Messaggio di errore 3: codificare in modo efficiente le immagini

Questo è un altro punto che PageSpeed Insights brontola spesso. Tuttavia, questo caso è quasi sempre veloce e facile da implementare e di solito porta vantaggi tangibili sui tempi di caricamento.

Shut up Google PageSpeed! Correggi i messaggi di errore più importanti

Significato: Molti sottovalutano il ruolo delle dimensioni delle immagini nel tempo di caricamento del proprio sito web. Eppure le immagini sono molto spesso uno dei maggiori freni al tempo di caricamento. Anche se vengono salvate solo piccole quantità di dati per le singole immagini, il volume totale salvato può raggiungere una quantità considerevole di dati.

Perché un'immagine è raramente solo un' immagine. WordPress genera automaticamente diverse miniature dell'immagine durante il caricamento. Quindi se non usi gli originali sulla tua homepage, ma versioni più piccole di essi, cioè miniature o immagini in primo piano, allora anche queste dovrebbero essere ottimizzate. Un'immagine diventa rapidamente diversi file, che portano anche un carico di dati multipli con loro.

Attuazione: In linea di principio, hai due opzioni per ottimizzare le tue immagini. O si ottimizzano le immagini prima dell'upload o dopo o durante l'upload. Il primo si può fare tramite strumenti online o offline, il secondo si può fare tramite i corrispondentiplugin di ottimizzazione delle immagini WordPress .

Se puoi integrare la compressione nel tuo flusso di lavoro, ha senso ottimizzare le immagini prima di caricarle. Esistono strumenti online per questo scopo, come Kraken.io, oppure puoi ridurre la qualità e quindi la dimensione dei file delle immagini offline, ad esempio direttamente in Photoshop. In questo modo risparmierai il plugin aggiuntivo e manterrai il tuo sito web più snello.

La soluzione più conveniente è, ovviamente, un plugin. Plugin come Optimus o Smush ottimizzano non solo l'immagine principale, ma anche tutte le sue varianti. Smush è anche in grado di ottimizzare successivamente tutte le immagini esistenti.

Tra le altre cose, plugin lavora con una cosiddetta "compressione senza perdita". Questo significa che la dimensione del file delle immagini è ridotta, ma la loro qualità visibile non diminuisce.

Messaggio di errore 4: Attivare la compressione del testo

Questo messaggio di errore di Google PageSpeed è molto veloce da risolvere e può ridurre significativamente il tempo di caricamento del tuo sito web.

Shut up Google PageSpeed! Correggi i messaggi di errore più importanti

Cioè: hai già ridotto il più possibile le dimensioni delle immagini e dei CSS del tuo sito web. Questo è un bene! Ma non è tutto. Perché ora puoi utilizzare un altro meccanismo di compressione. Probabilmente conosci questo processo quando scarichi pacchetti di dati di grandi dimensioni: Di solito li hai in formato zippato, cioè compresso. In questo modo i dati sono più piccoli e il download più veloce. Tuttavia, i pacchetti di dati devono ancora essere decompressi dopo il download. La stessa cosa accade quando viene caricata una pagina: Il server web consegna i pacchetti di dati compressi e il server web li scompatta. In questo modo il trasferimento dei dati è più veloce e il tempo di caricamento della pagina si riduce.

Implementazione: o la compressione dei dati è già impostata sul server o devi attivarla tu stesso. Raidboxes In questo caso non devi preoccuparti di nulla. Abbiamo attivato di default lacompressione Brotli, particolarmente forte.

Con la seguente voce nel tuo .htaccess puoi attivare la cosiddetta compressione GZIP anche manualmente. A condizione che tu abbia un server web Apache.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Messaggio di errore 5: distribuisci contenuti statici con una politica di cache efficiente 

PageSpeed InsightsA mio parere, il riferimento al caching del browser è di gran lunga il più fastidioso di Google. Questo perché puoi impostare il caching del browser solo per le tue risorse. Il caching del browser non è possibile per le risorse esterne.

Shut up Google PageSpeed! Correggi i messaggi di errore più importanti

Significato: la cache del browser significa che il browser salva una versione statica del tuo sito web e non deve richiederla al server web quando lo visiti di nuovo, ma il sito web è già caricato.

Implementazione: o il tuo hoster ha già attivato la cache del browser sul lato server, oppure puoi impostarla manipolando il file .htaccess (ricorda: questa impostazione funziona solo sui server web Apache). Ad esempio, il codice di esempio qui sotto imposta la cache del browser a un mese, vale a dire che la versione statica del tuo sito web viene memorizzata nel browser del visitatore per un mese.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Raidboxes Anche in questo caso vale quanto segue: se sei un cliente, il caching del browser è già attivo di default.

I miei 2 centesimi: senza cache tutto è niente

Bene, ora hai ottimizzato le immagini del tuo sito web, hai ridotto il CSS, lo hai compresso e messo nel giusto ordine e hai fatto in modo che il browser dei tuoi visitatori memorizzasse nella cache il sito web. Tutte queste misure riducono il tempo di caricamento del tuo sito web.

Cioè: senza una cache adeguata, però, rinunci a gran parte di questo potenziale. La cache è e rimane di gran lunga il fattore di performance più importante. La cache memorizza temporaneamente il contenuto del tuo sito WordPress e fa sì che l'intero sito non debba essere ricaricato ogni volta. Al contrario, una versione statica, cioè già renderizzata, del tuo sito web viene fornita dalla cache. In questo modo si evita la lentezza del PHP e in particolare del database.

Implementazione: anche in questo caso, o il tuo hoster ha già impostato una cache lato server o utilizzi un plugin di caching. Esistono plugin molto potenti che memorizzano nella cache ampie parti del tuo sito web e che consentono di ridurre notevolmente i tempi di caricamento per le visite ricorrenti al sito.

L'elevata potenza dei plugin di caching è anche la loro più grande debolezza. È possibile che un plugin di caching renda inizialmente il tuo sito web più lento per i primi visitatori. Infatti, più complicato è il tuo blog o sito web, più complicato e ampio deve essere il motore di cache che lo memorizza. Questo è particolarmente importante per i negozi.

Se gestisci un sito web relativamente semplice, allora le soluzioni minimaliste possono essere migliori di un cache jack-of-all-trades. Uno di questi plugin è Cache Enabler, ad esempio.

Devi notare che i plugin di caching di solito si occupano anche della riduzione e dell'unione di CSS o JavaScript. Pertanto, dovresti verificare se il tuo plugin di caching non renda già superflui i plugin per l'ottimizzazione dei CSS.

Se utilizzi il caching lato server, è consigliabile disattivare le funzioni di caching di plug-in come Autoptimize o verificare che non apportino ulteriori benefici alle prestazioni.

Conclusione: spostare molto con pochi plugin

L'avrai già notato leggendo: per l'ottimizzazione dei CSS, delle immagini e dell'ordine di caricamento, esistono dei plugin che ti tolgono molto lavoro. Ma non tutto il lavoro. Anche i plugin per la cache producono rapidamente un effetto apprezzabile, ma a volte sono molto estesi e offrono molte opzioni di configurazione e talvolta funzioni ridondanti.

In ogni caso, esamina con attenzione i plug-in che utilizzi. Solo se sai cosa succede quando utilizzi determinate funzioni puoi ottimizzare in modo sensato. Sovraccaricare il sito web di plugin per l'ottimizzazione tende a non portare a nulla di buono.

E quando ottimizzi, devi assicurarti di misurare correttamente il tuo successo. Non importa se ottimizzi manualmente o tramite un plugin. PageSpeed Insights Utilizzalo come primo punto di riferimento per identificare i punti deboli del tuo sito web. Poi misura il tempo di caricamento del tuo sito prima dell'ottimizzazione. Solo dopo aver registrato la situazione iniziale ha davvero senso ottimizzare il tuo sito web passo dopo passo. Infatti, solo quando conoscerai il tempo di caricamento prima dell'ottimizzazione e dopo ogni fase di ottimizzazione, potrai determinare i risultati ottenuti dalle singole misure di ottimizzazione.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più i nostri contenuti. Grazie!

Un commento a "Fai tacere Google PageSpeed! Risolvi i messaggi di errore più importanti"

  1. Hi Martin,
    du hast total Recht, dass es auf unserer Website noch einiges an Optimierungsbedarf gibt. Durch unseren Website Relaunch und unser Mehrsprachigkeitsplugin haben wir leider einige 404er und andere Errors, die Google zurecht schlecht bewertet. Wir sind aber dran 😁
    VG aus Münster
    Leefke

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati da *.