01. Réduire les requêtes HTTP Réduire les requêtes HTTP
Image, CSS, Script, Flash, etc. augmenteront le nombre de requêtes HTTP. Réduire le nombre de ces éléments peut réduire le temps de réponse. Écrivez plusieurs JS et CSS dans un seul fichier si possible ; c'est également une mauvaise pratique d'écrire des images directement dans la page. Vous devez les écrire en CSS, utiliser CSS Sprite pour assembler les petites images, puis utiliser l'arrière-plan pour trouver la position ; utilisez " Carte d'image" (en plaçant différentes URL sur la même image, cette méthode peut réduire le nombre de demandes d'images. Après les tests, le temps d'obtention de la carte d'image est 56 % plus rapide que le temps d'obtention de chaque image individuelle. Carte d'image Il existe deux manières, l'une est la "carte d'image côté serveur" et l'autre est la "carte d'image côté client". L'implémentation côté serveur consiste à transmettre les coordonnées XY sur lesquelles l'utilisateur a cliqué au serveur, puis au serveur. côté mappe les opérations correspondantes. Utilisez les balises MAP au premier plan. La méthode de la carte d'image rend la maintenance de la programmation beaucoup plus difficile).
02. Utilisez un réseau de diffusion de contenu utilisant la technologie CDN
"Réseau de diffusion de contenu". Son objectif est de publier le contenu du site Web jusqu'à la « périphérie » du réseau la plus proche de l'utilisateur en ajoutant une nouvelle couche d'architecture réseau à l'Internet existant.
Caractéristiques du CDN :
1. Accélération du cache local – améliore la vitesse d'accès des sites d'entreprise (en particulier les sites contenant un grand nombre d'images et de pages statiques) et améliore considérablement la stabilité des sites de la nature ci-dessus.
2. Service de mise en miroir – élimine l'impact des goulots d'étranglement d'interconnexion entre les différents opérateurs, réalise une accélération du réseau entre opérateurs et garantit que les utilisateurs des différents réseaux peuvent bénéficier d'une bonne qualité d'accès.
3. Accélération à distance – Les utilisateurs d'accès à distance sélectionnent intelligemment et automatiquement le serveur de cache en fonction de la technologie d'équilibrage de charge DNS et sélectionnent le serveur de cache le plus rapide pour accélérer l'accès à distance.
4. Optimisation de la bande passante – Générez automatiquement un serveur de cache miroir distant pour le serveur et lisez les données du serveur de cache lorsque des utilisateurs distants y accèdent, réduisant ainsi la bande passante de l'accès à distance, partageant le trafic réseau et réduisant la charge sur le serveur WEB du site d'origine. , etc.
5. Anti-attaque de cluster – Les nœuds CDN largement distribués et le mécanisme de redondance intelligent entre les nœuds peuvent empêcher efficacement les intrusions de pirates et réduire l'impact de diverses attaques DDOS sur le site Web, tout en garantissant une bonne qualité de service.
03. Ajoutez un en-tête Expires ou Cache-Control pour définir « l'expiration du fichier d'en-tête » ou le « cache statique »
Les navigateurs utilisent la mise en cache pour réduire le nombre de requêtes HTTP et accélérer le temps de chargement des pages. Si un délai d'expiration long est ajouté à l'en-tête de la page, le navigateur mettra toujours en cache les éléments de la page. Cependant, si quelque chose change sur la page, le nom doit être modifié, sinon le client ne s'actualisera pas activement.
(1) Concept
Cache-control est utilisé pour contrôler le cache HTTP (peut ne pas être partiellement implémenté dans HTTP/1.0, seul Pragma : no-cache est implémenté)
Format : Cache-Control : cache-directive
La directive cache peut être la suivante :
Utilisé lors de la demande :
| "sans cache"
| "pas de magasin"
| "âge maximum" "=" delta-secondes
| "max-périmé" [ "=" delta-secondes ]
| "min-fresh" "=" delta-secondes
"pas de transformation"
| "uniquement si mis en cache"
"extension de cache"
Utilisé en réponse :
| "publique"
| "privé" [ "=" <"> nom-champ <"> ]
| "no-cache" [ "=" <"> nom-champ <"> ]
| "pas de magasin"
"pas de transformation"
"doit-revalider" |
"proxy-revalidation"
| "âge maximum" "=" delta-secondes
| "s-maxage" "=" delta-secondes
"extension de cache"
Descriptif partiel :
Divisé selon qu'il peut être mis en cache
Public indique que la réponse peut être mise en cache par n'importe quel cache.
Privé indique que tout ou partie du message de réponse d'un seul utilisateur ne peut pas être traité par le cache partagé. Cela permet au serveur de décrire uniquement une réponse partielle d'un utilisateur qui n'est pas valide pour les demandes des autres utilisateurs.
no-cache indique que le message de requête ou de réponse ne peut pas être mis en cache (HTTP/1.0 est remplacé par no-cache de Pragma)
Basé sur ce qui peut être mis en cache
no-store est utilisé pour empêcher la divulgation involontaire d’informations importantes. L'envoyer dans le message de demande entraînera l'utilisation de la mise en cache par les messages de demande et de réponse.
Basé sur le délai d'expiration du cache
max-age indique que le client peut recevoir des réponses avec une durée de vie ne dépassant pas la durée spécifiée en secondes.
min-fresh indique que le client peut recevoir des réponses avec un temps de réponse inférieur à l'heure actuelle plus l'heure spécifiée.
max-stale indique que le client peut recevoir des messages de réponse au-delà du délai d'attente. Si une valeur pour les messages périmés au maximum est spécifiée, le client peut
Reçoit les messages de réponse qui se situent dans le délai d'expiration spécifié.
Expires représente le temps d'existence, permettant au client de ne pas vérifier (envoyer de requête) avant ce délai, ce qui équivaut à max-age.
Effet. Mais s'ils existent en même temps, ils seront remplacés par l'âge maximum de Cache-Control.
Format : Expire = "Expire" : : Date HTTP
Par exemple : Expire : jeu. 1 décembre 1994 16:00:00 GMT (doit être au format GMT)
(2) Demande
Définir les expirations et le contrôle du cache via HTTP META :
<méta http-equiv=”Cache-Control” content=”max-age=7200″ />
<meta http-equiv="Expires" content="Lun, 20 juillet 2009 23:00:00 GMT" />
Les paramètres ci-dessus ne sont que des exemples et chacun d’entre eux peut être utilisé dans la pratique. S'il est écrit ainsi, il ne sera valable que pour la page Web, et ne sera pas utilisé pour les images ou autres requêtes dans la page Web, et n'effectuera aucune mise en cache. De plus, il y a plus de demandes du client Bien qu'il ne vérifie que le statut Dernière modification, l'augmentation des demandes doit avoir un impact sur la vitesse de navigation.
Si vous souhaitez ajouter un cache au fichier, vous pouvez utiliser le module mod_expire d'Apache ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ), qui s'écrit ainsi
<IfModule mod_expires.c>
ExpireActif le
ExpirePar défaut "accès plus 1 jours"
</SiModule>
Je me souviens que ExpiresActive est défini sur On. Je n'ai pas défini On au début. Il semble que YSlow ne puisse pas trouver le mécanisme de mise en cache, quoi qu'il arrive. S'il est ajouté de cette manière, il sera inclus par défaut. Si vous souhaitez cibler des types MIME individuels, vous pouvez :
ExpiresByType image/gif « accès plus 5 heures 3 minutes »
De plus, lorsque vous cliquez sur Actualiser sur le navigateur, les requêtes envoyées par le client sont toutes max-age=0, indiquant l'opération de validation. Envoyez une requête au serveur pour vérifier le cache, puis mettez à jour le cache. obtenez 304 Not Modified, ce qui signifie qu’il n’y a aucun changement.
04. Composants Gzip Compression Gzip
Le format Gzip est une technologie de compression très courante. Presque tous les navigateurs ont la possibilité de décompresser le format Gzip, et le taux de compression qu'il peut compresser est très élevé, avec un taux de compression général de 85 %. Compression ou pas, vous pouvez la tester ici.
05. Mettez les feuilles de style en haut Mettez le CSS en haut
Utilisez la balise LINK pour placer la feuille de style dans l'HEAD du document afin que les visiteurs puissent voir le style complet du site Web le plus tôt possible.
Les pages HTML sont rendues étape par étape. Lorsque les utilisateurs ouvrent la page, nous devons prendre en compte l'expérience utilisateur - la vitesse d'ouverture de la page Web. La première condition requise pour afficher une page est HTML, et HTML est composé de DIV un par un, et CSS est la base de tout.
06. Mettez les scripts en bas Mettez JS en bas
Une fois le site Web rendu, vous pouvez définir les fonctions. Bien entendu, ces JS ne doivent pas affecter les performances du contenu pendant votre processus de chargement.
Étant donné que la page est rendue progressivement, le contenu situé sous le script sera bloqué. Le rendu de la page ne continuera pas tant que le chargement du script n'aura pas été terminé. Emplacement correct
(1) Dans le pire des cas : mettre le script en haut. Cela bloquera le rendu ultérieur du contenu et le téléchargement ultérieur des composants.
(2) Meilleur scénario : placez le script en bas. N'empêche pas le rendu de la page.
07. Évitez les expressions CSS Évitez les expressions CSS
Les expressions CSS sont terribles. Cette chose qui n'est prise en charge que par IE nécessite une très grande quantité de calculs lors de son exécution. Elle sera recalculée à chaque fois que vous déplacez la souris, mais cela doit parfois être utilisé pour la compatibilité du navigateur.
08. Rendre JavaScript et CSS externes
Nous avons parlé de mise en cache plus tôt Pour certains des JS et CSS les plus courants, nous pouvons utiliser des liens externes, tels que la liaison de fichiers Jquery de Google.
09. Réduire les recherches DNS Réduire les recherches DNS
Réduisez les ressources d’appel du site Web de l’extérieur.
Internet trouve les serveurs par adresse IP. DNS a également des frais généraux. Dans des circonstances normales, le temps nécessaire à un navigateur pour trouver une adresse IP d'hôte donnée est de 20 à 120 ms. Afin de réduire le temps passé dans le processus de recherche DNS, certaines des techniques suivantes doivent être adoptées :
(1) Cache DNS
Les recherches DNS peuvent être mises en cache pour améliorer les performances. Sur l'ordinateur de l'utilisateur, une fois un nom d'hôte résolu, les informations DNS correspondantes seront stockées dans le cache DNS du système d'exploitation, ce qui peut réduire le temps requis pour une utilisation ultérieure. Certains autres navigateurs disposent également de fonctions de mise en cache DNS correspondantes. Mais le nombre de DNS mis en cache est limité. Normalement, le système d'exploitation prend en compte la valeur TTL et le navigateur ignore cette valeur et définit sa propre heure.
(2) Durée de vie
La mise en cache DNS entraîne une certaine consommation du système, et l'adresse IP du serveur n'est pas forcément inchangée. Le serveur peut indiquer la durée pendant laquelle l'enregistrement peut être mis en cache, et l'enregistrement DNS renvoyé par la recherche contient une valeur de durée de vie (TTL) qui indique la durée pendant laquelle le client peut mettre l'enregistrement en cache. Généralement, il peut être réglé sur 1 jour.
10. Réduire JavaScript et CSS Réduire la taille de JS et CSS
Il existe des compétences en écriture de JS et CSS. Utilisez le moins de code possible pour obtenir la même fonction, réduisez les espaces blancs, améliorez la logique, utilisez des abréviations, etc. Bien sûr, il existe de nombreux outils qui peuvent vous aider à y parvenir.
11. Évitez les redirections
Lors de la réécriture du lien, bien qu'il n'y ait qu'une seule différence finale "/" entre "http://xxx.com" et "http://xxx.com/", les résultats sont différents. Le serveur doit y consacrer du temps. convertissez la première redirection en seconde, puis sautez. Vous devez y prêter attention. Vous pouvez également utiliser Alias ou mod_rewrite ou DirectorySlash dans Apache pour le résoudre.
De plus, les utilisations de la redirection incluent : la connexion de différents sites Web ; le suivi des visites de sites Web et l'embellissement des URL ;
12. Supprimer les scripts en double Supprimer les scripts en double
Le navigateur ne reconnaîtra pas et n’ignorera pas le code appelé à plusieurs reprises, mais le recalculera, ce qui est bien sûr un énorme gaspillage.
13. Configurer les ETags Configurer les ETags
Je ne sais pas ce qui s'est passé, mais je l'ai supprimé dans htaccess.
14. Rendre le cache Ajax pouvant être mis en cache Ajax
Ajax répond en temps réel Avant que le navigateur reçoive de nouvelles données, les anciennes données sont mises en cache, ce qui peut améliorer l'efficacité.
15. Rincer le tampon plus tôt Libérer le tampon le plus tôt possible
Lorsqu'un utilisateur fait une demande de page, le serveur doit passer 200 à 500 millisecondes pour assembler le code HTML, l'écrire entre l'en-tête et le corps et libérer le tampon. De cette façon, l'en-tête du fichier peut être envoyé en premier, puis. le contenu du fichier peut être envoyé pour améliorer l’efficacité.
16. Utilisez GET pour les requêtes AJAX Utilisez GET pour les requêtes AJAX
La méthode Get n'interagit avec le serveur qu'une seule fois (envoi de données), tandis que Post nécessite deux interactions (envoi d'en-têtes puis de données).
17. Composants post-chargement Composants à chargement paresseux
Chargez d'abord les composants nécessaires à l'initialisation de la page, puis chargez-en d'autres. La méthode d'implémentation spécifique peut être "IFRAME masqué" ou javascript. "YUI Image Loader" en est un bon exemple.
18. Composants de précharge Composants de précharge
Le chargement d'éléments pouvant être utilisés ultérieurement n'est pas en conflit avec le chargement différé. Son objectif est de fournir une réponse plus rapide aux requêtes ultérieures. Voir l'application de sprites CSS sur la page d'accueil de Google.
19. Réduire le nombre d'éléments DOM Réduire le nombre d'éléments DOM
La structure complexe des pages signifie des temps de téléchargement et de réponse plus longs, ce qui entraîne un rendu des pages plus lent. Utiliser des balises de manière plus raisonnable et efficace pour structurer les pages est une condition préalable à un bon front-end.
20. Diviser les composants entre les domaines
L'objectif principal est d'améliorer la capacité de téléchargement parallèle des composants de la page, mais veillez à ne pas en utiliser trop. Plus de 2 à 4 noms de domaine entraîneront le gaspillage de recherches DNS mentionné ci-dessus. IE ne peut avoir que deux requêtes pour le même domaine en même temps. Les implémentations peuvent utiliser des réseaux CDN ou d'autres réseaux informatiques distribués.
21. Réduire le nombre d'iframes Réduire le nombre d'IFrames
IFrame est un tabou pour le référencement et IFrame doit être utilisé plus efficacement.
Avantages IFrame : idéal pour le téléchargement de contenu tiers lent tel que des publicités, un bac à sable de sécurité, des scripts de téléchargement parallèle
Inconvénients de l'IFrame : Même s'il est vide, il consommera beaucoup de ressources et empêchera le chargement de la page, ce qui n'est pas sémantique.
22. Pas de 404 N'apparaissent pas sur la page 404
Les pages 404 apparaissent sur le site lui-même (et non dans les résultats de recherche). Des pages 404 dénuées de sens affecteront l'expérience utilisateur et consommeront les ressources du serveur.
23. Réduire la taille des cookies Réduire les cookies
Les cookies sont échangés entre le serveur et le navigateur via des en-têtes de fichiers, réduisant ainsi la taille des cookies autant que possible et fixant un délai d'expiration raisonnable, ce qui peut grandement améliorer l'efficacité.
24. Utilisez des domaines sans cookies pour les composants Utilisez des noms de domaine sans cookies pour les composants
Lire les cookies pour les composants statiques est un gaspillage. C'est un bon moyen d'utiliser un autre nom de domaine sans cookie pour stocker vos composants statiques, ou vous pouvez uniquement stocker le nom de domaine avec www dans le cookie.
25. Minimiser l'accès au DOM Réduire le nombre d'accès au DOM
JS est très lent à accéder au DOM, alors essayez de ne pas utiliser JS pour définir la mise en page.
26. Développer des gestionnaires d'événements intelligents Développer des gestionnaires d'événements flexibles
Si trop d'éléments dans l'arborescence DOM sont ajoutés au gestionnaire d'événements, l'efficacité de la réponse sera certainement faible. L'outil d'événements YUI dispose d'une méthode onAvailable qui peut vous aider à définir de manière flexible le gestionnaire d'événements DOM.
27. Choisissez <link> plutôt que @import. Utilisez <link> au lieu de @import
Utiliser @import dans IE revient à utiliser <link> en bas de la page.
28. Évitez les filtres Évitez l'utilisation de filtres
Si vous avez besoin de transparence Alpha, n'utilisez pas AlphaImageLoader. Elle est inefficace et applicable uniquement aux images IE6 et inférieures. Si vous devez l'utiliser, ajoutez _filter pour éviter d'affecter les utilisateurs d'IE7+.
29. Optimiser les images Optimiser les images
La conversion de votre GIF en PNG8 est un bon moyen de réduire la taille, et il existe de nombreuses façons de traiter vos images JPG et PNG pour obtenir des résultats d'optimisation.
30. Optimiser les sprites CSS Optimiser les sprites CSS
Organiser les images dans les Sprites CSS verticalement et de manière aussi compacte que possible, et organiser ensemble des images avec des couleurs similaires autant que possible réduira la taille de l'image elle-même et augmentera la vitesse d'affichage de l'image de la page.
31. Ne redimensionnez pas les images en HTML Ne redimensionnez pas les images en HTML
Utilisez une image aussi grande que vous le souhaitez, ne soyez pas paresseux.
32. Rendre favicon.ico petit et pouvant être mis en cache. Réduisez la taille de favicon.ico et mettez-le en cache.
L'ICO du navigateur du site ne doit pas être modifiée fréquemment, donc mettez-la en cache pendant une longue période et il est préférable de la contrôler en dessous de 1K.
33. Gardez les composants sous 25K
L'iPhone ne peut pas mettre en cache les composants supérieurs à 25 Ko, et cela avant d'être compressé.
34. Regrouper les composants dans un document en plusieurs parties Packer les composants dans un document en plusieurs parties
Tout comme pour ajouter une pièce jointe à un email, une requête HTTP suffit, mais cette technique doit être supportée par votre proxy, ce que l'iPhone ne prend pas en charge.
Images en ligne :
Utilisez « données : schéma d'URL » pour intégrer les données d'image dans la page réelle. Ce que nous voyons habituellement sont : les modes http, ftp, mailto et autres. En fait, le mode data:URL a été proposé dès 1995. Cela signifie que de petits morceaux de données sont directement intégrés dans l'URL du lien. Le modèle est le suivant : data : [<mediatype>][;base64],<data>
Le premier paramètre indique le format de fichier, tel que image/gif.
Malheureusement, IE ne prend actuellement pas en charge ce mode. De plus, la taille des données est également limitée.
Déclaration : Le contenu provient d'Internet et est basé sur les 34 articles de Yahoo.