CINXE.COM

<!doctype html><html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Philosophie d’optimisation raisonnable - Nicolas Friedli</title> <meta name="description" content="La meilleure efficacité est souhaitable, mais n’est pas toujours la meilleure solution. L’efficience (efficacité à moindre coût) est l’optimisation la plus raisonnable."> <style>:root{--sans:ui-sans-serif, Roboto, Inter, Arial, system-ui, sans-serif;--mono:ui-monospace, "Roboto Mono", "JetBrains Mono", Hack, Menlo, Consolas, monospace}html{font-family:var(--sans);font-variant-ligatures:none;font-variant-numeric:oldstyle-nums proportional-nums}code,pre{font-family:var(--mono)}code,pre,table{font-variant-numeric:lining-nums tabular-nums}a,h1,h2,h3,h4{font-variant-numeric:lining-nums proportional-nums}</style> <style media="screen">:root{color-scheme:light dark;--background:#F8F8F8;--text:#222;--contrast:orange}::marker{font-weight:700}::selection{background:var(--contrast);color:var(--text)}@media(prefers-color-scheme:dark){:root{--background:#000;--text:#DDD}::selection{color:var(--background)}}html{background:var(--background);color:var(--text);font-size:clamp(1rem,.8828rem + .3125vw,1.125rem);line-height:1.5;margin:0;padding:1rem;text-wrap:pretty}body{margin-block:0;margin-inline:auto;max-width:66ch}main{margin-block:4rem}footer,header,time{font-size:.8rem}nav{display:flex;flex-wrap:wrap;gap:1rem}h1,h2,h3,h4{line-height:1.1;margin-block:2rem 1rem;text-wrap:balance}h1{font-size:1.95em}h2{font-size:1.56rem}h3{font-size:1.25rem}h4{font-size:1rem;text-transform:uppercase}blockquote{font-style:italic;margin-left:0;padding-left:1rem;border-left:.2rem solid}blockquote em{font-style:normal}:not(pre)>code{border:1px dotted;font-size:.85rem;padding:.1em}pre{font-size:.9rem;margin-block:1rem 2rem;margin-inline:-1rem;overflow:auto;padding:.5rem 1rem}li pre{margin-inline:0}::marker,.articles a,dt{font-weight:700}dd+dt{margin-top:1rem}li{margin-top:.5rem}li li{font-size:95%}a{color:inherit;text-decoration-thickness:.2ex;text-underline-offset:.2ex}a:active,pre{background:var(--text);color:var(--background)}hr{border:.2ex solid;margin-inline-end:75%}</style> <style media="print">@page{margin:2cm}*{background-color:unset;color:#000}header,footer{display:none}pre{white-space:pre-wrap}a::after{content:" [" attr(href)"] "}</style> <link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="alternate" type="application/rss+xml" href="/index.xml" title="Nicolas Friedli"> <link rel="canonical" href="https://nicolasfriedli.ch/blog/optimisation-raisonnable/"> <script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Philosophie d’optimisation raisonnable","image":["/images/opengraph.jpg","/images/nicolas-friedli.jpg"],"wordCount":"859","datePublished":"2024-10-26","author":[{"@type":"Person","name":"Nicolas Friedli","url":"https://nicolasfriedli.ch/"}],"isAccessibleForFree":true}</script> <script defer data-domain="nicolasfriedli.ch" src="https://plausible.io/js/script.outbound-links.js"></script> <link rel="webmention" href="https://webmention.io/nicolasfriedli.ch/webmention"> <link rel="pingback" href="https://webmention.io/nicolasfriedli.ch/xmlrpc"> <meta property="og:url" content="https://nicolasfriedli.ch/blog/optimisation-raisonnable/"> <meta property="og:site_name" content="Nicolas Friedli"> <meta property="og:title" content="Philosophie d’optimisation raisonnable"> <meta property="og:description" content="La meilleure efficacité est souhaitable, mais n’est pas toujours la meilleure solution. L’efficience (efficacité à moindre coût) est l’optimisation la plus raisonnable."> <meta property="og:locale" content="fr"> <meta property="og:type" content="article"> <meta property="article:section" content="blog"> <meta property="article:published_time" content="2024-10-26T00:00:00+00:00"> <meta property="og:image" content="https://nicolasfriedli.ch/images/opengraph.jpg"> </head> <body> <header> <nav> <a href="/">Nicolas Friedli</a> <a href="/blog/">Blog</a> <a href="/blogroll/">Liens</a> <a href="/contact/">Contact</a> </nav> </header> <main> <h1>Philosophie d’optimisation raisonnable</h1> <time datetime="2024-10-26" class="entry-date dateline">26 octobre 2024</time> <p>À force de consulter des sites de développement, il est facile de se perdre dans des tests numériques et des solutions techniques. Mais il me paraît utile de formuler aussi les questions d’optimisation, de performance et d’éco-conception en langage naturel.</p> <p>Cette idée de langage humain m’est venue en consultant la documentation de <a href="https://github.com/tdewolff/minify">minify</a>. <code>minify</code> permet d’optimiser les pages produites par <a href="/blog/site-statique-generateur-hugo/">Hugo</a>.</p> <p>Dans chaque passage, je proposerai des citations qui devraient rendre le contenu de cette page à des internautes non techniques.</p> <h2 id="formuler-les-resultats-de-tests-en-langage-naturel">Formuler les résultats de tests en langage naturel</h2> <p><code>minify</code> propose une comparaison de performances (benchmark) pour différents outils. En première lecture, je peux comparer les résultats de <a href="https://github.com/tdewolff/minify?tab=readme-ov-file#compression-ratio-lower-is-better">taille</a> et définir un classement.</p> <p>Mais à y regarder de plus près, il n’est pas certain que ce classement soit toujours identique. Une moyenne des résultats n’est pas probante, parce qu’il faudrait prendre le meilleur outil <em>dans un cas précis</em>. L’épuisement guette.</p> <p>Maintenant, je formule la chose en langage humain ou naturel:</p> <blockquote> <p>Les 5 outils testés permettent de gagner entre 40% et 70% de taille de fichier de manière automatique. Pour un fichier donné, le 5 outils obtiennent des résultats analogues (à 1% près). Ils sont tous excellents.</p> </blockquote> <p>Vue ainsi, le classement n’a plus beaucoup de sens!</p> <p>Alors on peut ajouter la question du <a href="https://github.com/tdewolff/minify?tab=readme-ov-file#time-lower-is-better">temps</a> nécessaire à l’optiomisation.</p> <p>Et là, en langage naturel, il faudrait dire:</p> <blockquote> <p>Pour produire des fichiers de taille analogue, certains outils sont plusieurs centaines de fois plus lents que d’autres.</p> </blockquote> <p>C’est là que <code>minify</code> excelle. Il est certes peut-être moins <em>efficace</em> de 1%, mais jusqu’à 500x plus rapide. Il est alors question d’<em>efficience</em>, l’efficacité rapporté au coût (temporel).</p> <h2 id="eviter-les-erreurs">Éviter les erreurs</h2> <p>Il y a quelques semaines, j’ai découvert une image de 70MB(!) sur une page d’accueil d’un site. C’est un fichier gigantesque qui pose de vrais problèmes. Elle s’afficherait sans différence sensible en étant 500x plus légères.</p> <p>Quels que soient les efforts sur une telle page, tous est cassé par 1 fichier problématique. C’est pourquoi il faut toujours <a href="/blog/tester-site/">tester régulièrement son site web</a>. J’ai découvert l’horreur par un contrôle régulier avec <a href="https://www.speedlify.dev/">speedlify</a> que je conseille.</p> <p>Donc, en français:</p> <blockquote> <p>Avant même de chercher à optimiser, il vaut la peine de détecter des erreurs manifestes qui annihilent tous les efforts</p> </blockquote> <h2 id="se-demander-ce-qui-est-necessaire">Se demander ce qui est nécessaire</h2> <p>Des tests montrent <a href="https://github.com/cnumr/best-practices/blob/main/chapters/BP_001_fr.md">que 70 % des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et que 45 % ne sont jamais utilisées</a>. Dès lors, il faut se demander sérieusement ce qui est vraiment nécessaire.</p> <p>Le fichier qui coût le moins du point de vue de la performance est celui qui n’est pas hébergé sur un serveur, qui ne transite pas par le réseau et qui n’est pas interprété par le périphérique final.</p> <p>Avant d’utiliser une police d’écriture spécifique, je devrais me demander sur une <a href="/blog/polices-systeme/">police disponible</a> n’est pas suffisante.</p> <blockquote> <p>Avant de passer à une phase d’optimisation, il vaut la peine de se poser la question de la nécessité des outils proposés. Un fichier qui n’est pas envoyé n’a aucun coût écologique ou temporel.</p> </blockquote> <p>Cette réflexion est valable pour les polices, pour les images, pour les encarts des réseaux sociaux.</p> <h2 id="optimiser-avec-efficacite">Optimiser avec efficacité</h2> <p>Si j’estime qu’une police spécifique est nécessaire, alors j’essaierai de faire les choses dans les règles de l’art. J’en parle dans <a href="/blog/police-optimisee-titres/">Police optimisée pour les titres</a>.</p> <p>Dès que l’on entre dans cette phase d’optimisation, on peut se prendre au jeu et essayer d’être le plus efficace possible. C’est de bonne guerre.</p> <p>Mais quand les gains entre 2 techniques ou tactiques sont minimes, il faut dire:</p> <blockquote> <p>La meilleure efficacité est souhaitable, mais n’est pas toujours la meilleure solution.</p> </blockquote> <h2 id="favoriser-lefficience">Favoriser l’efficience</h2> <p>C’est pourquoi je cherche à toujours favoriser l’efficience. C’est ce que me propose <code>minify</code>, dont je parle en haut de page. Je n’ai rien à installer, rien à configurer, c’est rapide et j’obtiens un résultat excellent (mais pas forcément le meilleur possible). Donc:</p> <blockquote> <p>L’efficience (efficacité à moindre coût) est l’optimisation la plus raisonnable.</p> </blockquote> <p>C’est là que l’on passe de la pure question technique à une question philosophique. Quand on est dans des questions de rapports entre coût et résultats, on entre dans le domaine de l’appréciation. Et, finalement, du choix.</p> <h2 id="samuser-du-snobisme">S’amuser du snobisme</h2> <p>Comme la performance web me passionne, je cherche à toujours obtenir le meilleur résultat possible. C’est pourquoi <a href="/about/">ce site est hyper rapide</a>.</p> <p>Mais, d’une certaine manière, utiliser une mise en page simpliste, renoncer aux images et ne pas utiliser de polices spécifiques est une forme de snobisme. Au fond, je m’enorgueillis d’obtenir des <a href="https://pagespeed.web.dev/analysis/https-nicolasfriedli-ch/zdziqsc5vj?form_factor=mobile">résultats parfaits dans PageSpeed Insights</a>. C’est une forme de snobisme.</p> <blockquote> <p>La volonté d’obtenir le meilleur résultat à tout prix est un exercice utile pour les développeurs. La compétition stimule la recherche. Mais c’est rarement un objectif de la pratique réelle.</p> </blockquote> <p>J’ai effectué des <a href="/bio/">mandats dans des domaines très différents</a>. Mais la constante est que le meilleur résultat à tout prix n’est pas leur première préoccupation.</p> <p>Ensemble, nous obtenons des produits raisonnablement optimisés parce que nous prenons le temps de discuter des enjeux de fond. Nous arbitrons entre le souhaitable, l’utile, le nécessaire ou ce qu’il convient d’éviter à tout prix. Ces tensions et ces négociations nous font discuter de questions sérieuses. Et parfois philosophiques.</p> <hr> <aside> <p>Dans la même thématique:</p> <ul> <li><a href="/blog/polices-systeme/">Utiliser des polices système</a></li> <li><a href="/blog/police-optimisee-titres/">Police optimisée pour les titres</a></li> <li><a href="/blog/creation-affichage-page-web/">Création & affichage d’une page web</a></li> <li><a href="/blog/css-minification-cache/">Feuilles de style minifiées et gestion du cache</a></li> <li><a href="/blog/tester-site/">Tester un site web</a></li> </ul> </aside> </main> <footer> <p>Abonnement par <a href="/index.xml">flux RSS</a>. Contenus sous licence libre <em>Creative Commons BY-SA</em>.</p> </footer> </body> </html>