Toglie il peso di Disqus dalla pagina

La punturina che risolve il problemaSei un fan di Disqus, il sistema in integrazione dei commenti, ma noti che rallentano molto il caricamento della tua pagina e temi per Google? Da alcuni esperimenti che ho fatto, ho notato che Google vede solo la roba che viene presentata in prima battuta in lettura, ovvero solo i contenuti sincroni.

La pagina – per Google – è caricata al momento in cui tutto ciò che è definito "In linea" nell'HTML è caricato. Questo comprende tutto il testo, gli script inglobati, le immagini, i CSS interni ed esterni ed anche gli script.

Quello però che non vede / attende sono le chiamate asincrone, ovvero quelle chiamate che avvengono dopo il caricamento della pagina. Non ci resta quindi che caricare Disqus alla fine del caricamente della pagina, ovvero all'onload della pagina.

Nota bene: se usate già l'onload in pagina, o altri metodi per multionload, sostituite la riga:

 

window.onload = function(){loadDisqus();}

 

Con la vostra metodologia di chiamata onload.

 

 

Script per la Disqus Tumblr version

Il vecchio script d

  1. apri il tuo template e verifica se la roba di disqus ce l'hai tra {block:Permalink} e {/block:Permalink}
  2. sostituisci alla chiamata base del primo script
    <script type="text/javascript" src="http://disqus.com/forums/IlTuoId/embed.js"></script>
    lo script con le funzioni loadDisqus e loadDisqusReplies
  3. rimuovi in toto l'ultimo <script …></script> di Disqus, quello tra CDATA 

 

<!-- commenti di disqus.com -->
{block:Permalink}
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
<div id="disqus_thread"></div>
<!--<script type="text/javascript" src="http://disqus.com/forums/IlTuoId/embed.js"></script>-->
<script type="text/javascript">
function loadDisqus(){
	var headID = document.getElementsByTagName("head")[0];         
	var newScript = document.createElement('script');
	newScript.type = 'text/javascript';
	newScript.src = 'http://disqus.com/forums/IlTuoId/embed.js';
	newScript.onload = loadDisqusReplies;
	headID.appendChild(newScript);		
}

function loadDisqusReplies() {
	var links = document.getElementsByTagName('a');
	var query = '?';
	for(var i = 0; i < links.length; i++) {
		if(links[i].href.indexOf('#disqus_thread') >= 0) {
			query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
		}
	}
	//document.write('<script type="text/javascript" src="http://disqus.com/forums/IlTuoId/get_num_replies.js' + query + '"></' + 'script>');
	var headID = document.getElementsByTagName("head")[0];         
	var newScript = document.createElement('script');
	newScript.type = 'text/javascript';
	newScript.src = 'http://disqus.com/forums/IlTuoId/get_num_replies.js' + query;
	newScript.onload = loadDisqusReplies;
	headID.appendChild(newScript);	
}
//versione senza jquery e senza altri onload
window.onload = function(){loadDisqus();}
</script>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}
<!-- commenti di disqus.com (fine) -->
 

 

Script per la nuova versione di Disqus

Lo script nuovo / standard è simile a questo:

<script type="text/javascript" src="http://disqus.com/forums/IlTuoId/combination_widget.js?num_items=5&hide_mods=0&color=blue&default_tab=people&excerpt_length=200"></script>
<a href="http://disqus.com/">Powered by Disqus</a>

Ovviamente compresso in una unica linea. Sostituite tutto quanto con:

<script type="text/javascript">
function loadDisqus(){
	var headID = document.getElementsByTagName("head")[0];         
	var newScript = document.createElement('script');
	newScript.type = 'text/javascript';
	newScript.src = "http://disqus.com/forums/IlTuoId/combination_widget.js?num_items=5&hide_mods=0&color=blue&default_tab=people&excerpt_length=200";
	newScript.onload = loadDisqusReplies;
	headID.appendChild(newScript);		
}
//versione senza jquery e senza altri onload
window.onload = function(){loadDisqus();}
</script>

Per la stesura di questo articolo ho usato questi riferimenti online:  Dynamically insert javascript e javascript beutifer. Grazie a Davide Nonino per la domanda. L'immagine invece è un omaggio all'amico Spippolazione alle prese con errori VMWare.

Loading Facebook Comments ...

21 pensieri su “Toglie il peso di Disqus dalla pagina

  1. davide

    grazie Merlinox!!! professionale allo stato puro!!! Visto che Google considera sempre più il fattore page speed e soprattutto indica nel mio webmaster tools Disqus come il colpevole… beh… è una cosa da farsi!!!

    Rispondi
  2. Pingback: Tweets that mention Toglie il peso di Disqus dalla pagina -- Topsy.com

  3. Merlinox Autore articolo

    Guarda Giuseppe è una cavolata: 4 smartellate di javascript. Alla fine ho solo spostato il “Momento” in cui viene incluso il .js 🙂

    Rispondi
  4. Merlinox Autore articolo

    dipende da quale dei due script presentati devi fare le modifiche. cmq se non è chiaro dimmi pure che vedo di migliorare il testo.

    Rispondi
  5. Giuseppe D'Elia

    @Merlinox
    sembra una cosa solo per tumblr…
    io uso il plug-in di disqus ed è forse questo il problema perché non ho proprio la minima idea di dove sostituire questo codice ^_^”

    anche considerando che usando il plugin il tutto viene automaticamente caricato con il classico di wp.
    si parla d’altro? 🙂

    Rispondi
  6. Merlinox Autore articolo

    Chiaramente se usi un plugin per wordpress è un po’ un casino: il plugin è necessario per la sincronizzazione dei commenti. Comunque alla fine si potrebbe cambiare pure quello. Tanto quello che cambia è solo la chiamata dei js esterni!

    Rispondi
  7. Giuseppe D'Elia

    Immaginavo che si parlasse nel caso del non utilizzo del plugin altrimenti non avevo capito nulla. In effetti si il plugin è necessario per wordpress… inizialmente pensavo che si potesse adottare il codice e moderare dal sito di disqus, però poi sorge il problema che i commenti molto probabilmente son solo in disqus e non vengono registrati nel blog…. questo non va! 🙂

    comunque, grazie dell’esauriente spiegazione! 🙂
    ottimo articolo M. 🙂

    Rispondi
  8. Merlinox Autore articolo

    Per curiosità, dopo aver fatto una copia, nel plugin cercati dove vengono chiamati i js esterni. Non dovrebbe essere un problema (specie se è un .js solo) modificarne lo script.

    Il difetto più grande di questa struttura – purtroppo – è che l’onload riceve solo una function. Quindi se nel tuo sito c’è già qualcosa in onload bisogna gestire un multi onload.

    Rispondi
  9. Giuseppe D'Elia

    @Merlinox
    Allora, (se ho ben capito) sono andato nell’editor del plug-in e c’è solo un file .js per disqus : disqus-comment-system/scripts/manage.js

    parte così: var dsq_old_onload = window.onload;
    e c’è scritto onload ovunque…

    spiegami che vuoi sapere ^_^”

    Rispondi
  10. Merlinox Autore articolo

    Guarda dovrei vedere. se lo script parte buttando nel codice un “” significa che è nel “runtime” della pagina, quindi sincrono.

    Altrimenti significa che parte all’onload, come questa soluzione, e sei già apposto.
    Cmq se controlli con le resource dell’inspector di chrome dovresti vederlo!

    Rispondi
  11. Giuseppe D'Elia

    @Merlinox
    sotto il disqus post ce ne sono 3 di script il primo sembra quello di apertura del thread con il link del post, il secondo quello del trackbacks e il terzo….

    non ne ho la più pallida idea… ^_^”
    quale guardo?

    Rispondi
  12. Merlinox Autore articolo

    Amico @Giuseppe D’Elia mi ha scambiato per un callcenter? La tecnica è fare partire il primo in onload e gli altri a cascata, come ho fatto io nel primo esempio. Ora come ora però non ce la faccio proprio a verificarlo.

    Rispondi
  13. Giuseppe D'Elia

    ah ah ah Tranquillo! 🙂
    e scusa, commentavo perché vedevo arrivare una soluzione.

    quando e se avrai tempo di farlo magari scrivilo, e aiuterai chi come me ci ha capito poco! ^_^”

    ciao Merlinox, e grazie per il tempo che mi hai dedicato! 😉

    Rispondi
  14. Merlinox Autore articolo

    Guarda ultimamente scrivo pure poco qui. Quello che posto è sempre più spesso una “rappresentazione” del quotidiano 🙂

    Rispondi
  15. Giuseppe D'Elia

    @Merlinox
    fai bene! 🙂
    è un argomento molto interessante, mi dilungavo per questo, disqus è molto usato e saperne di più come migliorarlo (in velocità specialmente) è senz’altro utile considerando le esigenze del web di oggi! 🙂

    Rispondi
  16. Pingback: Il tuo wordpress sociale

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *