Vitesse du site et Javascript asynchrone

asynchrone

Bien que je fasse beaucoup de développement, je ne me classe pas comme un vrai développeur. Je peux programmer et déplacer des éléments sur une page et les faire fonctionner. Un vrai développeur comprend comment développer le code pour qu'il puisse être mis à l'échelle, ne pas prendre beaucoup de ressources, se charger rapidement, être facilement modifié plus tard et continuer à fonctionner.

La difficulté pour les spécialistes du marketing est d'avoir à la fois un site web très rapide et incorporer toujours des intégrations et des éléments sociaux qui peuvent créer des dépendances sur la rapidité de chargement de votre site. Un tel exemple est boutons sociaux. Sur Martech, nous avons des boutons sociaux sur chaque page du site. Donc… si les ressources Facebook se chargent lentement un jour, cela ralentit notre site. Ajoutez ensuite Twitter, Pinterest, Buffer, etc. à cela et les chances de chargement rapide de votre site sont réduites à pratiquement rien.

C'est ce qu'on appelle le chargement synchrone. Vous devez terminer le chargement d'un élément avant vous chargez l'élément suivant. Si vous êtes capable de charger des éléments de manière asynchrone, vous pouvez charger des éléments sans dépendance les uns des autres. Vous pouvez considérablement améliorer la vitesse de votre site en chargeant des éléments de manière asynchrone. Le problème est que les scripts prêts à l'emploi que ces sociétés vous fournissent ne sont presque jamais optimisés pour une exécution asynchrone.
asynchrone

Vous pouvez voir ce qui a un impact sur la vitesse de votre page en exécutant un test sur Pingdom:
chargement de la page pingdom

Javascript asynchrone vous permet d'écrire du code indiquant aux éléments de se charger après la page est complètement chargée. Pas de dépendances! Ainsi, votre page se charge et une fois qu'elle est terminée, un script se lance qui charge les autres éléments - dans ce cas nos boutons sociaux. Si vous êtes développeur, vous pouvez lire un excellent article, Javascript asynchrone à chargement différé.

Voici un extrait d'Emil Stenström comment le faire correctement:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); else window.addEventListener ('load', async_load, false);}) ();

Le résultat est que si ces intégrations tierces sont en panne ou fonctionnent lentement, cela n'a jamais d'impact sur le contenu de votre page principale. Si vous affichez la source de notre page, vous verrez que je charge tous les scripts sociaux supplémentaires utilisant cette technique. Le processus amélioré les secondes de vitesse de notre site - et ne s'étouffe pas pendant le chargement. Nous n'avons pas converti toutes nos dépendances externes en Javascript asynchrone, mais nous le ferons.

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..