Boutons sociaux Lazy Load avec Socialite.js
Aujourd'hui, j'ai passé une journée fantastique avec l'équipe Web d'Angie's List. Angie's List a développé son site en une incroyable bibliothèque de ressources… et pendant tout ce temps, ils ont continué à accélérer leur site. Leurs pages se chargent à une vitesse fulgurante. Si vous ne me croyez pas, affichez cette page sur Portes de garage.
La page incorpore des images, des vidéos et des boutons sociaux… et se charge toujours en millisecondes. Comparer leur site au mien, c'est comme piloter une Prius avec un F-16. Ils n'ont pas encore fini, non plus, toujours à la recherche de moyens d'améliorer l'expérience client et de trouver et de partager le contenu.
Nous n'avons pas d'équipe de développement à plein temps ni les ressources d'une entreprise publique, donc notre progression est un peu plus lente que celle d'Angie. Nous avons un hôte incroyable avec Flywheel - en utilisant leur mise en cache avancée et CDN, mais nous savons que certaines choses nous font encore mal. Par exemple, nos images ne sont pas optimisées. Il existe des services qui vous permettent de convertir vos images à une fraction de leur taille tout en conservant leur clarté… nous les examinons.
Alors que je leur montrais notre site, j'ai grincé des dents et baissé la tête alors que la page se figeait lors du chargement d'un bouton social. Je pense que c'était Facebook. Argh… une seconde ou deux plus tard, le bouton est apparu et le reste de la page s'est chargé. Pouah.
Lorsque j'ai décrit le problème, leur ingénieur a immédiatement eu une solution, socialite.js. Socialite fournit un moyen très simple de mettre en œuvre et d'activer une pléthore de boutons de partage social - à tout moment. Au chargement du document, au survol de l'article, à tout événement! Étant donné que socialite charge les boutons de manière asynchrone, le document ne se bloquera pas en attendant 50 Ko de médias sociaux.
Heureusement, il existe déjà un plugin WordPress qui intègre Socialite, appelé WPSocialite. Ce soir, j'ai déchiré tout mon code personnalisé pour charger des boutons et implémenté WPSocialite. J'ai pu personnaliser le CSS et modifier les boutons que je voulais. J'ai hâte que des boutons supplémentaires soient ajoutés à l'avenir - comme Buffer ou Reddit… mais c'est parfait pour le moment!