davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>These 7 things are slowing down your site’s user experience (and you have no control over them) (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://www.webperformancetoday.com/2015/01/21/xx-things-slowing-site-control/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  These 7 things are slowing down your site’s user experience (and you have no control over them) (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://www.webperformancetoday.com/2015/01/21/xx-things-slowing-site-control/">Source originale du contenu</a></h3>
    <p>As a website owner, you have 100% control over your site, plus a hefty amount of control over the first and middle mile of the network your pages travel over. You can (and you should) optimize the heck out of your pages, invest in a killer back end, and deploy the best content delivery network that money can buy. These tactics put you in charge of several performance areas, which is great.</p>

<p>But when it comes to the last mile &#8212; or more specifically, the last few feet &#8212; matters are no longer in your hands.</p>

<p>Today, let&#8217;s review a handful of performance-leaching culprits that are outside your control &#8212; and which can add precious seconds to your load times.</p>

<h1>1. End user connection speed</h1>

<p>If you live in an urban center, then congratulations &#8212; you probably enjoy connections speeds of 20-30 Mbps or more. If you don&#8217;t live in an urban center, then you have my sympathy.</p>

<p>As someone who lives some distance from a major city, I can tell you that 1-3 Mbps is a (sadly) common occurrence in my house, especially during the internet rush hour when everyone in my neighborhood gets home and starts streaming movies and doing whatever else it is they do online. There’ve been many, many times when I’ve gotten incredibly frustrated waiting for a file to download or stream, and I’ve performed many, many speed tests with sub-3 Mbps results.</p>

<p>Oh look! Here&#8217;s one right now:</p>

<p><img class="aligncenter size-full wp-image-6356" src="http://3vavpsbeqbk19ao0rfgkqm17sj.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/out-of-control-connection.png" alt="Download speed test" width="795" height="385" /></p>

<p>I&#8217;ve gotten into long, heated debates with people (always city dwellers) who flat-out refuse to believe that THAT many people are really affected by poor connection speeds. Their arguments seem to be largely fueled by the fact that they&#8217;re operating with a limited view of connection speed data, which corroborates their own personal experience.</p>

<p>In all my research into US connection speeds, I’ve found that the numbers vary hugely depending on the source. At the highest end is OOKLA&#8217;s “household download index” that states <a href="http://www.netindex.com/download/2,1/United-States/" target="_blank">a typical US household connection is 30 Mbps</a>. My issue with OOKLA&#8217;s data is I can’t find specifics on how they gather it, or whether it&#8217;s based on average speeds or peak speeds. I suspect the latter, based on comparing their data to <a href="http://www.akamai.com/stateoftheinternet/" target="_blank">Akamai’s “state of the internet” reports</a>, which give numbers for both average and peak Mbps. OOKLA’s index loosely correlates to Akamai’s peak broadband numbers. According to Akamai, <em>average</em> broadband connection speeds run approximately 12-17 Mbps for the ten fastest states. The slowest states perform significantly worse, with Alaska trailing at 7.2 Mbps. (And at the risk of pointing out the obvious, this doesn&#8217;t mean everyone in Alaska consistently gets 7.2 Mbps. It means, for example, that while some people may enjoy up to 12-15 Mbps connections, there are others who, like me, struggle with 2-3 Mbps or worse.)</p>

<p>Another issue: When most agents report on connection speed, they tend to focus on broadband, which ignores a massive swath of the population. (Broadband is, by definition, an internet connection that is above 4 Mbps, regardless of the connection being used.) <strong>According to Akamai, in many states broadband adoption is only around 50%. And in roughly one out of ten states, broadband adoption rates are actually declining.</strong></p>

<p>Takeaway: Non-broadband users aren’t freakish outliers whom you should feel comfortable ignoring.<strong><br />
</strong></p>

<p>And that&#8217;s just desktop performance. Don&#8217;t even get me started on mobile.</p>

<h1>2. What the neighbours are downloading</h1>

<p>If, like me, you&#8217;re already at the low end of the connection speed spectrum, when your neighbours start streaming a movie or downloading a massive file, you REALLY feel it. I&#8217;ve been known to schedule my download/upload activities around the release of new episodes of <em>Game of Thrones</em> and <em>Breaking Bad</em>. Sad or savvy? Maybe a little bit of both.</p>

<p><img class="aligncenter size-full wp-image-6357" src="http://3vavpsbeqbk19ao0rfgkqm17sj.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/out-of-control-GOT.png" alt="Slow download speeds" width="795" height="450" /></p>

<h1> 3. How old their modem is</h1>

<p>I&#8217;ve yet to encounter an ISP that proactively reminds customers to upgrade their hardware. Most people use the same modem for between five to ten years, which guarantees they&#8217;re not experiencing optimal load times &#8212; even if they&#8217;re paying for high-speed internet.</p>

<p>Here&#8217;s why:</p>

<p>If your modem is five or more years old, then it pre-dates DOCSIS 3.0. (DOCSIS stands for Data Over Cable Service Interface Specification. It&#8217;s the international data transmission standard used by cable networks.) Back around 2010-2011, most cable companies made the switch from DOCSIS 2.0 to DOCSIS 3.0. If you care about performance, you should be using a DOCSIS 3.0 modem. Otherwise, you&#8217;ll never be able to fully leverage your high-speed plan (if you have one).</p>

<p>The funny (but not ha-ha funny) thing here is the fact that so many people have jumped on the high-speed bandwagon and are currently paying their ISPs for so-called high-speed internet. But without the right modem they&#8217;re not getting the full service they&#8217;ve paid for.</p>

<h1>4. How old their device is</h1>

<p>The average person replaces their machine every 4.5 years. In those 4.5 years, performance can seriously degrade &#8212; due to viruses or, most commonly, simply running low on memory. And while many people suspect that upgrading their memory would help, most folks consider themselves too unsavvy to actually do it. Instead, they suffer with poor performance until it gets so bad they finally replace their machine.</p>

<h1>5. How old their browser is</h1>

<p>You upgrade your browser religiously. Many people do not or cannot. (To illustrate: When Wine.com first became a Radware customer, one of their performance issues was that a significant portion of their customer base worked in the financial sector, which at the time was obligated to use IE 6 because it was the only browser compatible with specific legacy apps. These customers tended to visit the site from work, which inevitably led to a poor user experience until Wine.com was able to implement <a title="Radware FastView" href="http://www.radware.com/Products/FastView/" target="_blank"><strong>FastView</strong></a>.)</p>

<p>Each generation of browser offers performance gains over the previous generation. For example, according to Microsoft, IE 10 is 20% faster than IE 9. But according to StatCounter, <a href="http://gs.statcounter.com/#desktop-browser_version-US-monthly-201407-201412" target="_blank">roughly half of Internet Explorer users use IE 8 or 9</a>, missing out on IE 10&#8217;s performance boost.</p>

<h1>6. How they&#8217;re using (and abusing) their browser</h1>

<p>Browser age is just one issue. There are a number of other scenarios that can affect browser performance:</p>

<ul>
<li>Stress from having multiple tabs or windows open simultaneously.</li>
<li>Performance impact from toolbar add-ons. (Not all widgets affect performance, but some definitely do, particularly security plug-ins.)</li>
<li>Degradation over time. (The longer the browser remains open, the greater its likelihood of slowing down and crashing.)</li>
<li>Variable performance when visiting sites that use HTML5 or Flash, or when watching videos. (Some browsers handle some content types better than others.)</li>
</ul>

<p><img class="aligncenter size-full wp-image-6358" src="http://3vavpsbeqbk19ao0rfgkqm17sj.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/out-of-control-browser.jpg" alt="Too many browser tabs. I've made a huge mistake." width="700" height="391" /></p>

<p>Most people are guilty of keeping the same browser window open, racking up a dozen or so tabs, and living with the slow performance degradation that ensues &#8212; until the browser finally crashes. According to this Lifehacker post, <a href="http://lifehacker.com/5984149/why-you-should-never-have-more-than-nine-browser-tabs-open" target="_blank">you should never have more than nine browser tabs open at the same time</a>. Raise your hand if you have more than nine tabs open right now. *raises hand*</p>

<h1>7. Running other applications</h1>

<p>Running too many applications at the same time affects performance. But most non-techie internet users don&#8217;t know this.</p>

<p>Security solutions are a good example of this. Antivirus software scans incoming files to identify and eliminate viruses and other malware such as adware, spyware, trojan horses, etc. It does this by analyzing all files coming through your browser. Like firewalls and security products, antivirus software operates in realtime, meaning that files are paused for inspection before being permitted to download.</p>

<p>Because of this inspection, a performance penalty is inevitable and unavoidable. The extent of the penalty depends on the software and on the composition of the page/resource being rendered in the browser.</p>

<h1>How do all these factors add up, performance-wise?</h1>

<p>Consider this scenario:</p>

<p style="padding-left: 30px;">Someone visits your site, using a four-year-old PC running IE9 with a handful of nifty toolbar add-ons, including a parental control plug-in (this is a shared computer) and a couple of security plug-ins, all of which are significantly hurting performance. They think they have high-speed internet because they&#8217;re paying their service provider for it, but they&#8217;re using a six-year-old modem. They tend to leave all their applications on, for easy access. They only restart their machine when it&#8217;s running so slowly that it becomes intolerable &#8212; or when it crashes. They keep the same browser window open for days or weeks on end, and they currently have eleven tabs open. They&#8217;re concerned about internet security, so they&#8217;re also running antivirus software.</p>

<p><strong>All of these factors can add up &#8212; not just to extra milliseconds, but to extra <em>seconds</em> of user time.</strong> Unfortunately, when people are unhappy with how fast a page is loading, the number one target for their blame is the site. Fair? No. It&#8217;s also not fair that <a title="6 Scary Things You Should Know About the Speed of Your Website [INFOGRAPHIC]" href="http://www.webperformancetoday.com/2014/10/30/scary-ecommerce-web-performance-infographic/" target="_blank"><strong>these lost seconds result in lost revenue for your company</strong></a>.</p>

<h1>Takeaway</h1>

<p>As I said at the top of this post, you have no control over potential problems caused by any of these factors. But that doesn’t mean you shouldn’t arm yourself with the knowledge that problems are occurring.</p>

<p>While you can&#8217;t control the end-user environment, you have tons of control over your pages. Resource consolidation, compression, smarter browser caching &#8212; these are just a few of the techniques you can leverage to mitigate the damage done by things like poor connection speeds and old hardware.</p>

<p>This is also why it&#8217;s crucial to not rely on your own experience with your site. It&#8217;s also why you can&#8217;t rely on synthetic tests to give you a true sense of how your pages perform. (Don&#8217;t get me wrong: synthetic tests definitely have value, but they tend to skew toward the optimistic end of the spectrum.) You need real user monitoring that gives you full visibility into how actual people are experiencing your site.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://www.webperformancetoday.com/2015/01/21/xx-things-slowing-site-control/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>