5 erreurs courantes qui affectent les temps de chargement des pages

Si votre site Web met beaucoup de temps à se charger lorsque les utilisateurs le visitent, alors cet article peut vous inspirer pour votre travail d'optimisation. Mais même si cela ne vous aide pas à résoudre votre problème, vous pouvez toujours découvrir quelles sont les erreurs courantes qui affectent le temps de chargement du site Web.

Pourquoi le temps de chargement des pages est-il important ?

Le temps de chargement de la page affecte directement l’expérience intuitive de l’utilisateur concernant les performances du site Web. Selon les données de recherche,

Une fois que le temps de chargement de la page dépasse 3 secondes, la moitié des utilisateurs visiteurs seront perdus en attendant.

• Classement des moteurs de recherche — Le temps de chargement des pages est l'un des moyens importants par lesquels les moteurs de recherche classent votre site Web dans les résultats de recherche. Par conséquent, le temps de chargement d’une page Web affecte la facilité avec laquelle les utilisateurs la trouvent sur le Web.
• Taux de conversion — Plus la page se charge rapidement, plus l'utilisateur sera engagé. Un site Web lent entraînera évidemment des taux de conversion plus faibles. Si votre page Web prend trop de temps à charger, l'exécution du Call-To-Action (CTA) prendra beaucoup de temps. Pendant cette période, la patience et l'enthousiasme de l'utilisateur s'épuiseront et l'utilisateur finira par fermer votre site Web sans acheter. votre produit ou utiliser les services que vous fournissez.
• Expérience utilisateur — Plus le chargement de votre site Web est long, plus vos utilisateurs seront satisfaits. En conséquence, les taux de fidélisation des clients et de visites répétées seront plus élevés.

Regardons quelques exemples basés sur des recherches effectuées par HubSpot :

• Si Yahoo réduisait le temps de chargement des pages de 0,4 seconde, le trafic pourrait augmenter de 9 %.
• Une page 1 seconde plus lente pourrait coûter à Amazon 1,6 milliard de dollars de ventes par an.
• Un retard de 2 secondes dans les recherches Bing entraînera une perte de revenus de 4,3 % par visiteur, une diminution de 3,75 % des clics et une diminution de 1,8 % du volume des requêtes.

Sur la base des données ci-dessus, vous pouvez voir à quel point le temps de chargement des pages est important pour votre site Web.

Facteurs qui affectent le temps de chargement des pages et les techniques d'optimisation

Il existe de nombreux facteurs qui affectent le temps de chargement des pages. Parmi ces erreurs, j'ai répertorié les erreurs que j'ai rencontrées lors de la construction. un site Web. Voici cinq erreurs représentatives.

1. Un grand nombre de requêtes HTTP

Chaque fois que le navigateur a besoin d'obtenir un fichier, une page ou une image du serveur Web, il effectuera une requête HTTP, après quoi vous pouvez utiliser l'onglet "Réseau" dans les "Outils de développement" de Chrome pour surveiller les requêtes réseau effectuées par l'application, les requêtes qui prennent le plus de temps et d'autres informations.

Les navigateurs généraux limitent généralement le nombre de requêtes HTTP simultanées entre 4 et 8. Par conséquent, lorsque le nombre de requêtes simultanées est important, de longs délais d’attente se produisent. Les recherches effectuées par Yahoo montrent que 80 % du temps de chargement de vos applications repose sur des requêtes HTTP, et réduire le nombre total de requêtes HTTP est utile pour accélérer les temps de chargement des pages.

Vous pouvez réduire le nombre total de requêtes HTTP pour votre application Web des manières suivantes :

• Fusionner les fichiers CSS/JS — Vous pouvez essayer de fusionner Les fichiers CSS avec les fichiers JS sont fusionnés dans le même fichier, ce qui réduit les demandes et élimine le besoin de récupérer plusieurs fichiers du serveur. Étant donné que tous les fichiers CSS sont rendus en morceaux, la réduction des fichiers CSS améliorera considérablement les temps de chargement des pages.
• Chargement de contenu à la demande — Au lieu de charger toutes les images de votre application en même temps, chargez-les uniquement lorsque cela est nécessaire. Cette approche est appelée chargement paresseux ou chargement à la demande. Lorsqu'un utilisateur arrive sur votre site, vous pouvez charger des images uniquement lorsque l'utilisateur fait défiler jusqu'à cet emplacement spécifique, plutôt que de toutes les charger en un clic.
• Activer la mise en cache du navigateur — Permet la mise en cache des images statiques ou du contenu de sites Web qui ne changent pas fréquemment. Lorsque l'utilisateur visite le site Web pour la deuxième fois, le cache peut charger ce contenu sans envoyer de nouvelle requête HTTP au serveur. Cela accélère le chargement du contenu.
• Le serveur prend en charge HTTP/2 — Grâce à HTTP/2, une seule connexion doit être établie du navigateur au serveur pour charger un site Web, et plusieurs requêtes simultanées sont autorisées. C'est beaucoup plus efficace que de créer une nouvelle connexion pour chaque ressource.

2. Ne pas utiliser de CDN

Si votre site Web n'a pas de CDN activé, les temps de chargement augmenteront lorsque l'emplacement physique de l'utilisateur est éloigné de le serveur. Ces retards deviennent plus visibles avec la distance et affectent toutes les requêtes HTTP adressées au serveur. L'utilisation d'un CDN peut améliorer les temps de chargement des pages.

Qu'est-ce que le CDN ?

Le nom complet de CDN est Content Delivery Network, qui est un réseau de distribution de contenu. CDN est un réseau de distribution de contenu construit sur Internet. Il s'appuie sur des serveurs périphériques déployés à divers endroits et utilise l'équilibrage de charge, la distribution de contenu, la planification et d'autres modules fonctionnels de la plate-forme centrale pour permettre aux utilisateurs d'obtenir le contenu dont ils ont besoin à proximité.

L'utilisation d'un CDN permettra aux utilisateurs d'obtenir les ressources dont ils ont besoin pour une page Web à partir du serveur le plus proche de leur emplacement. Les serveurs d'un CDN sont répartis dans différents emplacements géographiques. Utiliser ce type de CDN est donc l’un des moyens efficaces d’améliorer le temps de chargement des applications.

Par exemple, si votre serveur Web est situé en Californie, le diagramme de topologie de votre réseau d'accès invité peut ressembler à ci-dessous si vous déployez un CDN.

La plupart des services CDN ont leur propre réseau fédérateur, ce qui leur permet de fournir une qualité de service supérieure, des débits de paquets inférieurs et un trafic un peu plus rapide qu'Internet, etc. . L’inconvénient est que c’est cher.

3. Taille du fichier et taille de la page

Le chargement de fichiers de grande taille à partir du serveur Web ou le chargement de la taille de la page prendront beaucoup de temps, cela peut donc être dans l'ordre. La récupération de plusieurs fichiers aussi volumineux allonge les temps de chargement des pages.

L'activation de la compression est un moyen courant de réduire la taille du fichier des requêtes HTTP et d'améliorer les temps de chargement des pages.

Il existe deux méthodes de compression courantes :

La première méthode est que Gzip peut localiser les codes similaires dans le fichier et les remplacer temporairement pour réduire la taille du fichier. Actuellement, la plupart des serveurs Web prennent en charge la compression Gzip. L'activation de la compression sur les fichiers HTML ou CSS permet généralement d'économiser environ 50 % ou 70 % sur la taille du fichier, réduisant ainsi les temps de chargement des pages et la bande passante utilisée. Vous pouvez réduire davantage les temps de chargement des pages en réduisant la taille des images utilisées dans votre application.

Une autre solution de compression s'appelle Brotli. Selon l'introduction officielle, la compression est de 20 à 30 % supérieure à celle de gzip et l'efficacité d'exécution est plus efficace. Je ne l'ai pas testée spécifiquement, je peux donc. Je ne le prouve pas. Vous pouvez suivre Considérez votre situation réelle.

4. Charger toutes les ressources en même temps

Le chargement de tous les fichiers HTML, CSS et JS en même temps augmentera le temps de chargement de la page car la page est rendue. avant que toutes ces ressources ne soient chargées, le processus sera bloqué.

Le chargement JavaScript différé est un mécanisme permettant de charger des fichiers JS volumineux après le chargement d'autres éléments. Cette méthode garantit que le chargement du contenu de la page n'est pas affecté par le chargement de gros fichiers JS.

Si vous avez un site HTML, vous devez appeler le fichier JS externe (defer.js) avant la balise .

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else <br>    window.onload = downloadJSAtOnload;
</script>

Le code ci-dessus dit : "Attendez que le document entier soit chargé avant de charger le fichier defer.js externe."

5.

Généralement, nous utilisons des redirections pour gérer les pages déplacées ou supprimées afin d'éviter les erreurs lorsque les utilisateurs y accèdent. Cependant, plus de redirections signifie plus de requêtes HTTP. Cela peut augmenter considérablement les temps de chargement des pages. Google recommande aux propriétaires de sites Web de supprimer les redirections pour améliorer les temps de chargement, en particulier sur les sites destinés aux mobiles.

Vous pouvez utiliser un outil de scraping de site Web similaire pour obtenir toutes les demandes de redirection sur votre site Web. En analysant cela, vous pouvez rester au courant et éliminer les redirections inutiles.

Généralement, il existe deux types de redirections :

• Redirections côté serveur — rapides et pouvant être mises en cache.
• Redirection client — lente et impossible à mettre en cache.

Évitez d'utiliser des redirections côté client pour vos pages tout en réduisant au minimum les redirections côté serveur pour optimiser les temps de chargement des pages.

Conclusion

Un site avec une exécution et une vitesse de chargement rapides est considéré comme bénéfique à la fois aux webmasters et aux utilisateurs. J'espère que cet article pourra vous permettre de mieux comprendre le. page. Soyez suffisamment confiant quant à l’importance des temps de chargement.

Si vous envisagez d'améliorer les performances de votre site Web, j'ai quelques outils à partager avec vous, tels que Google Pagespeed Insights, Pingdom, YSlow, etc. Ces outils peuvent fournir des rapports complets qui vous donnent un aperçu des lacunes de votre site Web. Espérons que votre site Web offrira également une meilleure expérience utilisateur.

Source originale : https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!