Pagespeed google 100/100 con WordPress?

SEO Wordpress

Con il tool pagespeed insights di Google puoi testare le pagine del tuo blog WordPress affinchè tu possa migliorare l’esperienza utente riducendo i tempi di caricamento.

Come avevo accennato in un altro articolo, un punteggio positivo della pagespeed insights aiuta a velocizzare WordPress. Secondo gli esperti SEO, dei valori che si aggirano su 85/100 potrebbero portarti diversi vantaggi, tra cui quello di scalare la SERP.

PageSpeed Insights 100 su 100

Nello strumento gratuito della PageSpeed Insights otterrai dei valori divisi per Mobile e Desktop. Ormai da più di un anno sappiamo che i siti web devono essere responsive e quindi devono essere ottimizzati per i dispositivi mobili.

Per chi segue le statistiche su Google Analytics, in alcuni settori più degli altri, si sarà sicuramente accorto come le visite provenienti da dispositivi mobili abbiano raggiunto la percentuale dei siti visitati da desktop. In molti casi le visite provienti da mobile hanno superato di gran lunga quelle provenienti da desktop. Ecco perchè è fondamentale ottimizzare le pagine web per i dispositivi mobili.

Valori da correggere per ottenere 100 su 100 nella PageSpeed

Come spiegato prima, la velocità di un sito web è uno dei fattori ranking di Google. Se il tuo sito non arriva nemmeno a 50/100 in desktop è arrivato il momento di leggere questa guida e capire come ottenere 100 su 100 con il tuo blog WordPress.

01. Riduci tempo di risposta del server

I tempi di caricamento di una singola pagina dipendono anche dalla reattività che il server ha. Se il servizio hosting WordPress in cui hai installato il tuo sito non è performante, il tuo lavoro di ottimizzazione è sprecato.

Da quando ho cambiato hosting sono riuscita a migliorare notevolmente i risultati e questo grazie anche ad uno dei migliori hosting in circolazione, Siteground. Ti fornisce un servizio adatto all’installazione di WordPress ed ha un’assistenza clienti fenomenale. Te lo dico perchè quelle volte di cui ho avuto bisogno di un loro aiuto, hanno sempre trovato il modo per aiutarmi.

Quindi per migliorare i tempi di risposta del server bisogna optare per un ottimo hosting come Siteground, poi bisogna tener conto anche del tema in uso, se spreca troppe risorse inutilmente e la quantità di query fatte al database.

Per questa ultima precisazione ti potrebbe essere utile incollare il seguente codice nel footer del tuo tema per sapere quante “interrogazioni” il tema sta facendo al database ed in quanti secondi lo ha fatto.

Numero di queries <?php echo get_num_queries(); ?> in <?php timer_stop(1); ?> secondi.

Una pagina interna potrebbe consumare 30/40 queries in base a quali widget e shortcode vengono utilizzati, ma la home page, soprattutto quando è stato installato un tema magazine, potrebbe richiedere anche 100 queries. Io comunque consiglio di non andare troppo oltre perchè appunto più queries fai al database e più contenuti (multimediali) aggiungi, meno potrai ridurre il tempo di risposta del server.

02. Ottimizza immagini

L’ottimizzazione delle immagini consiste nel comprimere i file multimediali in modo tale da ottenere una “dimensione” più leggera in termini di byte.

Il nostro obiettivo è quello di non superare complessivamente 1 MB di peso della pagina, per tale motivo dobbiamo far attenzione sia alle dimensioni delle immagini che al loro peso. Chiaramente più grandi saranno e più è probabile che il loro peso aumenti.

Le immagini di tipo fotografico devono avere un formato .JPG, mentre i loghi, od in generale le immagini con uno sfondo trasparente (ad esempio le icone), potranno e dovranno essere salvate con il formato .PNG che comunque ha una qualità migliore rispetto al file JPG.

Ma veniamo al dunque. Le immagini vanno necessariamente compresse. Solitamente quando creavo o modificavo un’immagine su Photoshop, la salvavo in JPG impostando la qualità su 100 (Maximum). Sbagliato!

Dobbiamo impostare la qualità a 80 e probabilmente anche in questo caso i risultati della PageSpeed Insights ti diranno che l’immagine può essere compressa ancor di più.

In realtà se stai tentando di ottimizzare una pagina interna come ad esempio un articolo che contiene una o due immagini, potresti lasciare l’immagine con la massima qualità senza intervenire nella compressione. Questo potrebbe significare di perdere 1 o 2 punti, ma chissenefrega! Non è che avere un valore di 100 su 100 risolverà tutti i problemi legati al tuo sito. Possiamo anche stare sui 95/100 😉

Come comprimere le immagini

Se non vuoi avere tutti questi problemi e non hai voglia di modificare le immagini che hai già pubblicato sul tuo blog WordPress, ti consiglio di installare il plugin WP Smush.

In pochi minuti avrai tutte le immagini compresse, questo lavoro vale sia per le immagini originali che per i vari size delle immagini (large, medium, thumbnail e quelle impostate dal tuo tema).

03. Minimizza Javascript

La minificazione di un file consiste nel comprimere il codice al suo interno, eliminando spazi e “a capo”. Si tratta di una sorta di compressione in grado di ridurre le dimensioni del file.

Hai presente quando trovi alcuni file che alla fine riportano .min.js ? Ecco questi sono dei file già minificati.

La minificazione di un file js potrebbe essere fatta anche manualmente, ma perchè complicarci la vita se ci sono dei plugin che fanno esattamente quello che vogliamo?

04. Minimizza HTML

Minimizzare l’HTML serve sempre a sfoltire la sorgente da spazi inutili che una volta andati via potrebbero portarsi con sè anche qualche byte.

Dopo la minificazione dell’HTML vedrai che il codice della sorgente (CTRL + U) sarà tutto compattato in poche righe.

All’occhio umano la sorgente sembrerà caotica, ma non preoccuparti perchè Google, e gli altri motori di ricerca, riusciranno facilmente a leggerne il codice.

05. Minimizza CSS

Anche nel caso dei file con estensione .css possono essere compressi sempre allo scopo di alleggerire la pagina ed aumentare la velocità di WordPress.

Così come i file js, anche per i file .css è consigliabile di caricare meno file possibili. Se apri la sorgente HTML di una pagina del tuo sito web potrai vedere quanti file interni ed esterni sono stati richiamati all’interno della pagina.

Spesso vedo tanti siti web con la sorgente HTML piena zeppa di file javascript e fogli di stile, molti dei quali vengono caricati tra gli <head></head> della pagina.

Quando si crea un sito web è necessario far attenzione in primis al tema installato. Sul web puoi acquistare un’infinità di temi WordPress con centinaia di super ultra funzionalità che magari a te potrebbero non servirti, anzi non ti servono sicuramente! Tutte queste funzionalità e bla bla bla non fanno altro che appesantire il sito sia dal lato front-end che dal lato back-end.

Dunque ti consiglio di installare un tema semplice, pulito, carino e senza fronzoli ulteriori. Semmai ti dovesse servire qualche elemento aggiuntivo, potrai sempre installarlo tramite un plugin.

Anche nel caso dei plugin bisogna fare attenzione alla loro quantità e soprattutto a quanti script in giro per l’html lasciano. Poi chiaramente dobbiamo sempre vedere a cosa serve quel plugin e come interagisce con il sito. Ma in definitiva, vale sempre la regola meno plugin, meglio è.

Come minimizzare JS, CSS, HTML

Per minimizzare CSS, javascript e HTML puoi utilizzare diversi plugin WordPress. Quelli che ti consiglio ad occhi chiusi sono W3 Total Cache (gratis) e WP Rocket (a pagamento, con qualche funzionalità in più rispetto al primo consigliato).

06. Evita reindirizzamenti delle pagine di destinazione

Questo errore generalmente potrebbe apparire quando nella casella di ricerca del test inserisci l’url del tuo sito con il www (se il tuo sito non ha il www) o senza il www (se il tuo sito ha il www). Questo genera un redirect.

Se fai un test con il tool di pingdom potrai capire meglio di che si tratta, lo trovi sotto la voce “Minimize Redirect”. Uno degli errori che ricordo di aver incontrato era proprio quello di aver pubblicato delle immagine senza che l’url contenesse il WWW (mentre il mio sito è www.gloriaingrassia.com).

Me lo segnava come errore perchè si era costretti a fare un redirect da https://gloriaingrassia.com ad https://www.gloriaingrassia.com

07. Dai la priorità ai contenuti visibili

Molto semplice da spiegare. Ci sono dei plugin (o anche dei temi) che per creare un singolo elemento utilizzano un chilo di codice html.

Quando i bot di Google visitano la tua pagina dovranno trovare quante più informazioni possibili utili nella prima parte del codice.

  • Hai presente quelle mega slider solo di immagini che coprono tutto l’above the fold? Ecco, questo genera l’avviso di dare la priorità ai nostri contenuti.
  • Altri esempi di above the fold sbagliati sono quei layout a due colonne che caricano prima la sidebar e poi il box dove è contenuto il testo dell’articolo.
    In questo caso se hai un layout con una sidebar a sinistra ed il contenuto a destra, puoi semplicemente giocare con il CSS. Nell’html inserisci prima il box con il contenuto e dopo inserisci la sidebar. Alla sidebar darai un float: left e al content darai un float: right. Lato front-end vedrai sempre la sidebar a sinistra ed il contenuto a destra.
  • Un altro consiglio utile (che arriva direttamente da Google) è quello di far caricare prima il contenuto della tua pagina e poi i widget di terze parti, cioè quegli script provenienti da siti esterni.

Da diverso tempo alcuni servizi come Analytics e AdSense offrono l’integrazione del codice asincrono, cioè questi elementi si caricheranno non contemporaneamente agli elementi del sito, ma leggermente dopo per capirci.

Un altro problema legato a questo valore è che spesso la percentuale del codice html presente nella parte principale della pagina html è troppo alta rispetto al testo al suo interno contenuto.

Con questo tool puoi verificare quanto kb di codice o testo è presente ad un determinato link. Verifica quindi il Code to Text Ratio in percentuale, cioè quanto codice c’è rispetto al testo.

08. Abilita la compressione

La compressione HTTP serve a ridurre i tempi di caricamento di una specifica pagina. Insomma tutto gira sui tempi di caricamento e quindi sulla velocità di WordPress, o per meglio specificare, del nostro blog creato con WordPress.

Sempre con l’installazione del nostro amato plugin W3TC possiamo attivare la compressione GZIP, che ha una grossa capacità di ridurre la dimensione dei dati inviati e dei tempi di risposta.

Per capire se la tua compressione gzip è attiva puoi fare un semplice test gzip. Il risultato ti dirà anche quanti byte sono stati compressi e quanti invece no.

09. Sfrutta il caching del browser

Memorizzando le risorse, interne, nella chache del browser puoi ridurre di tantissimo il caricamento della pagina. Tra le risorse che possiamo memorizzare nella cache troviamo le immagini, i file CSS ed i file JS.

Cosa non possiamo memorizzare nella cache?

Arriviamo al punto dolente della situazione…

Gli elementi esterni provenienti da domini diversi dal tuo, non possono essere memorizzati. Uno degli elementi che al 100% la PageSpeed Insights ti segnalerà è proprio lo script di Google Analytics.

Potresti ovviare a questo “errore” (che poi si tratta di un semplice avviso) includendo il codice che c’è all’interno di questo file https://www.google-analytics.com/analytics.js dentro un file del tuo tema, richiamandolo nel modo corretto.

Perchè io non lo faccio? Perchè per me guadagnare un micro punto nel punteggio finale non è significativo. Scegliere di includere il codice di Analytics (ad esempio) all’interno dei file del tuo sito non è secondo me la cosa più ottimale da fare. Stiamo parlando di servizi che vengono migliorati ed aggiornati, dunque fra qualche mese il codice potrebbe cambiare ed io dovrei riaggiornarlo. Ti sembra comodo? No, grazie.

10. Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Questa regoletta ti sta dicendo in poche parole che i file .css e i file .js stanno bloccando la visibilità dei contenuti della schermata principale.

Alcuni script js vanno spostati nel parte finale del footer, altri invece più importanti vanno lasciati nell’head, poichè se spostati, potrebbero compromettere la buona visualizzazione della pagina.

L’unica cosa che potresti fare è quello di ritardare il caricamento dello script inserendo async dentro il tag <script>. Anche in questo caso dovresti fare attenzione perchè gli elementi che utilizzano questi script potrebbero non funzionare più.

È un test continuo, in questo caso hai bisogno di un esperto che si occupa dello sviluppo di temi WordPress.

Come è possibile ottenere un punteggio di 100 su 100?

Partendo dal presupposto che non devi fissarti esclusivamente sul valore finale che ottieni facendo il test PageSpeed Insights di Google, anche con WordPress è possibile arrivare al valore perfetto di 100.

PageSpeed Insights è in continua evoluzione e questo ci fa capire che è costantemente perfezionato. Ed anche noi dobbiamo continuamente perfezionare il nostro sito web!

Come Google stesso ci informa, un punteggio di 85/100 è già da considerarsi un buon punteggio.

Non ti dirò una bugia. Sebbene sia sicuramente possibile arrivare a 100 su 100 con un sito scarno con poche o nessuna risorsa esterna, il valore a cui puoi ambire tranquillamente è di 95/100 da desktop senza dover rinunciare a troppe cose. Direi che è un ottimo punteggio.

Ricordati che questi valori non sono tutto nella SEO. Focalizziamo la nostra attenzione anche su altri elementi come un ottimo contenuto.PageSpeed Insights 100/100

Che poi nemmeno Google è così perfetto. Guardate questo risultato nell’immagine qui sopra: 98/100 😀

Hosting + CDN

La prima cosa essenziale a cui non puoi fare a meno è l’acquisto di un ottimo hosting come Siteground, con l’installazione del cloudflare. Questo ti garantisce un plus nella velocità 😉

Tema WordPress

Il tema che decidi di installare deve essere semplice, pulito a livello di codice, leggero, con zero fronzoli (file interni od esterni caricati nell’head dell’HTML per slider, carousel et simili).

Per avere un tema sviluppato ad hoc devi contattare un professionista. Io mi occupo proprio di questo.

Plugin WordPress

Installa meno plugin possibili. Io generalmente installo pochi ma buoni plugin WordPress. Così come abbiamo visto in precedenza, uno di questi plugin indispensabile è W3 Total Cache.

Contenuti above the fold

Nella schermata principale above the fold devi far in modo che vengano visualizzati e caricati soltanto le cose più importanti, questo riguarda soprattutto i dispositivi mobili.

Quando l’utente visita una pagina dal suo smartphone e nella prima schermata vede soltanto il titolo, una mega immagine ed un banner, ti sembra strano che abbondoni subito il sito?

Succede proprio questo se i siti web non sono ottimizzati per il mobile.

Qual è il contenuto più importante da far visualizzare above the fold?

Il testo! I primi 2 secondi sono importantantissimi per far capire all’utente che ha trovato ciò che stava cercando. Ma se above the fold (sia mobile che desktop) metti una serie di fronzoli in prima posizione ed in più la pagina è lenta a caricarsi, sappi che l’utente è già in fuga.

Spero che l’articolo ti sia stato utile, lasciami un commento per altre info oppure contattami.

Web Hosting
Pubblicato il 22 Giu 2017
Argomenti che potrebbero interessarti: , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *