Astuces de performances Web - au-delà des bases

Cet article a été parrainé par New Relic. Merci de soutenir les sponsors qui rendent le point de point possible!

Nous avons eu beaucoup de performances au fil des ans ici à SitePoint, et nous pensons qu'il est temps de revoir le sujet avec des aspects plus avancés. Les approches mentionnées dans cet article ne seront pas strictement liées au PHP, mais vous pouvez être sûr qu'elles porteront votre application à un tout nouveau niveau si elles sont utilisées correctement. Notez que nous ne couvrirons pas les trucs habituels - moins de demandes de CSS, JS et d'images signifiant que des sites Web plus rapides et des conseils similaires sont de notoriété publique. Au lieu de cela, nous nous concentrerons sur certaines mises à niveau moins connues / utilisées.

Les plats clés

• La minimisation des éléments HTML et des balises inutiles peut aider à améliorer les performances Web. L'utilisation de techniques de prélecture pour charger les ressources à l'avance peut également améliorer la vitesse et l'expérience utilisateur.
• Valider votre CSS à l'aide d'outils tels que CSSLINT et CSS expliquent pour détecter les erreurs et les problèmes de performance potentiels. L'utilisation de CSS 2D se traduit pour déplacer des objets au lieu de haut / gauche peut également augmenter les performances.
• Le module PageSpeed ​​de Google peut mettre en œuvre automatiquement les meilleures pratiques pour l'optimisation des sites Web, l'amélioration de la portion des ressources statiques, la minimisation et l'optimisation du CSS et du JavaScript, et la réduction de la taille de l'image.
• En utilisant l'algorithme de compression open source de Google, ZOPFLI, peut augmenter la compression de 3 à 8%, ce qui peut faire une différence notable pour les sites Web servant du contenu statique à un grand nombre de clients.
• Les petites performances peuvent avoir un impact significatif sur les performances globales d'un site Web. Utilisez des outils tels que le profilage des outils HAR et Dev pour surveiller les performances de votre site et mettre en œuvre les améliorations nécessaires.

html

• supprimer les balises inutiles

  moins les éléments, mieux c'est. Supprimer le HTML.

  <span><span><span><div>>
      <span><span><span><div>>
          <span><span><span><p>></p></span>Some of my<span><span><span>></span>text<span><span></span></span>></span>.<span><span></span>></span>
  </span>    <span><span><span></span></span></span></span></span>
  </div></span>></span>
  </span><span><span><span></span></span></span>
  </div></span>></span></span>

  vs

  <span><span><span><div>>
      <span><span><span><p>></p></span>Some of my<span><span><span>></span>text<span><span></span></span>></span>.<span><span></span>></span>
  </span><span><span><span></span></span></span></span></span>
  </div></span>></span></span>

  Non applicable à tous les scénarios, bien sûr, mais structurez votre HTML d'une manière qui vous permet de supprimer autant d'éléments DOM que possible.
  Vous pouvez également réduire la taille des fichiers des documents HTML en omettant certaines balises qui ne sont pas nécessaires. Cela a tendance à sembler plutôt hacky et semble aller à l'encontre des normes, donc cela ne devrait être fait que lors du déploiement en production si pas du tout - de cette façon, vous ne confondez pas les autres développeurs qui travaillent sur le même code.

• Préfet
  Préfecture, c'est lorsque vous dites au navigateur qu'une ressource sera nécessaire à l'avance. La ressource peut être l'IP d'un domaine (préfescée DNS), une ressource statique comme une image ou un fichier CSS, ou même une page entière.

  Lorsque vous vous attendez à ce que l'utilisateur se rende dans un autre domaine après avoir visité votre site, ou, par exemple, vous hébergez vos ressources statiques sur un sous-domaine comme Images.example.com, la préfecture DNS peut aider à supprimer les quelques misecondes qu'il faut pour le Serveurs DNS pour résoudre images.example.com sur une adresse IP. Le gain n'est pas beaucoup, mais accumulé, il peut raser un temps de chargement décent sur les demandes que vous faites faire le navigateur de votre utilisateur. La préfecture DNS est réalisée avec un dans le comme: et est pris en charge dans tous les principaux navigateurs. Si vous avez des sous-domaines Vous vous attendez à ce que le visiteur actuel se charge après avoir terminé avec la page sur laquelle ils sont actuellement, il n'y a aucune raison de ne pas utiliser la préfetch DNS.

  Lorsque vous savez que certaines ressources seront nécessaires lors de la prochaine visite, vous pouvez les préfecter et les faire stocker dans le cache du navigateur. Par exemple, si vous avez un blog et sur ce blog un article en deux parties, vous pouvez vous assurer que les ressources statiques (c'est-à-dire les images) de la deuxième partie sont préchargées. Cela se fait comme: . Les albums Web Picasa utilisent largement cela pour prédéfinir 2 images suivantes à celle que vous consultez actuellement. Sur les navigateurs plus anciens, vous pouvez y arriver en chargeant un élément d'image fantôme en javascript:

  <span><span><span><div>>
      <span><span><span><div>>
          <span><span><span><p>></p></span>Some of my<span><span><span>></span>text<span><span></span></span>></span>.<span><span></span>></span>
  </span>    <span><span><span></span></span></span></span></span>
  </div></span>></span>
  </span><span><span><span></span></span></span>
  </div></span>></span></span>

  Cela charge l'image dans le cache, mais ne l'utilise nulle part. Cette méthode ne fonctionnera pas pour les fichiers CSS et JS, cependant, vous devrez donc être inventif avec ces ressources si vous voulez qu'ils soient prédéfinis sur des navigateurs anciens. XMLHttpRequest me vient à l'esprit - chargez-les via Ajax et ne les utilisez nulle part. Voir ici sur la façon de réaliser cela.

  Une chose dont la conscience est préalable est de prédéfinir uniquement les ressources dont nous avons certain ou presque certaines dont l'utilisateur aura besoin. Si l'utilisateur lit un article de blog en pagination, bien sûr, préfectez. Si l'utilisateur est sur un écran de soumission de formulaire, pré-préfectez définitivement les ressources auxquelles il peut s'attendre à l'écran, il est redirigé après la soumission. Ne préfectez pas votre site entier et ne prévenez pas au hasard - considérez la bande passante et utilisez la préfecture avec parcimonie, en gardant à l'esprit les appareils mobiles. Les appareils mobiles sont généralement sur une bande passante limitée, et le téléchargement avant la conduite d'une image de 2 Mo ne serait probablement pas très convivial. Vous pouvez éviter ces problèmes en préfectant sélectivement - détecter quand un utilisateur se trouve sur un appareil mobile ou sur une connexion de bande passante limitée et n'utilisez pas la préfecciation dans ces cas. Mieux encore, ajoutez des paramètres à votre site Web et demandez aux gens d'accepter la prélecture - enregistrez leur préférence dans LocalStorage et hachez-le avec la chaîne de l'agent utilisateur, ce qui leur permet de permettre ou de désactiver la pré-jeu sur chaque appareil séparément.

  Vous pouvez également prédécrocher et prétendre des pages entières. Les pages de prédéfinition signifient récupérer leur contenu DOM - le HTML. Cela ne fournit généralement pas beaucoup de stimulation de vitesse en raison de la plupart du contenu en réalité en JavaScript, CSS et des images - le contenu non obtenu par la pré-feste de la page. Ce type de récupération n'est actuellement entièrement pris en charge par Firefox. La prétention est une autre affaire - le préresseur n'est que dans le chrome, et non seulement il récupére le Dom dans les coulisses, mais aussi tous les contenus connexes sous forme de CSS, JS et Images. En fait, il rend déjà la page entière en arrière-plan - la page est assise en RAM, entièrement ouverte et rendue, attendant d'être visitée. Cela permet à la modification d'être instantané lorsqu'un utilisateur clique sur le lien préenduré, mais introduit les mêmes problèmes que celui décrit dans le paragraphe précédent - la bande passante peut souffrir. De plus, votre serveur enregistre ce préender en tant que visite, vous pouvez donc obtenir des analyses biaisées si l'utilisateur change réellement et ne finit pas par ouvrir le site Web préendué. La syntaxe Prerender est: .

  Pour le moment, il n'y a qu'une seule façon appropriée de détecter votre page en cours de prétention ou de préfabrication, et c'est avec l'API de visibilité de la page, qui est actuellement prise en charge dans tous les principaux navigateurs à l'exception du navigateur Android et de l'opéra Mini. Vous utilisez cette API pour vous assurer que la page est réellement surveillée, puis lancez tout suivi d'analyse que vous pourriez faire.

CSS

• CSS Lint

  Utilisez CSSLINT pour valider votre CSS et signaler les erreurs et les problèmes de performance potentiels. Lisez et respectez les règles comme indiqué dans le wiki CSSlint pour écrire le CSS le plus efficace possible

• CSS Expliquez

  Tout comme SQL Expliquez dans le monde de la base de données, il y a aussi un outil Nifty CSS Expliquez également - https://github.com/josh/css-explain. Vous pouvez l'utiliser pour analyser vos sélecteurs CSS. Si vous souhaitez le tester immédiatement, collez le contenu de ce fichier dans la console de votre navigateur et émettez simplement une commande comme CSSEXPLAIN ('. Item.subclass.anotherclass').

  

  L'objectif est d'obtenir le score le plus bas possible sur l'échelle de 1 à 10. Vous pouvez également l'essayer dans mon jsfiddle. Bien que les résultats ne soient pas pris trop au sérieux (vous feriez mieux de suivre les conseils CSSLINT), ils font toujours du bon travail pour expliquer la complexité des sélecteurs et au moins faire allusion à des problèmes possibles.

• traduire vs haut / gauche

  Utilisez CSS 2D traduire pour déplacer des objets au lieu de haut / gauche. Il est inutile d'essayer d'expliquer cela en détail lorsque Paul Irish et Chris Coyer ont fait un travail si fantastique. Assurez-vous de lire / regarder leur matériel et de cuire ces connaissances dans - utiliser traduire en haut / à gauche chaque fois que possible .

• Faites défiler en douceur

  Vous avez peut-être remarqué que des sites comme Facebook et Google prennent âges pour devenir défiles lors de leur ouverture. C'est presque comme s'ils avaient besoin de temps pour se réchauffer. C'est un problème sur de nombreux sites Web d'aujourd'hui et un énorme Gutpunch UX. Faire défiler votre page n'est pas aussi difficile que cela puisse paraître - surtout lorsque vous savez quoi rechercher. La clé pour réduire le décalage de défilement consiste à minimiser les peintures - les peintures sont ce qui se passe lorsque le contenu de votre écran change d'un cadre à l'autre, et que le navigateur doit le repeindre à l'écran - il doit calculer un nouveau look et gifler ce nouveau look sur L'une des couches dont se trouve un site Web rendu. Pour plus d'informations sur ces questions et pour savoir comment diagnostiquer les problèmes de peinture, consultez l'excellent post de Paul Lewis.

serveur

• Optimiser votre PHP avec des victoires faciles

  Il y a beaucoup de choses que vous pouvez faire pour accélérer votre application du côté PHP. Pour quelques victoires faciles, voir le dernier article de Fredric Mitchell ou l'un des autres articles liés à la performance ici sur SitePoint.

• Utilisez le module PageSpeed ​​de Google

  Le module PageSpeed ​​par Google est un module que vous pouvez installer dans Nginx et Apache qui implémente automatiquement certaines meilleures pratiques pour l'optimisation du site Web. Le module évalue les performances d'un site Web telles que perçues par le client, en s'assurant que toutes les règles sont respectées autant que possible et améliorant la portion de ressources statiques en particulier. Il diminuera, optimisera et comprimera CSS et JavaScript pour vous, réduira la taille de l'image en supprimant les métadonnées qui ne sont pas utilisées, SET expire correctement les en-têtes pour mieux utiliser le cache du navigateur, et bien plus encore. Mieux encore - cela ne nécessite aucun changement d'architecture de vous. Branchez-le simplement sur votre serveur et cela fonctionne. Pour installer le module, suivez ces instructions - vous devrez construire à partir de Source pour Nginx, mais ce n'est qu'un couple de commandes de travail. Pour être correctement présenté à Pagespeed, voir la vidéo suivante - c'est un peu long et ancien maintenant, mais toujours une ressource incroyablement précieuse:

• Utilisez SPDY

  Dans un effort similaire à Pagespeed, Google dirige également le développement de SPDY. MOD_SPDY est un autre module Apache conçu pour servir votre site Web beaucoup plus rapidement. L'installer n'est pas aussi simple que l'on pourrait le aimer, et il a également besoin d'un support de navigateur, mais cela semble mieux de jour en jour. SPDY est en fait un protocole (un peu comme HTTP est un protocole) qui intercepte et remplace les demandes HTTP lorsqu'ils sont capables, servant le site beaucoup plus rapide. Voir cet aperçu de haut niveau pour plus d'informations, ou même mieux, cette ventilation amicale. Bien que l'utilisation de SPDY puisse être risquée car nous attendons toujours une adoption plus répandue, les gains semblent l'emporter de loin sur les risques.

• Utilisez webp pour les images

  WebP est un format d'image visant à remplacer tous les autres - JPG, PNG et GIF. Il prend en charge les couches alpha (transparence), l'animation, la compression sans perte et avec perte, etc. L'adoption du navigateur a été très lente, mais il est facile de prendre en charge tous les types d'images ces jours-ci avec des outils qui automatisent la conversion WebP comme le module PageSpeed ​​susmentionné (il peut automatiquement convertir les images en webp à la volée). Pour une introduction approfondie et une discussion sur WebP, consultez ce guide complet.

• Comprimer avec zopfli

  Utilisez la compression Zopfli pour pré-compresser vos ressources statiques. Il s'agit d'un algorithme de compression open source, à nouveau dirigé par Google, ce qui augmente la compression de 3 à 8% par rapport aux méthodes de compression habituelles utilisées en ligne. Sur les petits sites Web, cela ne fait guère de différence, mais si vous élaborez votre application ou que vous servez votre contenu statique à de nombreux clients, cela fera certainement une différence notable, comme l'a rapporté l'équipe de polices Web Google:

Conclusion

Il existe de nombreuses façons d'améliorer les performances de votre application, et comme c'est souvent dans la vie - l'ensemble est supérieur à la somme des pièces. Mettez en œuvre certaines des mesures que nous avons mentionnées dans cet article et celles qui la précédent, et vous obtiendrez une belle amélioration tangible. Implémentez-les tous, et vous avez une application si rapide et légère qu'elle peut voyager dans le temps. Surveillez votre application, utilisez HAR, consultez le profilage des outils de développement ou inscrivez-vous à des services qui font tout cela pour vous - n'ignorez pas l'aspect performances de votre site. Bien que la plupart des projets de nos jours soient «faire et partir», ne laissez pas votre client avec un site Web dont vous n'êtes pas fier.

Ne sous-estimez jamais les petites correctifs que vous pouvez faire - vous ne savez jamais lequel sera le point de basculement de l'excellence!

Questions fréquemment posées (FAQ) sur les astuces de performances Web

Quelle est la différence entre les balises DIV et SPAN dans les balises HTML?

Dans les balises HTML, DIV et SPAN sont utilisées pour regrouper respectivement les éléments au niveau du bloc et en ligne. La balise DIV est un élément de niveau bloc qui est utilisé pour des morceaux de code plus grands, tandis que la balise Span est un élément en ligne utilisé pour un petit morceau de HTML à l'intérieur d'une ligne. La principale différence entre eux est la façon dont ils affectent la disposition de la page Web. Les éléments div créent une nouvelle ligne et prennent toute la largeur disponible, tandis que les éléments de span ne créent pas une nouvelle ligne et ne prennent que la largeur que nécessaire.

Comment puis-je améliorer les performances de mon site Web?

Il existe plusieurs façons d'améliorer les performances de votre site Web. L'une des méthodes les plus efficaces consiste à optimiser vos images. De grandes images à haute résolution peuvent ralentir votre site, il est donc important de redimensionner, de les compresser et de les optimiser. Une autre méthode consiste à réduire vos fichiers CSS et JavaScript, ce qui peut réduire la taille de vos fichiers et accélérer votre site. Vous pouvez également utiliser un réseau de livraison de contenu (CDN) pour livrer votre contenu plus rapidement aux utilisateurs du monde Impact significatif sur l'expérience utilisateur. Les sites Web à chargement lent peuvent frustrer les utilisateurs et conduire à des taux de rebond plus élevés. D'un autre côté, les sites Web à chargement rapide peuvent améliorer la satisfaction des utilisateurs, augmenter l'engagement et potentiellement entraîner des taux de conversion plus élevés. Par conséquent, il est crucial d'optimiser les performances de votre site Web pour fournir la meilleure expérience utilisateur possible.

Comment HTML affecte-t-il les performances du site affectent grandement les performances du site Web. Par exemple, des balises inutiles, une utilisation excessive des tables et une mauvaise utilisation des formulaires peuvent ralentir votre site Web. D'un autre côté, le HTML propre et bien structuré peut améliorer la vitesse de chargement de votre site Web et les performances globales.

Quelles sont les astuces de performances Web avancées?

Certaines astuces de performances Web avancées incluent l'utilisation de la pré-échange et Préchargement pour charger des ressources en arrière-plan, implémenter le serveur push pour envoyer plusieurs réponses pour une seule demande client et utiliser des travailleurs de service pour mettre en cache des ressources et les servir directement à partir du cache. Ces techniques peuvent considérablement améliorer les performances de votre site Web, mais elles nécessitent une compréhension approfondie des technologies Web et une implémentation minutieuse.

Comment puis-je mesurer les performances de mon site Web?

Il existe plusieurs outils que vous pouvez utiliser pour utiliser pour Mesurez les performances de votre site Web, y compris les informations PagesPeed de Google, GTmetrix et WebPageTest. Ces outils peuvent fournir des informations détaillées sur la vitesse de chargement de votre site Web, l'utilisation des ressources et d'autres mesures de performances. Ils peuvent également fournir des recommandations sur la façon d'améliorer les performances de votre site Web.

Quel est le rôle de JavaScript dans les performances du site Web?

JavaScript joue un rôle crucial dans les performances du site Web. Bien qu'il puisse améliorer la fonctionnalité et l'interactivité d'un site Web, JavaScript mal écrit ou excessif peut ralentir un site Web. Par conséquent, il est important d'écrire un JavaScript efficace, de minimiser son utilisation et de reporter ou de charger de manière asynchrone les fichiers JavaScript pour améliorer les performances de votre site Web.

Comment CSS affecte-t-il les performances du site Web?

CSS affecte les performances du site Web de plusieurs manières. Les grands fichiers CSS complexes peuvent ralentir votre site Web, il est donc important de garder votre CSS propre et bien organisé. Vous devez également éviter d'utiliser des animations CSS excessives, car elles peuvent entraîner des problèmes de performances. De plus, vous devez utiliser CSS Sprites pour combiner plusieurs images en une seule, réduisant le nombre de demandes HTTP et améliorant la vitesse de chargement de votre site Web.

Quel est l'impact du temps de réponse du serveur sur les performances du site Web?

Le temps de réponse du serveur est le temps nécessaire à un serveur pour répondre à une demande d'un navigateur. Un temps de réponse lent du serveur peut ralentir considérablement votre site Web, tandis qu'un temps de réponse rapide peut améliorer la vitesse de chargement de votre site Web. Par conséquent, il est important de choisir un fournisseur d'hébergement fiable et d'optimiser la configuration de votre serveur pour améliorer le temps de réponse de votre serveur.

Comment puis-je optimiser mon site Web pour les appareils mobiles?

Optimisation de votre site Web pour les appareils mobiles est crucial, car de plus en plus d'utilisateurs parcourent le Web sur leurs smartphones et tablettes. Vous pouvez optimiser votre site Web pour des appareils mobiles en utilisant une conception réactive, en optimisant des images pour mobile, en réduisant l'utilisation de JavaScript lourd et du CSS et de la mise en œuvre de la navigation adaptée aux mobiles. Vous devez également tester votre site Web sur divers appareils mobiles pour vous assurer qu'il fonctionne bien sur tous.

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!