Généralement, nous utilisons des boutons de partage social sur notre site pour partager le contenu de notre site sur diverses plateformes de réseaux sociaux. Ces boutons de partage social ajoutent quelques octets supplémentaires à vos pages Web. Si quelqu'un parcourt cette page Web avec une connexion Internet lente, cela provoquera un encombrement. Pour éviter cela, en particulier sur les conceptions réactives, vous pouvez charger les boutons de partage social de manière conditionnelle et les empêcher de se charger sur les appareils mobiles pour éviter les encombrements.
Comment charger les widgets sociaux de manière conditionnelle :
Vous trouverez ci-dessous une technique simple à l'aide de laquelle nous calculons la largeur du navigateur et si la largeur dépasse une largeur particulière, disons 480px seulement, les boutons de partage social apparaîtront.
Ici, la meilleure chose est que nous ne les cachons pas en utilisant css, mais au lieu de cela, nous les évitons complètement de se charger, ce qui économisera beaucoup de temps de chargement lorsque quelqu'un navigue à partir d'appareils mobiles.
Pour mettre en œuvre le chargement conditionnel sur votre blog/site Web, ajoutez d'abord tous les widgets sociaux nécessaires à votre blog en utilisant la procédure habituelle. Par exemple, vous pouvez visiter facebook.com pour générer du code pour le bouton J'aime tout en dev.twitter.com fournira des codes pour les widgets Tweet et Follow de Twitter.
Supprimez le JavaScript de ces codes générés - tout ce qui se trouve entre le 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 ) );
Le code JavaScript ci-dessus charge de manière asynchrone tous les widgets sociaux populaires - Twitter, Facebook, LinkedIn, Google+ et Pinterest - mais vous pouvez supprimer les appels js_queue pour les widgets que vous ne prévoyez pas d'utiliser sur votre site Web. Enregistrez les modifications et vous avez terminé.
C'est ça! Vous êtes passé lentement et avec succès aux stratégies avancées de blogging et de référencement. Ce chapitre va certainement vous aider à réduire le temps de chargement du blog qui est l'un des aspects cruciaux du référencement On Page.
