Vitesse du site et Javascript asynchrone

asynchrone

Bien que je fasse beaucoup de développement, je ne me considère 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 afin qu'il puisse être mis à l'échelle, ne pas utiliser beaucoup de ressources, se charger rapidement, être facilement modifié plus tard et toujours 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 pratiquement réduites à néant.

C'est ce qu'on appelle le chargement synchrone. Vous devez finir de charger 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 par rapport aux autres. Vous pouvez améliorer considérablement 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 s'exécuter de manière 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 démarre 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 de la façon de le faire correctement d'Emil Stenström :

(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 lentes, cela n'affecte jamais l'affichage du contenu de votre page principale. Si vous consultez 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..