Sebbene conoscere come velocizzare il tuo sito web sia una competenza tecnica importantissima per ogni webmaster che si rispetti, la nuova frontiera è sapere come evitare che un sito web abbia prestazioni scarse dopo l'aggiunta di widget di terze parti, estensioni e plugin. Infatti, come accennato nella Parte 1 di questa guida, Google ha iniziato ad usare anche la velocità del tuo sito web per determinarne il posizionamento nei risultati del motore di ricerca. Che cosa puoi fare per velocizzare il tuo sito web in maniera tale che queste tecnologie, seppur utili per migliorare l'interazione ed il coinvolgimento degli utenti, non rallentino la velocità di caricamento delle tue pagine web?

Photo credit: Stanely Hong

Nella seconda parte di questa guida imparerai a mettere in pratica concretamente le soluzioni che, dopo lunghe prove, test e sperimentazioni, abbiamo verificato funzionano meglio per questo tipo di situazione. Infatti, le soluzioni descritte nel dettaglio in questo articolo, che abbiamo messo a punto per velocizzare il tempo di caricamento del tuo sito web ritardando il caricamento di JavaScript e widget, sono proprio le stesse che abbiamo adottato e implementato su MasterNewMedia.

Questa guida, sebbene concepita per i webmaster e per lo staff tecnico di un sito web, è scritta in un linguaggio semplice e privo di tecnicismi, e può essere facilmente compresa sia da chi necessita di coordinare i compiti di ottimizzazione delle prestazioni di un qualunque sito web, sia da chi si occuperà di eseguire materialmente tali interventi di ottimizzazione.

Ecco la Parte 2 di questa guida (Parte 1) contenete tutte le informazioni di cui hai bisogno per velocizzare il tempo di caricamento del tuo sito web ritardando il caricamento di widget di terze parti e JavaScript:

Come Rendere Più Veloci le Tue Pagine Web Ritardando il Caricamento di JavaScript e Widget - Parte 2

Il motivo per cui la velocità di un sito web viene presa in considerazione è rendere il sito più fruibile per i visitatori.

In quest'ottica, chi dice che dobbiamo per forza caricare tutti i contenuti in una volta sola?

Gli utenti, così come gli spider di Google vogliono che la pagina si carichi prima possibile. È positivo per l'esperienza utente.

Clicchi su un link, la pagina si carica velocemente, tutto va bene. I contenuti aggiuntivi su una pagina sono - appunto - aggiuntivi.

Tutti abbiamo familiarità con i siti che caricano le immagini solo quando arrivi al punto del testo in cui queste sono inserite. I video di YouTube si caricano quando arrivi al punto specifico della pagina dove questi sono inseriti.

Possiamo caricare il contenuto principale dell'articolo, che è ciò che l'utente è venuto a cercare in primo luogo e solo poi caricare gli altri oggetti che costituiranno "la ciliegina sulla torta" e miglioreranno l'usabilità e l'esperienza utente.

Non c'è alcun bisogno di caricare i widget dei commenti fin dall'inizio della pagina, perché l'utente impiegherà un certo tempo per leggere l'articolo e solo in seguito avrà bisogno di strumenti per commentare ciò che ha letto.

Stessa cosa per i widget di condivisione sui social media. Questi possono essere caricati quando l'utente avrà finito di leggere il contenuto dell'articolo, non necessariamente e immediatamente quando la pagina viene caricata. Alcuni dei widget possono per esempio essere caricati solo quando l'utente li attiva tramite un link od un pulsante.

La teoria alla base è semplice.

I widget JavaScript sono pensati per svolgere delle funzioni basate su JavaScript. Queste funzioni possono essere attivate in diversi modi, che includono azioni effettuate dagli utenti come i clic od il passaggio del cursore del mouse, ma anche dal semplice passaggio del tempo.

Le azioni che ritardano i tempi di caricamento sono di solito indicate come "caricamento differito dei JavaScript".

Questo aspetto ci porta al problema successivo - come Google vede questo approccio al caricamento differito dei widget.

Sarà visto come un problema? Per nulla.

Ecco Matt Cutts di Google che affronta l'argomento (video in inglese):

Durata: 3' 12''

In breve, Google stava già pensando a questa soluzione ed alla sua implementazione.

La parte cruciale di questo video inizia verso il minuto 1':25'':

"...non vi consiglio di sbarazzarvi dei widget, siano essi provenienti da Facebook, da annunci pubblicitari o da qualsiasi altra cosa, solo perché il server con cui stai comunicando è un po' più lento.

Ci sono molte soluzioni che possono essere impiegate e che noi chiamiamo asincrone.

Per esempio, potremmo guardare al tempo necessario per raggiungere il punto della pagina che si sta caricando, ma ciò non vuol dire che il JavScript non possa continuare il caricamento anche dopo che abbiamo sorpassato quello specifico punto.
Google Analytics, per esempio, fornisce adesso una nuovo frammento di codice JavaScript che non incide in modo significativo sul tempo di caricamento delle pagine web, ile che è anche un bene per l'esperienza dell'utente."

Ora che sappiamo che Google approva questa soluzione, possiamo passare alla fase successiva - l'implementazione.

Il problema è che nessuno dei widget là fuori - almeno al momento - è progettato per ritardare il caricamento.

Sono realizzati per girare non appena la pagina si carica.

Ciò significa che dovremo apportare qualche modifica modifica personale al codice dei widget.

Caricamento Differito Vs. Caricamento Asincrono

Per comprendere appieno le soluzioni del caricamento differito e del caricamento asincrono, è importante capire innanzitutto dove sta il problema.

Suppongo che tutti abbiano sperimentato una volta o l'altra che alcune immagini in certe pagine si carichino solo in parte. Si finisce per vedere solo una parte dell'immagine e il resto non viene mostrato (a meno che tu non faccia clic su 'aggiorna').

Con JavaScript non si ottiene questo risultato perché è configurato per avere una conferma dal server che lo script sia stato completamente caricato prima che il browser continui il caricamento della pagina.

Questa sua caratteristica è ciò che rende JavaScript un problema.

Sostanzialmente JavaScript è una prima donna. Non consente agli altri elementi di caricarsi fino a quando lui non è stato caricato completamente.

Il JavaScript asincrono non attende la risposta del server prima di consentire che la pagina continui a caricarsi.

Il caricamento differito aspetta che la pagina finisca di caricarsi e poi, dopo un tot di secondi (qualsiasi numero di secondi tu abbia specificato), avvia l'esecuzione di JavaScript, perciò non interferisce con il caricamento della pagina web.

Trasformare ogni widget o script da JavaScript in un JavaScript asincrono può essere semplice come mettere:

async="true"

in un tag script.

Perciò il tuo tag script inizierà con:

<script type="text/javascript" async="true" ...

Tuttavia, il supporto dei browser per il JavaScript asincrono non è ancora pienamente implementato.

Un'altra possibilità di intervento è data dall'usare un codice di questo tipo:

<script id="somescript" type="text/javascript">

(function() {

var somescript = document.createElement('script');

somescript.type = 'text/javascript';

somescript.src = ('http://mysite.com/myscript.js');

var s = document.getElementById('somescript');

s.parentNode.insertBefore(somescript, s);

})();

</script>

D'altra parte, il JavaScript differito c'è per una ragione: estromette completamente JavaScript mentre la tua pagina si sta caricando.

Per strumenti quali I widget dei commenti, i widget di condivisione social, etc., questo può essere una buona soluzione perché consente alla pagina di caricarsi come se non vi fosse alcun file JavaScript esterno da caricare.

Così, mentre il tuo visitatore legge la pagina, i commenti e i widget di condivisione social si caricano con calma in fondo all'articolo.

Che Miglioramenti Puoi Aspettarti?

In base all'esperienza di MasterNewMedia, abbiamo effettuato alcuni test per vedere quali widget possiamo modificare e quanta velocità possiamo guadagnare dall'ottimizzazione dei widget.

I risultati sono stati indiscutibili.

Abbiamo preso una pagina e ne abbiamo preparato tre versioni diverse. L'unica differenza riguardava il modo in cui i widget dei commenti venivano caricati.

1. Una versione era intatta, così come era prima, con un caricamento "normale" di JavaScript.
2. Una seconda era a caricamento asincrono,
3. Una terza presentava un caricamento differito di 10 secondi.

Usando GTmetrix per misurare la velocità, con numerosi reload, ecco i risultati in media:

Applicando la stessa gamma di soluzioni a tutti i JavaScript nella pagina, in alcuni casi siamo stati in grado di guadagnare fino a sette secondi nel tempo di caricamento della pagina, sebbene in media questo numero sia risultato inferiore specialmente durante i picchi di traffico.

Come accennato prima, quando la rete è più congestionata con un alto numero di visitatori, i server sono più occupati e così ci vuole più tempo per caricare il tutto, a differenza di quando ci sono meno persone sulla rete.

Eppure, i risultati sono stati molto incoraggianti e la pagina andava molto meglio.

Clicchi su un link, la pagina si carica molto rapidamente, e puoi leggere l'articolo senza notare che 10 secondi dopo si attivano la Apture Bar e la sezione dei commenti con il widget per la condivisione social.

Questo migliora sicuramente l'esperienza utente.

Tutto ciò che abbiamo fatto è stato applicare il caricamento differito a cinque script e widget e gli strumenti per misurare la velocità della pagina hanno mostrato che siamo passati da 131 richieste esterne ad 81 con un miglioramento della velocità per pagina dai tre ai sette secondi.

Magari adesso ti stai chiedendo: "Aspetta, 50 richieste esterne in meno? Solo con cinque script e widget differiti?"

Sì.

Quando effettui il caricamento di script e widget è raro che sia finita lì. Script e widget hanno tutti delle dipendenze oppure richiamano altri script. Inoltre, frequentemente le dipendenze hanno a loro volta ulteriori dipendenze.

In base a ciò che abbiamo visto nei nostri esperimenti, gli script dei commenti sono tra gli elementi più pesanti da caricare nelle pagine. Alcuni di essi hanno 20 o più chiamate esterne.

Per l'utente questo significa che la pagina ci impiegherà un po' a caricarsi anche se il contenuto dei widget sarà mostrato in fondo all'articolo.

D'altra parte, con il caricamento differito puoi ottenere un effetto simile a quando raggiungi una pagina che si carica in maniera istantanea, e mentre stai leggendo il contenuto JavaScript lavorerà in background per preparare il contenuto aggiuntivo.
Se eseguito correttamente, i tuoi utenti non noteranno altro che la piacevole esperienza di pagine che vengono caricate velocemente.

Come accennato da Matt nel video qui sopra, Google Analytics utilizza già il caricamento asincrono e ciò è una buona soluzione che soddisferà la maggior parte dei webmaster. Molti altri servizi non hanno questa caratteristica nei loro widget.

Questi script e widget necessitano di interventi personalizzati sul codice. La maggior parte richiede piccole modifiche, mentre altri necessitano di un po' più di lavoro.

Esempi di Ottimizzazione della Velocità dei Widget

Apture Bar

La Apture Bar è uno dei widget più semplici da modificare per il caricamento differito.

Prima:

<script id='aptureScript' type="text/javascript" src="http://www.apture.com/js/apture.js?siteToken=[your site token]" charset='utf-8'></script>

Dopo (con 10 secondi di caricamento differito):

<script type="text/javascript">

var delay='10'; // How many seconds before window opens

setTimeout('get_js()',delay*1000);

function get_js() {

NewScript.src="http://www.apture.com/js/apture.js?siteToken=[your site token]"

document.body.appendChild(NewScript);

}

</script>

 

Il Widget di AddThis

Prima:

<!-- AddThis Button BEGIN -->

<script type="text/javascript">addthis_pub = '[your publisher ID]';</script>

<a target="_blank" href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>

<!-- AddThis Button END -->

Dopo:

<!-- AddThis Button BEGIN -->

<script type="text/javascript">addthis_pub = '[your publisher ID]';</script>

<a target="_blank" href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" border="0" alt="" /></a>

<!-- AddThis Button END -->

<script type="text/javascript">

var delay='10'; // How many seconds before window opens

setTimeout('get_js()',delay*1000);

function get_js() {

var NewScriptAT=document.createElement('script')

NewScriptAT.src=\"http://s7.addthis.com/js/[number specific to widget]/addthis_widget.js\"

document.body.appendChild(NewScriptAT);

}

</script>

 

Disqus

Quando si arriva al widget dei commenti di Disqus la storia si fa un po' più complicata.

Mentre scrivo questo articolo, Disqus sta lavorando a una nuova versione del componente aggiuntivo Disqus per Movable Type, così a tempo debito la nuova estensione sarà disponibile per il caricamento asincrono di Disqus.

Tuttavia, volevamo sapere come muoverci nel frattempo e se avessimo potuto fare qualcosa che fosse stata ancora meglio dell'aspettare il rilascio del nuovo plugin.

Disqus (almeno per quanto riguarda l'implementazione su Movable Type) non è un pezzo di codice che puoi copiare e incollare nelle tue pagine, è un plugin CGI di Movable Type che genera il JavaScript nelle pagine quando queste vengono caricate.

Abbiamo due opzioni per velocizzarlo:

1) Modificare il Plugin di Disqus per Movable Type

Nel file disqus.pl, basta cancellare questa linea:

<script type="text/javascript" src="@{[DISQUS_URL]}/forums/$forum_url/embed.js"></script>

e poi prima di

</body>

tag, usare nel file embed.js uno dei metodi per il caricamento asincrono o differito descritti sopra.

2) Usare il Codice Unversale di Disqus al Posto del Plugin per Movable Type

Bisogna essere chiari per quanto riguarda le installazioni e le estensioni non modificate. Sono più facili da gestire e da aggiornare e molte persone le preferiscono per questo motivo.

Non modificare il codice, quindi, può essere una soluzione ideale in alcuni casi.

L'estensione Disqus include l'entry body del post nel codice di Disqus. Ciò significa che tutto il testo inserito a partire dall'entry body del post del blog sarà contenuto due volte nella tua pagina web.

La prima volta nel codice HTML per i tuoi visitatori, la seconda nei DIV nascosti generati da Disqus. Perciò il codice JavaScript può leggere il contenuto DIV come una variabile.

Se utilizzi il codice universale di Disqus al posto dell'estensione di Disqus, puoi superare questo problema, rendere le tue pagine web più corte e accelerare ulteriormente il tutto caricando i widget con il metodo asincrono o con quello differito.

Il codice universale dei commenti di Disqus è il seguente:

<div id="disqus_thread"></div>

<script type="text/javascript">

/**

* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]

*/

(function() {

var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;

dsq.src = 'http://[your_website_name].disqus.com/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

})();

</script>

<noscript>Please enable JavaScript to view the <a target="_blank" href="http://disqus.com/?ref_noscript=tx1">comments powered by Disqus.</a></noscript>

<a target="_blank" href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

Nelle nostre prove, lo abbiamo modificato con il caricamento differito in questo modo:

<div id="disqus_thread"></div>

<script type="text/javascript">

var disqus_url = '<$mt:EntryPermalink$>';

var disqus_title = '<$mt:EntryTitle$>';

</script>

<noscript>Please enable JavaScript to view the <a target="_blank" href="http://disqus.com/?ref_noscript=tx1">comments powered by Disqus.</a></noscript>

<a target="_blank" href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

<script type="text/javascript">

var delay='10';

setTimeout('get_js()',delay*1000);

function get_js() {

var NewScript=document.createElement('script')

NewScript.src="http://[your_website_name].disqus.com/embed.js"

document.body.appendChild(NewScript);

</script>

In breve, sotto il profile della velocità di caricamento, il codice universale è migliore dell'estensione per Movable Type, perché ti permette di eliminare la duplicazione del testo legata ai DIV.

Ciò significa che, anche se si preferisce il codice predefinito (caricamento asincrono) al posto del caricamento differito, potrai comunque beneficiare di tempi di caricamento ridotti e più veloci.

Quanto veloci possano essere dipenderà dalla lunghezza del post che è stato duplicato.

 

I Widget di Facebook

Le applicazioni di Facebook (come i commenti) supportano già il caricamento asincrono.

Se registri un'applicazione su http://developers.facebook.com/setup/, nella stessa pagina dove hai preso il tuo ID dell'applicazione, ecc. vedrai che l'esempio di codice JavaScript che ti è stato fornito contiene già il caricamento asincrono.

Ulteriori dettagli sono disponibili su : http://developers.facebook.com/docs/reference/javascript/FB.init.

Conclusioni

Il fatto che Facebook, Disqus e molti altri abbiano già aggiornato i loro codici con il caricamento asincrono è una chiara indicazione della direzione che presto tutti i principali siti web seguiranno (o stanno già seguendo).

Il caricamento asincrono di JavaScript si sta rapidamente trasformando da eccezione a regola, e presto sarà incluso nel codice copia / incolla di default senza la necessità di apportare modifiche personalizzate.

Nel frattempo, puoi usare gli esempi di codice di cui sopra per modificare i tuoi widget e script a tuo piacimento.

Se vuoi guadagnare in velocità, puoi usare il caricamento differito, dal momento che aggiunge un risparmio di tempo maggiore rispetto al caricamento asincrono.

Quando applicato a molteplici script e widget, ti aiuta a guadagnare un altro secondo o due e rende le tue pagine più veloci e ciò migliora l'esperienza dell'utente.

Fine della Parte 2

Come Rendere Più Veloci Le Tue Pagine Web Ritardando Il Caricamento Di JavaScript E Widget - Parte 1

Photo credits:
Come Rendere Più Veloci Le Tue Pagine Web Ritardando Il Caricamento Di JavaScript E Widget - Parte 2 - Chris Lamphear
Caricamento Differito Vs. Caricamento Asincrono - Aleksandr Ugorenkov
Che Miglioramenti Puoi Aspettarti? - Anton Balazh
Esempi di Ottimizzazione della Velocità dei Widget - Nagravision
Modificare il Plugin di Disqus per Movable Type - winterling
Usare il Codice Unversale di Disqus al Posto del Plugin per Movable Type - Rudat