Categoria: Web Design

La velocità di un sito web è importante tanto per garantire agli utenti un’esperienza fluida quanto per la SEO. È possibile migliorarla eliminando o posticipando le risorse di render-blocking, poiche queste rallentano il primo caricamento del sito e di conseguenza peggiorano l’user experience.

Prima di vedere come è importante capire il processo di caricamento di un sito web: appena un utente arriva sul nostro sito, il browser deve scaricare tutto il contenuto che compone la pagina (CSS, JS, fonts, immagini, ecc.) e quindi Inizia a leggere il codice, inclusi tutti gli HTML, CSS e JavaScript.

Solo dopo aver letto ed elaborato completamente questa coda di script l’utente sarà in grado di visitare il sito, perciò se ci sono molte risorse che bloccano il rendering potrebbe essere necessario attendere più tempo.

Alcune di queste risorse Cascading Style Sheets (CSS) e JavaScript (JS) sono necessarie, come nel caso di file CSS che garantiscono l’aspetto corretto della pagina, mentre altre possono essere ottimizzate o eliminate.

Per individuare quali risorse stanno bloccando il rendering si può eseguire il test PageSpeed Insight di Google (o in alternativa Web.Misura e GTmerix).

Quando la scansione del sito è completa, Google assegna un punteggio di velocità tra lo 0 e 100. Un punteggio compreso tra 50 e 80 è nella media, quindi è consigliabile posizionarsi nella parte superiore di questo intervallo o sopra di esso.

Dalla sezione Opportunità > Elimina le risorse di blocco della visualizzazione vedremo un elenco di file che rallentano la visualizzazione della pagina, influendo sul tempo di caricamento.

Ci sono diversi modi per correggere gli script di blocco del rendering e aumentare la velocità del sito, come:

Ottimizzare l’ordine di caricamento

La sezione head (</Head></Head>) della pagina web viene utilizzata per il precaricamento degli elementi e per questo è consigliabile incorporare il CSS ma evitare di inserire JavaScript.

Passando al body della pagina, la maggior parte dei browser web eseguono il rendering delle pagine dall’alto verso il basso quindi è bene ordinare le chiamate agli script in base alla loro importanza e complessità, posizionando gli script non fondamentali e quelli più complessi per ultimi.

Minimizzare il codice

Attraverso la riscrittura e l’eliminazione dei caratteri non necessari come spazi bianchi, commenti, virgole, interruzioni di riga, etc. si renderà il codice più compatto e coinciso, riducendo le dimensioni dello script. Ci sono plugin e strumenti online che permettono di minimizzare in automatico il codice.

Utilizzare il caricamento differito e asincrono di Javascript

Come detto poco fa, i browser leggono il codice dall’alto al basso, fermandosi ogni qual volta incontrano un tag di script, il che rallenta il rendering.

Si può utilizzare l’attributo async per caricare lo script in parallelo con la pagina web ed eseguirlo non appena è disponibile. In alternativa, con l’attributo di rinvio di analisi degli script, verranno caricati parallelamente alla pagina web ma eseguiti solo quando il browser analizzerà la pagina.

Sostituire gli elementi visivi JavaScript con CSS3

JavaScript è ottimo per aggiungere controlli complessi all’interfaccia utente ma è più pesante rispetto a CSS, quindi il suggerimento è quello di modificare e sostituire, quando possibile, tutto il JavaScript non necessario con CSS.

Eliminare tutti gli script non necessari

JavaScript e CSS servono ad espandere le funzionalità delle pagine web, compensando l’HTML. Tuttavia HTML 5.3 rende inutili alcune operazioni JS e CSS e velocizza il caricamento delle pagine.

Per individuare gli script inutili e rimuoverli si può utilizzare la scheda Coverage di Chrome DevTools o GTmetrix.

Dopo aver rimosso tutte le funzioni o tag non necessari si possono combinare gli script con funzioni simili.

Utilizzare dei plugin

Tra i più famosi:

• Autoptimize, che migliora il tempo di caricamento combinando bit di codice, riducendo i blocchi di codice, rimuovendo i caratteri non necessari etc. Apportate queste modifiche, il codice risulterà più facile da leggere e la dimensione del file sarà ridotta, riducendo il tempo di caricamento. Autoptimize è altamente personalizzabile tramite un’API aperta e opzioni avanzate.

• W3 Total Cache, plugin che incorpora molteplici funzionalità extra per l’ottimizzazione di WordPress e nella maggior parte dei casi è già disponibile nel pacchetto WordPress.

• Wp Rocket, in grado di rilevare automaticamente quali script creano problemi e risolverli. Si può utilizzare per la memorizzazione rapida della cache, la compressione e la minimizzazione.

• Speed Booster Pack, che offre alcune opzioni di configurazione, come lo spostamento degli script nel piè di pagina o il rinvio dei file JavaScript dall’analisi. Selezionandoli si possono rimuovere i file che bloccano la visualizzazione dei contenuti.

• JCH Optimize, che combina JavaScript e CSS riducendo le dimensioni dei file. Oltre ad essere ottimo per eliminare le risorse che bloccano il rendering ha molte altre funzioni che possono essere utili a lungo termine.

Bisogna tener conto che i plugin stessi sono ulteriori file aggiunti al server web quindi, per quanto pratici, non rappresentano l’opzione migliore.

È davvero possibile creare delle animazioni su una pagina web utilizzando semplicemente CSS3?

La risposta è…certo che si!

Con l’arrivo di CSS3 i web designer hanno potuto iniziare ad inserire, all’interno dei loro progetti, delle splendide animazioni che prima venivano fatto in Flash o in Javascript.

Vediamo insieme allora come funzionano le animazioni con CSS3!

Per prima cosa dobbiamo definire un’animazione e darle un nome tramite la keywork @-keyframes, ed indicare in essa quali saranno i comportamenti dell’elemento che vogliamo animare.

Supponiamo di voler creare una semplice animazione, che cambi il colore di sfondo di un elemento continuamente:

@-keyframes "change-background"{
0%{
   background: "blue";
}
25%{
   background: "green";
}
50%{
   background: "yellow";
}
75%{
   background: "orange";
}
100%{
   background: "red";
}
}

La percentuale definita nell’animazione ci permette di decidere quando modificare l’elemento. In questo caso avremmo un cambio di background costante durante l’animazione, ma avremmo anche potuto decidere di far durare lo sfondo giallo più di quello arancione per esempio.

A questo punto, per poter utilizzare la nostra animazione fatta con CSS3, non ci resta altro da fare che richiamare la nostra animazione “change-background” all’interno della definizione CSS di un elemento.

Supponiamo di avere nella nostra pagina il seguente elemento HTML:

<div id="testElement">Test</div>

Benissimo per completare e vedere la nostra animazione fatta con CSS3, non ci resta altro che scrivere il seguente codice CSS:

#testElement{
   width:200px;
   height:200px;
   border: 1px solid #000;
   animation-name: change-background; /* Nome dell'animazione da richiamare */
   animation-duration: 10s; /* Durata dell'animazione */
   animation-animation-iteration-count: infinite; /* Numero di ripetizioni dell'animazione, possiamo infatti decidere di far partire l'animazione solo 1 volta per esempio */
   animation-timing-function: linear; /* Modo in cui l'animazione viene eseguita  */
}

Abbiamo visto in questo articolo quanto sia semplice creare un animazione in CSS3, infatti non ci sono limiti in termini di animazioni che si possono realizzare.

Per gestire la parte grafica di una pagina web è fondamentale conoscere i fogli di stile CSS.

Grazie a questi speciali fogli è possibile gestire ogni singolo aspetto, di ogni singolo elemento presente sulla pagina. Dimensione e colore del carattere, colore di sfondo, animazioni e molto altro.

Impostare lo sfondo di un elemento è semplice. Ci basta utilizzare le proprietà background-color o background-image o più semplicemente background.

Per impostare un colore di sfondo (rosso ad esempio) ci basta utilizzare il seguente codice:

#contenitore{
   background-color: #ff00000;
}

Il testo “#ff0000” indica il codice esadecimale del colore rosso. Ma con i CSS possiamo utilizzare anche i colori RGB oppure scrivere semplicemente il nome del colore in inglese (nel nostro esempio avremmo dovuto scrivere “red”).

Per impostare invece un’immagine di sfondo basta specificare l’url dell’immagine:

#contenitore{
   background-image: url('percorso/verso/immagine/sfondo.jpg');
}

Grazie poi a diverse proprietà come background-repeat, background-position e molte altre, possiamo gestire il comportamento dell’immagine di sfondo.