Ci sono molte ricerche che dimostrano indiscutibilmente che la velocità di caricamento di un sito è davvero importante.
Non bastassero, è ormai dal 2010 che Google ha ufficializzato la velocità di un sito web come fattore di ranking nella SERP Desktop, concetto ulteriormente ribadito nel 2018 con l’introduzione nella SERP Mobile dello Speed Update.
Eppure, a distanza di anni la velocità di caricamento del sito viene ancora vista come “una di quelle cose che poi metto a posto quando ho tempo, tanto tutto il resto è ok”.
Perché la velocità di caricamento di un sito è importante?
Perché non importa se vendi merci, offri servizi o hai un semplice blog. Se il tuo sito è lento perderai traffico, visitatori e denaro.
Già fare web marketing è sempre più complicato, se poi ti dai anche la zappa sui piedi… Perciò testa il tuo sito e, se ti accorgi che le prestazioni non sono elevate, ti resta soltanto una strada da percorrere: analizza i dati raccolti e inizia a lavorare per migliorarne le prestazioni.
Come? Eccoti qualche suggerimento.
Come aumentare la velocità del tuo sito
Avere un hosting che utilizza l’hardware e le tecnologie più recenti è essenziale per le prestazioni del tuo sito, ma non è l’unica cosa importante: ci sono molti altri strumenti e tecniche che puoi usare per migliorare la velocità del tuo sito web.
Eccoti una breve guida degli step e strumenti che utilizzo di solito nella fase di analisi.
1. Identifica i problemi: strumenti per testare la velocità del tuo sito
Per prima cosa, devi sapere se hai davvero un problema: il modo più semplice per scoprirlo è tramite i test benchmark di velocità. Gli strumenti – gratuiti – che utilizzo sono:
Google Pagespeed Insights
Il primo tool di cui ti parlerò fa parte della grande famiglia di Google, si chiama Pagespeed Insights ed è uno dei più semplici da usare.
Una volta che atterri sulla sua homepage, trovi un semplice riquadro dove inserire l’url della pagina che vuoi esaminare, e dopo aver cliccato sul bottone Analizza ti compariranno una serie di valori divisi tra mobile e desktop.
I valori presenti in entrambe le schermate sono:
- Velocità: questa metrica rappresenta il tempo di caricamento della pagina. In questo riquadro sono presenti due valori, il primo si chiama First Contentful Paint (FCP) e indica in quanto tempo la pagina viene visualizzata dall’utente, il secondo invece è DOM Content Loaded (DCL) e indica in quanto tempo è stato analizzato il codice in HTML
- Ottimizzazione: é un punteggio su base 100 che indica il grado di ottimizzazione della pagina che è stata analizzata
- Distribuzioni dei caricamenti di pagine: un semplice grafico riepilogativo che indica le risorse divise per Fast, Average e Slow con indicato il loro valore percentuale sul totale degli elementi caricati.
- Suggerimenti per l’ottimizzazione: in questa sezione il tool ti da consigli su come puoi ottimizzare la pagina analizzata
Puoi accedere al tool cliccando su questo link: PageSpeed Insights
Piccola parentesi: questo tool, come altri, analizza l’URL che gli dai tu, ovvero scansiona solo una pagina per volta. Vero è che, nella maggior parte dei casi, l’homepage risulta quella più pesante e lenta nel caricamento, ma non è sempre così. Quindi, prima di passare all’analisi vera e propria, hai bisogno di identificare tutte le pagine su cui dovrai lavorare.
Se, come immagino, hai tra le mani un sito con qualche decina di pagine o più, dovrai ricorrere all’utilizzo di un software che simuli il comportamento di uno spider: per questo tipo di operazione ti consiglio Screaming Frog.
Webpage test
Senza andare troppo sul tecnico, con WebPageTest puoi testare se le configurazioni a livello di server e hosting sono efficaci: questo servizio ti riassume in maniera abbastanza intuitiva i parametri che analizza, in una scala da A (ottimo) a E (svegliaaaa). Il parametro forse più importante è quello del First Byte Time, ovvero un valore utilizzato per misurare la reattività di un web server (o di un’altra risorsa di rete).
Viene misurato contando il tempo trascorso dalla richiesta HTTP del client alla ricezione del primo byte della pagina. La scala con cui puoi valutare questo dato è all’incirca questa:
- o,1 – 0,2 secondi: ottimo
- o,3 – 0,5 secondi: buono
- o,6 – 0,9 secondi: nella media
- 1,0 – 1,5 secondi: aggrotta la fronte
- 1,6 secondi o più: ahi ahi ahi signora Longari
Qui sotto puoi vedere un esempio di analisi fatta sul mio sito, a cui devo ancora dare una piccola sistemata nelle funzioni di caching 😉
Se i test mostrano che hai problemi relativi alla velocità del tuo sito web, il passo successivo è identificarne le cause.
Ogni sito è unico e con problemi propri, ma le cause più comuni possono essere sintetizzate in:
- troppi articoli nella pagina iniziale
- troppi plugin e widget social e di condivisione
- troppi font esterni
- temi “gonfi” di troppe funzioni
- immagini di grandi dimensioni e non ottimizzate
Prima di buttarti a capofitto nella risoluzione delle problematiche, crea una lista di priorità considerando due aspetti:
- quanto è difficile risolvere il problema?
- quale effetto ha la risoluzione del problema sul mio sito?
Rispondendo, crei una lista di priorità che partono da quelle che avranno l’impatto più significativo in base al tempo impiegato.
Vediamo adesso le soluzioni più comuni a questi problemi.
PS: anche se la maggior parte degli strumenti di benchmark ti darà un “voto”, non farne un’ossessione: se il tuo sito web si carica in meno di un secondo, hai fatto il grosso del lavoro.
2. Ottimizza dimensioni pagina e contenuto
Come puoi ridurre il numero di articoli visualizzati in homepage?
Con WordPress ti basta andare nel pannello amministrazione in “Impostazioni -> Lettura -> Le pagine del blog visualizzano al massimo” e ridurre il valore degli articoli che le pagine del blog “visualizzano al massimo”.
In alternativa, puoi usare un plugin come YITH Infinite Scrolling, che mostra dinamicamente più articoli quando gli utenti scorrono verso il basso vicino al termine della pagina (in stile Facebook, per intenderci).
Se tendi a scrivere articoli lunghi…
… puoi dividerli in più pagine utilizzando il tag <!–nextpage–> all’interno del contenuto del tuo articolo.
In questo modo, dividerai una pagina grande e lenta in molteplici pagine più veloci, sotto ognuna delle quali vedrai i numeri di pagina che ti aiuteranno a navigare nel contenuto.
Utilizza un’immagine statica al posto dello slider
Generalmente, gli slider richiedono molte risorse JavaScript. Inoltre, non tutti i plugin che abilitano questa funzionalità sui siti WordPress sono scritti con un codice leggero e ottimizzato. Ultimo, ma non meno importante, gli slider non sono particolarmente intuitivi su mobile.
Quindi, se il tuo design lo consente, sostituisci lo slider con una singola immagine statica.
Se invece dev’esserci per forza, usa il plugin Soliloquy: disponibile sia in versione gratuita che pro, crea uno slider leggero e veloce, che soddisfa la maggior parte delle esigenze.
Utilizza i formati di immagine appropriati
Le immagini costituiscono una parte fondamentale di un sito web e potrebbe occorrere del tempo per trasferirle dal server durante il caricamento della pagina.
Se desideri visualizzare un’immagine di 300×300 pixel, caricala di queste dimensioni e NON a 1024×1024 per poi cambiare le impostazioni con HTML e CSS affinché sia visualizzata più piccola.
Ottimizza le dimensioni dell’immagine senza danneggiarne la qualità
Per questo lavoro, dai un’occhiata al plugin Compress JPEG & PNG images che accelera il tuo sito web.
Ottimizza automaticamente le tue immagini JPEG e PNG con TinyPNG, riducendo la dimensione delle immagini senza danneggiare la loro qualità e rimuovendo tutti i dati non necessari che la fotocamera salva quando scatti una foto (es. la posizione GPS) per migliorare le prestazioni complessive: anche se il file si riduce di pochi Kb, quando si mettono le immagini tutte insieme in una pagina il miglioramento delle prestazioni è notevole.
Riduci l’utilizzo dei font esterni
Ogni font che usi da Google Free Fonts o da un altro servizio simile ha più varianti, peso, codifica, stile e così via.
Controlla il tuo sito e includi solo la variante del font che stai effettivamente utilizzando.
Abilita la compressione gZIP per le tue pagine
Con la compressione gZIP abilitata, l’output HTML finale del tuo sito e alcune delle risorse statiche vengono compresse prima di essere trasmesse al tuo visitatore. A questo punto, il browser del visitatore decomprime il contenuto prima dell’esecuzione: è molto più veloce comprimere e decomprimere questo contenuto piuttosto che trasferirlo senza compressione.
Per abilitare la compressione gZIP, la prima e forse più semplice modalità è ricorrere ad un plugin di caching che permette di abilitare GZIP. W3 Total Cache, ad esempio, permette di attivare GZIP nella sezione dedicata alle performance.
Sebbene si tratti di plugin, questa modalità presuppone il permesso di modificare i file sul proprio server. Se il tuo plugin di caching non dispone di questi permessi, sarà necessario chiedere al tuo host, oppure aggiungere questo codice al di sotto del contenuto corrente del file .htaccess nella cartella principale di WordPress:
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
Minimizza e combina i file JS e CSS
Minificazione e combinazione sono due tecniche che hanno un solo scopo: ridurre le dimensioni e il numero di file JavaScript e CSS caricati dal sito.
La minificazione elimina tutti i simboli non necessari rimuovendo byte da caricare ogni volta che richiedi un URL. La combinazione, invece, combina più file JavaScript e CSS in uno solo, riducendo il numero di richieste fatte al tuo sito.
Un buon plugin che si occupa di questo è Autoptimize.
Abilita la cache
La cache è una tecnologia che salva l’esito delle diverse operazioni che il tuo sito deve eseguire per riprodurre il contenuto finale. Essa restituisce poi questo “prodotto pronto” alla visita successiva.
Con una buona soluzione di caching, il tuo sito sarà veloce come una pagina statica fino a quando non viene fatta una modifica. In questo caso, la pagina verrà caricata dinamicamente per il primo visitatore dopo la modifica.
Il modo più semplice per memorizzare la cache è affidarsi a un plugin come WP Super Cache, che salva il contenuto sull’hard disk del server e migliora le prestazioni visto che il contenuto non viene caricato dinamicamente ogni volta.
3. Ottimizza tema e plugin
Sia i temi che i plugin sono fondamentali per la velocità del tuo sito web, in quanto, fondamentalmente, sono pezzi di codice eseguiti dal tuo sito nel momento in cui vi accedi, quindi meglio ottimizzare questo codice!
Ecco qualche consiglio.
Seleziona un tema affidabile da un fornitore solido
Ogni ora che trascorri adesso a cercare il tuo tema, ti farà risparmiare giorni di lavoro in futuro, in termini di facilità di gestione.
Leggi le recensioni dei temi, prova a ottenere feedback reali da chi già lo utilizza, controlla nella community di WordPress se chi ha “costruito” il tema è affidabile, ovvero se rilascia aggiornamenti e assistenza.
Un tema ben scritto è fondamentale perché la qualità del codice del tema influisce su ogni parte del sito web. Ad esempio, alcuni temi hanno funzionalità con caratteristiche e plugin aggiuntivi (es. gli articoli correlati) che spesso provocano tempi di caricamento lenti a causa del modo in cui sono strutturate le query sul database MYSQL.
Evita temi “gonfiati”
Durante la ricerca, ti imbatterai quasi sicuramente in temi che affermano di poter essere utilizzati praticamente per qualsiasi tipo di sito web, attività, business.
Ecco, spesso sono pieni di funzionalità che richiedono molte risorse JavaScript e CSS, quindi se davvero non ti servono e non le utilizzi allora stai solo sprecando risorse.
Scegli un tema che abbia le funzionalità di cui realmente necessiti: le altre le potrai eventualmente aggiungere in futuro con i plugin.
Utilizza sempre un tema child
Usando un tema child (letteralmente: figlio), ovvero un template che importa tutte le funzionalità e caratteristiche di un altro tema chiamato parent theme (il tema “genitore”), puoi modificare e/o aggiungere funzionalità al tuo template senza dover sovrascrivere alcun file del parent theme, rischiando di commettere errori o di perdere il tuo lavoro quando effettui aggiornamenti.
Gli aggiornamenti dei temi, infatti, creano nuove versioni che sovrascrivono le personalizzazioni che magari hai apportato al tuo tema: utilizzare un tema child ti evita questo inconveniente.
Per impostare il tuo tema child, fai riferimento alle istruzioni su WordPress.org oppure fai riferimento alle istruzioni relative al tuo tema specifico.
Ottimizza per i dispositivi mobili
Questo ormai è imprescindibile, non sto neanche più a raccontarti quanto traffico proviene da smartphone, tablet e compagnia cantante. Le cose principali che devi fare sono:
- testa le tue pagine con il test di ottimizzazione mobile di Google, che ti fornisce informazioni per capire se una determinata parte della tua pagina non è ottimizzata per il responsive
- scegli sempre un tema che sia nativamente responsive, e quando testi il tuo sito controlla anche la versione mobile
- se il tuo tema non ha una versione mobile, puoi considerare l’utilizzo di un plugin come WP Touch, che genera una versione mobile della tua pagina. Sempre meglio, però, se il tuo tema è nativamente responsive
Non sovrapporre i plugin per le stesse funzionalità
Non installare un altro plugin se uno di quelli che già utilizzi può fare lo stesso lavoro.
Ad esempio, se hai Yoast SEO e vuoi una Sitemap XML da dare in pasto a Google, abilità questa funzionalità nella pagina delle impostazioni dei plugin invece di aggiungere un altro plugin.
Mantieni i plugin sempre aggiornati
In questo modo, avrai tutti i miglioramenti delle prestazioni della release più recente e potrai utilizzare versioni PHP più recenti, che danno al tuo sito un aumento verticale delle prestazioni.
Inoltre, se un plugin non lo usi, cancellalo: è una buona norma di sicurezza e una cosa in meno che rallenta il back-end.
In conclusione, ottimizzare la velocità del tuo sito è un aspetto importante e continuativo nella creazione e mantenimento della tua presenza web. Senza ottimizzazione, rischi di:
- pagare di più
- perdere visitatori e conversioni
- danneggiare il tuo brand e la tua reputazione
Seguendo i consigli che ti ho dato fin qui, sarai sulla buona strada per garantire ai tuoi utenti un’esperienza e una permanenza ottimali sul tuo sito web.
Fammi sapere cosa ne pensi!
