Nella maggior parte dei casi quando analizzo il codice di qualche sito che usa jQuery trovo un link di questo genere:
<script type="text/javascript" src="/js/jQuery.min.js"></script>
Nel caso il sito fosse pubblico questa non è l’opzione migliore. Suggerisco infatti di usare le librerie Google AJAX (e non solo) ospitate direttamente nei data centers di Google. Questa opzione porta diversi vantaggi rispetto ad ospitare le librerie sul proprio server: riduce la latenza, aumenta il parallelismo e offre una migliore opportunità di caching.
In questo articolo vorrei andare nel dettaglio di questi 3 vantaggi portati dal CDN di Google e mostrerò un paio di esempi per capire come si implementa questo servizio (anche su WordPress).
Per chi avesse fretta il link per richiamare la libreria direttamente da Google è questo:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
Non ho dimenticato di scrivere http. Il riferimento allo script non usa http poichè questo “trucco” consente di utilizzare un unico riferimento che funziona sia su HTTP sia su HTTPS massimizzando quindi l’effetto caching.
Ridurre la latenza con Google CDN
Una CDN – acronimo di Content Delivery Network – distribuisce il contenuto statico tra i server in diversi luoghi fisici. Quando il browser di un utente risolve l’URL di questi file, il download verrà automaticamente avviato dal più vicino server disponibile in rete.
Nel caso della libreria Google AJAX gli utenti potranno ricevere il file dal data center più vicino a loro piuttosto che da un server statico.
Ci sono alcuni servizi di CDN paragonabili per performances a Google ma con un servizio premium è difficile battere un servizio gratuito! Questo beneficio da solo basterebbe a convincere la maggior parte dei webmaster, ma non è finita qui.
Aumentare il parallelismo
Per evitare di sovraccaricare inutilmente i server, i browser limitano il numero di connessioni che possono avvenire simultaneamente dallo stesso IP. A seconda del browser tale limite potrebbe essere molto basso, fino a massimo due connessioni per host.
Utilizzando la libreria Google AJAX ospitata sul CDN si elimina una richiesta al tuo sito, consentendo ad altri contenuti di venire scaricati in parallelo. Questo accorgimento non fa una differenza enorme per gli utenti con un browser con 6 collegamenti simultanei, ma per quelli ancora limitati a due la differenza è evidente.
Ottenere un caching migliore
Potenzialmente il più grande vantaggio di utilizzare la libreria Google AJAX ospitata su CDN è che gli utenti potrebbero averla già scaricata navigando su altri siti rendendo inutile un ulteriore download.
Non importa quanto ben ottimizzato sia il vostro sito, se si ospitano i files jQuery in locale gli utenti dovranno scaricarli almeno una volta. Ognuno dei vostri utenti probabilmente ha già decine di copie identiche di jQuery nella cache del proprio browser, ma quelle copie di jQuery sono ignorate quando visitano il tuo sito poichè la sorgente indicata è differente.
Tuttavia, quando un browser vede riferimenti a copie CDN-hosted di jQuery, capisce che si riferiscono alla stessa esatta libreria. Il browser può fidarsi che quei file sono veramente identici e non perde tempo a richiedere il file se è già memorizzato nella cache.
Questo accorgimento crea un potente effetto di “cross-site caching”, e tutti i siti che utilizzano il CDN ne beneficiano. Il CDN di Google distribuisce il file con le intestazioni che tentano di memorizzare nella cache il file per un massimo di un anno, questo effetto è davvero performante.
Ad oggi esistono diverse migliaia di siti tra i più trafficati su Internet con la libreria jQuery ospitata sul CDN di Google, è quindi molto probabile che molti dei vostri utenti non avrà mai bisogno di scaricarla di nuovo se usate questo metodo. Avrete una chiamata HTTP e un download in meno.
Implementazione
Immagino che tu oramai sia praticamente convinto sull’utilità di usare i data centers di Google per distribuire le librerie jQuery quindi non mi resta che mostrarti come si implementa.
Dei due metodi disponibili, questa opzione è quella che Google consiglia:
The google.load() approach offers the most functionality and performance.
Per esempio:
<script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.10.2"); google.setOnLoadCallback(function() { // Place init code here instead of $(document).ready() }); </script>
Sebbene non ci sia nulla di sbagliato in questo metodo, che resta comunque un miglioramento rispetto ad un jQuery self-hosted, penso che in quanto a prestazioni pure non sia il massimo ottenibile poichè lo script blocca la richiesta del successivo jQuery e genera quindi un (lieve) ritardo.
Il secondo metodo è questo:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { }); </script>
Questo metodo evita il ritardo sul jSapi ed elimina 3 inutili richieste HTTP. Generalmente si preferisce questo metodo.
Google CDN con WordPress
Con questo script inserito nel file functions.php è possibile rimuovere la dipendenza jQuery hostata in locale e sostituirla con quella nella CDN di Google.
Per tutti i siti WordPress esiste un plugin chiamato “Use Google Libraries” che in automatico punta tutti i link a jQuery locali sul CDN di Google.
Commenti |3
Lascia un commentoSalve , grazie per le informazioni , è un sistema che vorrei provare sul mio sito wp…..ho visto il codice da implementare, mi chiedevo tuttavia DOVE va inserito?
grazie se puoi aiutarmi a capire..nel frattempo ho attivato il plugin che hai consigliato ma se riuscissi a farne a meno sostituendolo con lo script sarei più contenta :-)
grazie per ogni aiuto
cordiali saluti marni
salve avevo lascito un commento ieri in attesa di moderazione ..non vedo più nulla…forse c’è stato un errore ? si è cancellato ..grazie se mi fa sapere qualcosa
saluti Marni
Buongiorno Marni, mi scusi se non le ho ancora risposto ma sono in ferie senza PC e siccome la risposta necessita un certo volume di parole preferivo aspettare di essere a casa. Provo comunque a dirle la mia – la stringa di codice va inserita nel tag HEAD dell’HTML. Dovrà cancellare il richiamo al file jQuery locale e sostituirlo con quello in hosting sui server di Google.
In genere nei temi wordpress la sezione HEAD la trova nel file head.php.
Spero di averla aiutata. Buon lavoro!