Speed up del tuo sito web: secondo step

Nell'articolo precedente, abbiamo visto come con Google BigQuery sei in grado di ottenere preziose informazioni circa l'effettiva velocità del tuo sito web: oggi proseguiamo analizzando le opportunità di ottimizzazione che questo strumento ti suggerisce.

La sezione opportunities del report, infatti, propone una serie di interventi che influiscono direttamente sui LAB DATA, ovvero i parametri che hai raccolto durante la fase di audit del tuo sito web e che, se migliorati, hanno poi un impatto diretto sul ranking. Facciamo una doverosa precisazione: la velocità di caricamento di una pagina è un fattore determinante nel ranking sulle ricerche da mobile. E nell'epoca del "first mobile index" questo è un aspetto che non è più possibile trascurare. Vediamo quindi quali delle ottimizzazioni suggerite da BigQuery vale la pena approfondire e come, chiaramente secondo il nostro (modesto) parere.

Landing page redirects
Evita qualsiasi tipo di redirect: il redirect rallenta infatti il rendering della pagina in quanto genera una richiesta http aggiuntiva. Ecco perchè è molto meglio un sito responsive di un sito desktop + mobile (che provoca quindi un redirect alla versione corretta), ed è buona norma limitarne l'utilizzo per fini SEO. Potremmo parlare dei redirect Javascript, ma inutile scendere in tecnicismi che, ad ogni modo, non portano particolari benefici.

Caricamento immagini
Le immagini costituiscono, quasi sempre, oltre l'80% del peso in bytes di una pagina web: ergo, vanno assolutamente ottimizzate. Ma cosa significa questo? L'errore più comune è caricare sul sito immagini molto grandi, magari per apparire nitide anche su un monitor da 27 pollici, per poi fornirle anche a chi naviga con uno smartphone con visuale a 480 pixel... I tempi di caricamento saranno eccessivi. La soluzione è: carica sul tuo sito più immagini, una per ogni formato (diciamo big desktop, desktop, tablet e smartphone), e assicurati che il tuo sito serva l'immagine corretta per il device che la deve visualizzare. Questo può facilmente essere fatto attraverso i fogli di stile .css, ma se non hai dimestichezza chiedi supporto al tuo webmaster.

CSS e Javascript minificazione
La "minimificazione" è un'attività che consente di compattare (un pò come avviene con i file zip di Windows) i file css e javascrip che il tuo sito carica all'avvio: molto spesso, è possibile risparmiare diversi byte e quindi velocizzare questo processo. Ci sono strumenti integrati con i principali CMS che consentono di fare ciò con tre click, oppure tool esterni reperibili in rete come UglifyJS. Spesso questi tool integrati consentono anche di comprimere le immagini, il che, unito alle ottimizzazioni analizzate al punto precedente, ti consentiranno di guadagnare un bel pò di millisecondi sul tempo di caricamento.

Pre-caricamento delle risorse essenziali
Pochi sanno che esiste un tag html specifico (link rel="preload") che informa il browser su quali risorse sono essenzali per comporre la cosiddetta vista "above the folder", che identifica il contenuto essenziale per iniziare la navigazione della pagina: agendo con tali tag, pertanto, sei in grado di anticipare ad esempio il caricamento di librerie javascript o stili css indispensabili, a scapito magari di testi ed immagini che possono in qualche modo essere attesi dall'utente finale. Allo stesso modo, con alcuni tool particolari, sei in grado di ritardare il caricamento delle immagini "offscreen", ovvero non contenute nella prima porzione di schermo, e la cui presenza non è quindi essenziale per la fruizione del sito. Questi tool vengono spesso identificati come "lazy loading", e se usi Wordpress o Joomla ne hai diversi a disposizione.

Consenti visione del testo durante il caricamento del font
Certamente il tuo sito sarà più bello con l'utilizzo di un font particolare, moderno, elegante: ciò che forse non sai, è che caricare questo font può richiedere diverso tempo al browser. Il trucchetto qual è? Quello di garantire un font secondario disponibile su qualsiasi device (es. Arial o Georgia), in modo che inizialmente il testo sia comunque leggibile, anche se meno bello, anche durante il loading delle risorse necessarie: questo consente all'utente di avere un sito immediatamente fruibile.

Cacha il più possibile!
Beh, di cache se ne potrebbe parlare per pagine intere... Fondamentalmente, cerca di assicurarti di disporre almeno di due tipo di cache: la HTTP caching ed una cache ben funzionante lato server. La prima, che puoi implementare con poche righe di codice direttamente sul tuo file .htaccess (se usi Apache), consente di evitare le richieste continue di download di immagini memorizzandole nel browser: in questo modo, quando un utente visita più volte la stessa pagina, molti elementi che la compongono saranno immediatamente disponibili. Sta a te comunicare al browser quali componenti mettere in cache e per quanto tempo, ma in questo modo migliorerai la velocità di caricamento per gli utenti ricorrenti e risparmierai preziosa potenza di calcolo per quelli nuovi. La cache lato server, invece, è delegata al tuo provider: una buona cache consente di minimizzare l'esecuzione di script, le interrogazioni al database ecc... rendendo le risorse disponibili agli utenti successivi la prima richiesta. Anche in questo caso, chiaramente, l'ottimizzazione degli elementi da cachare e della durata degli stessi è fondamentale.

Vi abbiamo proposto dei suggerimenti che sono piuttosto semplici da implementare, facilmente comprensibili e dall'impatto decisamente alto sulle performance di caricamento: è chiaro che l'argomento potrebbe svilupparsi su molte altre tematiche, che richiederebbero però approfondimenti più complessi e che, in alcune situazioni, potrebbero non dare benefici particolarmente evidenti.

Speed up del tuo sito web: secondo step

di Gerardo Tartaglia

WebSenior

Responsabile account:
Gerardo Tartaglia (Titolare)

Speed up del tuo sito web: secondo step

di Gerardo Tartaglia

WebSenior

Responsabile account: Gerardo Tartaglia (Titolare)

Responsabile account:
Gerardo Tartaglia (Titolare)