Choses que les développeurs affectent le temps de chargement des applications Web

Dans cet article, nous examinerons les erreurs courantes ou les éléments négligés par les développeurs lors de la création qui affectent négativement leur temps de chargement.

Pourquoi mon application devrait-elle se charger rapidement ?

Il existe de nombreuses raisons pour lesquelles votre application doit être chargée. chargez rapidement – tout d'abord est de réduire le taux de rebond. En 2016, John Muller de Google a tweeté le nombre moyen de secondes qu'un utilisateur est prêt à attendre avant de rebondir sur votre application est de 2 secondes. Cela signifie que plus votre application se charge lentement, plus vous avez de chances d'augmenter votre taux de rebond. 1s à 5s la probabilité de rebond augmente de 90 % ; 1s à 6s la probabilité de rebond augmente de 106%; 1s à 10s, la probabilité de rebond augmente de 123%. » title= »bounce-probability »/>

C'est intéressant, et encore plus intéressant, c'est que la plupart des pages en ligne sont lentes, vous pouvez donc choisir aujourd'hui de vous démarquer et d'être meilleur.

Une autre raison comprend un meilleur référencement : les moteurs de recherche privilégient les applications Web à chargement rapide par rapport aux applications plus lentes. Ceci est important, car cela peut affecter directement la façon dont vos utilisateurs trouvent votre produit. Si votre référencement est mauvais et que votre taux de rebond est élevé, votre taux de rétention continuera de diminuer.

Voyons quelques façons de nous assurer que notre application Web se charge aussi rapidement que nous le souhaitons.

Trop de redirections

Avoir trop de redirections peut être un gros problème, en particulier sur la page d'accueil, la toute première page qui se charge pour que l'utilisateur la voie. Il est conseillé de ne pas avoir beaucoup de redirections sur votre page d'accueil.

Essayez de vous assurer que chaque "href" sur le composant principal de l'application est lié à un composant important.

En utilisant les redirections, vous avez également la possibilité de référencer un lien qui peut ne pas fonctionner du tout ou assez rapidement, et parfois tout cela alimente le temps de chargement de votre application. Certaines redirections proviennent également de la configuration des domaines, alors assurez-vous de ne pas en avoir plus de deux, en particulier pour la page d'accueil.

Grande taille de la page

La taille de la page Web est également un facteur très important à prendre en compte car plus la page est grande, plus le temps de chargement sera long. Vous savez déjà que tous les éléments d'une page, tels qu'un langage de balisage, des feuilles de style et des scripts, constituent la taille de la page. Il y a donc quelques choses à faire pour s'assurer que vous n'avez pas une grande application Web.

La première chose est de ne pas oublier de GZip les fichiers lors des transferts. C'est un excellent moyen d'obtenir une compression et une décompression lorsque vous en avez besoin sans perdre la qualité du fichier lors des communications entre votre serveur et le navigateur.

La prochaine chose à considérer est d'utiliser une feuille de style centrale. De nombreux frameworks JavaScript encouragent la construction de composants et beaucoup d'entre eux ont des feuilles de style par composant. De nombreux développeurs prennent leur temps pour écrire des styles pour chaque composant, ce qui peut parfois conduire à un codage répétitif.

Il est toujours plus efficace de suivre le principe DRY (ne vous répétez pas). Ceci peut être réalisé en réduisant le nombre de feuilles de style utilisées dans n'importe quel projet. Par exemple, le style de l'en-tête, de la barre latérale et du pied de page peuvent tous être placés dans la feuille de style du composant principal au lieu d'être dans trois feuilles de style distinctes.

Mauvaise plate-forme d'hébergement

Que cela vous plaise ou non, la plate-forme d'hébergement que vous utilisez peut affecter directement la façon dont votre contenu est diffusé, et la vitesse de diffusion du contenu en fait partie.

Pour un projet expérimental lorsque vous ne vous souciez pas de la vitesse, vous pouvez jouer avec des plates-formes d'hébergement gratuites ou bon marché. Cependant, lorsque vous créez des applications Web avec des clients, il est important de trouver des plates-formes d'hébergement qui optimisent les performances.

Bien que l'hébergement bon marché soit parfois même gratuit, il se traduit par le partage de ressources entre votre propre application et d'autres applications qui utilisent l'hébergement bon marché. Plate-forme. Une fonctionnalité telle que l'hébergement partagé peut avoir un effet direct sur la vitesse de chargement de votre page.

Lazy Loading Images

La gestion des images est l'un des éléments les plus essentiels à prendre en compte pour la vitesse de chargement. Google rapporte que les images sont toujours une cause majeure de la lenteur du chargement des applications Web. Vous pouvez compresser des images et des vidéos afin que toute cette taille de fichier ne soit pas chargée. Mieux encore, vous pouvez utiliser le chargement paresseux.

Le chargement paresseux est une technique de développement Web prise en charge par tous les frameworks JavaScript populaires, de React à Vue à Angular. Il charge essentiellement des ressources telles que des images et des vidéos sur le DOM sur demande, donc si votre page de destination contient une vidéo après deux défilements, la vidéo n'est chargée que lorsque vous avez fait défiler près de l'emplacement où la vidéo devrait être. Il s'agit d'une utilisation efficace des ressources et cela signifie également que les ressources qui ne sont pas visitées ne sont pas chargées sur le DOM.

Consultez cette ressource de développement Web Google sur le chargement paresseux.

Scripts mal optimisés

Parfois, nous sommes pressés et nous n'écrivons donc pas de code bien optimisé lors de la construction. Des choses comme les tests unitaires sont vraiment importantes pour revenir en arrière et nous demander ce que nous essayons de réaliser. Je considère les tests comme un excellent moyen d'optimiser le code que nous avons déjà écrit, car cela nous oblige à réviser le modèle mental. Écrivez-vous des tests pour votre code ? Comment s'y prendre, après la construction ou pendant la construction ?

Pour des choses comme les scripts qui sont déclenchés souvent et parfois plus que nécessaire, existe-t-il de meilleures façons d'accomplir ce que nous faisons, existe-t-il des fonctions spécifiques à la bibliothèque qui sont déjà existe?

Mettre en cache vos pages Web

La mise en cache signifie simplement stocker une copie d'une page Web, un instantané si vous voulez, et donc pas nécessairement recharger ou générer une page encore et encore. C'est l'un des moyens les plus efficaces en termes de mémoire pour vous assurer que votre application Web est rapide. La mise en cache réduit le temps de chargement du premier octet, garantissant que le serveur ne charge que moins de ressources au fil du temps. Vous pouvez commencer par vérifier que votre fournisseur de services d'hébergement dispose d'une option de mise en cache. C'est l'un des moyens les plus simples de procéder.

Utilisez un CDN (Content Delivery Network)

Un réseau de diffusion de contenu (CDN) pour les pages Web uniquement fournit un instantané d'une version statique de votre page Web. Ceci est vraiment utile lorsque vous recherchez la vitesse, et le classement de Google adore les CDN car ils sont extrêmement rapides. Cela peut être un assistant incroyable pour votre page Web elle-même : vous pouvez avoir votre page, puis utiliser un CDN pour en héberger des copies dans divers centres de données.

Ce sont quelques-unes des choses auxquelles vous pouvez prêter attention et votre application Web. deviendra très rapide au fur et à mesure que vous suivez ces suggestions.

Google PageSpeed ​​Insights

Vous devez vous demander s'il existe un outil capable de décomposer les informations en fonction de la vitesse de votre page. Il y en a un de Google appelé PageSpeed ​​Insights. L'exécution d'une page de destination sur laquelle je travaille actuellement montre ceci :

Vous pouvez voir qu'elle a un score de 85 pour le bureau. Vous pouvez l'activer pour afficher des informations pour une vue mobile et un score différent également. Il vous fournit des informations sur les opportunités d'amélioration de la vitesse, des diagnostics, et enfin des suggestions et un audit. Il se connecte à la technologie d'audit Google Lighthouse et vous pouvez tester vos applications Web hébergées avec.

Conclusion

Dans cet article, nous avons examiné à quel point la vitesse de chargement des pages est importante pour attirer, garder et fidéliser les utilisateurs. Nous avons également examiné quelques suggestions sur ce qu'il faut faire pour améliorer la vitesse de chargement de notre application, puis un outil gratuit à utiliser pour vérifier le niveau de vitesse de notre application et obtenir des commentaires. J'espère que cela vous a plu.