A presentation at BlendWebMix in in Lyon, France by Damien Senger
DESIGN DE LA PERFORMANCE BlendWebMix • Lyon • 2 et 3 novembre 2016
Damien Senger
designer et développeur web
hiwelo.co
•
@iamhiwelo
Raccoon Studio
creative web studio
raccoon.studio
DESIGN DE LA PERFORMANCE
La performance, pourquoi ?
La performance, c’est important.
La performance est un élément central de l’expérience utilisateur
After 3 seconds , 40 % of users will abandon your site. Lara Hogan, Etsy “ ”
Le temps de chargement a un impact sur la confiance des utilisateurs
La performance, une question à se poser à chaque étape d’un projet.
Une question de mobilité, mais pas que.
La performance, pour qui ?
Pour tout le monde.
Et dans notre cas, pour Sam. Sam est cosmonaute, sur Mars. Vo ic i Sa m !
Pour envoyer un signal sur Terre, Sam a besoin de 13 minutes.
À votre avis, combien de temps pour afficher une page web ?
À votre avis, combien de temps pour afficher une page web ? TROP
La réponse n’est pas 26 minutes. Un site, ce n’est pas une requête.
Mais Sam pourrait être autant handicapé•e dans le métro, ou ailleurs
Les réseaux cellulaires : un besoin de performance important
Appareil cellulaire Internet
Appareil cellulaire Internet
Appareil cellulaire Internet
La performance, quand et comment ?
La performance, ce n’est pas qu’une problématique technique.
Il est nécessaire d’avoir une collaboration designer – développeur
Cette collaboration doit avoir lieu à chaque étape du projet
Dès la conception, il est important de définir des priorités
Ces priorités permettront de trancher en cas de conflit design – technique
Ces priorités doivent être concrètes et précises
Il s’agit par exemple d’un temps de chargement de page moyen,
ou bien d’un objectif en terme de poids des fichiers du projet,
ou bien de temps d’accès avant d’accéder à une information précise.
Ces objectifs doivent être connus de tou•te•s dès le début
Ils permettent d’orienter les choix, notamment en design
La performance, par le design.
Il est important de connaître et de respecter les zones de confort de chacun•e
Des discussions régulières entre équipe design et développeur
À partir du cahier des charges, priorisez les fonctionnalités et les contenus
Le design doit être réfléchi pour limiter le recours aux ressources extérieures
Pour les images : définissez ce qui est nécessaire ou optionnel (lazy-loading)
Limitez le recours à trop de variantes typographiques
Et définissez à partir de quand afficher chaque variante
En mobilité, êtes-vous sûr que votre corps de labeur doit vraiment être personnalisé ?
Le design doit définir comment faire attendre l’utilisateur
C’est le design de l’attente.
Utilisez le design chaque fois que l’optimisation technique n’est pas suffisante
Animations, enchaînements, etc. : le design peut faire attendre l’utilisateur
Réfléchissez ensemble au moment opportun pour les chargements
Optimisez vos chargements et l’appel de vos ressources en tâche de fond
Dès le design, penser mobile first voir content first
Dès la conception, priorisez l’affichage de vos contenus
Le cœur de votre contenu doit être accessible rapidement
Seule l’expérience utilisateur doit être l’objet d’une amélioration progressive.
Et n’oubliez pas, quoi qu’il arrive, le plus lourd : c’est les images…
La performance, par la collaboration.
Repensez le design de vos projets : pensez « modulaire »
Le style guide et la cohérence graphique : la baguette magique du designer
Entre le design et le développement, choisissez les bons formats de fichier
JPG, PNG, SVG : chaque format a son intérêt
Le JPEG, format photographique par excellence
Les PNG c’est Gif en mieux, parfait pour les illustrations
WebP…
Les GIF, c’est bien pour Slack. Ailleurs, c’est non.
SVG, partout, tout le temps. Sauf pour les photos.
Réduire les octets, c’est bien. Réduire les requêtes, c’est mieux.
Côté typographie, beaucoup d’optimisations sont possibles
Limitez vos @font-face IE6-8 chargent y compris si inutilisé
Adaptez vos appels aux fonts selon les media queries
Penser à faire du lazy-loading de vos variantes non prioritaires
Vous pouvez aussi diminuer le poids en optimisant le subsetting
La performance, par le technique.
Optimisez vos assets de manière automatique
Faites appel à des images responsives (srcset)
Vous n’avez plus d’excuse : WordPress gère srcset nativement
width: 780px) 75vw, 50vw"
src="original.jpg" alt="Alternative text"
<
Pensez à optimiser vos politiques de cache
Concaténez vos fichiers. Tout le temps.
Apprenez à faire du bon HTML et du bon CSS
Pour de vrai
Apprenez à faire du bon HTML et du bon CSS
Optimiser l’interprétation : CSS modulaire et lutte contre les div
Parce qu’au quotidien : la divite, c’est pas automatique. Un raton râleur. “ ”
Apprenez la spécificité en CSS et apprenez à cibler correctement
Le design de la perf’, en bref.
Le design de la performance : c’est l’art de la collaboration. 1.
Travaillez en équipe, trouvez des compromis. 2.
Travaillez modulaire, notamment avec des style guides . 3.
Testez, testez et testez. 4.
Ce n’est pas qu’une affaire de métrique, mais c’est surtout du ressenti. 5.
Merci pour votre attention :)
@iamhiwelo
La performance web ce n'est pas qu'un truc de développeur. Dans une équipe, chacun doit y mettre sa main à la patte de l'ergonome au développeur. Format des images, choix typographique, ergonomie de l'attente, animations ou encore hiérarchie de l'affichage : chacun de ces choix va impacter la performance d'une page web. Regardons ensemble ce qu'un designer peut faire pour faciliter la vie de son développeur.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.