davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/6ee1dffe6a2acf9c55a5558550b.../index.html

index.html 39KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Budget de performance : un indispensable à la rapidité des sites web (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://medium.com/@DamienJubeau/budget-de-performance-indispensable-rapidite-sites-web-a771922e89e8">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Budget de performance : un indispensable à la rapidité des sites web (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://medium.com/@DamienJubeau/budget-de-performance-indispensable-rapidite-sites-web-a771922e89e8">Source originale du contenu</a></h3>

  463.     <p name="8d9c" id="8d9c" class="graf--p graf-after--h2">Je vous propose de découvrir une notion essentielle pour adopter une véritable culture de la performance web sur vos projets : <strong class="markup--strong markup--p-strong">les budgets de performance</strong>.<br/>Ces derniers ne vont pas s’exprimer en euros, mais en secondes, en mégaoctects ou encore en nombre de fichiers !</p>

  464. 

  465. <p name="7c7a" id="7c7a" class="graf--p graf-after--p">Une notion qui mériterait d’être connue et d’être utilisée par tous les métiers du web, pour accompagner le cycle de vie des sites web et <strong class="markup--strong markup--p-strong">reprendre le contrôle de leur rapidité</strong>.</p>

  466. 

  467. <h3 name="9d92" id="9d92" class="graf--h3 graf-after--p">Le constat initial</h3>

  468. 

  469. <p name="dc56" id="dc56" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Le web grossit</strong>. Les pages s’alourdissent, le nombre de ressources (images, scripts, css, etc) nécessaires pour afficher une page web ne cesse de croître.</p>

  470. 

  471. <p name="5c4d" id="5c4d" class="graf--p graf-after--p">Pourquoi ? Parce qu’aujourd’hui les sites web sont des applications à part entière, avec des fonctionnalités qui peuvent être très riches, et offrant de nombreux contenus multimédias.</p>

  472. 

  473. <p name="08bc" id="08bc" class="graf--p graf-after--p">A l’heure actuelle, si l’on considère les 1000 sites les plus visités au monde, voici le bilan dressé :</p>

  474. 

  475. <p name="003c" id="003c" class="graf--p graf-after--figure">Même si vous avez à coeur la performance lors du développement initial de votre site web, ce dernier <strong class="markup--strong markup--p-strong">va inexorablement évoluer </strong>: nouvelles fonctionnalités, nouveaux contenus, refactoring technique, etc.</p>

  476. 

  477. <p name="97a7" id="97a7" class="graf--p graf-after--p">Votre site va vivre et s’enrichir : A/B Testing, moteur de recommandations, retargeting, click-to-chat, etc, sont autant de fonctionnalités qui se répandent et sont à même d’intervenir dans le cycle de vie de votre site web.</p>

  478. 

  479. <p name="99f3" id="99f3" class="graf--p graf-after--p">Le budget de performance est un framework, un outil qui va vous permettre de <strong class="markup--strong markup--p-strong">placer la performance au coeur de vos préoccupations</strong> et d’<strong class="markup--strong markup--p-strong">éviter toute dérive</strong> qui conduirait à ralentir votre site, car n’oublions pas, <a href="https://www.dareboost.com/fr/webperf-impacts" data-href="https://www.dareboost.com/fr/webperf-impacts" class="markup--anchor markup--p-anchor" rel="nofollow">un site rapide est indispensable au succès de votre business.</a></p>

  480. 

  481. <h3 name="293f" id="293f" class="graf--h3 graf-after--p">La vitesse est une fonctionnalité</h3>

  482. 

  483. <p name="1732" id="1732" class="graf--p graf-after--h3">En 2010 Urs Hölzle a rapporté ce propos tenu par Larry Page, cofondateur de Google :</p>

  484. 

  485. <blockquote name="e842" id="e842" class="graf--blockquote graf--startsWithDoubleQuote graf-after--p">“<em class="markup--em markup--blockquote-em">As a product manager you should know that speed is product feature number one.”</em></blockquote>

  486. 

  487. <p name="debd" id="debd" class="graf--p graf-after--blockquote">(traduction : <em class="markup--em markup--p-em">en tant que responsable produit, tu devrais savoir que la vitesse est la fonctionnalité numéro un du produit</em>)</p>

  488. 

  489. <p name="b4e1" id="b4e1" class="graf--p graf-after--p">La <strong class="markup--strong markup--p-strong">vitesse</strong> est une philosophie chez Google, puisque considérée depuis les débuts comme une <strong class="markup--strong markup--p-strong">différenciation</strong> majeure.<br/>Je vous propose de découvrir pourquoi ce propos est plein de sens, et en quoi il nous amène à la notion de budget de performance.</p>

  490. 

  491. <p name="6b8e" id="6b8e" class="graf--p graf-after--p">Vous connaissez probablement la notion de suivi de disponibilité, qui consiste à s’assurer qu’un serveur web est bien disponible (uptime monitoring), sans quoi le site n’est tout simplement pas accessible. Il ne pourra donc pas produire de chiffre d’affaires dans cette période.<br/>Et cela peut représenter des pertes à long terme, vous risquez de vous priver à tout jamais des visiteurs qui n’auront pas pu accéder à vos pages.</p>

  492. 

  493. <p name="acde" id="acde" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">La vitesse de votre site, peut être vue comme un prolongement de sa disponibilité</strong> : à quoi bon avoir un site si ce dernier met 13 minutes à se charger ? Évidemment aucun. Il est très naturel de comprendre qu’un temps d’attente extrême ne produira aucun résultat.</p>

  494. 

  495. <p name="75a5" id="75a5" class="graf--p graf-after--p">Et si le temps de chargement de votre page était d’une minute ? Peut-être quelques âmes patientes attendraient jusque là, mais rares seraient-elles !</p>

  496. 

  497. <p name="e982" id="e982" class="graf--p graf-after--p">La <strong class="markup--strong markup--p-strong">perception de l’attente</strong> est un sujet complexe, et notre patience est impactée par de nombreux paramètres. Le premier et sans doute le plus fort : la valeur que nous attendons au bout du tunnel.</p>

  498. 

  499. <p name="5893" id="5893" class="graf--p graf-after--p">Qui serait prêt à attendre 3h à la caisse d’un supermarché ? Personne.<br/>Qui serait prêt à attendre 3h pour la sortie du dernier smartphone en vogue ? Ils sont nombreux !</p>

  500. 

  501. <p name="230f" id="230f" class="graf--p graf-after--p">Mais attention, tout le monde est loin d’être prêt à cela : <strong class="markup--strong markup--p-strong">notre perception de la valeur nous est personnelle</strong>.</p>

  502. 

  503. <p name="fcf6" id="fcf6" class="graf--p graf-after--figure">Reprenons les courageux qui patientent dans la file pendant 3h. Seraient-ils prêts à la même chose par une température de 45° ? ou bien sous une tempête de neige ? Sans doute pas : <strong class="markup--strong markup--p-strong">notre capacité à attendre est contextuelle</strong> !</p>

  504. 

  505. <p name="7722" id="7722" class="graf--p graf-after--p">La difficulté qui se présente à tout éditeur de site web, c’est de devoir faire abstraction de son propre contexte, pour prendre en compte, non pas sa propre expérience, mais bien la multitude de profils qui figure parmi ses visiteurs.</p>

  506. 

  507. <p name="dd1f" id="dd1f" class="graf--p graf-after--p">Alors que l’attente effective d’un internaute sur votre page pourra être impactée par sa localisation (cf <a href="http://blog.dareboost.com/fr/2015/06/la-latence-pourquoi-ralentit-elle-votre-site-web/" data-href="http://blog.dareboost.com/fr/2015/06/la-latence-pourquoi-ralentit-elle-votre-site-web/" class="markup--anchor markup--p-anchor" rel="nofollow">les effets de la latence</a>), son accès Internet, son périphérique ou encore son navigateur web, la perception de cette attente pourra être impactée par ses habitudes de navigation, son expérience récente (le site précédemment visité était-il très lent ? très rapide ?), ses préjugés sur votre marque ou encore tout simplement son humeur !</p>

  508. 

  509. <p name="198b" id="198b" class="graf--p graf-after--p">Pour chaque utilisateur, une fonctionnalité X ou Y aura<strong class="markup--strong markup--p-strong"> une valeur perçue différente</strong>.<br/>Toute fonctionnalité aura un impact technique sur votre site, et peut donc jouer sur l’attente à laquelle vous exposez un utilisateur.</p>

  510. 

  511. <p name="bbd7" id="bbd7" class="graf--p graf-after--p">Si, comme l’évoque Larry Page, vous pensez à la vitesse comme la fonctionnalité principale de votre produit, vous aurez au coeur de vos préoccupations ces différents éléments.</p>

  512. 

  513. <p name="d2ce" id="d2ce" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Une fonctionnalité n’a de sens pour un visiteur que si la valeur ajoutée apportée compense l’attente provoquée.</strong></p>

  514. 

  515. <p name="1451" id="1451" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">La notion de budget de performance</strong> va répondre à ce problème : non pas en vous imposant d’avoir un site rapide, mais en vous permettant de <strong class="markup--strong markup--p-strong">considérer chaque fonctionnalité comme devant respecter une contrainte de vitesse</strong>. Vous serez donc amené à faire les arbitrages nécessaires entre la valeur apportée par une fonctionnalité et ses impacts sur la vitesse.</p>

  516. 

  517. <h3 name="e6b6" id="e6b6" class="graf--h3 graf-after--p">Quels indicateurs utiliser pour les budgets de performance ?</h3>

  518. 

  519. <p name="6f37" id="6f37" class="graf--p graf-after--figure">La notion de budget n’est en soit pas complexe, et vous en comprendrez très simplement ces exemples :</p>

  520. 

  521. <ul class="postList"><li name="435c" id="435c" class="graf--li graf--startsWithDoubleQuote graf-after--p">“Notre page d’accueil doit faire moins d’1Mo”</li><li name="854a" id="854a" class="graf--li graf--startsWithDoubleQuote graf-after--li">“Sur mobile, en 3G, toutes nos pages doivent s’afficher en moins de 3 secondes”</li><li name="f84d" id="f84d" class="graf--li graf--startsWithDoubleQuote graf-after--li">“Le serveur web doit répondre en moins de 200ms”</li></ul>

  522. 

  523. <p name="7e01" id="7e01" class="graf--p graf-after--li">Comme nous l’évoquions, c’est un cadre que l’on va s’imposer de respecter, d’où la notion de “budget” : vous ne pouvez pas dépenser plus de X secondes, ou plus de Y Mo, etc.</p>

  524. 

  525. <p name="ad61" id="ad61" class="graf--p graf-after--p">Ce cadre peut-être plus ou moins précis, et les seuils que l’on va y apporter peuvent être de natures très différentes.</p>

  526. 

  527. <p name="9583" id="9583" class="graf--p graf-after--p">Le premier pas est probablement d’<strong class="markup--strong markup--p-strong">intégrer la notions de performance très en amont de vos projets</strong>, dès les premières expressions de besoins. J’apprécie énormément ce propos de <a href="http://bradfrost.com/blog/post/performance-as-design/" data-href="http://bradfrost.com/blog/post/performance-as-design/" class="markup--anchor markup--p-anchor" rel="nofollow">Brad Frost</a> à ce sujet :</p>

  528. 

  529. <blockquote name="ffac" id="ffac" class="graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Statements of work, project proposals and design briefs should explicitly and repeatedly call out performance as a primary goal. “The goal of this project is to create a stunning, flexible, lightning-fast experience…”</em></blockquote>

  530. 

  531. <p name="1076" id="1076" class="graf--p graf-after--blockquote"><em class="markup--em markup--p-em">(Les cahiers des charges, réponses à appels d’offres, et briefs de conception devraient explicitement et de manière répétée mentionner la performance comme objectif principal. “Le but de ce projet est de créer une expérience à couper le souffle, souple, rapide comme l’éclair …”)</em></p>

  532. 

  533. <p name="76f3" id="76f3" class="graf--p graf-after--p">On s’assure ainsi de ne jamais oublier ce critère et d’en faire un point de vigilance majeur. C’est nécessaire à toutes les étapes de votre projet.<br/><strong class="markup--strong markup--p-strong">Plus la prise en compte de la performance sera tardive, plus les efforts à mettre en oeuvre seront importants.</strong></p>

  534. 

  535. <p name="3e2d" id="3e2d" class="graf--p graf-after--p">Pour vous permettre d’exprimer vos budgets de performance, <a href="http://timkadlec.com/2014/11/performance-budget-metrics/" data-href="http://timkadlec.com/2014/11/performance-budget-metrics/" class="markup--anchor markup--p-anchor" rel="nofollow">Tim Kaldec</a> a proposé <strong class="markup--strong markup--p-strong">un découpage très intéressant des métriques disponibles</strong>, que je vous propose de découvrir ici :</p>

  536. 

  537. <h4 name="c0f5" id="c0f5" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Milestone timings (jalons temporels)</strong></h4>

  538. 

  539. <p name="f6ab" id="f6ab" class="graf--p graf-after--h4"><em class="markup--em markup--p-em">Exemples : Temps de réponse serveur; Temps de chargement total; Temps avant début de l’affichage;</em></p>

  540. 

  541. <p name="ca93" id="ca93" class="graf--p graf-after--p">Ces mesures ont l’avantage d’être faciles à suivre dans le temps, l’idéal pour mettre en place un cadre à respecter pour l’équipe technique. Attention cependant : le chargement d’une page ne se résume pas à un instant T, heureusement, le speedindex va venir en renfort.</p>

  542. 

  543. <h4 name="d0b2" id="d0b2" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">SpeedIndex (indice de performance)</strong></h4>

  544. 

  545. <p name="b434" id="b434" class="graf--p graf-after--h4">Cet indice est largement reconnu par les experts en performance web, car <strong class="markup--strong markup--p-strong">il retranscrit comment la page va se charger avec une seule valeur</strong>, d’un point de vue utilisateur.</p>

  546. 

  547. <p name="dfc1" id="dfc1" class="graf--p graf-after--p">Il a donc mérité pour Tim une catégorie dédiée, et ce n’est pas un mal, même si j’aurais tendance à y ajouter le <em class="markup--em markup--p-em">Time To Interact</em> (qui fait partie de la catégorie précédente), car l’affichage de la page doit être complété de son interactivité pour que l’expérience utilisateur soit vraiment au rendez-vous.</p>

  548. 

  549. <p name="62ef" id="62ef" class="graf--p graf-after--p">Si vous souhaitez en savoir plus sur le speedindex, vous trouverez dans cet article des <a href="http://blog.dareboost.com/fr/2015/07/start-render-visually-complete-speedindex/" data-href="http://blog.dareboost.com/fr/2015/07/start-render-visually-complete-speedindex/" class="markup--anchor markup--p-anchor" rel="nofollow">explications ainsi que sur 2 autres métriques liées au rendu visuel.</a></p>

  550. 

  551. <h4 name="2926" id="2926" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Quantity based metrics (Mesures basées sur la quantité)</strong></h4>

  552. 

  553. <p name="198d" id="198d" class="graf--p graf-after--h4"><em class="markup--em markup--p-em">Exemples : Nombre de requêtes; Poids total de la page; Poids total des images</em></p>

  554. 

  555. <p name="04b7" id="04b7" class="graf--p graf-after--p">Nous avons ici des mesures sans lien direct de cause à effet sur l’expérience utilisateur. Cependant, l’énorme avantage est que<strong class="markup--strong markup--p-strong"> ce sont des valeurs que l’on anticipe beaucoup mieux que l’impact sur l’expérience utilisateur</strong>.</p>

  556. 

  557. <p name="3953" id="3953" class="graf--p graf-after--p">Comme nous l’indique Tim, il est bien plus facile de comprendre que l’ajout d’un script va augmenter le poids de la page, que d’anticiper l’impact de ce script sur le speedindex.</p>

  558. 

  559. <p name="34bd" id="34bd" class="graf--p graf-after--p">Un autre exemple, très en amont dans la chaîne de conception, que j’apprécie beaucoup, est apporté par <a href="http://danielmall.com/articles/how-to-make-a-performance-budget/" data-href="http://danielmall.com/articles/how-to-make-a-performance-budget/" class="markup--anchor markup--p-anchor" rel="nofollow">Daniel Mall</a> : lors du maquette graphique, limiter le nombre de polices de caractères qu’il est possible d’utiliser ! C’est un exemple typique de la nécessité d’intégrer des budgets au plus tôt : la maquette proposée par votre graphiste peut être esthétiquement superbe, mais vous conduire à des performances nécessairement désastreuses;</p>

  560. 

  561. <h4 name="d579" id="d579" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Rule based metrics (mesures basées sur des règles)</strong></h4>

  562. 

  563. <p name="e75c" id="e75c" class="graf--p graf-after--h4"><em class="markup--em markup--p-em">Exemples : score PageSpeed; score YSlow; score DareBoost</em></p>

  564. 

  565. <p name="12b0" id="12b0" class="graf--p graf-after--p">Plusieurs outils existent sur le marché pour vous permettre vérifier sur une pages web le respect des bonnes pratiques qui favorisent la rapidité. Ces scores résument donc la qualité technique de vos pages du point de vue de la performance (les ressources sont-elles compressées ? les images sont-elles optimisées ? etc) .</p>

  566. 

  567. <p name="6747" id="6747" class="graf--p graf-after--p">Là encore, il n’y a pas de relation directe avec l’expérience utilisateur, mais en intégrant ce type de scores dans vos budgets, vous vous assurez de <strong class="markup--strong markup--p-strong">détecter des régressions majeures</strong>, et de ne pas louper d’optimisation technique évidente.</p>

  568. 

  569. <h3 name="b9bc" id="b9bc" class="graf--h3 graf-after--p">Comment fixer le seuil d’un budget ?</h3>

  570. 

  571. <p name="100e" id="100e" class="graf--p graf-after--figure">Nous l’avons évoqué au cours des paragraphes précédents, les budgets de performance doivent être mis en place le plus tôt possible dans vos projets, et accompagner ceux-ci tout au long de leur cycle de vie.</p>

  572. 

  573. <p name="a5c0" id="a5c0" class="graf--p graf-after--p">Il faudra veiller à<strong class="markup--strong markup--p-strong"> adapter les indicateurs utilisés en fonction des étapes et des interlocuteurs.</strong></p>

  574. 

  575. <p name="5625" id="5625" class="graf--p graf-after--p">Mais quelles sont les méthodes pour fixer un budget ? Quelle vitesse devez-vous atteindre ? Comment choisir ces seuils qui vont accompagner vos projets et peuvent être des contraintes fortes à certaines étapes ?</p>

  576. 

  577. <p name="55df" id="55df" class="graf--p graf-after--p">Ces questions ont été l’objet de l’article <a href="http://timkadlec.com/2014/01/fast-enough/" data-href="http://timkadlec.com/2014/01/fast-enough/" class="markup--anchor markup--p-anchor" rel="nofollow"><em class="markup--em markup--p-em">Fast Enough </em></a>de Tim Kaldec, qui nous rappelle notamment <strong class="markup--strong markup--p-strong">la règle des 20%</strong> apportée par Steven Seow :<strong class="markup--strong markup--p-strong"> on ne perçoit une différence entre deux durées que si l’écart entre elles est supérieur à 20%.</strong></p>

  578. 

  579. <p name="f785" id="f785" class="graf--p graf-after--p">En vous basant sur cette règle, vous pourrez donc fixer vos budgets en vous positionnant <strong class="markup--strong markup--p-strong">par rapport à vos concurrents</strong>, que ce soit pour être meilleur (au moins, 20% plus rapide) ou à défaut, ne pas être être perçu comme plus lent ! (au plus, 20% plus lent).</p>

  580. 

  581. <p name="d0c5" id="d0c5" class="graf--p graf-after--p">Autre méthode intéressante, toujours mentionnée dans cet article : <strong class="markup--strong markup--p-strong">se baser sur la perception du temps</strong>. Une réponse en moins de 100ms parait instantanée, 1 seconde est la durée pendant laquelle un internaute conserve son attention au maximum, alors qu’au bout de 10 secondes il l’aura totalement perdue.</p>

  582. 

  583. <p name="d6bd" id="d6bd" class="graf--p graf-after--p">Vos budgets peuvent également être composés pour<strong class="markup--strong markup--p-strong"> prendre en compte les coûts pour vos visiteurs</strong> : dans de nombreux pays, les connexions mobiles sont encore limitées en bande passante, et naviguer sur des sites mobiles trop lourd est loin d’être anecdotique ! Pour en savoir plus, je vous invite à consulter cet excellent projet : <a href="http://whatdoesmysitecost.com/" data-href="http://whatdoesmysitecost.com/" class="markup--anchor markup--p-anchor" rel="nofollow">http://whatdoesmysitecost.com/</a></p>

  584. 

  585. <p name="df3e" id="df3e" class="graf--p graf-after--p">Ces quelques données vous aideront, mais encore une fois, la perception de l’attente est dépendante de la valeur attendue et obtenue, c’est donc dans cette optique que vous devez concevoir vos budgets !</p>

  586. 

  587. <h3 name="2613" id="2613" class="graf--h3 graf-after--p">S’adapter aux budgets ou adapter les budgets</h3>

  588. 

  589. <p name="638b" id="638b" class="graf--p graf-after--h3">Lorsque vous ajoutez une nouvelle fonctionnalité ou un nouveau contenu, il n’est pas étonnant que vos budgets puissent être mis à mal. Mais votre objectif doit être de les respecter à tout prix !</p>

  590. 

  591. <p name="e5ea" id="e5ea" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Lorsqu’un budget est enfreint</strong>, vous allez devoir successivement envisager ces différentes possibilités :</p>

  592. 

  593. <ul class="postList"><li name="d79d" id="d79d" class="graf--li graf-after--p"><strong class="markup--strong markup--li-strong">optimiser</strong> : que ce soit sur ce changement ou sur un élément déjà existant, pouvez-vous mettre en place des optimisations qui vont vous permettre de respecter à nouveau les différents budgets ?</li><li name="1eab" id="1eab" class="graf--li graf-after--li"><strong class="markup--strong markup--li-strong">épurer</strong> : peut-être qu’un ancien contenu ou une ancienne fonctionnalité n’est plus nécessaire et peut être supprimé ?</li><li name="decd" id="decd" class="graf--li graf-after--li"><strong class="markup--strong markup--li-strong">abandonner</strong> : la valeur ajoutée apportée est-elle suffisante pour justifier une violation des budgets ? Si ce n’est pas le cas, c’est peut-être tout simplement que cette nouveauté n’en vaut pas la peine</li><li name="4107" id="4107" class="graf--li graf-after--li"><strong class="markup--strong markup--li-strong">évoluer</strong> : si aucune des actions précitées n’est envisageable, il ne vous restera pas d’autre solution que de faire évoluer les budgets de performance problématiques. Il n’est pas question de les abandonner, mais bien de les faire évoluer pour pouvoir intégrer le changement. Vous aurez ainsi un nouveau cadre à respecter à l’avenir.</li></ul>

  594. 

  595. <p name="405d" id="405d" class="graf--p graf-after--li">Quelle que soit l’issue, <strong class="markup--strong markup--p-strong">le budget de performance en tant qu’outil aura fait son office</strong> : vous vous serez <strong class="markup--strong markup--p-strong">interrogé sur les impacts</strong> de cette évolution, et vous en aurez <strong class="markup--strong markup--p-strong">maîtrisé les conséquences</strong>.</p>

  596. 

  597. <p name="b3de" id="b3de" class="graf--p graf-after--p">J’espère que cet article vous aura convaincu de l’utilité de mettre en oeuvre les budgets de performance dans vos projets, pour que tous ensemble nous allions vers un web plus rapide !</p>

  598. 

  599. <blockquote name="74b7" id="74b7" class="graf--blockquote graf-after--p graf--last"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Damien Jubeau</em></strong><br/>CEO et co-fondateur du service en ligne <a href="https://www.dareboost.com" data-href="https://www.dareboost.com" class="markup--anchor markup--blockquote-anchor" rel="nofollow"><strong class="markup--strong markup--blockquote-strong">dareboost.com</strong></a> (diagnostic automatique de la performance web et surveillance quotidienne des budgets de performance)</blockquote>

  600.   </article>

  601. </section>

  602. 

  603. 

  604. <nav id="jumpto">

  605.   <p>

  606.     <a href="/david/blog/">Accueil du blog</a> |

  607.     <a href="https://medium.com/@DamienJubeau/budget-de-performance-indispensable-rapidite-sites-web-a771922e89e8">Source originale</a> |

  608.     <a href="/david/stream/2019/">Accueil du flux</a>

  609.   </p>

  610. </nav>

  611. 

  612. <footer>

  613.   <div>

  614.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  615.     <p>

  616.       Bonjour/Hi!

  617.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  618.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  619.     </p>

  620.     <p>

  621.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  622.     </p>

  623.     

  624.     <p>

  625.       Voici quelques articles choisis :

  626.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  627.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  628.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  629.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  630.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  631.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  632.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  633.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  634.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  635.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  636.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  637.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  638.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  639.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  640.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  641.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  642.     </p>

  643.     <p>

  644.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  645.     </p>

  646.     <p>

  647.       Je ne traque pas ta navigation mais mon

  648.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  649.       conserve des logs d’accès.

  650.     </p>

  651.   </div>

  652. </footer>

  653. <script type="text/javascript">

  654.   ;(_ => {

  655.     const jumper = document.getElementById('jumper')

  656.     jumper.addEventListener('click', e => {

  657.       e.preventDefault()

  658.       const anchor = e.target.getAttribute('href')

  659.       const targetEl = document.getElementById(anchor.substring(1))

  660.       targetEl.scrollIntoView({behavior: 'smooth'})

  661.     })

  662.   })()

  663. </script>