Merlinox's Blog

Toglie il peso di Disqus dalla pagina

Sei 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.