Publié le 17 janvier 2017

La performance web, une affaire d’équipe

Intéressant cet article ?

[Total : 1    Moyenne : 5/5]

Vous pensez qu’un site web performant est uniquement le résultat du travail des développeurs ? Eh bien détrompez-vous. Un site web performant, c’est d’abord et avant tout une affaire d’équipe projet. Du designer au développeur, chaque intervenant doit mettre la main à la pâte. Et chacun des choix fait par l’équipe va impacter la performance de votre page web.

La performance, c’est quoi ?

Un site performant s’affiche rapidement, soit. Mais c’est également un site qui transforme le visiteur en client. Or, pour avoir un bon taux de transformation, votre site doit s’afficher comme par enchantement car le temps de chargement a un impact sur la confiance de vos utilisateurs.

C’est pourquoi la question de la performance est fondamentale. Elle doit être posée et contrôlée à chaque étape du projet. Il existe de nombreux outils en ligne qui permettent de l’évaluer (GTmetrix, pingdom, loadimpact, etc.).

Comment obtenir un site web performant ?

Pour obtenir un site web performant, pas besoin de sortilège complexe ! Faites collaborer étroitement vos designers et vos développeurs. Rigoler autour d’un café, c’est bien mais si l’on veut que tout se déroule sans accroc et que les développeurs soient partie prenante de la phase de design, ils doivent être présents dès le début du projet. De cette façon, ils seront en mesure de signaler tout ce qui pourrait aller à l’encontre de la performance du site.

Dès la phase de conception, définissez des objectifs précis et concrets, comme par exemple fixer un temps de chargement moyen sur tel type de connexion ou encore fixer un poids maximum par page.

6 bonnes pratiques pour améliorer la performance de votre site :

  • Rédiger un cahier des charges précis
  • Prioriser les fonctionnalités
  • Connaître et respecter les zones de confort de chaque intervenant
  • Aménager des discussions régulières entre les différents corps de métier
  • Concaténer les fichiers (html, CSS, JS…)
  • Avoir un bon système de cache

La performance par le design

Les images sont toujours les éléments les plus lourds dans un site. Elles sont ce qu’il y a de plus long à afficher. Pour contourner ce problème, faites illusion ! Il est tout à fait possible pour faire patienter l’utilisateur, de ne charger qu’une image floue en même temps que le texte, puis de charger l’image nette. En étant progressif dans le chargement de la page, votre utilisateur ne se rendra même pas compte qu’il a attendu, car il était occupé à lire le texte qui lui s’est chargé rapidement.

Faites patienter votre utilisateur en 3 coups de baguette :

Rendu progressif lorsque la connexion est mauvaise et que les images sont longues à télécharger
Ajout de transitions entre les pages
Installation de loaders et affichage des images progressivement (exemple : https://plugins.jquery.com/lazyload/)

Et les formats d’images dans tout ça ?

On voit beaucoup de formats d’images sur le web qui ne sont pas utilisés à bon escient. Bien sûr, l’idéal est déjà d’utiliser le bon format pour la bonne image.

Pour cela, rien de bien sorcier, chaque image doit être optimisée et compressée grâce à l’un des nombreux outils et de plugins à disposition sur la toile comme https://tinypng.com/, notre préféré en ce moment.

En résumé :

.JPG est un format photographique
.PNG garde la transparence, c’est le format amélioré du GIF
.SVG c’est la vie, un format très pratique qui permet d’avoir de belles images sur les retina 😉

4 bonnes pratiques design en bonus :

  • Limiter les variantes de typographies, surtout sur smartphone. En mobile, il est inutile de charger une police trop spécifique, personne ne s’en apercevra excepté les designers.
  • Appeler les fonts via les medias querries.
  • Travailler le design de l’attente
  • Produire un grimoire qui compile les guidelines graphiques à adopter par nos chers amis les développeurs front-end ! Ci-dessous voici un exemple tout droit sorti de ce fameux style guide.

exemple-style-guide_blog-jetpulp

Développez la performance par la collaboration, c’est possible ?

Et pour que les développeurs puissent effectuer un travail de qualité, ils doivent avoir une vue d’ensemble des styles CSS à préparer. Les boutons sont-ils avec ou sans icône? Avec une largeur et une hauteur différente? Sur fond foncé ou clair?

Comme ils ne sont pas mediums (quoi qu’un peu magiciens), l’idée est de leur donner un maximum de visibilité sur le graphisme. Cela permet de fournir un travail plus modulaire, plus facile à maintenir, plus simple à utiliser au cours de la phase de développement, et surtout plus léger.

En résumé, ciblez correctement les éléments que vous souhaitez modifier à l’aide des sélecteurs CSS appropriés et pensez modulaire !

performance-web-affaire-equipe_blog-jetpulp

Un site performant est le résultat de l’étroite collaboration d’une équipe. C’est aussi l’art de trouver des compromis, de “travailler modulaire”. La performance d’un site ne se mesure pas uniquement via des statistiques gtmetrix, c’est aussi une affaire de ressenti.

Ainsi, un site peut très bien être lourd à charger et performant, car son design aide l’utilisateur à patienter pendant le temps de chargement.

Cela s’appelle le design de l’attente… Ou un tour de passe-passe ! Tant qu’il est distrait par des animations et des enchaînements, l’utilisateur ne s’aperçoit pas qu’il attend. Il est donc intéressant d’optimiser l’appel des ressources en tâche de fond mais aussi les chargements pour délivrer une meilleure expérience utilisateur !

Et vous, comment travaillent vos équipes sur ces questions ? Avez-vous optimisé les temps de chargement de votre site ? Avez-vous des exemples de sites où vous trouvez le tour particulièrement réussi ? Partagez-les en commentaires !

Delphine

comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
0 Commentaires
Répondre
Se joindre à la discussion ?
Vous êtes libre de contribuer !
Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *