Fate tacere Google PageSpeed! Fissare i messaggi di errore più importanti

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

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

Il collega Caspar Hübinger ha trovato qualche tempo fa in uno dei suoi blogposts post, diciamo, parole molto chiare per il suo Google PageSpeed Insights-risultato. E critica non solo lo strumento, ma anche l'uso dello strumento da parte degli utenti. Dopo tutto, se non si sa come interpretare e correggere ogni suggerimento di ottimizzazione, ci si può perdere rapidamente nella ricerca senza senso di un punteggio di 100. Questo, tuttavia, non sarebbe saggio. Perché le valutazioni utopicamente alte di Google PageSpeed sono per lo più una perdita di tempo. Più importante è l'ottimizzazione del tempo di caricamento.

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

Ma prima di mostrarvi come interpretare i singoli messaggi di errore e correggere gli errori, vorrei approfondire come usare correttamente Google PageSpeed Insights . Perché abbiamo spesso sperimentato che gli utenti erano fortemente fissati sul loro punteggio PageSpeed senza avere un occhio sul tempo di caricamento della loro pagina.

Se questa sezione non vi interessa, saltatela e imparate direttamente come risolvere il messaggio di errore "Compress CSS".

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

Non dovreste mai fare affidamento solo sui risultati o sui messaggi di errore di Google PageSpeed Insights . Perché lo strumento di Google non misura il parametro più importante del tuo sito: il tempo di caricamento della pagina. Per misurarlo correttamente, consiglio Webpagetest.org.

Solo se avete in mente il tempo di caricamento della pagina fin dall'inizio quando ottimizzate il vostro sito, potete fare affermazioni significative sul successo dell'ottimizzazione. Perché l'obiettivo di ogni ottimizzazione dovrebbe sempre essere una migliore esperienza dell'utente. Nel caso dell'ottimizzazione delle prestazioni, questo è ovviamente il tempo di caricamento della pagina e il tempo di caricamento della pagina percepito.

RICORDA.

Misurate sempre il tempo di caricamento della pagina prima di ottimizzare le prestazioni del vostro sito. Questo è l'unico modo per valutare il successo dell'ottimizzazione.

Dal punto di vista dell'utente, tempi di caricamento della pagina più veloci e dimensioni di pagina più piccole sono sempre vantaggiosi. La pazienza e la capacità di attenzione dell'utente medio continua a diminuire(come mostra questo studio di Microsoft) - questo è particolarmente cruciale per l'e-commerce - e sempre più visitatori arrivano tramite dispositivi mobili. Già nel 2016, il 56% dei tedeschi accedeva regolarmente a Internet tramite smartphone o tablet. Qui, le velocità di connessione e i volumi di dati non sono sempre illimitati. Pagine snelle e veloci sono quindi appropriate.

Google PageSpeed, tuttavia, dà solo suggerimenti sui potenziali di ottimizzazione della vostra pagina e permette solo poche conclusioni sull'esperienza dell'utente. La scarsa importanza dei messaggi di errore di Google PageSpeed è rafforzata dal fatto che lo strumento non può essere quietato in alcune aree, o solo con un notevole sforzo aggiuntivo.

Per esempio, il riferimento al caching del browser apparirà sempre quando sono incluse risorse esterne, compresi i servizi di Google. Tuttavia, queste risorse non possono essere coperte dalla cache del browser della vostra pagina. Quindi il messaggio di errore non ha alcuna rilevanza per l'esperienza utente del tuo sito, ma è prodotto dalla logica dello strumento stesso. Nel caso peggiore, il messaggio viene interpretato come se non fosse attiva la cache del browser.

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

Ma che ne sarà del mio ranking su Google?

L'esempio del caching mancante del browser mostra molto bene perché non dovreste lasciarvi scoraggiare da un presunto cattivo risultato di PageSpeed.

Per esempio, se avete Google Maps o Google Analytics incorporati nel vostro sito, essi genereranno il seguente messaggio di errore:

Tipico messaggio di errore di Google PageSpeed Insights: La cache del browser non è presumibilmente usata correttamente

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

Pertanto, ogni volta che testiamo il nostro sito su PageSpeed Insights , questo punto viene messo in gesso. Cioè, sappiamo che questo fattore distorce sempre negativamente i nostri risultati, quindi lo ignoriamo semplicemente.

Per il SEO del tuo sito, questo significa che il tempo di caricamento e l'esperienza dell'utente sono anche molto più importanti per le classifiche di Google che il punteggio specifico di PageSpeed.

Perché se ottimizzi il tempo di caricamento della tua pagina, lavorerai automaticamente su molte delle aree che sono importanti per Google. Un miglioramento del tempo di caricamento e il punteggio di Google PageSpeed sono quindi collegati in un certo modo.

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

Ma ora passiamo ai passi dell'ottimizzazione!

Messaggio di errore 1: comprimere CSS

Nella nostra esperienza, questo è uno dei messaggi di errore più scoraggianti di Google PageSpeed Insights.

Fate tacere Google PageSpeed! Fissare i messaggi di errore più importanti

Significato: Questo messaggio di errore indica che i file CSS della tua pagina possono ancora essere compressi (o nel caso precedente, che questo è già stato fatto con successo). Tale riduzione riduce il numero di caratteri nei documenti. Questo riduce la dimensione del file. Commenti, spazi e formattazione, per esempio, vengono cancellati.

Implementazione: anche se questo suggerimento sembra scoraggiante, l'implementazione è plausibilmente semplice. In linea di principio, ci sono due possibili soluzioni per questo caso: Se tu stesso sei adatto ai CSS, puoi ridurre manualmente il numero di file CSS e usare una notazione stenografica quando li crei. Puoi anche ridurre i file CSS da solo usando strumenti online come CSS Compressor o CSS Minifier.

Fate tacere Google PageSpeed! Fissare i messaggi di errore più importanti

Naturalmente c'è anche la comoda soluzione per mezzo della minificazione CSSPlugins in WordPress . Alcuni Plugins fanno direttamente un colpo 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 Minify-Plugins appena menzionati sono ampiamente utilizzati. Questo perché sono convenienti e si occupano di comprimere e unire i CSS (e molto altro) in modo completamente automatico. Fino a poco tempo fa, anche la fusione dei file CSS aveva molto senso. Ora è diverso: perché da quando esiste lo standard HTTP/2, i browser sono in grado di caricare più file dal server web allo stesso tempo.

Ciò significa che i dati non devono più essere necessariamente combinati, poiché con HTTP/2 diversi pacchetti di dati possono essere scambiati simultaneamente. HTTP/2 deve, per esempio, essere stato impostato dall'hoster e può essere usato 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 avete bisogno. Soprattutto se siete sicuri di ottimizzare i CSS da soli.

Perché un Plugin aggiuntivo può rendere la vostra pagina più lenta in certe circostanze. Soprattutto se le altre funzioni del tuttofarePlugins non possono dispiegare tutto il loro potenziale.

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

Anche questo messaggio guida molti utenti le perle di sudore sulla fronte, perché non è così facile da implementare e anche uno degli eterni punti di critica di Google PageSpeed.

Fate tacere Google PageSpeed! Fissare i messaggi di errore più importanti

Significato: una pagina web è 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. E questo è vero anche per pagine che sono già molto ben ottimizzate(come dimostra il caso di Caspar Hübinger ). Tuttavia, il suggerimento può essere molto prezioso per l'ottimizzazione del tempo di caricamento. Fondamentalmente, questo suggerimento ti dice che il codice JavaScript o CSS che è importante per il caricamento di un elemento - per esempio, un colore di sfondo - non è ancora disponibile al momento del caricamento dell'elemento. Di conseguenza, non sarà visualizzato fino a quando il comando CSS appropriato non sarà caricato. Questo aumenta il tempo di caricamento della vostra pagina, ma soprattutto, influisce sull'esperienza dell'utente perché la pagina sembra impiegare più tempo a caricarsi.

Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS-Code vom Hauptteil des HTML Dokuments, dem <body>, an den Anfang des Dokuments, den <head>, verschiebst und dort als <style> einbindest.

An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert unsere spezifische Hintergrundfarbe für den Blog. Das <style>-Element wird im head des HTML-Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.

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

Anche in questo caso, è possibile implementare questa misura di ottimizzazione in due modi: Puoi toccare il codice da solo e spostare i codici CSS nell'intestazione, o puoi lasciare che un Plugin faccia il lavoro. Anche in questo caso, Plugins come Better WordPress Minify vi aiuterà.

Google PageSpeed Insights messaggi di errore - estratto dal Plugin Better WordPress  Minify

Il MinifyPlugin mostra nelle opzioni, per esempio, quali file CSS sono già stati spostati nell'intestazione. Puoi anche aggiungere manualmente altre risorse CSS qui.

Google PageSpeed Insights messaggi di errore - estratto dal plugin di ottimizzazione Autoptimize

Il Plugin Autoptimize , d'altra parte, è un tuttofare: Qui si selezionano le opzioni per tutti i file CSS che non sono esclusi dal processo.

Gli estratti delle opzioni del Plugins mostrano: Anche la variante plugin non può essere implementata senza una comprensione di base del processo. Quindi devi anche familiarizzare con Plugins .

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.

Fate tacere Google PageSpeed! Fissare i messaggi di errore più importanti

Importanza: molti utenti sottovalutano il ruolo della dimensione dell'immagine per il tempo di caricamento della loro pagina. 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 tue immagini prima di caricarle. Ci sono strumenti online per questo, come Kraken.io. Oppure potete ridurre la qualità e quindi la dimensione del file delle vostre immagini offline, per esempio direttamente in Photoshop. In questo modo si risparmia l'extra Plugin e si mantiene il sito snello.

La soluzione più comoda è naturalmente anche qui un Plugin. I componenti aggiuntivi come Optimus o Smush ottimizzano non solo l'immagine principale, ma anche tutte le sue variazioni. Smush è anche in grado di ottimizzare tutte le vostre immagini esistenti in seguito.

Tra le altre cose, Plugins 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 della tua pagina.

Fate tacere Google PageSpeed! Fissare i messaggi di errore più importanti

Significato: avete già ridotto il più possibile le immagini e il CSS della vostra pagina. Bene! Ma non finisce qui. Perché ora puoi usare un altro meccanismo di compressione. Probabilmente conoscete questo processo per aver scaricato grandi pacchetti di dati: Di solito li avete in forma zippata, cioè compressa. Questo rende i dati più piccoli e il download più veloce. Tuttavia, i pacchetti di dati devono ancora essere scompattati dopo il download. Esattamente la stessa cosa accade durante il caricamento della pagina: Il server web consegna i pacchetti di dati compressi, il server web li scompatta. Questo rende il trasferimento dei dati più veloce e riduce il tempo di caricamento della pagina.

Attuazione: o la compressione dei dati è già impostata sul server, o devi attivarla tu stesso. Se sei un cliente di RAIDBOXES, non devi preoccuparti di nulla. Perché abbiamo la compressione Brotli, particolarmente forte, attiva di default.

Con la seguente voce nel tuo .htaccess puoi anche attivare manualmente la cosiddetta compressione GZIP. 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: consegnare contenuti statici con una politica di cache efficiente 

A mio parere, il riferimento al caching del browser è di gran lunga il più fastidioso su Google PageSpeed Insights. Questo perché si può impostare il caching del browser solo per le proprie risorse. Il caching del browser non è possibile per le risorse esterne.

Fate tacere Google PageSpeed! Fissare i messaggi di errore più importanti

Significato: il caching del browser significa che il browser memorizza una versione statica della pagina e non deve richiedere la pagina al server web quando la si visita di nuovo. La pagina è già caricata.

Attuazione: o il tuo hoster ha già abilitato il caching del browser sul lato server, o puoi impostarlo manipolando il file .htaccess (ricorda: questa impostazione funziona solo sui server web Apache). Per esempio, il codice di esempio qui sotto imposta la cache del browser a un mese, il che significa che la versione statica della vostra pagina sarà conservata 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>

Anche qui vale quanto segue: se sei un cliente di RAIDBOXES, allora il caching del browser è già attivo di default.

I miei 2 centesimi: senza cache tutto è niente

Bene, ora hai ottimizzato le immagini della tua pagina, ridotto i CSS, li hai compressi e messi nel giusto ordine, e hai fatto sì che il browser del tuo visitatore metta in cache la pagina. Tutte queste misure accorciano il tempo di caricamento della pagina.

Significato: senza una cache adeguata, tuttavia, si dà via molto di questo potenziale. Il caching è e rimane di gran lunga il fattore di performance più importante. Una cache memorizza temporaneamente il contenuto della tua pagina WordPress e assicura che l'intera pagina non debba essere ricaricata ogni volta. Invece, una versione statica, cioè già renderizzata, della vostra pagina viene consegnata da una cache. Questo bypassa il lento PHP e il database in particolare.

Implementazione: ancora una volta, o il tuo hoster ha già impostato una cache lato server, o usi un cachingPlugin. Qui ci sono alcuni Plugins molto potenti, che mettono in cache grandi parti della vostra pagina e portano a una significativa riduzione del tempo di caricamento per i visitatori del sito web di ritorno.

L'alta potenza del cachingPlugins è anche la sua più grande debolezza. Può darsi che un cachingPlugin renda il tuo sito più lento per i primi visitatori all'inizio. Questo perché più complicato è il tuo blog o sito, più complicato ed esteso deve essere il motore di caching che memorizza il tuo blog. Questo è particolarmente rilevante per i negozi.

Se stai gestendo un sito web relativamente semplice, allora le soluzioni minimaliste possono essere migliori dei colossi del caching. Uno di questi Plugins è per esempio Cache Enabler.

Si dovrebbe notare che il cachingPlugins di solito si occupa anche di ridurre e fondere CSS o JavaScript. Pertanto, dovreste controllare se il vostro cachingPlugin non rende già superfluo il Plugins per l'ottimizzazione dei CSS.

Se usate il caching lato server, si raccomanda di disattivare le funzioni di caching di Plugins, come Autoptimize , o di testare una volta, se portano qualche ulteriore vantaggio in termini di prestazioni.

Conclusione: spostare molto con pochi Plugins

Avete già notato leggendo: per l'ottimizzazione dei CSS, delle immagini e l'ottimizzazione dell'ordine di caricamento, c'è Plugins, che vi farà risparmiare un sacco di lavoro. Ma non tutto il lavoro. Caching-Plugins forniscono anche rapidamente un effetto notevole, ma sono in parte molto estese e offrono molte opzioni di configurazione e funzioni in parte ridondanti.

In ogni caso, date un'occhiata più da vicino a Plugins, che usate. Solo se si sa cosa succede quando si usano certe funzioni, si può anche ottimizzare in modo sensato. Sovraccaricare la pagina con l'ottimizzazionePlugins tende a portare poco.

E dovresti assicurarti di misurare bene i tuoi successi quando ottimizzi. Non importa se ottimizzi a mano o tramite Plugin . Usate PageSpeed Insights come primo punto di riferimento per identificare i punti deboli della vostra pagina. Poi misurate il tempo di caricamento della vostra pagina prima dell'ottimizzazione. Solo dopo questa registrazione della situazione iniziale ha davvero senso ottimizzare la tua pagina passo dopo passo. Perché solo se si conosce il tempo di caricamento prima dell'ottimizzazione e dopo ogni passo di ottimizzazione, si può anche determinare cosa hanno portato le singole misure di ottimizzazione.

Commenti su questo articolo

Scrivi un commento

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