Ottimizzazione siti web, alcune cose che ti torneranno utile

Ottimizzazione Siti Web, Alcune Cose Che Ti Torneranno Utile

Questo è un argomento che davvero mi piace, sia perchè è fortemente legato al mio lavoro di sviluppatore siti web, sia perchè lo trovo cosi importante e efficiente per quanto riguarda il business in genere, soprattutto nel 2021. 
Creare un sito web è come dipingere un quadro: compri la tela, prendi i pennelli giusti, scegli con cura i colori e fai in modo che il tuo progetto diventi realtà. 

Perchè è Importante Ottimizzare Un Sito Web? 

Ci sono miliardi di siti web al mondo e ogni giorno vengono creati nuovi siti web, parliamo nell'ordine di unità di milioni di siti web al giorno creati. Oramai tutte le attività che nascono e anche attività che già esistono da anni hanno inevitabilmente bisogno di un'attività online, che sia solo per scopi puramente di presenza, che sia per scopi di vendita diretta online o di fornitura di servizi online. Capisci che ovviamente con la quantità di siti che esistono, si ha l'esigenza di avere qualcosa che contraddistingua il tuo sito web da un altro, in termini di:

Un sito web deve essere quindi curato, e deve essere creato in un modo che dia la possibilità di essere trovato dagli utenti, soprattutto in maniera organica, ovvero tramite la ricerca su Google o di altri motori di ricerca. Chiaramente questo significa avere un SEO curato, vedremo questo specifico argomento in un altro capitolo. 

Voglio con te darti qualche informazione su come sta cambiando il mondo, soprattutto negli ultimi anni riguardo all'ottimizzazione dei siti web. 

Core Web Vitals... Ne Hai Sentito Parlare? 

Core web vitals, ovvero le cose importanti da considerare riguardanti un sito web. Questo è un argomento molto conosciuto da chi lavora nel web, ed è, per molti, quasi un incubo. E' stato introdotto come topic proprio da Google, che sostanzialmente ci sta dicendo che se vogliamo che un sito sia davvero di valore per un utente, il sito deve rispettare determinate regole, che per il momento non sono moltissime, ma che fanno e faranno la differenza anche in termini di ranking e indicizzazione già da quest'anno 2021, c'è che dice addirittura da Maggio 2021. 

Cumulative Layout Shifting

Parolone difficili, ma ti assicuro che il significato è più semplice di quanto sembra. Ti è mai capitato di navigare un sito web, soprattutto da mobile, e stai per cliccare un certo elemento e di "colpo" il layout si muove e clicchi qualcosa di sbagliato? In genere una pubblicità... Ecco. Quello è il cumulative layout shift, ed è bene sistemarlo se il tuo sito fa questo tipo di difetto. Uno dei modi più veloci per fixare il problema è quello di specificare sempre width e height (larghezza e altezza) delle immagini nel codice HTML, ad esempio:<img src="img/immagine.webp" width="250" height="150" />

Quanto sopra è un esempio semplice applicato alle immagini. Per fartela semplice, se tu specifichi ogni volta larghezza e altezza delle immagini, il browser sa già quanto allocare in termini di spazio per un'immagine, anche se non ancora caricata. 

Un altro modo che per me ha funzionato, nel caso tu usassi Bootstrap come libreria, è quella di utilizzare l'ultima libreria disponibile, nel mio caso questa libreria ha fatto il trick:

https://cdn.jsdelivr.net/npm/[email protected]ta3/dist/css/bootstrap.min.css

Largest Contentful Paint

Un'altra metrica da considerare relativa ai core web vitals è questa: largest contenful paint. Cos'è? Semplicemente è il tempo calcolato di renderizzazione da parte del browser sull'elemento più dispendioso della pagina. Minore è, maggiore è il valore della pagina. 

First Contentful Paint

Il First contentful paint tiene invece traccia di quanto tempo il browser ci mette a caricare il primo valore del DOM della pagina, il primo bit o primo elemento. 

Come vedi in tutti i due gli ultimi casi, la cosa buona è quella di cercare di ottimizzare le prestazioni e il rendering del DOM. Cerca quindi di evitare processi troppo lunghi, queries dispendiose sul database e HTML troppo grossi, soprattutto dove gli elementi sono "nested" cioè, annidati uno dentro l'altro per troppi nodi. 

Come Fare A Vedere Come Il Tuo Sito Se La Cava Con I Core Web Vitals?

Per vedere performance, core web vitals o in generale fare un audit del tuo sito, il modo migliore è quello di andare su PageSpeed di Google:

https://developers.google.com/speed/pagespeed/insights/?hl=it

Basta inserire l'url nell'apposito spazio e premendo un pulsante otterrai tutti i risultati relativi al tuo audit. Tieni presente che il 5% dei siti mondiali ha performance superiori a 90, quindi performance considerate buone vanno in genere dal 80 al 100. Ora ti faccio vedere qual è il risultato di questo sito ad esempio, e ti spiego perchè non raggiunga i 100, non su mobile almeno: 

pagespeed1

Questo è il risultato riguardante la homepage di ziobelo.com. Come puoi vedere è un discreto 87...Questo su mobile, che di solito è inferiore ai risultati derivanti dal desktop, per vari motivi, primo su tutti la connessione e le problematiche relative al layout responsive, ovvero che si deve adeguare al mobile, tablet, ecc...

Vediamo Perchè Su Mobile Non Ho Più Di 87 Di Valore PageSpeed

pagespeed.PNG

Parto con il dire che ogni sito è un mondo a sè. Quello che funziona per me ed i risultati di PageSpeed di ziobelo.com sono e saranno molto probabilmente diversi da quanto tu hai. Ora ti faccio vedere perchè questo sito performa in quel modo.

L'immagine parla abbastanza chiaro, il time to interactive, ovvero il tempo di interazione è di circa 5,9 secondi. Questo è un valore che dovrebbe essere sotto i 2,5 secondi. Se poi scorro in basso, il buon Google mi da idee e modi su come sistemare il problema, ecco qua.&nbspNel mio caso basterebbe sistemare il codice Javascript per avere già dei buoni miglioramenti. Ti dico già che alcune volte non è proprio possibile. Se ad esempio hai a che fare con codice di terze parti, specialmente quello di Google (Google ADS o google Analytics) giusto per citarne un paio. Quello che ti volevo solo mostrare è il fatto che con quel tool, completamente gratuito e accessibile da internet, puoi gestire l'ottimizzazione del tuo sito in quasi totale autonomia, senza spese e alla massima velocità.

pagespeed2.PNG

Usa meno possibile librerie esterne

Le librerie esterne vanno usate il meno possibile. Ricordati una regola generale, che vale davvero per tutto: meno è uguale a più. Cosa significa? Meno cose hai nel tuo sito, meno cose si possono rompere, e meno cose hai, meno risorse usi in generale. Considera anche che ogni libreria includi nel tuo sito, effettui in genere una chiamata http di troppo, lo stesso vale anche per le immagini e qualsiasi cosa "esterna" che utilizzi. 

Immagini WebP Per Il Tuo Sito

Le immagini ricoprono sempre un ruolo importante, c'è poco da fare, ma il cervello viene stimolato tantissimo quando le immagini sono presenti. L'importanza delle immagini è quindi indiscutibile, ma ovviamente, niente viene a "gratis". Le immagini consumano risorse, dove per risorse si intende, chiamate http esterne, memoria, cpu ecc... Il consiglio più immediato è quello di usare immagini con estensione webp, che hanno un sistema di compressione molto efficace, ovvero permettono di avere una qualità più elevata con una dimensione di immagini abbastanza ridotte, comparata ad esempio ai jpg o ai png. Esistono anche diversi tool online per la conversione delle immagini, ti basterà cercare sui motori di ricerca "jpg to webp" o "png to webp" e i primi risultati che trovi sono tutti validi. 

Se Usi Wordpress Non Usare Troppi Plugins

wordpress.gif

Lavoro da almeno 7 anni su Wordpress, e una cosa che ho notato è che tutti o quasi tendono ad utilizzare troppi plugins. So benissimo che i plugins sono comodi e danno la possibilità di risolvere grossi problemi in poco tempo e con poca spesa, ma c'è un problema: più plugins usi, più risorse consumi. Il mio consiglio anche in questo caso è: "meno è più". Meno plugins ci sono, più le performance del sito saranno veloci. Quando pensi a un sito web, pensa ad un'automobile, e quando pensi a un plugin, immaginalo come un bagaglio. Caricheresti un'auto di roba se ci devi fare una corsa? Non penso, giusto?

Se Proprio Devi Usare Wordpress Valuta Il Caching Dei Contenuti

Wordpress non è il cms più veloce del mondo... anzi. E' sicuramente il migliore in termini di contenutistica, ma performance wise, pecca di molte lacune, motivo per cui esistono innumerevoli tool per fare il caching dei contenuti. Non entrerò nello specifico di cosa vuol dire caching, ma per darti un'idea, invece di, ogni volta, interrogare il database per estrarre i contenuti, usando caching, i contenuti vengono pescati in maniera molto più veloce dalla memoria ad esempio (nel caso di Redis). Ti risparmio un sacco di tempo dicendoti che, se devi usare un plugin specifico, puoi vedere WP ROCKET oppure W3TOTALCACHE. Con uno di questi due a tua scelta, puoi risolvere un sacco di problemi.

wp rocket.png

Back To Top