Da quando Matt Cuts ha annunciato che la velocità di un sito web viene utilizzata come uno dei 200+ fattori per il posizionamento, la parola d’ordine è: velocizzare il proprio blog.
Analizzando le mie statistiche ho notato una cosa, gli articoli che hanno ricevuto un sacco di commenti (100+) stanno piano piano perdendo le posizioni in SERP, nonostante siano validi per l’utente.
Quale potrebbe essere il problema?
Analizzando queste pagine con il Google Webmaster Tools, ho notato una cosa sconvolgente: il tempo di download (del Googlebot) si aggira attorno ai 3 secondi (normalmente dovrebbe stare sui 400-700 ms). Beh, il problema potrebbe essere proprio questo!
Analizzo la pagina con Pingdom Tools e cosa noto?
200+ richieste, 100+ delle quali sono immagini. E che cavolo è successo al mio blog??? 😯
Il problema
Guardando gli URL di queste 100+ immagini ho capito dove si “nascondeva” il problema: i gravatar.
Il gravatar è l’avatar universale che si utilizza sul web e che viene associato ad una email.
Quando lasci un commento da qualsiasi parte (praticamente chiunque utilizza gravatar) utilizzando quella email, viene mostrato il relativo avatar, solitamente la tua bella faccina.
Ecco come puoi impostare il tuo gravatar.
Di default è attivo su ogni installazione di WordPress, come puoi vedere dal Pannello di amministrazione > Impostazioni > Discussione:
Cosa accade nella pratica?
Per ogni commento che viene lasciato sul blog, all’apertura dell’articolo viene generato una richiesta al sito gravatar per ogni singolo commento, per controllare se alla mail associata al commento corrisponde un avatar oppure no.
In caso positivo viene mostrato l’avatar, in caso negativo viene mostrato l’avatar di default che hai impostato sul tuo blog, il famoso Mystery Man.
Il secondo problema è che questi avatar hanno tutti indirizzi diversi (anche se i commenti sono dello stesso autore), quindi vengono caricati 100+ avatar differenti e non viene usato nessun sistema di cache.
Che spreco di risorse!
Soluzione – Passo 1
Siccome sono l’unico autore di questo blog, quasi la metà dei commenti sono miei.
Che senso ha chiedere ogni volta a Gravatar se alla mia email è associato un avatar?
Certo che è associato qualcosa!
Così ho modificato un po’ il codice e quando il nome utente (ma si può fare benissimo con ID utente) dell’autore del commento è uguale ad uno desiderato, mostra direttamente un’immagine che ho salvato sul mio server.
In questo modo viene richiesta e caricata una sola immagine per tutti i miei10-20-50+ commenti, un notevole risparmio di risorse.
Questo è il codice:
<?php
if ($comment->comment_author === "NOME AUTORE") {
echo "<img class='avatar' alt='NOME AUTORE' src='URL_IMMAGINE' width='64' height='64' />";
} else {
echo get_avatar($comment, 64);
}
?>Dove inserirlo?
Dove trovi il codice che inizia con get_avatar($comment … nel mio caso è in functions.php, leggi questo articolo che ti potrebbe aiutare.
Come puoi vedere il numero di richieste è sceso da 203 a 176, il Load time (tempo di caricamento) da 3.79 a 1.99 secondi, non male.
Soluzione – Passo 2
Ma tutto ciò non mi basta, la pagina è ancora troppo appesantita, troppe richieste. A questo punto decido di implementare il lazy loading per le immagini grazie al plugin Lazy loading.
Basta installarlo e funziona immediatamente in automatico.
Cosa fa? In poche parole carica le immagini appena l’utente scorre la pagina fino al punto in cui si trovano, così da caricarle solamente se necessario. Questa è un’ottimizzazione consigliata sempre, non solo per i Gravatar.
Il risultato di 30 secondi di fatica?
Il numero di richieste passa da 176 a 86, mentre il tempo di caricamento da 1.99 a 1.37… che ne dici?
Rispetto alla situazione iniziale, il numero di richieste passa da 203 a 86, il tempo di caricamento da 3.79 a 1.37… Un guadagno del 63%!
Ora il Googlebot scarica la pagina in circa 1.5 secondi, valore che rimane comunque elevato, ma è causato probabilmente dalla quantità di contenuto di cui è composta la pagina (il codice HTML generato per mostrare i 100+ commenti è davvero tanto).
Qualche lieve miglioramento anche per il posizionamento, per ora niente di così significante, staremo a vedere fra qualche settimana.
Soluzione – Drastica
Disabilitare gli avatar.
Certo graficamente non è molto elegante, ma se stai guardando solamente la velocità, beh, è la soluzione ottimale.
Come fare a disabilitarli? Semplicemente togliendo la spunta dalla casella “Mostra avatar” in Impostazioni > Discussione.
