web-dev-qa-db-fra.com

L'ajout d'un bouton Google +1 ralentit le temps de chargement de la page

Cet article indique que les tags +1 de Google peuvent ajouter une seconde au temps de chargement d'une page, ce qui représente une baisse de 10% du nombre de visiteurs.

Les auteurs de l'article affirment utiliser le chargement de balises actives pour réduire le temps de chargement des pages.

Est-ce que quelqu'un connaît une méthode open source pour le faire plutôt qu'une méthode propriétaire?

javascriptperformancesocial-networkssocial-networking
4
Steve

Bien que la gestion des balises présente un intérêt pour les grands sites/organisations qui peuvent utiliser de nombreuses balises à des fins diverses (analyse Web, suivi de la clientèle, réseaux publicitaires, intégration de médias sociaux, etc.) à partir de sources disparates, il s'agit d'un problème distinct du javascript intelligent. chargement. Vous pouvez certainement charger votre JavaScript de manière optimale sans utiliser un système de gestion des balises coûteux comme Tagman ou Ensighten.

Ce que j'appellerais le "chargement de balises intelligentes" comporte deux éléments. Le premier consiste à charger les balises selon les besoins, ce qui signifie que vous ne devez pas simplement incorporer toutes les balises dans la présentation, mais aussi les charger sur chaque page. C'est assez facile à faire. L'autre composant (légèrement) plus dur est chargement du JavaScript de manière non bloquante sans provoquer de conditions de concurrence en raison de dépendances

Pour ce faire, vous pouvez utiliser les attributs defer ou async de l'élément <script/> ou utiliser JavaScript pour charger les balises de manière dynamique:

  • defer se chargera d'une manière non bloquante et n'exécutera le code qu'une fois le chargement de la page terminé, généralement dans l'ordre dans lequel ils apparaissent sur la page.
  • async et le chargement dynamique avec JS exécuteront le code dès qu'il sera téléchargé. L'ordre d'exécution n'est donc pas garanti et la page ne sera pas finie.

Certaines complications supplémentaires incluent:

  • Dans IE, defer ne sera pas nécessairement exécuté dans l'ordre dans lequel il apparaît sur la page.
  • async est un attribut HTML5 qui a prise en charge limitée du navigateur .
  • Les 3 techniques bloqueront l’événement window.onload, ce qui allongera le temps de chargement de la page.

Une solution pour ce dernier consiste à utiliser un temporisateur avec un délai de 0. Cela ne garantit pas que la balise est exécutée avant ou après window.onload, mais simplement qu'elle ne bloque pas l'événement de chargement.

Pour la balise Google+, vous n'avez pas à vous soucier de l'ordre d'exécution. Vous pouvez donc utiliser defer ou un chargement dynamique, selon que vous vous souciez ou non de bloquer window.onload. Si vous avez un JS lié à l'interface utilisateur qui doit être déclenché sur onload, j'utiliserais probablement la technique du minuteur pour minimiser le délai.

3
Lèse majesté

Google recommande ce qui suit : -

<script type="text/javascript">

// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

</script>

Il existe également un article utile traitant du sujet sur phpied.com, vous pouvez également trouver des informations supplémentaires sur defering chargement de javascipt pour les boutons de médias sociaux avec cette requête

2
toomanyairmiles