Vai al contenuto

5 semplici step per aumentare subito la velocità del tuo sito

Paragrafi di questo articolo

In questa guida passo-passo ti mostrerò come aumentare concretamente la velocità del tuo sito per raggiungere il punteggio massimo di 100 su Page Speed.

Nel 2010 Google ha annunciato ufficialmente che la velocità di caricamento è un fattore di ranking per le ricerche da desktop. Nel 2018 l’algoritmo si evolve e lo stesso discorso vale anche per il settore degli smarphone. Tutto questo vale sia per la ricerca organica, che per il traffico a pagamento di Google Ads.

Pertanto si evince subito quanto sia importante la velocità per un sito di successo. Perché non solo i motori di ricerca gradiscono pagine che si caricano in meno di 3 secondi, ma anche (e sopratutto) gli utenti. Infatti una ricerca realizzata nel 2017 ha scoperto che il 53% delle persone abbandonano un sito che impiega più di 3 secondi per apparire a schermo.

Ti piacerebbe avere subito il tuo sito tra le prime posizioni di Google? Contattami subito per una consulenza gratuita e senza impegno.

Quindi per fare goal nel tuo business devi assolutamente avere un sito che si carica in un lampo, e io ti spiego adesso come riuscirci concretamente in pochi e semplici passaggi.

1. Attiva la compressione Gzip

La compressione Gzip è una funzionalità che serve per diminuire il peso dei dati inviati dal server al browser dell’utente. In parole povere alleggerisce le risorse html, css e javascript che il tuo computer deve ricevere. La riduzione può arrivare anche al 75%!

Prima di iniziare assicurati che non sia già attiva. Per farlo ti basta andare sul sito GZIP Compression Test e testa la tua url.

Se ti appare un messaggio come quello dell’immagine, allora è già attiva e puoi passare allo step successivo, altrimenti ti spiego come attivarla immediatamente.

In questo paragrafo dovrai mettere mano al codice del tuo sito, e più precisamente nel file .htaccess. Niente di eccessivamente complicato, sopratutto se utilizzi wordpress con installato il plugin YOAST (cosa che ti consiglio caldamente di fare).

E’ possibile anche attivare la compressione del sito molto più semplicemente installando un plugin. Vediamo entrambi i casi.

Se hai già installato YOAST: dal pannello admin vai alla voce: SEO -> Strumenti -> Modifica File. Scorri in basso e nella sezione .htaccess e incolla il seguente codice al di sotto del testo già presente:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Adesso salva le modifiche e ripeti il test sul sito GZIP Compression Test per verificare che sia tutto operativo.

Se invece vuoi attivare la compressione Gzip in modo più semplice ti basterà installare il plugin gratuito Enable Gzip Compression che in un attimo farà tutto in automatico.

2. Attivare la cache del browser

Questa tecnica permette di far memorizzare le risorse necessarie per visualizzare una pagina all’interno della cache del browser dell’utente, in questo modo non sarà necessario che il server le reinvii ogni volta che servono, ma solo la prima volta.

Anche in questo caso puoi agire manualmente tramite il file .htaccess oppure con un plugin nel caso utilizzi WordPress.

Per operare manualmente devi entrare nel pannello amministrazione del tuo sito e cliccare su: SEO -> Strumenti -> Modifica File. Scorri in basso e nella sezione .htaccess e incolla il seguente codice al di sotto del testo già presente:

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Invece se vuoi attivare la cache del browser con un plugin ti suggerisco di scaricare Leverage Browser Caching che farà tutto in automatico.

3. Comprimi e ottimizza le immagini

L’aspetto che appesantisce maggiormente il caricamento di un sito sono le immagini. Che non si riferisce solo a quelle inserite negli articoli, ma comprende tutto, come il logo o gli elementi di web design.

Fino a qualche anno fa il miglior compromesso tra qualità e dimensione di un’immagine lo si otteneva col formato jpg. Oggi fortunatamente ne esiste uno migliore, che garantisce un maggiore rapporto di compressione senza sacrificare la qualità: il Webp.

Il suggerimento pertanto è quello di convertire in tale formato tutte le immagini già caricate nel sito, e anche quelle future. Per farlo è sufficiente usare questo strumento gratuito: https://convertio.co/it/

Purtroppo pero’ esistono ad oggi due problemi:

  • Talvolta il formato webp genera immagini più pesanti del jpg
  • WordPress non supporta nativamente questo formato

Per il primo caso c’è ben poco da fare. Si effettua la conversione dell’immagine, e se questa risulta essere più pesante della versione jpg è necessario usare quest’ultima.

Per il secondo caso esiste una soluzione, che può essere applicata sia manualmente che con plugin, e ti suggerisco di utilizzare quest’ultima soluzione.

Per rendere compatibile WordPress manualmente devi modificare il file functions.php del tuo tema andando in: Aspetto -> Editor del tema -> Selezionare il file functions.php. A questo punto dovrai inserire questo pezzo di codice:

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

In questo modo non riceverai la segnalazione di errore quando provi a fare l’upload di una immagine webp. Per attivare l’anteprima dei contenuti in questo formato, inserisci questo pezzo di codice subito sotto al precedente:

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

Adesso vediamo come fare tutto tramite un plugin (che consiglio caldamente). Ti basterà installare WebP Converter for Media che offre interessanti funzioni:

  • Converte in automatico le immagini già presenti nel sito
  • Effettua la conversione delle nuove immagini che carichi
  • Verifica se il browser dell’utente supporta il WebP prima di usarle
  • Verifica se l’immagine in WebP è effettivamente più leggera della versione precedente

Come si vede in questo caso l’utilizzo del plugin è nettamente migliore sia in fatto di comodità che di funzionalità.

4. Ottimizzare il codice del sito

Senza entrare eccessivamente nei tecnicismi, quando il browser effettua il rendering di una pagina web, deve scaricare tutte le risorse necessarie per “disegnare” su schermo il contenuto.

Molto spesso pero’ il codice è inviato in modo grezzo e confusionale, oppure vengono mandati dal server dei dati che poi effettivamente nemmeno sono necessari per quella pagina specifica.

Un’ottima pratica quindi è quella di ottimizzare tutto il codice affinchè venga inviato solo quello che serve, nel momento in cui serve e nella maniera più efficiente possibile. Il problema è che realizzare tutto questo a mano è un gran lavorone, e anche di una certa difficoltà.

Fortunatamente in aiuto ci viene un ottimo plugin, gratuito e realizzato davvero bene! Io lo definisco un vero e proprio coltellino svizzero! Si chiama Asset CleanUp: Page Speed Booster e adesso ti mostro come impostarlo per far diventare il tuo sito veloce come un fulmine!

Impostiamo al meglio Asset CleanUp

La caratteristica più utile di questo plugin è il fatto che si puo’ indicare per ogni pagina cosa deve essere caricato e in che modo. Questo è fantastico perchè è possibile evitare di inviare risorse inutili.

Dopo averlo installato vai nella scheda Settings -> Optimize CSS. Qui devi attivare le seguenti voci:

  • Css File Minification
  • Combine Loaded CSS (lasciando anche attivo “Apply it only for guest visitors“)
  • Nella sezione Defer CSS Loaded seleziona “Yes, for any stylesheet LINK tags moved from HEAD to BODY via Asset CleanUp Pro“

Salva e vai nella scheda Optimize JavaScript. In questa sezione attiva:

  • Javascript File Minification
  • Combine Loaded JS (lasciando anche attivo “Apply it only for guest visitors“)

Salva le modifiche.
Nella scheda HTML Source CleanUp puoi ripulire un pò il codice contenuto nel tag <head> di ogni url. Qui puoi andare a tuo piacimento, puoi anche attivare tutte le voci.

Nella Scheda Google Fonts attiva la voce Combine Multiple Requests Into Fewer Ones.

Adesso vai nella sezione CSS & JS MANAGER. Qui hai davanti tutti gli script che vengono caricati per ogni tipologia di pagina: Homepage, articoli, pagine, caegorie, tag, ecc..

Quello che devi fare è bloccare il caricamento di script che non servono in pagine specifiche.

Ad esempio, se usi Contact Form 7 molto probabilmente hai creato una pagina specifica per i contatti, perciò è inutile caricare il js e il css di quel plugin in altre pagine (come la home o gli articoli).

Ebbene vai nel box del plugin e clicca sul selettore “Unload on this page” assicurandoti che diventi rosso. Devi farlo sia per il javascript che per il css. Come nell’immagine seguente.

Una volta ultimata l’ottimizzazione per la Homepage, i post e le pagine il tuo sito guadagnerà un bel boost nelle prestazioni! Probabilmente arrivato a questo punto potresti aver già raggiunto un deciso miglioramento della velocità del tuo sito!

Adesso manca l’ultimo step!

5. Installa un tema gratuito, veloce, leggero, personalizzabile e ottimizzato SEO

Ebbene si, dopo aver testato decine e decine di temi per wordpress, sono finalmente riuscito a trovarne uno che contenga tutte le 5 caratteristiche premium:

  • Gratuito
  • Veloce
  • Leggero
  • Completamente personalizzabile
  • Ottimizzato lato SEO

Insomma la perfezione! Forse non è proprio perfetto…ma ci si avvicina parecchio.

Sto parlando di Neve, il sorprendente tema per WordPress creato da ThemeIsle, che già nella versione gratuita è davvero molto interessante!

Infatti permette una personalizzazione e un gestione grafica che molto spesso non si trova nemmeno nei temi a pagamento. Inoltre è davvero veloce e ottimizzato per la seo!

Addirittura dai miei test, risulta più veloce dei temi di default di WordPress che sono notoriamente molto veloci! In più è compatibile con i migliori page builder, come Elementor o Divi.

Insomma se non hai particolari esigenze di design o di funzionalità particolari, ti consiglio caldamente di installarlo. Rimarrai a bocca aperta da quanto è veloce e personalizzabile!

Bene la guida si conclude qui. Spero di esserti stato utile e che adesso il tuo sito sia diventato una scheggia come ha fatto il mio.