Stai zitto Google PageSpeed! Correggere i messaggi di errore più importanti

Tobias Schüring Ultimo aggiornamento il 21.10.2020
11 Min.
Messaggi di PageSpeed Insights errore di Google
Ultimo aggiornamento il 21.10.2020

Google PageSpeed Insights è un ottimo strumento per avere una rapida panoramica del potenziale di ottimizzazione del vostro sito. Oggi vi mostrerò come potete utilizzare questo potenziale e aumentare il vostro punteggio di PageSpeed. Ma non bisogna seguire pedissequamente i risultati di Google. Perché i messaggi di errore PageSpeed sono non sempre utile.

Qualche tempo fa, il nostro collega Caspar Hübinger uno dei suoi post del blogdiciamo, parole molto chiare per il suo Google PageSpeed Insights-risultato trovato. E critica non solo lo strumento, ma anche l'uso dello strumento da parte degli utenti. Perché se non si sa come interpretare e correggere i singoli suggerimenti di ottimizzazione, ci si può perdere velocemente nella caccia al 100 per cento. Ma non sarebbe saggio. Perché le valutazioni utopiche di Google PageSpeed sono di solito una perdita di tempo. Più importante è l'ottimizzazione dei tempi di carico.

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

Ma prima di mostrarvi come interpretare i singoli messaggi di errore e come correggere gli errori, vorrei spiegarvi come utilizzare PageSpeed Insights correttamente Google. Perché abbiamo spesso visto che gli utenti sono molto fissi sul loro punteggio di PageSpeed senza tenere d'occhio il tempo di caricamento della loro pagina.

Se questa sezione non vi interessa, salta l'argomento e imparare direttamente come correggere il messaggio di errore "Comprimere CSS".

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

Non bisogna mai affidarsi esclusivamente ai risultati o ai messaggi di errore di GooglePageSpeed Insights . Lo strumento Google non misura il parametro più importante della vostra pagina: il tempo di caricamento della pagina. Per misurarlo correttamente, raccomando webpagetest.org.

Solo se si tiene d'occhio il tempo di caricamento delle pagine dall'inizio dell'ottimizzazione del proprio sito, si possono fare affermazioni significative sul successo dell'ottimizzazione. Perché l'obiettivo di ogni ottimizzazione dovrebbe essere sempre un'esperienza utente migliorata. Nel caso dell'ottimizzazione delle prestazioni, questo è ovviamente il tempo di caricamento delle pagine e il tempo di caricamento percepito.

AVVISO!

Misurare sempre il tempo di caricamento della pagina prima di ottimizzare le prestazioni della pagina. Solo così è possibile stimare il successo dell'ottimizzazione.

Dal punto di vista dell'utente, un tempo di caricamento delle pagine più veloce e dimensioni delle pagine più piccole sono sempre un vantaggio. La pazienza e l'attenzione dell'utente medio è in costante diminuzione (come dimostra questo studio di Microsoft) - questo è particolarmente cruciale per l'e-commerce - e sempre più visitatori arrivano attraverso i dispositivi mobili. Già nel 2016 Il 56% dei tedeschi utilizza regolarmente Internet tramite smartphone o tablet chiamato. Le velocità di connessione e i volumi di dati non sono sempre illimitati. Le pagine sottili e veloci sono quindi appropriate.

Google PageSpeed, tuttavia, fornisce solo suggerimenti sul potenziale di ottimizzazione del vostro sito e permette solo poche conclusioni sull'esperienza dell'utente. La scarsa rilevanza dei messaggi di errore di Google PageSpeed è rafforzata dal fatto che lo strumento non può essere immobilizzato in determinate aree o solo con notevoli spese aggiuntive.

Ad esempio, il riferimento alla cache del browser apparirà sempre quando le risorse esterne - compresi i servizi propri di Google - sono integrate. Ma queste risorse non possono essere coperte dalla cache del browser del vostro sito. Il messaggio di errore non ha alcuna rilevanza per l'esperienza dell'utente del vostro sito, ma è prodotto dalla logica dello strumento stesso. Nel peggiore dei casi, il messaggio verrà interpretato come se non fosse attiva la cache del browser.

Quindi non giudicate principalmente dal rating di Google, ma dal tempo di caricamento. Questo è l'unica variabile veramente importante.

Ma che ne è del mio ranking su Google?

L'esempio della cache del browser mancante rende molto chiaro il motivo per cui non si dovrebbe essere disturbati da un presunto cattivo risultato di PageSpeed.

Ad esempio, se avete integrato Google Maps o Google Analytics sul vostro sito, causeranno il seguente messaggio di errore:

Tipici messaggi di PageSpeed Insightserrore di Google: La cache del browser non viene utilizzata in modo corretto

Lo stesso vale per altri servizi di terzi. Per esempio la nostra chat di supporto.

Così, ogni volta che PageSpeed Insights testiamo il nostro sito, questo punto viene evidenziato. Ciò significa che sappiamo che questo fattore distorce sempre negativamente i nostri risultati e quindi semplicemente lo ignoriamo.

Per il SEO del vostro sito questo significa: anche per il ranking di Google il tempo di caricamento e l'esperienza dell'utente sono molto più importanti del concreto rating PageSpeed.

Perché se si ottimizza il tempo di caricamento della pagina, si modificano automaticamente molte delle aree importanti per Google. Quindi un miglioramento del tempo di caricamento e il punteggio di Google PageSpeed sono collegati in un certo modo.

Ma secondo me non dovresti perderti nella caccia ai 100 voti.

Ma ora passiamo alle fasi di ottimizzazione!

Messaggio di errore 1: Comprimere CSS

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

Stai zitto Google PageSpeed! Correggere i messaggi di errore più importanti

Significato: Questo messaggio di errore indica che i file CSS del vostro sito possono ancora essere compressi (o nel caso di cui sopra, che questo è già stato fatto con successo). Tale compressione ridurrà il numero di caratteri nei documenti. Questo riduce le dimensioni del file. Ad esempio, i commenti, gli spazi e la formattazione vengono cancellati.

Implementazione: anche se questo riferimento ha un effetto deterrente, l'implementazione è molto semplice. In linea di principio, ci sono due possibili soluzioni per questo caso: Se si è in forma nei CSS da soli, è possibile ridurre il numero di file CSS manualmente e creare un Forma abbreviata uso. È possibile utilizzare i file CSS anche tramite strumenti online, come ad esempio Compressore CSS oppure CSS Minificatore...ridurlo a mano.

Stai zitto Google PageSpeed! Correggere i messaggi di errore più importanti

Naturalmente c'è anche la comoda soluzione che utilizza la miniaturizzazionePlugins CSS in WordPress . Alcuni Plugins di loro fanno direttamente un avvolgimento 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 in WordPress HTML, CSS e JavaScript, vedere in questo articolo..

Con HTTP/2 non ha necessariamente senso combinare i CSS

Le Mini-Plugins appena menzionate sono ampiamente utilizzate. Perché sono confortevoli e assumono la compressione e la riassumibilità dei CSS (e molto altro ancora) in modo completamente automatico. Fino a poco tempo fa, anche la fusione dei file CSS aveva molto senso. Ora è diverso: dal momento che il Standard HTTP/2 i browser sono in grado di caricare più file contemporaneamente dal server web.

Ciò significa che i dati non devono più essere combinati, poiché HTTP/2 consente lo scambio simultaneo di più pacchetti di dati. HTTP/2 deve essere stato impostato dall'hoster, ad esempio, e può essere avviato solo con Certificato SSL può essere utilizzato.

Quindi, prima di deciderne uno Plugin con diverse dozzine di funzioni e opzioni di configurazione, pensate attentamente se ne avete bisogno. Soprattutto se si pensa di poter ottimizzare i CSS da soli.

Perché un altro Plugin può rallentare il vostro sito in determinate circostanze. Soprattutto se le altre funzioni dei "tuttofare" nonPlugins possono sviluppare appieno il loro potenziale.

Messaggio di errore 2: Rimuovere il rendering che blocca le risorse

Questo messaggio fa sudare anche molti utenti, perché non è così facile da implementare ed è anche una delle eterne critiche di Google PageSpeed.

Stai zitto Google PageSpeed! Correggere i messaggi di errore più importanti

Significato: una pagina web viene costruita in un certo ordine. Questo ordine di caricamento può essere ottimizzato. PageSpeed si lamenta quasi sempre che i file CSS bloccano questo ordine di caricamento ottimale. Questo vale anche per le pagine già ottimizzate (come dimostra il caso Caspar Hübinger). Tuttavia, la nota può essere molto preziosa per l'ottimizzazione dei tempi di carico. Fondamentalmente, questo suggerimento dice che il codice JavaScript o CSS che è importante per un elemento da caricare - per esempio, un colore di sfondo - non è ancora disponibile al momento del caricamento dell'elemento. Pertanto, non verrà visualizzato fino a quando non verrà caricato il comando CSS corrispondente. Questo aumenta il tempo di caricamento della pagina, ma influisce soprattutto sull'esperienza dell'utente, perché la pagina sembra caricarsi più a lungo.

Implementazione: una soluzione comune è l'implementazione di una regola generale: CSS nell'intestazione. Questo significa che si sposta il codice CSS dal corpo del documento HTML, il , all'inizio del documento, il , e lo si come .

Questo esempio chiarisce cosa intendo. Il frammento di codice qui sotto definisce il nostro colore di sfondo specifico per il blog. L'



Questa misura di ottimizzazione può essere attuata in due modi: Potete toccare il codice da soli e spostare il codice CSS nell'intestazione, oppure potete lasciare che sia uno Plugin a fare il lavoro. Anche in questo caso, è possibile utilizzarePlugins WordPress Minimizzare meglio Continua.

Messaggi di errore PageSpeed Insights di Google - estratto da Plugin Better WordPress  Minify

Il Minify-Plugin mostra nelle opzioni, ad esempio, quali file CSS sono già stati spostati nell'intestazione. Qui si possono anche aggiungere manualmente altre risorse CSS.

Messaggi di PageSpeed Insights errore di Google - estratto dall'ottimizzazioneplugin Autoptimize

Questo, invecePlugin Autoptimize , è il punto di partenza per un attacco a tutto campo: Qui si scelgono le opzioni per tutti i file CSS non esclusi dal processo.

Gli estratti delle opzioni dello Plugins spettacolo: La variante del plugin non può essere implementata senza una conoscenza di base del processo. Quindi bisogna Plugins anche imparare ad usarli.

Messaggio di errore 3: Codificare le immagini in modo efficiente

Anche a questo punto, ci sono molte lamentelePageSpeed Insights . Tuttavia, questo caso è quasi sempre rapido e facile da implementare e di solito porta vantaggi tangibili in termini di tempo di carico.

Stai zitto Google PageSpeed! Correggere i messaggi di errore più importanti

Significato intenzionale: molti utenti sottovalutano il ruolo della dimensione dell'immagine per il tempo di caricamento della loro pagina. Le immagini sono molto spesso uno dei freni più grandi nei tempi di caricamento. Anche se per le singole immagini vengono salvate solo piccole quantità di dati, il volume totale salvato può arrivare ad una notevole quantità di dati.

Perché raramente un'immagine è una sola immagine. WordPress genera automaticamente diverse miniature dell'immagine durante il caricamento. Quindi se non usate gli originali sulla vostra homepage, ma versioni più piccole di essi, cioè miniature o Immagini in primo pianoallora anche questi dovrebbero essere ottimizzati. Da un'immagine così rapidamente diversi file, che portano con sé anche un carico di dati multipli.

Implementazione: Fondamentalmente avete due possibilità per ottimizzare le vostre immagini. Si ottimizzano le immagini prima del caricamento o dopo o durante il caricamento. Il primo si può fare tramite strumenti online o offline, il secondo si fa tramite i corrispondenti WordPress Plug-in per il miglioramento dell'immagine.

Se è possibile integrare in modo sensato la compressione nel flusso di lavoro, ha senso ottimizzare le immagini prima di caricarle. A questo scopo ci sono strumenti online, come Octopus.io. Oppure potete ridurre la qualità e quindi la dimensione del file delle vostre immagini offline, ad esempio direttamente in Photoshop. In questo modo si risparmia il lavoro extra Plugin e si mantiene il sito snello.

La soluzione più comoda è naturalmente un Plugin. Componenti aggiuntivi come Optimus oppure Smush ottimizzare non solo l'immagine principale, ma anche tutte le sue varianti. Smush è anche in grado di ottimizzare tutte le immagini esistenti in seguito.

Tra le altre cose, Plugins lavorano con un cosiddetto "compressione senza perdite". Ciò significa che, sebbene la dimensione del file delle immagini sia ridotta, la loro qualità visibile non diminuisce.

Messaggio di errore 4: Attivare la compressione del testo

Questo messaggio di errore di Google PageSpeed può essere risolto molto rapidamente e può ridurre notevolmente il tempo di caricamento della vostra pagina.

Stai zitto Google PageSpeed! Correggere i messaggi di errore più importanti

Significato intenzionale: avete già ridotto il più possibile le dimensioni delle immagini e dei CSS del vostro sito. Questo è un bene! Ma questa non è la fine della storia. Perché ora è possibile utilizzare un altro meccanismo di compressione. Probabilmente conoscete questo processo grazie al download di grandi pacchetti di dati: Questi sono di solito in forma compressa e con cerniera. Questo rende i dati più piccoli durante il download e quindi il download più veloce. Tuttavia, i pacchetti di dati devono ancora essere decompressi dopo il download. Esattamente lo stesso accade durante la costruzione delle pagine: Il server web consegna i pacchetti di dati in forma compressa, il server web li scompatta. Questo rende più veloce il trasferimento dei dati e riduce il tempo di caricamento delle pagine.

Implementazione: o la compressione dei dati è già impostata sul lato server, oppure è necessario attivarla personalmente. Se sei un RAIDBOXES cliente, non devi preoccuparti di nulla. Perché abbiamo il particolarmente forte Compressione Brotli attivo.

Con la seguente voce nel vostro .htaccess potete anche attivare manualmente la cosiddetta compressione GZIP. A condizione che si disponga di un server web Apache.


 mod_gzip_on Sì
 mod_gzip_dechunk Sì
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_item_include mimo ^testo/.*
 mod_gzip_item_item_include mime ^applicazione /x-javascript.*
 mod_gzip_item_item_exclude mime ^image/.*
 mod_gzip_item_item_exclude rspheader ^Codice dei contenuti:.*gzip.*
 
 
 
 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
 

Messaggio di errore 5: Fornire contenuti statici con una politica di caching efficiente 

A mio parere, il riferimento alla cache del browser è di gran lunga il più fastidioso su Google PageSpeed Insights. Perché è possibile impostare il caching del browser solo per le proprie risorse. Il caching del browser non è possibile per le risorse esterne.

Stai zitto Google PageSpeed! Correggere i messaggi di errore più importanti

Significato: la cache del browser significa che il browser memorizza una versione statica della vostra pagina e non deve richiedere al server web una visita ripetuta, ma la pagina è già caricata.

Implementazione: o il vostro hoster ha già abilitato il caching del browser sul lato server, oppure potete impostarlo manipolando il file .htaccess (ricordate: questa impostazione funziona solo sui web server Apache). Il codice di esempio qui sotto, ad esempio, imposta la cache del browser a un mese, cioè la versione statica della vostra pagina viene memorizzata nel browser del visitatore per un mese.


ScadenzaAttivo il
ScadenzaDefault "accesso 60 secondi
Scadenza Per tipo di immagine/jpg "accesso più 1 mese
Scadenza Per tipo di immagine/jpeg "accesso più 1 mese
Scadenza Per tipo di immagine/gif "accesso più 1 mese
Scadenza Per tipo di immagine/png "accesso più 1 mese
Scadenza Per tipo di immagine/ico "accesso più 1 mese
Scadenza Per tipo di testo/css "accesso 1 mese
Scadenza Per tipo di testo/javascript "accesso 1 mese
Scade Per tipo di applicazione/javascript "accesso 1 mese
Scadenza Per tipo di applicazione/x-shockwave-flash "accesso 1 mese

Anche qui vale: se siete RAIDBOXES clienti, la cache del browser è già attiva di default.

I miei 2 centesimi: senza cache tutto è niente

Bene, ora avete ottimizzato le immagini sul vostro sito, ridotto i CSS, compresso e messo nel giusto ordine e fatto in modo che i browser dei vostri visitatori mettano in cache la pagina. Tutte queste misure accorciano il tempo di caricamento delle pagine del vostro sito.

Significato intenzionale: senza una cache adeguata, tuttavia, si perdona molto di questo potenziale. Il caching è e rimane di gran lunga il fattore di performance più importante. Una cache memorizza temporaneamente il contenuto della WordPress pagina e garantisce che non sia necessario ricaricare l'intera pagina ogni volta. Invece, una versione statica, già resa, della vostra pagina viene fornita da una cache. Questo bypassa soprattutto il lento PHP e il database.

Implementazione: Anche in questo caso vale quanto segue: o il vostro hoster ha già cache lato server oppure si può usare un cachingPlugin. Qui ce ne sono alcuni molto potenti Pluginsche mettono in cache grandi parti della vostra pagina e portano a una significativa riduzione dei tempi di caricamento per il ritorno dei visitatori.

L'alta potenza del cachingPlugins è anche la sua più grande debolezza. Può darsi che il cachingPlugin rallenti il vostro sito per i visitatori che visitano per la prima volta. Più complicato è il vostro blog o sito, più complicato ed esteso deve essere il motore di cache che mette in cache il vostro blog. Questo è particolarmente importante per i negozi.

Se si gestisce un sito web relativamente semplice, le soluzioni minimaliste potrebbero essere migliori del caching all-rounders. Una di queste Plugins soluzioni snelle è ad esempio abilitatore della cache.

Si noti che il caching vienePlugins solitamente utilizzato anche per ridurre e fondere CSS o JavaScript. Pertanto, si dovrebbe verificare se il cachingPlugin non rende già superflua l'Plugins ottimizzazione dei CSS.

Se si utilizza il caching lato server, si consiglia Autoptimize di disattivare le funzioni di caching di Plugins, o di verificare una volta, se queste portano un ulteriore vantaggio in termini di prestazioni.

Conclusione: Muoversi Plugins molto con pochi

L'avete già notato durante la lettura: per l'ottimizzazione dei CSS, delle immagini e l'ottimizzazione dell'ordine di caricamento ce ne Pluginssono alcune che vi fanno risparmiare molto lavoro. Ma non tutto il lavoro.Plugins Anche il caching produce rapidamente un effetto notevole, ma a volte è molto esteso e offre molte opzioni di configurazione e funzioni parzialmente ridondanti.

Assicuratevi di guardare attentamente quelli che Pluginsusate. Solo se si sa cosa succede quando si utilizzano determinate funzioni, è possibile ottimizzare in modo sensato. Il sovraccarico della pagina con l'ottimizzazionePlugins tende a portare poco.

E si dovrebbe fare in modo di misurare correttamente i propri successi quando si ottimizza. Non importa se si ottimizza a mano o via Plugin internet. Utilizzatelo PageSpeed Insights come primo punto di orientamento per identificare i punti deboli del vostro sito. Quindi misurare il tempo di caricamento del vostro sito prima dell'ottimizzazione. Solo dopo che la situazione iniziale è stata registrata, ha davvero senso ottimizzare il vostro sito passo dopo passo. Perché solo così, se si conosce il tempo di caricamento prima e dopo ogni fase di ottimizzazione, è possibile determinare i risultati delle singole misure di ottimizzazione.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo mail non sarà pubblicato. I campi obbligatori sono contrassegnati con * marcato.