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.
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.
Regardons quelques exemples basés sur des recherches effectuées par HubSpot :
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.
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.
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 :
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.
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.
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."
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 :
É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.
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!