Design de la performance Web

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

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

<?php wp_get_attachment_image_srcset() ; wp_get_attachment_image_sizes();   wp_make_content_images_responsive() ; ?>

<img srcset="photo

mobile.jpg 320w, photo

medium.jpg 760w, photo

full.jpg 1280w" sizes="(max

width: 320px) 95vw, (max

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