En general, fem servir botons d’intercanvi social al nostre lloc per compartir contingut del nostre lloc en diverses plataformes de xarxes socials. Aquests botons de compartició social afegeixen una mida de bytes addicional a les vostres pàgines web. Si algú navega per aquesta pàgina web en concret amb una connexió a Internet lenta, provocarà un desordre. Per evitar-ho especialment en dissenys responsius, podeu carregar els botons d’ús compartit social de manera condicional i aturar-los perquè es carreguin en dispositius mòbils per evitar desordres.
Com carregar els ginys socials de manera condicional:
A continuació es mostra una tècnica senzilla mitjançant la qual calculem l’amplada del navegador i, si l’amplada supera una amplada determinada, digueu només 480 px, llavors apareixeran els botons d’ús compartit social.
Aquí el millor és que no els amaguem amb CSS, sinó que evitem que es carreguin completament, cosa que estalviarà molt temps de càrrega quan algú navega des de dispositius mòbils.
Per implementar la càrrega condicional al vostre bloc / lloc web, primer afegiu tots els ginys socials necessaris al vostre bloc mitjançant el procediment habitual. Per exemple, podeu visitar-la facebook.com per generar codi per al botó M'agrada mentre dev.twitter.com will proporciona codis per als widgets Tweet i Follow de Twitter.
Elimineu el codi JavaScript d’aquests codis generats: tot el que hi ha entre els fitxers tags – and add everything else to your website template. Then copy-paste the following snippet before the closing tag of your website template.
(function(doc, script, minimum) {
// Calculate the width of the user's screen
var browserWidth = window.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
// Load JavaScript only if the site is being viewed on a wide (non-mobile) screen
if (browserWidth > minimum) {
var js, frag = doc.createDocumentFragment(),
// Credit : Stoyan Stefanov of phpied.com
js_queue = function(url, id) {
if ( ! doc.getElementById(id) ) {
js = doc.createElement(script);
js.src = url; js.id = id;
frag.appendChild(js);
}
};
// These are the most common social widgets, remove the ones you don't need
js_queue ("https://apis.google.com/js/plusone.js", "googleplus-js");
js_queue ("//platform.twitter.com/widgets.js", "twitter-wjs");
js_queue ("//connect.facebook.net/en_US/all.js#xfbml=1","facebook-jssdk");
js_queue ("//platform.linkedin.com/in.js", "linkedin-js");
js_queue ("//assets.pinterest.com/js/pinit.js", "pinterest-js");
var fjs = doc.getElementsByTagName(script)[0];
fjs.parentNode.insertBefore(frag, fjs);
}
// Set the minimum width here (default is 480 pixels)
} ( document, 'script', 480 ) );
El codi JavaScript anterior carrega de manera asíncrona tots els ginys socials populars (Twitter, Facebook, LinkedIn, Google+ i Pinterest), però podeu eliminar les trucades js_queue dels ginys que no teniu previst utilitzar al vostre lloc web. Deseu els canvis i heu acabat.
Això és! Heu passat lentament i amb èxit a les estratègies avançades de blocs i SEO. Aquest capítol sens dubte us ajudarà a reduir el temps de càrrega del bloc, que és un dels aspectes crucials del SEO a la pàgina.
