Je reviens de Londres j’ai eu la chance d’assister à ma 3e Smashing Conference (Les deux premières, c’était à Oxford en 2014 et 2015). Cette année, le thème était particulièrement intéressant : Performance matters. Le thème était enthousiasmant et j’en reviens enthousiasmé :)

Il parait que quelques images valent mieux qu’un long discours… je me garde mes notes et je vous propose un debrief en quelques tweets choisis.

Making platforms and process promote performance Phil Hawksworth

Ce que j’en retiens :

  • De l’importance d’avoir une culture de la performance pour qu’elle infuse lors de chaque étape d’un projet
  • De l’importance de maitriser ses déploiements

Into the weeds of CSS layout Rachel Andrew

Ce que j’en retiens :

  • Plein d’infos sur le fonctionnement des grilles CSS, notamment sur les mécanismes pour en définir les tailles
  • Du bon sens : pas besoin de polyfill pour le fallback d’une grille CSS
  • Travaillez votre lâcher prise pour que l’expérience soit la meilleure possible pour tous vos visiteurs… sans être forcément être la même. Tirez tout simplement partie des mécanismes CSS et utilisez les features queries

Beyond the basic of image optimization Uma Kravets & Martin Splitt

Ce que j’en retiens :

  • On peut jouer avec une pieuvre tout grise toute plate en CSS et c’est rigolo
  • On peut charger une version *très* réduite d’une image pour ne pas bloquer le rendu de la page puis charger, ensuite, la grande image (“Blur-up” technique)
  • On peut réduire drastiquement la taille d’une image, puis lui redonner un rendu identique en jouant avec les filtres CSS

A/B Testing, Ads and other 3rd party tafs Andy Davies

Ce que j’en retiens :

  • Tout devrait avoir une valeur, car tout a un coût : ça s’applique particulièrement à toutes les solutions 3rd parties qu’on intègre dans nos sites : tag manager,A/B testing, etc. *Mesurer leur impact sur vos perfs pour mesurer leur réel impact sur vos performances commerciales*

Web fonts are ▢▢▢ Rocket Science Zach Leathermann

Ce que j’en retiens :

  • Web fonts are not Rocket Science
  • Optimisez le chargement des polices : vous n’avez plus besoin que de WOFF et de WOFF2. WOFF2 est 30% plus léger que WOFF
  • Améliorer les performances de 1er rendu : assurez-vous que vos textes importants soient restitués avant que les polices ne soient disponible grâce à la propriété CSS font-display

_

How fast is it? Patrick Meenan

Ce que j’en retiens :

  • Pour mesurer la performance, utiliser les métriques dont l’importance pour vos utilisateurs (les vrais) est prouvée
  • Tirez partis des mesures simulées/globalisées mais aussi des mesure de vos “vrais utilisateurs. C’est complémentaire.

A modern front-end workflow with devtools Uma Hansa

Ce que j’en retiens :

  • Pas de tweets, il parle trop vite pour dire trop de trucs passionnants
  • Les nouvelles API et les nouveaux devtools permettent *beaucoup* de choses cools : notamment de bien comprendre ce qui peut vous permettre d’améliorer les perfs de vos pages, mais aussi de tester plus facilement et plus rapidement vos hypothèses grâce à des copies locales des fichiers

Party talk: Taking the Vile out of the Priviledge Christian Heillmann

Ce que j’en retiens :

  • On peut venir faire la fête, se retrouver devant une énième conférence… et néanmoins l’adorer.
  • Nous sommes des privillégiés, sachons nous en rendre compte
  • Vous ne pouvez pas rendre tout le monde content : vous n’êtes pas une pizza
  • Ayez de la considération pour les autres
  • Apprenez à lâcher prise, à célébrer vos victoires. Apprenez de vos échecs aussi.
  • N’arrêtez jamais d’apprendre, et prendez-y du plaisir

Mystery Speaker: How’s the UX on the Web, Really? Ilya Grigorik

Ce que j’en retiens :

  • Google récolte une masse énorme de données mais comme ils sont sympas (n’est-ce pas?), ils se proposent de les partager avec vous pour comprendre l’impact des conditions de consultations, donc des performances de votre site, sur l’expérience de vos visiteurs, donc sur l’impact et l’efficacité de votre site. Ça s’appelle Chrome User Experience Report

JavaScript engine internals for JavaScript developers Mathias Bynens

Ce que j’en retiens :

  • Ce qu’il convient de faire, ou de ne pas faire, avec les tableaux de données JS pour qu’ils restent le plus souvent possible correctement typés et qu’ils ne soient pas troués (en gros)
  • Mangez des légumes

La présentation est dispo en ligne

Improving Page Performance in Modern Web Apps Katie Hempenius

Ce que j’en retiens :

  • … euh, j’en retiens que c’est un sujet compliqué !

Resource Loading - Past, Present & Future Yoav Weiss

Ce que j’en retiens :

  • Je ne m’étais jamais vraiment penché sur la tyauterie du web… mais c’est un sujet aride que Yoav Weiss a su rendre intelligible et intéressant
  • HTTP/2 résouds plein de choses
  • Les priorités d’un serveur pour répondre aux demandes sont : HTML > CSS > JS > Fonts > Images

Performant Animations: Hitting 60fps Emily Hayman

Ce que j’en retiens :

  • Plein de conseils supers clairs et super pratiques sur les méthodes les plus performantes pour gérer les animations.
  • Pour optimiser les performances, il faut savoir penser en dehors de la boîte pour utiliser de la manière la plus intelligente l’arsenal HTML/CSS à notre disposition
  • Une nouvelle méthode sur-puissante : will-change (mais à des grands pouvoirs correspondent de grandes responsabilités)
  • Un peu de JS aussi. Notamment requestAnimationFrame, le setTimeout des temps modernes

Building Performance for the Long Term Allison McKnight

Ce que j’en retiens :

  • Y’a de vraiment de chouettes produits sur Etsy
  • Sans culture de la performance, la performance ne peut être durable
  • Du coup, il faut infuser cette culture, de la même manière que nous nous efforcons d’infuser une culture de la qualite web (coucou opquast) et une culture de l’accessibilité numérique

Les slides sont déjà disponibles en ligne également

In the loop Jake Archibald

Ce que j’en retiens :

<

ul>- Jake Archibald sait parler d’autre chose que de WPWA

  • Il est très fort pour réaliser de fantastiques animations en SVG qui rendent limpides les mécanismes permettant de restituer les animations sur nos écrans, et de traiter les interactions
  • Quand vous ouvrez des liens vers de nouvelles fenêtres, pensez à noopener pour éviter tout problème de sécurité (plus d’infos là, merci Mathias Bynen !)

<

ul>

Conclusion

C’était encore une fois d’un niveau incroyable avec des conférences qui ont sur rendre intelligibles et compréhensibles les sujets les plus complexes. Qu’elles m’aient concerné directement, indirectement, ou pas du tout, j’ai vraiment apprécié toutes les conférences. J’ai appris vraiment beaucoup de choses et j’ai hâte de mettre tout ça en application.

Notez que les vidéos desconférences sont d’ores et déjà disponibles !