Article original : What I learned from attending the #PerfMatters conference
Par Stacey Tay
Notes d'une conférence sur la performance web front-end
Cette semaine, j'ai eu le privilège d'assister à #PerfMatters, une conférence axée sur la performance web front-end. Je n'avais jamais assisté à une conférence auparavant, mais j'étais ravie d'y participer car elle promettait une liste impressionnante d'intervenants et de sujets.
J'ai commencé à me plonger dans la performance web il y a un peu plus d'un an, et j'ai donc pensé que ce serait une excellente occasion d'approfondir mes connaissances et de rencontrer d'autres personnes de la communauté.
Cet article se compose de trois parties :
(1) mon expérience de la conférence,
(2) certaines des choses que j'ai apprises à la conférence, et
(3) mes réflexions finales.
Réflexions sur l'expérience de la conférence
Tout le monde est si amical et accessible
Je suis venue seule et c'était une expérience assez intimidante, car je suis généralement une personne timide et il me faut un certain temps pour m'ouvrir. Mais je me suis fixé une règle : ne pas rester seule pendant le déjeuner et essayer de parler à au moins 2 personnes chaque jour. Je suis contente de l'avoir fait car toutes les personnes que j'ai rencontrées étaient gentilles et agréables à discuter.
J'ai fini par rencontrer beaucoup de gens, discutant de sujets allant du modèle PRPL, en passant par l'expérimentation avec les Cloudflare workers pour mieux servir les utilisateurs en Australie (à partir de serveurs aux États-Unis), la prévalence croissante de la programmation fonctionnelle dans le développement web front-end, et comment commencer le snowboard (sans rapport avec la performance, au cas où vous vous poseriez la question).
Les conférences étaient absolument incroyables
Tous les intervenants avaient quelque chose à dire sur la performance web sous une forme ou une autre, et il était évident qu'ils avaient mis beaucoup d'efforts dans leurs présentations. La conférence de Jenna Zeigen couvrait une longue liste d'astuces de performance et chacun de ses points était accompagné d'une lyric de chanson, ce qui était à la fois divertissant et informatif. Elle m'a dit qu'il lui fallait environ 15 minutes par chanson et qu'il y en avait plus de 30 ?
Les vidéos des conférences devraient être annoncées prochainement sur @perfmattersconf, mais un certain nombre de diapositives ont déjà été publiées avec #perfmattersconf.
Les conférences couvrent les nombreux aspects du travail sur la performance web
Améliorer la performance d'une page web ne se limite pas à un audit ponctuel, à la correction des problèmes qui rendent cette page lente, puis à passer à autre chose. Cela nécessite un effort concerté de toutes les parties prenantes—commercial, design, ingénierie, marketing, produit—au sein d'une organisation pour obtenir et rester rapide.
Les conférences ne portaient pas toutes sur la manière d'améliorer les TTIs ou les temps de chargement, qui sont importants. Mais elles couvraient également les autres aspects importants de rendre le web accessible et utilisable pour le plus grand nombre de personnes possible. De la manière dont les gens perçoivent la performance à l'instauration d'une culture de la performance, et de comment le privilège définit la performance à l'intersection de la performance et de l'accessibilité.
F497FE0F Des cadeaux réfléchis de la conférence F1F7FE0F
Une liste non exhaustive d'astuces et de conseils de performance appris
Certains, sinon tous, de ces conseils peuvent être des connaissances courantes, mais beaucoup étaient nouveaux pour moi.
Culture de la performance
- Donnez aux développeurs les outils pour permettre une meilleure performance. De plus, intégrez la performance dans le processus de développement.
- Comparez votre site avec ceux de vos concurrents pour obtenir l'adhésion de la direction sur la performance. Utilisez la comparaison vidéo côte à côte de WebPagetest de votre page web par rapport au parcours de chargement d'un concurrent pour faire passer votre point de vue de manière concise.
- Mesurez les gains de revenus annuels potentiels liés à l'augmentation de la vitesse du site avec l'outil Test My Site de Google.
Performance sur le Web
- La latence a un impact disproportionné sur la bande passante sur les requêtes réseau.
- Les animations SVG sont idéales pour animer les chargeurs en raison de leur taille (relativement) plus petite.
- Compressez votre page en 14KB si possible, pour éviter plusieurs allers-retours en raison du démarrage lent de TCP.
- Tous les CDN ne font pas la priorisation HTTP/2 comme prévu.
- Si vous devez utiliser des polices web, Zach Leatherman a écrit un guide complet sur la manière de les charger correctement.
- La performance perçue est influencée par la durée (durée réelle qu'un processus prend, appelée « performance »), la réactivité, la fluidité (smoothness perçue d'un processus) et la tolérance (combien de temps l'utilisateur s'attend à ce qu'un processus prenne). Diapositives de la conférence de Gemma Petrie et Heather McGaw sur Mesurer la performance perçue pour prioriser le travail produit.
Quelques outils pratiques
- L'outil de couverture de code de Chrome est utile pour déterminer où et quand diviser le code. Interagissez un peu avec la page pour voir comment les chiffres changent, et selon Tim Kaldec, environ 45 % de code inutilisé est normal et il y aura des gains marginaux décroissants à optimiser au-delà de cela.
- La fonctionnalité de remplacement des ressources réseau de Chrome permet aux développeurs de retourner un fichier enregistré localement, ce qui est utile pour déboguer quelque chose à la volée.
- Feuille de calcul Google Docs pour effectuer des audits WebPagetest en masse.
- Explorateur AST JavaScript en ligne (bon, celui-ci n'est pas exactement lié à la performance web, mais je l'ai découvert pendant la conférence et je ne peux pas m'arrêter de jouer avec).
- Request Map crée un graphe de réseau à partir d'une page web et est utile pour visualiser les requêtes tierces.
Réflexions finales
Si une chose est ressortie de la conférence, c'est que pour être bon en performance web, il est crucial de comprendre comment le navigateur fonctionne (des choses comme comment le rendering se produit et le chemin de rendu critique). Mais, la performance ne s'arrête pas aux gains techniques.
Obtenir l'adhésion de toutes les parties prenantes, pas seulement de l'ingénierie, est crucial pour améliorer et maintenir la performance car la performance web va au-delà du chargement d'une page aussi rapidement que possible.
Il y a aussi la performance perçue à considérer, puis déterminer si des améliorations supplémentaires de la performance créent des améliorations significatives supplémentaires pour l'entreprise ou les utilisateurs. Il est important de garder à l'esprit que la performance n'est qu'une partie de l'expérience utilisateur.
Je n'ai pas pris beaucoup de photos pendant la conférence (note à moi-même pour en prendre davantage la prochaine fois), mais j'ai réussi à capturer celle-ci.
_F31F Diapositive de la [conférence](https://perfmattersconf.com/talks/#addy" rel="noopener" target="blank" title=") d'Addy Osmani sur Le Coût de JavaScript ?
Si vous êtes intéressé par la performance web ou simplement par le développement web en général, c'est une conférence incroyable à découvrir et elle est prévue pour se tenir également l'année prochaine ! Il y a aussi un programme de bourses pour ceux qui ne peuvent pas assister sans aide financière. Au plaisir de vous y voir l'année prochaine !
Merci à Hui Yi, Jingwen Chen, et Yao Hui Chua pour avoir lu une version précédente et partagé leurs commentaires.