Come ottimizzare un sito in Hugo

Perché ottimizzare un sito web?

Prima di vedere come ottimizzare un sito web creato con la piattaforma Hugo è importante capire come mai questo sia un aspetto fondamentale di ogni sito web. Il motivo probabilmente lo sai già: più un sito è veloce, più gli utenti potranno navigarlo senza attese ed allo stesso tempo anche Google terrà in maggiore considerazione il sito.

Un motivo un po’ meno ovvio, ma non meno importante, soprattutto nel caso di siti molto trafficati, è la riduzione dei costi legati a sistemi di CDN: se le pagine pesano meno in termini di byte, allora i costi di trasferimento delle CDN saranno minori (ovviamente solo nel caso in cui si utilizzino tali soluzioni).

Ora che abbiamo chiarito i principali motivi per cui è importante ottimizzare un sito web, possiamo procedere con i cinque consigli per ottenere un miglioramento nella velocità di caricamento di un sito creato con la piattaforma Hugo, ricordandosi che tali suggerimenti sono riapplicabili in tutti i siti.

5 consigli per ottimizzare un sito in Hugo

In questo articolo vediamo quindi come ottimizzare un sito web statico creato con Hugo. In cinque facili passaggi rendiamo ancora più veloce il sito grazie a delle semplici ma efficaci ottimizzazioni.

Minimizzare il codice HTML

Questo primo aspetto è facile da gestire in quanto dalla versione 0.47 di Hugo è possibile minimizzare il codice HTML generato grazie ad un semplice parametro: --minify.

hugo --minify

In questo modo si ottengono dei file html più compatti e ridotti, non è la panacea ma è già un primo passo per ridurre i tempi di caricamento delle pagine.

Minimizzare/compattare il codice JS

Qui la faccenda è un po’ più complessa nel senso che ci possono essere molte opzioni. Comunque dalla version 0.43 di Hugo (se non erro), la documentazione ufficiale consiglia di usare il meccanismo chiamato Hugo Pipes che permette di processare i vari asset del sito.

Ad esempio, nel caso dei file javascript in questo sito ho usato questo codice:

1
2
3

{{ $js := resources.Get "js/script.js" }} {{ $scripts := $js | resources.Minify
| resources.Fingerprint }}
<script src="{{ $scripts.Permalink }}"></script>

Nella riga 1 si carica la risorsa del file Javascript, nella riga 2 lo si minimizza (e in questo caso aggiungo anche un fingerprint). Infine nella terza ed ultima riga inserisco nel markup html il link allo script processato da Hugo.

Minimizzare/compattare il codice CSS

Ora che abbiamo visto come ottimizzare i file Javascript, abbiamo imparato anche a farlo per i fogli di stile in quanto la procedura è analoga.

Nel caso di questo sito uso SCSS per scrivere il CSS, ho fatto qualche aggiunta:

1
2
3

{{ $scss := resources.Get "sass/main.scss" }}
{{ $style := $scss | resources.ToCSS | resources.PostCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" />

Oltre alla minimizzazione ed al fingerprint, per prima cosa converto il file SCSS in CSS, poi lo elaboro con PostCSS ed infine procedo a minimizzarlo.

Ottimizzare le immagini usando le immagini reattive

Un sistema interessante per gestire le immagini è usare le immagini reattive attraverso gli attributi srcset e sizes che si possono applicare al classico tag <img>.

Che cosa sono le immagini reattive? Le immagini reattive sono un sistema che permette al web browser di caricare l’immagine delle dimensioni più adatte in base alla larghezza del monitor. Ad esempio se sto navigando un sito con una risoluzione di 640px di larghezza, è inutile far scaricare una immagine da 2000px, mentre magari questa sarà più adatta se si naviga usando un monitor in 2k.

Per prima cosa vanno quindi identificate le dimensioni in cui servire le immagini in base alle risoluzioni, poi vanno create le immagini nelle varie dimensioni ed infine va specificato il tutto nel markup HTML dell’immagine. Concentriamoci nel secondo e nel terzo punto.

Per creare le varie immagini si può agire direttamente nel template. Nel mio caso per stampare l’immagine principale degli articoli del blog ho un codice all’incirca così:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{{ $src := .Resources.GetMatch .Params.featured_image }}

{{ $tinyw := default "420x" }}
{{ $smallw := default "580x" }}
{{ $mediumw := default "900x" }}
{{ $largew := default "1220x" }}

{{ .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ .Scratch.Set "small" ($src.Resize $smallw) }}
{{ .Scratch.Set "medium" ($src.Resize $mediumw) }}
{{ .Scratch.Set "large" ($src.Resize $largew) }}

{{ $tiny := .Scratch.Get "tiny" }}
{{ $small := .Scratch.Get "small" }}
{{ $medium := .Scratch.Get "medium" }}
{{ $large := .Scratch.Get "large" }}

<img
  sizes="(max-width: 480px) 100vw,
          (min-width: 640px) 100vw,
          (min-width: 960px) 100vw,
          (min-width: 1280px) 100vw"
  srcset="
          {{ with $tiny.RelPermalink }}{{.}} 480w{{ end }}
          {{ with $small.RelPermalink }}, {{.}} 640w{{ end }}
          {{ with $medium.RelPermalink }}, {{.}} 960w{{ end }}
          {{ with $large.RelPermalink }}, {{.}} 1220w{{ end }}"
  src="{{ $src.RelPermalink }}"
/>

Nella prima riga carico l’immagine originale definita nel front matter dell’articolo.

Nelle righe da 3 a 7 invece ho definito le varie larghezze che voglio mostrare e nel blocco di codice successivo creo le immagini derivate. Infine le carico su delle variabili.

Nella porzione di codice html uso l’attributo sizes per definire i breakpoint, mentre nell’attributo srcset specifico le varie immagini per le varie dimensioni dello schermo. Infine non bisogna dimenticarsi del vecchio attributo src che viene usato come fallback.

Caching/TTL risorse (.htaccess)

Quest’ultimo punto è completamente indipendente da Hugo, però è comunque sempre importante ricordarsi che anche il web server può essere configurato in modo ottimale per fornire al browser le risorse in modo efficace.

Nel caso di un web server Apache, ad esempio, si possono impostare numerosi parametri per la compressione ed il caching delle risorse.

Nella documentazione ufficiale di Google si trovano alcuni spunti come ad esempio:

• Caching per immagini:

    <filesMatch ".(ico|jpg|jpeg|png|gif)$">
     Header set Cache-Control "max-age=2592000, public"
    </filesMatch>
  

• Caching per css/js:

    <filesMatch ".(css|js)$">
     Header set Cache-Control "max-age=86400, public"
    </filesMatch>
  

• Regole mirate per scadenza cache:

    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 2 days"
  

Cosa fare di più per ottimizzare la velocità di un sito?

Una volta implementati questi aspetti è possibile effettuare ulteriori ottimizzazioni del sito, ad esempio usando una CDN per fornire le risorse ancora più velocemente, ma tali argomenti saranno trattati in maniera più approfondita in futuro.