Les boutons de partage sont des outils fantastiques pour promouvoir facilement et efficacement son contenu sur des médias sociaux. Super, mais le revers de la médaille, c’est qu’ils peuvent parfois ralentir votre site. Google +1 ne déroge bien évidemment pas à la règle mais Google a une fois de plus décidé de bien faire les choses en proposant un tout nouveau code pour son bouton. Oui, un code asynchrone et qui devrait par conséquent se charger beaucoup plus rapidement.
Les connaisseurs ne manqueront d’ailleurs pas de dresser un parallèle avec un autre service de la firme, à savoir Google Analytics. Google avait également déployé une mise à jour de son script en décembre 2009 et avait ainsi tablé sur de l’asynchrone histoire de ne pas freiner le chargement de nos pages. A l’époque, bien sûr, je n’avais pas vraiment vu de différence mais il faut préciser que j’avais nettement moins de trafic qu’aujourd’hui.
Enfin, tout ça, c’est super, mais c’est quoi au juste un code asynchrone, hein ? Et bien en fait, les amis, le grand avantage du script asynchrone, c’est tout simplement de fonctionner en arrière plan. Je vais schématiser mais par défaut, lorsqu’un navigateur lit une page, il le fait de haut en bas. S’il tombe sur un script, il devra donc nécessaire l’interpréter avant de passer à autre chose. Et si ce fameux script rame, autant dire que vos pages vont mettre du temps à s’afficher. Au contraire, lorsque votre script fonctionne de manière asynchrone, tout est fantastique, tout est merveilleux, tout est plus rapide.
Si vous souhaitez vous aussi profiter de la magie de l’asynchrone sur votre bouton Google +1, ce n’est pas compliqué. Il suffit de se rendre sur cette page, de sélectionner les options qui vont bien (taille du bouton, langue, etc) et de choper ensuite le code qui apparait dans la champ tout en bas de la page. Un code qui est divisé en deux partie : la première ira se loger directement dans votre footer, juste avant la fermeture de la balise “body”, tandis que la seconde sera à insérer à l’endroit où vous souhaitez voir apparaître le fameux bouton.
Maaaagie !
Pour utiliser le mode asynchrone il faut clairement spécifier l’élément auquel le bouton se rattache. En gros on a 2 modes : au chargement de l’élément ou au rendering de l’élément.