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.
Box reattivo centrato orizzontalmente e verticalmente nella viewport
Prima dell’avvento del web responsive (o reattivo che dir si voglia), per centrare un box orizzontalmente e verticalmente nella viewport era innanzitutto necessario definirne le dimensioni (larghezza ed altezza), indi posizionarlo in modo assoluto come segue:
#box { width:600px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-300px;}
Dopo avere dunque impostato una posizione top e left pari al 50%, è indispensabile correggerla applicando dei margini negativi superiore e sinistro pari ciascuno a metà della corrispondente dimensione del box.
In questo modo a risultare centrato nella viewport non è il punto superiore sinistro del box bensì il suo punto centrale, ottenendo l’effetto desiderato.
Per visualizzare un esempio di questa tecnica, clicca qui.
Se non conosciamo a priori larghezza ed altezza del contenitore, possiamo utilizzare la proprietà CSS3 transform con la funzione translate() che, come noto, riposiziona l’elemento spostandolo gli assi orizzontale e verticale.
Rendere reattivo un iframe con video da YouTube
L’iframe viene impiegato normalmente per inserire nella pagina HTML dei contenuti pubblicati su un altro sito.
Viene utilizzato, in particolare, nel codice di incorporazione fornito da YouTube in relazione a ciascun video, per esempio relativamente al video pubblicato all’indirizzo https://www.youtube.com/watch?v=KJGDowixXH8 avremo (clicca per ingrandire l’immagine):
Il codice HTML da inserire nella nostra pagina è dunque basato sul tag iframe e la dimensione è dichiarata in 560×315 pixel, equivalenti ad una proporzione di 16:9 (questo dettaglio risulta importante nel seguito per definire le regole CSS che lo rendano reattivo).