4 conseils pour améliorer la performance de votre page

Sep 14, 2025

Comment

Web-performance expert Henri Helvetica sitting with his laptop

[dix] [dix] [dix]

[dix]

Analyste de la performance Web Henri Helvetica partagera ses conseils pro sur la manière de renforcer la performance de votre site à Générer de New York 2018. Obtenez votre billet maintenant .

[dix]

La performance devient enfin une plus grande partie de la conversation dans la conception et le développement Web. Cependant, il peut toujours être un défi de faire en sorte que les gens consomment réellement le grand contenu qui est là et adopte une approche de performance de manière plus régulière.

Heureusement, le développeur indépendant et l'analyste de performance Web Henri Helvetica (vrai nom Henri Brisard), est disponible pour offrir à ses meilleurs conseils sur la pause de la performance de votre site.

01. Endeavour de mesurer

Helvetica suggère que tout d'abord, vous devez vous assurer de mesurer. "Vous ne pouvez jamais améliorer ce que vous ne mesurez pas", explique-t-il. «Une fois que vous avez vos mesures et vos données fournies, vous devez déterminer quels éléments importants à mesurer. Vous pouvez avoir deux pages qui se chargent en neuf secondes, mais on peut avoir la fenêtre de visualisation remplie beaucoup plus rapidement. Vous avez donc une meilleure expérience utilisateur.

"Vous devez mesurer ce qui est important dans le processus de charge de votre site et votre entreprise commerciale. Pensez à ce qui est important pour vos utilisateurs d'interagir. Chaque site a ses propres besoins."

[dix]

Une fois qu'il a eu un coup d'œil à une charge de page, ce qui l'aide à reprendre comment et lorsque certains articles se chargent, la prochaine étape de Helvetica consiste généralement à déclencher le chrome devtools pour évaluer exactement ce qui se passe. C'est un choix évident, car il est juste là et c'est gratuit - vous n'avez pas besoin de sauter dans un autre outil pour essayer de découvrir pourquoi une page peut être lente. Pourtant, de nombreux développeurs l'utilisent à peine. "DevTools est un peu comme un détecteur de fumée", affirme Helvetica. «S'il y a un feu, DEVTOOLS vous le dira. Cela vous montrera au moins où la fumée est. "

02. Perdre du poids de la page

Ensuite, Helvetica examine la cascade, qui indiquera diverses questions telles que la taille d'un actif et la latence qui a été impliquée dans le chargement. Si le site contient des images mal dimensionnées, par exemple, vous verrez généralement une très longue cascade, qui est l'un des points de douleur plus faciles à ramasser rapidement. Les images sont l'un des plus grands coupables d'un site lent de chargement - un problème pouvant être fixé assez facilement. S'agissant de la plus grande source de données, les images sont également la plus grande source d'économies de données.

"Je tiendrais toujours compte de votre poids de la page", explique Helvetica. "Peu importe la façon dont vous le découpez, si vous avez une image de 3 Mo, voire trois images à 1 Mo chacune, vous aurez probablement un défi d'expérience-expérience.

Web-performance expert Henri Helvetica coding on his laptop

[dix]

"Ce poids sera également victime de votre réseau, car un réseau cellulaire ne peut jamais être prédit vraiment. Vous voulez donc vous assurer que vos actifs sont petits et optimisés pour la fenêtre, ce qui signifie que vous ne devriez pas ne pas être capable de voir actifs de bureau sur un appareil mobile. "

Helvetica recommande également un chargement paresseux, une technique qui retarde le chargement d'un objet jusqu'à ce qu'il soit nécessaire. "Tous les utilisateurs ne vont pas en faire au bas d'une page", avertit-il. «Très souvent, vous pouvez charger des actifs qui ne seront jamais vus. L'utilisation de la charge paresseuse va être très bénéfique car vous économisez sur les données ainsi que le drain de la batterie ou la gestion de la mémoire. Si vous ne chargez pas l'image, vous n'aurez aucune mémoire à usurper sur l'appareil. "

03. Voyez comment vous vous empilez

Une autre raison pour laquelle Helvetica favorise DevTools est que cela fournit désormais des métriques telles que la première peinture (le temps nécessaire à l'utilisateur de voir le premier pixel de contenu) et la première peinture significative (le temps nécessaire au contenu principal de la page pour devenir visible. ).

Ensuite, il y a la filmstrip (en DevTools ou dans l'outil de performance WebPageTest) qui affiche des captures d'écran incrémentielles du navigateur rendant un site, de sorte que vous pouvez voir à quoi ressemble une page quand elle se charge. En les examinant, vous pouvez déterminer quels actifs ont été chargés quand et examinez les moyens de le charger d'une partie d'entre eux à une heure antérieure dans la chronologie.

Dans WebPageTest - Quel Helvetica loue pour son niveau de détail inspirant - vous pouvez également exporter une vidéo de la charge et comparer la filmstrip avec celle d'un concurrent. "Une fois que vous avez connecté les points, vous pouvez explorer comment améliorer l'expérience utilisateur en apportant ces actifs dans la fenêtre de vue plus rapide", explique Helvetica.

04. Couper le fouillis

Helvetica souligne que les décisions de conception ont également un impact sur la performance et que votre première charge dans la fenêtre de vie ne devrait idéalement pas être aussi rapide que possible, mais aussi aussi sans encombrement que possible.

Pour cette raison, vous devez comprendre la série d'événements qui se déroulent pour rendre la visualisation initiale d'une page Web - le chemin de rendu critique. Ces événements peuvent être optimisés en évitant les actifs de chargement qui ne sont pas nécessaires et en prenant des décisions autour de la sélection de polices Web et de formats d'image.

«Assurez-vous de garder vos SVGS aussi sans complexité que possible», suggère Helvetica à titre d'exemple. «Ensuite, vous aurez moins de code lorsque vous rendant votre SVG. J'entends cela des développeurs tout le temps. Ils obtiendront un SVG des designers et doivent le renvoyer car cela affecterait les performances. "

Cet article a été publié à l'origine dans le numéro 303 de Net, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Acheter numéro 303 ou Abonnez-vous au NET .

Vous voulez avoir une perspicacité de la vitesse de votre site?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica donne à sa planète de discussion des API: un conte de performance et d'ampli; Expérience utilisateur à la génération de New York du 25 au 27 avril 2018

Si vous êtes intéressé à vous assurer que vos pages sont rapides, assurez-vous d'attraper un billet pour Générer de New York . Henri Helvetica parcourra des pratiques actuelles quotidiennes et même expérimentales employées dans la mesure des applications Web et offriront des expériences utilisateur performantes, ainsi que d'offrir plus de perspectives sur des mesures telles que la première peinture, la peinture significative et le temps à interactive.

Générer New York a lieu du 25 au 27 avril 2018. Obtenez votre billet maintenant .

Articles Liés:

7 conseils d'experts pour clouer la performance Web
3 Top outils pour tester les performances Web
Pourquoi les performances Web doivent-elles se sentir vite

[dix] [dix]

[dix]

4 conseils pour améliorer la performance de votre page

01. Endeavour de mesurer

02. Perdre du poids de la page

03. Voyez comment vous vous empilez

04. Couper le fouillis

Vous voulez avoir une perspicacité de la vitesse de votre site?

Comment - Most Popular Articles

Comment étirer une toile et mettre en place des peintures à l'huile

Créer un bot mou sur mesure

Comment changer la police de votre BIO Twitter

Comment concevoir des bêtes fantastiques crédibles

Faire des cheveux 3D réalistes et une fourrure en 3DS Max et V-ray

Comment peindre une scène de village britannique traditionnelle

Comment concevoir la couverture de livre parfaite

Top astuces pour la peinture des mains expressives

Catégories