Cell. +39 3479684755
Il Blog di Instant Websites
Velocizzare il sito? Attenzione …
La diffusione enorme conquistata nel web dai CMS (Content Management Systems ovvero Sistemi di gestione dei contenuti) negli ultimi anni non è stata priva di conseguenze negative.
Se da un lato, infatti, è diventato relativamente più semplice costruire siti complessi e con funzionalità interattive e soprattutto mantenerli aggiornati, anche a cura del cliente finale, il prezzo da pagare è stato rappresentato da una minore velocità o addirittura da una più o meno marcata lentezza nel caricamento delle pagine.
Tecnicamente il motivo è molto semplice: mentre un sito statico richiede il semplice caricamento del codice delle pagine ed eventualmente l’esecuzione di JavaScript, un sito dinamico comporta l’intervento del server applicazioni (PHP) e soprattutto di un database (MySQL) al quale vengono effettuate una serie di query o “chiamate”.
Maggiore è il numero di query e più tempo le pagine impiegheranno a caricarsi, soprattutto nel caso di server non particolarmente performanti, obsoleti e/o sovraccarichi.
L’aumento del tempo di caricamento di un sito influisce negativamente sul suo posizionamento nei motori di ricerca, tecnicamente chiamato SEO Ranking.
Esistono numerosi strumenti online che assegnano un punteggio da 0 a 100 ai siti in base a tale parametro, il più importante dei quali è Google PageSpeed Insights.
Ecco quindi che la maggiore o minore velocità di caricamento delle pagine acquista un’importanza che va al di là della semplice fruibilità dei contenuti, fermo restando che questa ha comuque rilevanza: l’attenzione dei visitatori deve essere conquistata e mantenuta non solo tramite contenuti interessanti e pertinenti ma anche evitando loro attese esagerate prima di visualizzarli.
Vediamo dunque, brevemente, quali sono i fattori che incidono positivamente sulla velocità di caricamento con particolare riferimento ai siti dinamici basati su CMS.
La scelta di un template: fattori tecnici
La diffusione dei CMS (“Content Management Systems” o sistemi di gestione dei contenuti) come WordPress, Joomla!, Drupal ecc. è stata davvero notevole negli ultimi anni per le loro caratteristiche molto apprezzate dai committenti, in particolare l’aggiornabilità dei contenuti in autonomia ed in tempo reale.
Come dice il proverbio però: “non è tutto oro quello che luccica” nel senso che questi sistemi offrono dei vantaggi indubbi ma, d’altro canto, richiedono una serie di attenzioni nello sviluppo e nella gestione del sito che non vengono sempre prese nella giusta considerazione.
L’errore più comune, sul quale peraltro non vale la pena di soffermarsi in questa sede, è quello di credere che il CMS sia una specie di “faccio tutto io”: basta cliccare un paio di pulsanti ed ecco che, per miracolo, il sito è pronto …
… in realtà, ipotizzando di avere scelto un fornitore affidabile e che la piattaforma sia stata correttamente installata, configurata e protetta dalle intrusioni, e scusate se tutto questo è poco, si giunge al momento di scegliere un template (tema grafico) per il sito.
Quali sono i principali fattori tecnici che devono guidare la scelta del template? A parte, cioè, gli aspetti estetici?
Andiamo di seguito ad evidenziarne alcuni.
L’uso della dichiarazione display:none; nel design reattivo
Quando nei nostri corsi introduciamo i principi di base del design reattivo (o adattivo), spieghiamo che si tratta di un tipo di design con relativo sviluppo del codice, che consente di ridisporre gli elementi della struttura di pagina ed i rispettivi contenuti in funzione della viewport del dispositivo su cui il sito viene visualizzato (in parole più semplici e con una certa dose di imprecisione: in funzione dello spazio disponibile).
Questa affermazione costituisce una valida approssimazione di partenza ma è incompleta.
Innanzitutto occorre considerare che esistono due possibili approcci:
- la tecnica Mobile-First: disegnare la struttura di pagina per i dispositivi mobili, poi svilupparla per le viewport di dimensioni maggiori;
- la tecnica opposta, ovverosia disegnare per una viewport corrispondente ad uno schermo da tavolo, poi aggiungere le regole (media query) per i dispositivi mobili.
I sostenitori di 1) motivano la loro scelta con la diffusione capillare dei dispositivi mobili al punto che questi vengono usati più dei tradizionali PC da tavolo per navigare Internet.
Chi preferisce la soluzione 2), invece, si basa più che altro su un presupposto di tipo logico: fino a poco tempo fa non esistevano le media query quindi si creavano i layout a dimensione fissa o variabile ma comunque partendo da una certa risoluzione orizzontale “ottimale” dello schermo, per cui è normale partire comunque da tale riferimento e poi considerare le viewport minori (tablet e smartphone) introducendo un certo numero di breakpoint.
Occorre anche aggiungere che è possibile aggiornare i siti esistenti – purché non troppo vecchi – modificandone il DTD in HTML5 ed aggiungendo le media query in modo tale che divengano reattivi. In questo tipo di interventi si procede per forza di cose secondo la tecnica 2).
A prescindere dalla prassi individuale, è possibile integrare la definizione di partenza aggiungendo che: nel design reattivo, è possibile prevedere che alcuni contenuti di pagina vengano visualizzati o meno in funzione della viewport del dispositivo.
Non solo, quindi, riposizionare gli stessi elementi bensì mostrarne di aggiuntivi ovvero nasconderne alcuni in base allo spazio.
Una tecnica molto semplice che consente di ottenere questo risultato, è quella di impiegare la dichiarazione: display:none; all’elemento che si vuole nascondere in corrispondenza di una certa risoluzione video.