Détails de PHP améliorant les performances du site Web

Cet article partage principalement avec vous les détails de l'amélioration des performances du site Web par PHP, dans l'espoir d'aider tout le monde.

La première est de réduire le nombre de requêtes HTTP autant que possible (Make Moins de requêtes HTTP)

Les requêtes http coûtent cher, et trouver des moyens de réduire le nombre de requêtes peut naturellement s'améliorer la vitesse de la page Web. Les méthodes couramment utilisées incluent la fusion de CSS, JS (fusion de fichiers CSS et JS sur une seule page respectivement), les images cliquables et les sprites CSS, etc. Bien sûr, la division des fichiers CSS et JS en plusieurs fichiers est peut-être due à des considérations telles que la structure CSS et le partage. L'approche du site Web chinois d'Alibaba à l'époque consistait à le développer séparément, puis à fusionner js et css en arrière-plan. De cette façon, il s'agissait toujours d'une seule requête pour le navigateur, mais elle pouvait toujours être restaurée en plusieurs lors du développement, ce qui facilitait la gestion et le développement. références répétées. Yahoo recommande même d'écrire les CSS et js de la page d'accueil directement dans le fichier d'échange au lieu de références externes. Le nombre de visites sur la page d’accueil étant trop important, cela peut également réduire de moitié le nombre de requêtes. En fait, de nombreux portails nationaux le font.

Les sprites CSS utilisent uniquement les images d'arrière-plan de la page pour les fusionner en une seule, puis utilisent la valeur définie par la propriété background-position de CSS pour obtenir son arrière-plan. Les sites chinois Taobao et Alibaba le font actuellement. Si vous êtes intéressé, vous pouvez jeter un œil aux images d’arrière-plan de Taobao et d’Alibaba.

http://www.csssprites.com/ Il s'agit d'un outil Web qui peut fusionner automatiquement les images que vous téléchargez et donner les coordonnées de position d'arrière-plan correspondantes. Et affichez les résultats au format png et gif.

Deuxièmement, utilisez un réseau de diffusion de contenu : utilisez un réseau de diffusion de contenu

Pour être honnête, je ne connais pas grand-chose au CDN. En termes simples, une nouvelle couche d'architecture réseau est existante. ajouté à Internet et le contenu du site Web est publié sur le serveur de cache le plus proche de l'utilisateur. Grâce à la technologie d'équilibrage de charge DNS, la source de l'utilisateur est déterminée et le serveur de cache est à proximité pour obtenir le contenu requis. visitez le serveur de cache à proximité. Le contenu du serveur à Hangzhou est proche du contenu du serveur à Pékin. Cela peut réduire efficacement le temps de transmission des données sur le réseau et augmenter la vitesse. Pour des informations plus détaillées, vous pouvez vous référer à l'explication de CDN sur l'Encyclopédie Baidu. Yahoo! distribue du contenu statique sur un CDN et réduit le temps d'impact des utilisateurs de 20 % ou plus.

Article 3. Ajouter un en-tête Expire/Cache-Control : ajouter un en-tête Expires

Maintenant, de plus en plus d'images, de scripts, de CSS et de Flash sont intégrés dans la page lorsque nous les visitons. obligé de faire de nombreuses requêtes http. En fait, nous pouvons mettre en cache ces fichiers en définissant l'en-tête Expires. Expire spécifie en fait la durée du cache d'un type spécifique de fichier dans le navigateur via le message d'en-tête. La plupart des images dans Flash n'ont pas besoin d'être modifiées fréquemment après leur publication. Après la mise en cache, le navigateur n'aura plus besoin de télécharger ces fichiers depuis le serveur mais les lira directement depuis le cache. Cela accélérera l'accès. la page sera à nouveau grandement accélérée. Les informations d'en-tête renvoyées par un protocole HTTP 1.1 typique :

HTTP/1.1 200 OK   
Date: Fri, 30 Oct 1998 13:19:41 GMT   
Server: Apache/1.3.3 (Unix)   
Cache-Control: max-age=3600, must-revalidate   
Expires: Fri, 30 Oct 1998 14:19:41 GMT   
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT   
ETag: “3e86-410-3596fbbc”   
Content-Length: 1040   
Content-Type: text/html

Cela peut être fait en définissant Cache-Control et Expires via des scripts côté serveur.

Par exemple, définir la date d'expiration après 30 jours en php

＜!--pHeader("Cache-Control: must-revalidate");   
$offset = 60 * 60 * 24 * 30;   
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";   
Header($ExpStr);-->

peut également se faire en configurant le serveur lui-même. Ce ne sont pas très clairs, haha. Les amis qui veulent en savoir plus peuvent se référer à http://www.web-caching.com/

Pour autant que je sache, le délai d'expiration actuel du site Web chinois d'Alibaba est de 30 jours. Cependant, il y a eu des problèmes au cours de cette période, en particulier le réglage du délai d'expiration du script doit être soigneusement examiné, sinon le client peut mettre beaucoup de temps à « percevoir » de tels changements après la mise à jour de la fonction de script correspondante. J'ai déjà rencontré ce problème lorsque je travaillais sur [suggérer un projet]. Par conséquent, ce qui doit être mis en cache et ce qui ne doit pas l’être doivent être soigneusement examinés.

Article 4. Activer la compression Gzip : Composants Gzip

L'idée de Gzip est de compresser d'abord le fichier côté serveur puis de le transmettre. Cela peut réduire considérablement la taille des transferts de fichiers. Une fois la transmission terminée, le navigateur décompressera à nouveau le contenu compressé et l'exécutera. Tous les navigateurs actuels prennent "bien" en charge gzip. Non seulement les navigateurs peuvent le reconnaître, mais les principaux « robots » peuvent également le reconnaître. De plus, le taux de compression de gzip est très élevé et le taux de compression général est de 85 %. Cela signifie qu'une page de 100 Ko côté serveur peut être compressée à environ 25 Ko avant d'être envoyée au client. Pour le principe spécifique de compression Gzip, vous pouvez vous référer à l'article "Gzip Compression Algorithm" sur csdn. Yahoo insiste particulièrement sur le fait que tout le contenu textuel doit être compressé en gzip : html (php), js, css, xml, txt... Notre site Web a fait du bon travail à cet égard, et il obtient un A. Dans le passé, notre page d'accueil n'était pas A, car il y avait de nombreux js placés par des codes publicitaires sur la page d'accueil. Les js du site Web du propriétaire de ces codes publicitaires n'avaient pas été compressés par gzip, ce qui ralentirait également notre site Web.

La plupart des trois points ci-dessus sont des contenus côté serveur, et je n'en ai qu'une compréhension superficielle. Veuillez me corriger si je me trompe.

Article 5 : Mettre les feuilles de style en haut de la page

Placez le CSS en haut de la page. Pourquoi ? Parce que les navigateurs tels que IE et Firefox ne rendront rien tant que tout le CSS n'aura pas été transmis. La raison est aussi simple que ce que frère Ma a dit. css, le nom complet est Cascading Style Sheets (feuilles de style en cascade). La cascade signifie que le CSS suivant peut couvrir le CSS précédent et que le CSS de niveau supérieur peut couvrir le CSS de niveau inférieur. En [css! important] Cette relation hiérarchique a été brièvement mentionnée au bas de cet article. Ici, il nous suffit de savoir que les CSS peuvent être remplacés. Puisque la précédente peut être écrasée, il est sans doute raisonnable que le navigateur la restitue une fois qu'elle est complètement chargée. Dans de nombreux navigateurs, comme IE, le problème du placement de la feuille de style en bas de la page est qu'elle interdit l'écriture. affichage séquentiel du contenu Web. Le navigateur bloque l'affichage pour éviter de redessiner les éléments de la page, et l'utilisateur ne voit qu'une page vierge. Firefox ne bloque pas l'affichage, mais cela signifie que certains éléments de la page devront peut-être être repeints après le téléchargement de la feuille de style, ce qui entraînera des problèmes de scintillement. Il faudrait donc laisser le css être chargé le plus rapidement possible

Suivant ce sens, si on y regarde de plus près, il y a effectivement des zones qui peuvent être optimisées. Par exemple, les deux fichiers CSS inclus sur ce site,

Article 7. Évitez d'utiliser des expressions en CSS (Éviter les expressions CSS)

Cependant, cela ajoute deux couches d'imbrication dénuées de sens, ce qui n'est certainement pas bon. Une meilleure méthode est nécessaire.

Article 8. Mettre JavaScript et CSS dans des fichiers externes (Rendre JavaScript et CSS externes)

Je pense que c'est facile à comprendre. Cela ne se fait pas seulement du point de vue de l’optimisation des performances, mais également du point de vue de la facilité de maintenance du code. Écrire du CSS et du js dans le contenu de la page peut réduire 2 requêtes, mais cela augmente également la taille de la page. Si les CSS et js ont été mis en cache, il n'y aura pas de requêtes http supplémentaires. Bien sûr, comme je l'ai déjà dit, certains développeurs de pages spéciales choisiront toujours les fichiers CSS et JS en ligne.

Article 9. Réduire les recherches DNS (Réduire les recherches DNS)

Sur Internet, il existe une correspondance biunivoque entre les noms de domaine et les adresses IP. Le nom de domaine (kuqin.com. ) est facile à retenir, mais les ordinateurs ne se connaissent pas et la « reconnaissance » entre ordinateurs doit être convertie en adresses IP. Chaque ordinateur du réseau correspond à une adresse IP indépendante. La conversion entre les noms de domaine et les adresses IP est appelée résolution de nom de domaine, également appelée requête DNS. Un processus de résolution DNS prendra 20 à 120 millisecondes. Avant que la requête DNS ne soit terminée, le navigateur ne téléchargera rien sous le nom de domaine. Par conséquent, réduire le temps de requête DNS peut accélérer la vitesse de chargement de la page. Yahoo recommande que le nombre de noms de domaine contenus dans une page soit limité à 2-4. Cela nécessite une bonne planification de la page dans son ensemble. À l’heure actuelle, nous ne nous en sortons pas bien à cet égard et de nombreux systèmes de diffusion de publicité nous tirent vers le bas.

Article 10. Compresser JavaScript et CSS (Minify JavaScript)

Compresser js et css réduit évidemment le nombre d'octets sur la page. Les pages de petite capacité se chargeront naturellement plus rapidement. En plus de réduire le volume, la compression peut également apporter une certaine protection. Nous le faisons bien. Les outils de compression couramment utilisés incluent JsMin, le compresseur YUI, etc. De plus, http://dean.edwards.name/packer/ nous fournit également un outil de compression en ligne très pratique. Vous pouvez voir la différence de capacité entre les fichiers js compressés et les fichiers js non compressés sur la page Web jQuery :

Bien sûr, l'un des inconvénients de la compression est que la lisibilité du code est perdue. Je pense que de nombreux amis front-end ont rencontré ce problème : l'effet de regarder Google est cool, mais en regardant son code source, il y a beaucoup de caractères serrés ensemble, et même les noms de fonctions ont été remplacés ! Ne serait-il pas très gênant de conserver votre propre code de cette manière ? L'approche actuelle adoptée par tous les sites Web chinois d'Alibaba consiste à compresser les fichiers js et css côté serveur lors de leur sortie. Cela nous permet de conserver notre propre code très facilement.

Article 11. Évitez les redirections

J'ai vu l'article "Internet Explorer et les limites de connexion" sur ieblog il n'y a pas longtemps, par exemple, lorsque vous entrez http://www.enet.com. cn/eschool/, le serveur générera automatiquement une redirection de serveur 301 vers http://www.enet.com.cn/eschool/, vous pouvez le voir en regardant la barre d'adresse du navigateur. Ce type de redirection prend naturellement du temps. Bien sûr, ce n'est qu'un exemple. Il existe de nombreuses raisons de redirection, mais ce qui reste le même, c'est que chaque redirection supplémentaire augmentera la requête Web, elle doit donc être réduite autant que possible.

Article 12. Supprimer les scripts en double (Supprimer les scripts en double)

Je le sais sans le dire, non seulement du point de vue des performances, mais également du point de vue de la spécification du code. Mais nous devons admettre que nous ajouterons souvent du code qui pourra être répété car l'image est si rapide. Peut-être qu'un framework CSS et un framework js unifiés peuvent mieux résoudre nos problèmes. Le point de vue de Xiaozhu est juste. Non seulement il ne doit pas être répété, mais il doit également être réutilisable.

Article 13. Configurer les balises d'entité (ETags) (Configure ETags)

Je ne comprends pas non plus, haha. J'ai trouvé une explication plus détaillée sur inforQ "Utilisation d'ETags pour réduire la bande passante et la charge des applications Web". Les étudiants intéressés peuvent la consulter.

Article 14. Rendre Ajax mis en cache

Ajax doit toujours être mis en cache ? Lors d'une requête ajax, un horodatage est souvent ajouté pour éviter la mise en cache. Il est important de se rappeler que « asynchrone » n’implique pas « instantané ». N'oubliez pas que même si les messages AJAX sont générés dynamiquement et n'affectent qu'un seul utilisateur, ils peuvent toujours être mis en cache.

Recommandations associées :

10 conseils pour améliorer le développement des performances d'un site Web

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!