Moins de CSS, plus de performance

Même si j’ai plutôt une préférence pour le développement back end, il m’arrive souvent de faire du front end, que ce soit quand je travaille sur un projet dans sa globalité ou uniquement pour coder un design. Je ne porte donc pas spécialement le CSS dans mon coeur, même si ça peut m’amuser par moment. Il y a quelques jours, je suis tombé sur les slides d’une présentation de Harry Roberts, et je ne peux m’empêcher de relayer ici son discours tellement je suis d’accord avec lui.

Si écrire du code CSS n’est déjà pas une tâche très amusante, que dire de la maintenance du CSS d’un gros site qui ne cesse de grandir ? A force de bricoler et bidouiller, on finit juste par espérer ne plus devoir mettre les mains dans ces fichiers qui ne ressemblent plus à rien.

La solution est simple: le meilleur moyen d’avoir un code facile à maintenir est d’avoir moins de code.

Pourquoi les designers n’aiment pas les développeurs

L’idée, pour alléger son code CSS est d’arrêter de vouloir à tout prix coder un design qui est la réplique conforme du PSD fourni par le designer.

A PSD is a clue, not a contract.

Le PSD doit donner l’idée générale, refléter l’atmosphère. Et ce sont ces éléments auxquels il va falloir donner vie. Il est donc important de faire comprendre aux designers qu’il n’y a aucune garantie que le résultat final ressemblera pixel pour pixel au design qu’ils avaient réalisé.

Une bonne relation est donc nécessaire pour pouvoir expliquer cela, et surtout bien se faire comprendre. Et avec un peu de chance, le designer prendra en compte vos conseils pour ses prochaines réalisations (en évitant donc des éléments qui seraient difficilement ou inefficacement réalisables en CSS).
Dans le cas contraire, vous aurez très certainement droit à des remarques concernant vos compétences et pourriez même avoir droit à l’étiquette du mauvais développeur. Et pourtant…

Ce n’est pas parce que quelque chose est faisable qu’on doit le faire. Bien souvent, certains éléments seront trop complexes à réaliser et surchargeront votre CSS. Inutile de préciser que plus le design sera complexe, plus votre CSS sera lourd, et plus votre site sera lent à charger.

Et l’utilisateur final, il en pense quoi ?

Oui, l’utilisateur aime voir un design agréable. Mais si le site met plusieurs secondes à charger (à cause du design trop lourd, justement), inutile de préciser qu’il aura vite fait de fermer la page avant même la fin du chargement. Ça me parait alors évident que le choix le plus judicieux est de simplifier le design, et d’avoir comme premier objectif la performance, car c’est ce qui est le plus important.

On pourrait même citer le principe de Pareto, en disant que si on peut réaliser 80% du design avec seulement 20% du code, il faut le faire. Les 20% restants qui nécessiteraient beaucoup de code ne sont pas nécessaires.

L’exemple typique

Un exemple sera certainement bien plus parlant que des mots. Il s’agit d’un problème qu’on rencontre tellement souvent que c’est sans doute l’idéal pour illustrer la problématique.
Pour le menu du site, le designer a décidé de faire de jolis séparateurs entre les éléments.

exmple_css_avant

Comment faire ça en CSS ? Plusieurs solutions.

  • Utiliser une image de fond. Ce qui nécessitera une requête supplémentaire pour charger l’image
  • Jouer avec les gradients et des pseudos éléments. Grosse bidouille bien pénible.

Il y a certainement d’autres solutions, mais la meilleure me paraît être la suivante: changer le design.

Avec un simple jeu sur les bordures, on peut obtenir un résultat tout à fait satisfaisant.
exmple_css_apres

En conclusion, je pense que la citation suivante résume bien ce qu’il faut retenir de cet article. Et n’oubliez jamais, KISS. Ce n’est pas pour rien que la mode est au Flat design, même si parfois, on va trop loin.

If it seems unreasonably difficult to build something, don’t build it

facebooktwittergoogle_pluspinterestlinkedintumblrmailfacebooktwittergoogle_pluspinterestlinkedintumblrmail

Un commentaire

  1. Salut,

    Comme pour beaucoup de choses, tout est affaire de dosage et de compromis, alors il est vrai qu'il vaut mieux parfois bien peser le pour et le contre avant de s'embarquer dans une véritable usine à gaz qui ralentira le site.
    Seulement, il arrive parfois que le côté affectif prenne le dessus sur la raison et c'est là que les avis extérieurs sont importants.

    Amicalement,

    Bruno
    Reply
  2. Hello ! :)
    Pour ma part, j'ai toujours fait mes designs moi-même sur Photoshop avant de le "transcrire" en html/css. Et en les faisant, tu as raison, je fais exactement pareil que ce que tu dis : je ne mets que les choses que je sais facilement réalisable (cf. ton trick avec les bordures des menus) :)
    De plus, les designs moins complexes sont aussi appréciés par les utilisateurs, car le site est plus clair, il y a moins de "distractions"... et pour le développeur, c'est tellement plus simple !
    Bref encore un tout bon article !
    Reply
  3. Quand tu travailles au sein de grosses structures, tu n'as pas vraiment le choix.
    Généralement le service marketing valide 1 charte graphique parmi XX propositions et chaque détails n'est généralement pas là par hasard.
    Le point de vue du développeur ou de l’intégrateur c'est de se dire "que ce n'est pas grave" de modifier tel ou tel point mais souvent c'est par facilité, sans imaginer le travaille de réflexion qu'il y a pu avoir derrière.
    En tout cas je suis d'accord avec toi, parfois 2-3 pixels nous font ch*** penant des heures :-)
    Reply

Laisser un commentaire.