Il est très important que le site Web se charge le plus rapidement possible; Les utilisateurs veulent voir rapidement la page qu'ils souhaitent voir, et si vous ne pouvez pas les satisfaire, ils le chercheront ailleurs. Dans cet article, vous verrez une discussion sur cinq techniques simples et efficaces pour accélérer vos pages Web.
Connaître le temps de chargement du site Web est la première étape avant de décider ce qui ne va pas. Il vous permet également de savoir si vous devez apporter des modifications à la vitesse de votre site Web.
Avant de commencer, si vous n'avez pas encore installé Yslow, veuillez l'installer. C'est une extension de Mozilla Firefox, vous pouvez la trouver à partir du lien ci-dessous:
Tout d'abord, parcourons le site Web des six révisions, nous utilisons tous le même exemple pour le tester (nous devons ouvrir uniquement dans un nouvel onglet ou une nouvelle fenêtre de navigateur).
Dans le navigateur, il y a une colonne de l'odomètre (comme le montre la figure 1). À côté, lorsque la page Web aura terminé le chargement, vous verrez Yslow et les numéros. Le nombre représente le temps (en secondes) qu'il faut au navigateur pour charger un site Web. Nous voulons que ce nombre soit aussi faible que possible.
Figure 1: Icône et compteur yslow montrant le temps de chargement de la page Web
Dans la plupart des cas, une ou un groupe de raisons qui provoquent un long temps de chargement des pages Web sont les suivantes:
Nous en discuterons plus tard.
Afin de vous assurer que le temps de chargement de votre propre site Web s'affiche, parcourez certains sites Web. Consultez Google, Facebook et certains blogs et sites Web que vous aimez. Vous remarquerez que plus le site Web utilise des images, plus le temps de réponse est long sur la page JS.
En plus de mesurer la vitesse à laquelle il se charge, Yslow vous fournit des informations approfondies comme ce que vous pouvez faire pour améliorer les performances de votre site Web, ainsi que le manque de performances de charge de votre site Web.
L'image ci-dessous est l'onglet «Performance» (comme le montre la figure 2). Mais si vous cliquez dessus, il montrera les détails de chaque domaine qui affecte le temps de chargement et les performances globales.
Figure 2: Tags de performance
Dans ce domaine, le choix le plus subjectif est d'utiliser CDN (Content Distribution Network) .CDN est très efficace pour les grands sites Web. Ce qu'ils font, c'est répandre le contenu du site Web sur les serveurs dans différentes régions. Plus le serveur physique est proche de l'utilisateur chargé d'un site Web, plus une page est rapide. Donc, essentiellement, l'utilisation de CDN consiste à distribuer du contenu du serveur à l'utilisateur de page consulté le plus proche.
Figure 3: Les étiquettes de performance utilisent des lettres (a, b, c, d, f) pour représenter les notes et les notes actuelles (1-1 000).
En plus d'utiliser un CDN (qui peut être coûteux) - tout le reste est faisable.
Passons à chaque facteur de niveau, voici une brève deuxième vitesse pour chaque champ de niveau et comment résoudre ces problèmes pour atteindre des performances optimales.
Réduire les demandes HTTP : Lorsqu'une page Web obtient des fichiers du serveur, une demande HTTP sera générée. La portée comprend des scripts, des fichiers CSS, des images et des demandes client / serveur asynchrone (AJAX et autres technologies changeantes). C'est le point clé lorsque vous parlez de performances, mais il peut être facilement résolu avec un peu d'effort. Par exemple, il est souvent utile de fusionner les scripts, le CSS et les images autant que possible, le cache des fichiers sur la machine de l'utilisateur.
Ajouter un en-tête à terme : 80% du temps de chargement de la page est lié aux scripts de téléchargement, aux images et au CSS. Dans la plupart des cas, ces éléments ne changeront pas dans la machine de l'utilisateur. Vous pouvez mettre en cache le code dans le .htaccess dans la machine locale de l'utilisateur (nous discuterons de la façon de fonctionner plus tard dans l'article).
Composant GZIP : fichiers JS GZIPing ou compressés, images, documents HTML, documents CSS, etc. Les utilisateurs peuvent télécharger des versions de fichiers plus petites pour augmenter la vitesse de chargement des pages Web. Cela peut réduire la consommation de serveurs, mais les composants de décompression peuvent également entraîner la réponse de la page plus lente, selon le navigateur de l'utilisateur.
Mettez CSS en haut : mettez le fichier CSS en haut du site Web, qui peut charger d'autres pièces telles que les images et le texte possible en même temps.
Mettez JS en bas : mettez CSS à la tête du document, vous n'avez qu'à insérer JS avant de fermer <by>. Bien que ces scripts soient chargés en arrière-plan, l'utilisateur obtient d'abord la page apparemment complète.
Évitez les expressions CSS : je n'ai jamais utilisé d'expressions CSS (appelées caractéristiques dynamiques), qui ne sont qu'une fonction CSS qui ajoute des concepts de programmation (tels que les structures de contrôle / conditionnels), à partir de l'IE8, le moteur de mise en page Trident (utilisé dans IE) n'est plus pris en charge. Quoi qu'il en soit, ils n'ont pas une bonne idée à utiliser. Dans une certaine mesure, j'utiliserais des scripts PHP pour charger différentes règles de style CSS en fonction de différentes conditions, telles qu'un nombre aléatoire, une heure de jour ou un navigateur.
Appels externes vers JS et CSS : mettez les fichiers JS et CSS dans des fichiers externes, et le navigateur les met en cache avec une vitesse de chargement de page plus rapide que chaque appel.
Réduisez la recherche DNS : Tant que l'utilisateur tape un nom de domaine dans la barre d'adresse du navigateur, le navigateur effectuera toujours un DNS à la recherche d'adresses IP. Plus les emplacements d'entrée ont le site Web, plus la recherche DNS sera nécessaire. Gardez le niveau aussi bas que possible et effectuez une requête DNS en moyenne 60 à 100 millisecondes.
Zoom dans JS : Contrairement à la compression générale de GZIP, le zoom dans les documents JS consiste à supprimer les espaces, les onglets et autres caractères de sélection de Zhonghe Yang, réduire la taille totale du fichier, et les pages plus petites peuvent obtenir une vitesse de chargement plus rapide. Vous pouvez utiliser JSMIN pour zoomer dans JavaScript.
Évitez la redirection : qu'il s'agisse de redirection de l'en-tête du serveur, de redirection JS ou de redirection des éléments HTML. Votre site Web chargera l'en-tête d'une page vierge puis une nouvelle page. Les utilisateurs passent de plus en plus de temps pour obtenir la page dont ils ont besoin, ils devraient donc éviter cela à tout prix.
Supprimez les scripts en double : le navigateur chargeant le même script augmentera le temps de chargement de la page, ce qui est un problème mathématique très simple, plus de fichiers égalent plus de temps de chargement. Vérifiez votre site Web pour vous assurer de ne pas appeler JQuery deux ou trois fois ou d'autres scripts.Quand… c'était beaucoup, passons à l'onglet suivant de Yslow juste avant d'entrer dans d'autres techniques pour augmenter les performances de votre site Web.
Figure 4: Étiquette des pièces.
Les balises de pièce (comme le montre la figure 4) peuvent donner un aperçu des effets de l'augmentation de la vitesse de chargement du site Web. Ici, vous pouvez voir combien de temps le document actuel doit charger, si ces fichiers sont compressés, le temps de réponse et s'ils sont mis en cache dans la machine de l'utilisateur et lorsque le cache expire. Il s'agit d'une bonne évaluation du site Web, mesurant ses performances et son optimisation de vitesse. Enfin, la balise statistique (comme le montre la figure 4), qui nous montre toutes les demandes HTTP, les documents téléchargés en même temps et les fichiers mis en cache. Le cache vide affiche le fichier dont le navigateur a besoin pour télécharger la page de rendu. Le cache amorcé, en revanche, affiche une liste de fichiers qui existent déjà dans le cache du navigateur de l'utilisateur, enregistrant ainsi la demande du navigateur de ne plus avoir à télécharger le fichier.
Figure 5: Onglet Statistiques.