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
- apri il tuo template e verifica se la roba di disqus ce l'hai tra {block:Permalink} e {/block:Permalink}
- 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 - 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.
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!!!
bella foto 🙂
@davide: mi ha fatto piacere
@spippolazione: sapevo che apprezzavi
Pingback: Tweets that mention Toglie il peso di Disqus dalla pagina -- Topsy.com
In effetti disqus è di piombo…
complimenti per l’articolo merlinox, anche se mi ci vorrà un pò per capire come risolvere la cosa… ^_^”
Guarda Giuseppe è una cavolata: 4 smartellate di javascript. Alla fine ho solo spostato il “Momento” in cui viene incluso il .js 🙂
@Merlinox
non mi è molto chiaro in che punto sostituire cosa…. ^_^”
dipende da quale dei due script presentati devi fare le modifiche. cmq se non è chiaro dimmi pure che vedo di migliorare il testo.
@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? 🙂
approfitto anche per dirti che il permalink di questa pagina è (immagino accidentalmente) sbagliato:
http://blog.merlinox.com/disqus-onloa/
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!
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. 🙂
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.
@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 ^_^”
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!
@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?
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.
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! 😉
Guarda ultimamente scrivo pure poco qui. Quello che posto è sempre più spesso una “rappresentazione” del quotidiano 🙂
@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! 🙂
Pingback: Il tuo wordpress sociale