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 tuoi blogposts post, diciamo, parole molto chiare per il tuo 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.
Completamente reattivo, si carica in 500 ms e lo strumento di Google mi dice che le mie prestazioni da mobile sono "discrete", a causa del CSS che blocca il rendering.
- Caspar Hübinger (Glueckpress)
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 sempre sono 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 hai 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.
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 cosa ne sarà del mio posizionamento 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 hai Google Maps o Google Analytics incorporati nel vostro sito, essi genereranno il seguente messaggio di errore:
Lo stesso vale per altri servizi di terze parti. Ad esempio, la nostra chat di assistenza.
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 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.
Significato: questo messaggio di errore indica che i file CSS della pagina possono ancora essere compressi (o, nel caso precedente, che l'operazione è già stata eseguita con successo). Questa riduzione riduce il numero di caratteri nei documenti. Questo riduce le dimensioni del file. Commenti, spazi e 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 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.
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
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'host 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 hai bisogno. Soprattutto se sei 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: Rimuovi 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.
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à.
Il MinifyPlugin mostra nelle opzioni, per esempio, quali file CSS sono già stati spostati nell'intestazione. Puoi anche aggiungere manualmente altre risorse CSS qui.
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.
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.
Significato: hai 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 hai 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.
Implementazione: 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. Questo perché abbiamo attivato di serie la compressione Brotli, particolarmente forte.
Con la seguente voce nel tuo .htaccess puoi anche attivare la cosiddetta compressione GZIP 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: Distribuzione di 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.
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 host 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 in questo caso vale quanto segue: se sei un cliente di Raidboxes, 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 host 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
hai 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.
