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>Smaller, Faster Websites (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="https://bocoup.com/weblog/smaller-faster-websites">

<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>
  Smaller, Faster Websites (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://bocoup.com/weblog/smaller-faster-websites">Source originale du contenu</a></h3>
    <p><img src="https://static2.bocoup.com/assets/2015/11/05183156/title.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183156/title-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183156/title-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183156/title-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183156/title-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183156/title-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183156/title.jpg 1200w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>My name is Mat Marquis, of Marquis Home Renovation. I don’t care about websites. I’m a carpenter.</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/stationwagon.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/stationwagon-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/stationwagon-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/stationwagon-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/stationwagon-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/stationwagon-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/stationwagon.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>That, you’ll notice, is why my slide deck looks like the side of the most badass station wagon you’ve ever seen.</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/bench.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/bench-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/bench-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/bench-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/bench-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/bench-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/bench.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>As for where I work, it’s here. This is my actual workbench; it’s older than I am. Those are my tools; they’re also older than I am. That pile of oak and mahogany on the right is the start of my new coffee table.</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/bocoup.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/bocoup-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/bocoup-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/bocoup-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/bocoup-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/bocoup-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/bocoup.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>As for making websites or whatever, I work at Bocoup—formerly, <a href="https://filamentgroup.com">Filament Group</a>. I’m an editor of the <a href="http://www.w3.org/TR/2015/WD-html51-20151007/">W3C HTML5 specification</a>. I make websites.</p>

<p>But I’m not here to talk about me. You’re not here for me. You’re here with purpose; you’re here to <em>learn</em>, and I am here to teach you…</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/table.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/table-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/table-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/table-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/table-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/table-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/table.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>…about furniture. This is a Queen Anne tea table, thought to be made in either New England or Ireland circa 1750. It came right at the advent of the Federal style that was gaining popularity on the tail of Thomas Chippendale’s much more ornate work—though you <em>could</em> argue that his wide use of mahogany is what <em>led</em> to the Federal style, where woodworkers began to favor simpler designs that better highlighted unique grain patterns!</p>

<p>I’ll pause for a second so you can all get some notes down, here. … No?</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/coffee.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/coffee-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/coffee-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/coffee-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/coffee-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/coffee-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/coffee.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>No, okay—you don’t care. It’s a table. It keeps your coffee off the floor. What this table is—for almost everyone here, I’d bet—is its <em>purpose</em>.</p>

<p>Likewise, you’re here to learn about websites; who cares about me, or about tables? Up here, I’m kinda reduced to my purpose. I’m just a vehicle for transferring information.</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/website.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/website-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/website-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/website-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/website-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/website-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/website.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>So, let’s talk about websites—but not the way I’d talk about furniture, if you gave me half a chance. This is about the user that just wants to keep their coffee off the floor. They don’t care about <strong>the website</strong>. They don’t care about frameworks; they don’t care about browsers. They want their information and they want to get out. A website, to them, is its purpose.</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/4th-wall.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/4th-wall-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/4th-wall-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/4th-wall-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/4th-wall-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/4th-wall-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/4th-wall.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web <em>app</em>. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”</p>

<p>We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job. We want the user to think about The Website—to sympathize with <em>us</em>—over their reason for being there. We’re making them sit through a lecture about furniture design every time they try to sit down in a chair.</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/ikea.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/ikea-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/ikea-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/ikea-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/ikea-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/ikea-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/ikea.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>When we prize our own convenience over craft, we’re building a web for us, the developers. We’re building a web that’s easy to assemble but lousy to use.</p>

<p>That’s not what the web is to me, though—that’s not what this <em>job</em> is, to me. The meaning I take from this gig doesn’t come from getting a div to show up in the right place. It comes from knowing that working just a little harder can mean that entire populations just setting foot on the web for the first time will be able to tap into the collected knowledge of the whole of mankind.</p>

<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/lab.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/lab-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/lab-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/lab-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/lab-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/lab-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/lab.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<p>We can make this a job where we make something only work as much as it has to in the handful of easy browsers someone put on a list on our desk, or we can make it about working harder than that.</p>

<p>We can make up our minds that we want everything we do to nudge the entire web toward something better, faster, more inclusive. We can build for the web’s purpose: connecting people all over the world. And when we put in that work, we get better at it; we get faster at it. We start doing things the right way by default. We get better. We make that the job.</p>

<p>So, we’re not gonna talk about you and me, and we’re not gonna talk about furniture. Let’s talk about how real people around the world use the web.</p>

<p>
<figure data-toggle="table">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/device-use.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/device-use-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/device-use-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/device-use-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/device-use-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/device-use-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/device-use.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>

<figcaption><a href="http://gs.statcounter.com/#all-comparison-ww-monthly-201408-201408-bar">http://gs.statcounter.com/#all-comparison-ww-monthly-201408-201408-bar</a><br />
<table>
<thead>
<tr>
<th scope="col">Desktop Traffic</th>
<th scope="col">Mobile and Tablet Traffic</th>
</tr>
<tbody>
<tr>
<td>64.58%</td>
<td>35.3%</td>
</tr>
</tbody>
</table>
</figcaption>

<p></figure>
<p>Mobile and tablets account for 35.3% of all internet traffic worldwide, and that figure is steadily increasing. In many parts of the world, “desktop” traffic is practically nonexistent. Building massive, resource-heavy sites means excluding millions of users that have only ever known the web by way of feature phones or slightly better—users paying for every kilobyte they consume; users that already have to keep tabs on which sites they need to avoid day-to-day because of the cost of visiting them. I don’t mean some nebulous hand-wavy “bandwidth cost,” either—I mean actual economic cost.</p>
<p>
<figure>
    <img src="https://static2.bocoup.com/assets/2015/11/05183211/network-use.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/network-use-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/network-use-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/network-use-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/network-use-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/network-use-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/network-use.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
            <a href="http://gs.statcounter.com/#all-comparison-ww-monthly-201408-201408-bar">http://gs.statcounter.com/#all-comparison-ww-monthly-201408-201408-bar</a><br />
    </figcaption>
</figure>
<p>When you take us out of the equation, the world overwhelmingly views the web via EDGE connection. And even here at home, the prevalent mobile connection is 3G at best.</p>
<p>
<figure>
    <img src="https://static2.bocoup.com/assets/2015/11/05183211/subscriptions-edge.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/subscriptions-edge-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/subscriptions-edge-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/subscriptions-edge-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/subscriptions-edge-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/subscriptions-edge-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/subscriptions-edge.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
        <a href="ericsson.com/res/docs/2014/ericsson-mobility-report-november-2014.pdf">ericsson.com/res/docs/2014/ericsson-mobility-report-november-2014.pdf</a><br />
    </figcaption>
</figure>
<p>In just the third quarter of 2014, there were one hundred and ten million new mobile subscriptions worldwide. 102 million of these were in areas where the prevalent network is EDGE.</p>
<p>But let’s be honest: these figures are easy to wave off by saying “well, those aren’t our target markets. Here at home, this isn’t really a problem.”</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/smartphones-only.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/smartphones-only-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/smartphones-only-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/smartphones-only-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/smartphones-only-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/smartphones-only-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/smartphones-only.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<a href="http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/#smartphones">http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/#smartphones</a><br />
</figcaption>
</figure>
<p>Well, as it stands right now, some twenty percent of US users use their smartphones almost exclusively for internet access—they either have no broadband service, or very limited access to the internet otherwise.</p>
<p>7% of those users have absolutely no access to the internet outside of their smartphones, and that’s the direction things are trending.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/max-data.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/max-data-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/max-data-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/max-data-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/max-data-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/max-data-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/max-data.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<a href="http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/#smartphones">http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/#smartphones</a><br />
</figcaption>
</figure>
<p>Meanwhile, almost a third of those smartphone-dependent users in the US frequently run up against their monthly data allowance.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/smaller-websites.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/smaller-websites-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/smaller-websites-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/smaller-websites-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/smaller-websites-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/smaller-websites-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/smaller-websites.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Huge, slow websites mean not only letting our target audience down, but making it impossible to expand our reach beyond that audience.</p>
<p>
<figure data-toggle="table">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/average-size.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/average-size-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/average-size-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/average-size-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/average-size-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/average-size-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/average-size.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://httparchive.org/interesting.php?a=All&l=Apr%2015%202015">http://httparchive.org/interesting.php?a=All&#038;l=Apr%2015%202015</a></p>
<table>
<thead>
<tr>
<th scope="col">CSS</th>
<th scope="col">JavaScript</th>
<th scope="col">HTML</th>
<th scope="col">Fonts</th>
<th scope="col">Other</th>
<th scope="col">Images</th>
</tr>
</thead>
<tbody>
<tr>
<td>61KB</td>
<td>318KB</td>
<td>61KB</td>
<td>93KB</td>
<td>152KB</td>
<td>1297KB</td>
</tr>
</tbody>
</table>
</figcaption>
</figure>
<p>The average webpage’s total transfer size is ridiculous. As of a few months ago, we broke the two megabyte mark—and images alone account for more than sixty percent of that.</p>
<p>
<figure data-toggle="table">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/asset-size.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/asset-size-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/asset-size-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/asset-size-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/asset-size-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/asset-size-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/asset-size.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://httparchive.org/interesting.php?a=All&l=Apr%2015%202015">http://httparchive.org/interesting.php?a=All&#038;l=Apr%2015%202015</a><br />
<table>
<tr>
<th scope="col">Date</th>
<th scope="col">CSS</th>
<th scope="col">JavaScript</th>
<th scope="col">Images</th>
</tr>
<tr>
<th scope="row">April 15, 2013</td>
<td>36KB</td>
<td>221KB</td>
<td>856KB</td>
</tr>
<tr>
<th scope="row">January 1, 2014</td>
<td>46KB</td>
<td>272KB</td>
<td>1028KB</td>
</tr>
<tr>
<th scope="row">April 15, 2014</td>
<td>50KB</td>
<td>282KB</td>
<td>1104KB</td>
</tr>
<tr>
<th scope="row">January 1, 2015</td>
<td>58KB</td>
<td>295KB</td>
<td>1248KB</td>
</tr>
<tr>
<th scope="row">April 15, 2015</td>
<td>61KB</td>
<td>318KB</td>
<td>1297KB</td>
</tr>
</table>
</figcaption>
</figure>
<p>Now, over the past few years, the average weight of our CSS has barely budged—adding a couple of media queries isn’t to blame for this new page weight.</p>
<p>Our JavaScript has crept up a bit, but given the incredibly rich interactions we’ve seen on the web in recent years, a few kilobytes seems pretty reasonable.</p>
<p>Images, though—those are doing real damage, and for a while things were looking grim. I’ve cited these figures before, in talks; this same chart, in fact, updated from month to month. The reason I’m showing it again here, today, is that something has changed. The average webpage’s image weight is still increasing, but it’s just starting to slow down.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/etsy.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/etsy-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/etsy-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/etsy-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/etsy-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/etsy-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/etsy.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<blockquote>
            Etsy saw an increased bounce rate of 12% on mobile if we added 160k of images to a page.<br />
        <cite><a href="https://twitter.com/lara_hogan/status/444250723614605312">Lara Hogan</a></cite>
          </p></blockquote>
</figcaption>
</figure>
<p>It’s a good thing, too. No matter how nice they are, putting a huge, bandwidth-obliterating wall of images between your users and the thing they came to your site to do will absolutely drive them away. 160 kilobytes is almost nothing to us, but enough to increase Etsy’s bounce rates by more than ten percent.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/respimg-stat.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/respimg-stat-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/respimg-stat-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/respimg-stat-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/respimg-stat-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/respimg-stat-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/respimg-stat.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<blockquote><p>
    It is extremely rare where one optimization lets us knock off such a significant amount of page weight, but here we are staring one such technique right in the face. 72% less image weight.<br />
<a href="https://twitter.com/tkadlec">Tim Kadlec</a>, <cite><a href="http://timkadlec.com/2013/06/why-we-need-responsive-images/">Why We Need Responsive Images</a></cite>
</p></blockquote>
</figcaption>
</figure>
<p>Now, I don’t know this for a fact, but I sincerely hope that the slowing trend toward higher image weights comes from all the new, smarter image delivery options that fall under the “responsive images” umbrella.</p>
<p>
<figure>
  <img src="https://static2.bocoup.com/assets/2015/11/05183211/respimg-ala.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/respimg-ala-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/respimg-ala-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/respimg-ala-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/respimg-ala-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/respimg-ala-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/respimg-ala.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need">Responsive Images: How they Almost Worked and What We Need</a></figcaption>
</figure>
<p>For a lot of you, native responsive images won’t be huge news. Some of you might have heard whispers about a potential solution coming along—or a fight between the WHATWG’s <code>srcset</code> and the <code>picture</code> element put forth by a scrappy band of web standards rebels and their handsome, charismatic leader. <em>Cough.</em></p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/respimg-spec.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/respimg-spec-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/respimg-spec-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/respimg-spec-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/respimg-spec-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/respimg-spec-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/respimg-spec.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://html.spec.whatwg.org/multipage/embedded-content.html">The HTML Specification</a></figcaption>
</figure>
<p>All that dust has settled, and we got much more out of it than one new element; we got an entire suite of enhancements to the <code>img</code> element to go with it. Native options for dealing with Retina, with the size of an image in a layout, even dealing with alternate image formats—something we’ve never been able to do natively, prior to this year.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/hbr-size.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/hbr-size-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/hbr-size-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/hbr-size-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/hbr-size-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/hbr-size-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/hbr-size.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="https://hbr.org">https://hbr.org</a></figcaption>
</figure>
<p>We’re implementing some of these new markup patterns on my current project: the Harvard Business Review website. Unfortunately, their responsive redesign last November didn’t do anything to tailor assets to varying user contexts. Regardless of your viewport size or resolution, an article page always came with all the same assets. A full two megabytes of this page are in images.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/same-data.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/same-data-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/same-data-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/same-data-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/same-data-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/same-data-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/same-data.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://www.guypo.com/real-world-rwd-performance-take-2/">Real World RWD Performance &#8211; Take 2</a></figcaption>
</figure>
<p>And I don’t mean that to sound like a knock on HBR; they did a great job on this redesign, and they’re not alone in these issues: 72% of responsive sites are sending roughly the same data to users regardless of their context. Only about six percent of responsive sites are taking <em>significant</em> steps to tailor assets to mobile devices.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/dpr.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/dpr-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/dpr-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/dpr-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/dpr-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/dpr-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/dpr.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Any work we do with responsive images is more or less gonna break down to some combination of these four use cases. The “device pixel ratio” use case deals only with the pixel density of a user’s display.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/dpr-illus.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/dpr-illus-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/dpr-illus-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/dpr-illus-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/dpr-illus-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/dpr-illus-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/dpr-illus.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>These aren’t images that are gonna change in size across our breakpoints, or at least they won’t change much.</p>
<p>We just want high resolution versions for high resolution screens, and low resolution versions for low resolution screens.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/dpr-syntax.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/dpr-syntax-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/dpr-syntax-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/dpr-syntax-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/dpr-syntax-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/dpr-syntax-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/dpr-syntax.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;img src="standard.jpg" srcset="high-def.jpg 2x" alt="…"&gt;</code></pre>
</figcaption>
</figure>
<p>This syntax is pretty cut-and-dry. We use the <code>img</code> element we’ve come to know and love, complete with an old-fashioned <code>src</code> attribute pointing to the standard definition version of an image.</p>
<p>The new <code>srcset</code> attribute then contains the path to the larger source, and <code>2x</code>—signaling to the browser that this source should be used on displays with twice the pixel density.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/srcset-suggestion.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/srcset-suggestion-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-suggestion-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-suggestion-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/srcset-suggestion-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-suggestion-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-suggestion.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<blockquote>Think of <code>srcset</code> as suggestions or just extra information to help a browser decide. Ultimately it can do what it thinks is right.<br />
<a href="https://twitter.com/csstricks">Chris Coyier</a>, <cite><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Responsive Images: If You’re Just Changing Resolutions, Use <code>srcset</code></a></cite></p></blockquote>
</figcaption>
</figure>
<p>From a syntax standpoint: saying “do X on a high resolution display” is easy, but knowing when a user <em>wants</em> high resolution images is impossible.</p>
<p>If I’m on a Retina MacBook but tethered to a 3G connection, I probably don’t want massive high-resolution images. So, unlike media queries: <code>srcset</code> is specced as a set of <em>suggestions</em>, telling the browser “here are the sources most appropriate for your display, take them or leave them.” By acting as a suggestion, <code>srcset</code> would allow browsers to introduce user settings like “always give me low-res images” or “give me high-res images as bandwidth permits.”</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/types.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/types-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/types-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/types-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/types-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/types-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/types.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>The “types” use case isn’t concerned with viewport size or resolution—it’s concerned with the image formats supported by the user’s browser. It allows us to use the single-request fallback pattern already built into <code>picture</code> so we can serve alternate image <em>formats</em> in smarter ways.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/webp.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/webp-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/webp-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/webp-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/webp-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/webp-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/webp.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<blockquote>We observed that the average WebP file size is 25%-34% smaller compared to JPEG file size.<cite><a href="https://developers.google.com/speed/webp/docs/webp_study">Google’s WebP Compression Study</a></cite></p></blockquote>
</figcaption>
</figure>
<p>Newer image formats like WebP and SVG come with tremendous potential for savings, but they also come with a major catch: a new image format can’t come with a built-in fallback pattern.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/old-types.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/old-types-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/old-types-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/old-types-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/old-types-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/old-types-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/old-types.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;img src="image.webp"
 data-fallback="image.jpg"
 onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
 alt="…"&gt;</code></pre>
</figcaption>
</figure>
<p>The best solutions we had for this all involved the browsing making a request for the file before determining whether we need to throw it away. That means an optimization in browsers that do have native support for the new format, but more overhead for browsers that don’t.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/new-types.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/new-types-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/new-types-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/new-types-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/new-types-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/new-types-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/new-types.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;picture&gt;
  &lt;source srcset="image.webp" type="image/webp"&gt;
  &lt;img src="image.jpg" alt="…"&gt;
&lt;/picture&gt;</code></pre>
</figcaption>
</figure>
<p>But the <code>picture</code> element was introduced for the sake of applying custom logic to image requests before they even go out—and the fallback pattern is baked in.</p>
<p>If the <code>picture</code> element is supported, we can use a <code>type</code> attribute on a <code>source</code> element to tell the browser “only load this source if you support this MIME type, and if not, continue on to load the fallback image.”</p>
<p>In the event that the new markup <em>isn’t</em> recognized, it all gets thrown away except for the one part the browser will recognize: the fallback <code>img</code> element inside <code>picture</code>.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/sizes.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/sizes-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/sizes-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/sizes-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/sizes-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/sizes-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/sizes.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>The <code>sizes</code> attribute is a big deal. It’s the culmination of three years of responsive images discussion, by which I absolutely mean “mailing list arguments.” We all wanted a way to provide a set of image sources that are selected only when they’re appropriate for the size of the image in the layout <em>and</em> all of the user’s browsing conditions—device pixel ratio, bandwidth, all of it. That’s a tall order from a spec standpoint, but couldn’t be simpler from a developer standpoint: we wanna have our CMS generate a couple of different cuts of an image and some markup to match, and we don’t want to think about responsive images much further than that.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/hbr-sizes.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/hbr-sizes-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/hbr-sizes-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/hbr-sizes-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/hbr-sizes-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/hbr-sizes-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/hbr-sizes.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>We’ll use this markup in any situation where don’t need explicit control over image sources—so, all the sources are identical except for their sizes.</p>
<p>The lede image on HBR article pages is a good example of this. We’re not doing anything to change the cropping or zooming of the image across our breakpoints—we’re just scaling a large image to fit the layout. So, plain ol’ <code>max-width: 100%</code>.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/srcset-sizes.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/srcset-sizes-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-sizes-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-sizes-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/srcset-sizes-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-sizes-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-sizes.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;img
  sizes="100vw" srcset="small.jpg 400w, med.jpg 800w, big.jpg 1600w"
  src="small.jpg" alt="…"&gt;</code></pre>
</figcaption>
</figure>
<p>The <code>sizes</code> syntax—in concert with <code>srcset</code>—allows us to provide the browser with a couple of sources and some information about them, then let it completely take the wheel. The viewport size and pixel density—all the information the browser has at hand is factored in, and the best applicable source is chosen automatically. This also means there’s room for the browser to get creative—Firefox and Chrome’s implementations will never load a smaller size than they already have cached. What would be the point in loading another source, when the user already has an identical image that works for those viewport sizes?</p>
<p>It’s a little tricky to understand at a glance, though. Unlike the <code>1x</code>/<code>2x</code> syntax we were using with <code>srcset</code> earlier, we’re not using it to tell the browser what to do with our sources. Instead, we’re just giving it a list of the sources and their inherent sizes. The <code>sizes</code> attribute then tells the browser how those sources are meant to be displayed, relative to the viewport—<code>100vw</code> here, for example, means that this image will occupy one hundred percent of the viewport.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/srcset-w-math.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/srcset-w-math-383x216.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-w-math-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-w-math-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/srcset-w-math-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-w-math-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-w-math.jpg 2552w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;img
  sizes="100vw" srcset="small.jpg <span aria-labelledby="four">400w</span>, med.jpg <span aria-labelledby="four">800w</span>, big.jpg <span aria-labelledby="four">1600w</span>"
  src="small.jpg" alt="…"&gt;</code></pre>
<div role="math" id="four" aria-label="Four hundred divided by three hundred and twenty equals one point two five">
<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>400</mn><mo>/</mo><mn>320</mn><mo>=</mo><mn>1.25</mn></math>
</div>
<div role="math" id="eight" aria-label="Eight hundred divided by three hundred and twenty equals two point five">
<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>800</mn><mo>/</mo><mn>320</mn><mo>=</mo><mn>2.5</mn></math>
</div>
<div role="math" id="sixteen" aria-label="Sixteen hundred divided by three hundred and twenty equals five">
<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1600</mn><mo>/</mo><mn>320</mn><mo>=</mo><mn>5</mn></math>
</div>
</figcaption>
</figure>
<p>When the browser encounters this markup, it does a little familiar responsive web design math: target divided by context, just like when we’re putting our layouts together.</p>
<p>Let’s say we’re looking at this markup on an iPhone, with a 320 pixel wide viewport. Our smallest image has an inherent size of 400 pixels, so 400/320 is 1.25. The next image up is 800 pixels wide, and we do the same thing—and so on.</p>
<p>The math we’re doing here is what the browser does when it encounters this markup: it takes that <code>sizes</code> value, relative to the viewport, and divides all the image source sizes against it.</p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/srcset-calc.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/srcset-calc-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-calc-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-calc-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/srcset-calc-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-calc-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-calc.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;img
  srcset="small.jpg 1.25x, med.jpg 2.5x, big.jpg 5x"
  src="small.jpg" alt="…"&gt;</code></pre>
</figcaption>
</figure>
<p>These calculated values then work the same way as the 1x and 2x syntax that we’d write out by hand, but <em>specific to the user’s viewport size</em>. If we were on a Retina iPhone with a 320 pixel viewport, the browser would choose the source that calculates to 2.5x—the closest match to 2x. If we were on a non-Retina iPhone, the browser would serve us the smallest image.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/srcset-calc-640.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/srcset-calc-640-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-calc-640-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-calc-640-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/srcset-calc-640-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/srcset-calc-640-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/srcset-calc-640.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;img
  srcset="small.jpg 1.25x, med.jpg 2.5x, big.jpg 5x"
  src="small.jpg" alt="…"&gt;</code></pre>
</figcaption>
</figure>
<p>If we were to view that syntax on a 640px display, the results of all that math would end up completely different.</p>
<p>Now the smallest version would never match, since it’s too small for a 640 pixel wide viewport. The medium source would match on low-resolution devices, and the biggest source would match on high-resolution devices. And because we’re using <code>srcset</code>, these are all <em>suggestions</em> to the browser—once there’s an option for the user to override these suggestions through a preference or a bandwidth limit, that gets factored in as well.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/hbr-sizes-value.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/hbr-sizes-value-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/hbr-sizes-value-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/hbr-sizes-value-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/hbr-sizes-value-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/hbr-sizes-value-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/hbr-sizes-value.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;img
   sizes="(min-width: 48em) 55vw, 97vw"
   srcset="small.jpg 400w,
           medium.jpg 850w,
           large.jpg 1200w"
   src="small.jpg"
   alt="…"&gt;</code></pre>
</figcaption>
</figure>
<p>A <code>sizes</code> attribute with <code>100vw</code> doesn’t make sense on the HBR site, though. These images are never one hundred percent of the viewport—in fact, the size it occupies in the viewport changes once.</p>
<p>Luckily, <code>sizes</code> allows us to specify all the information about the image’s breakpoints that we could possibly need—using good old-fashioned media queries. This is some unruly-looking markup, I know, but the effect it has is amazing.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/eportis.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/eportis-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/eportis-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/eportis-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/eportis-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/eportis-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/eportis.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://ericportis.com/posts/2014/srcset-sizes/">http://ericportis.com/posts/2014/srcset-sizes/</a></figcaption>
</figure>
<p>It’s a lot to make sense of all at once—I had to try it out for myself a few times before I got the hang of it, and I helped write the spec. Once it clicks, though, you realize that it allows you to generate a couple of image sources, give the browser a little bit of information, and walk away—you don’t need to know how the browser makes its decisions. In fact, we <em>can’t</em> know. And that’s okay; in fact, that’s a <em>feature</em>.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/art-direction.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/art-direction-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/art-direction-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/art-direction-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/art-direction-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/art-direction-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/art-direction.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Since the very first incarnation of the <code>picture</code> element—some three years ago, now—we’ve been looking to solve the “art direction” use case. It isn’t anywhere near as common as device pixel ratio or sizes; in fact, we’re not using it on HBR at all.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/wwf.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/wwf-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/wwf-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/wwf-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/wwf-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/wwf-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/wwf.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Art direction comes into play whenever you want to specify an alternate version of an image for different viewports—different cropping and zooming to best represent the subject of an image in different layouts. We could do this with CSS, but it wouldn’t allow us the finely grained control we might need depending on the subject of the image—we might not always want to zoom in on the center of the image, or know how much we can safely crop off the sides.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/picture.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/picture-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/picture-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/picture-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/picture-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/picture-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/picture.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;picture&gt;
  &lt;source media="(min-width: 60em)" srcset="large.jpg"&gt;
  &lt;source media="(min-width: 40em)" srcset="medium.jpg"&gt;
  &lt;img src="small.jpg" alt="…"&gt;
&lt;/picture&gt;</code></pre>
</figcaption>
</figure>
<p>This markup will look real familiar to anyone that followed the entire responsive images saga: it’s the same markup Bruce Lawson originally proposed when we first started thinking these problems through. Multiple <code>source</code> elements inside of a <code>picture</code> element wrapper—just like the <code>video</code> element—with a <code>media</code> attribute telling the browser when they should be applied.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/picture-min.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/picture-min-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/picture-min-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/picture-min-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/picture-min-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/picture-min-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/picture-min.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;picture&gt;
  &lt;source media="(min-width: 800px)" srcset="pic-big.jpg"&gt;
  <strong>&lt;source media="(min-width: 400px)" srcset="pic-med.jpg"&gt;</strong>
  &lt;img src="small.jpg" alt="…"&gt;
&lt;/picture&gt;</code></pre>
<p>On a device with 600px-wide display, the medium source is selected.</p>
</figcaption>
</figure>
<p>The first source with a <code>media</code> attribute that matches the viewport size will be selected. If we’re using <code>min-width</code> media queries, we want to have our largest sources first.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/picture-fallbk.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/picture-fallbk-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/picture-fallbk-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/picture-fallbk-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/picture-fallbk-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/picture-fallbk-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/picture-fallbk.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;picture&gt;
  &lt;source media="(min-width: 800px)" srcset="pic-big.jpg"&gt;
  &lt;source media="(min-width: 400px)" srcset="pic-med.jpg"&gt;
  <strong>&lt;img src="small.jpg" alt="…"&gt;</strong>
&lt;/picture&gt;</code></pre>
<p>On a device with 320px-wide display, the fallback <code>img</code> is selected.</p>
</figcaption>
</figure>
<p>If none of the <code>source</code> elements match, the fallback <code>img</code> is loaded as the default source—no user ends up left without an image.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/sizer-soze.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/sizer-soze-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/sizer-soze-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/sizer-soze-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/sizer-soze-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/sizer-soze-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/sizer-soze.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://SizerSoze.org">SizerSoze.org</a></figcaption>
</figure>
<p>What all these different syntaxes have in common is that they all give us options for delivering only the image sources that are most appropriate to a user’s context. For a user on a 320 pixel wide display, that will all add up to reducing the image weight of the HBR homepage by an estimated eighty eight percent. We’ve still got some work to do, and none of this is live just yet—but as far as the markup goes, this work took one of us a couple of hours. It’s complicated at first, sure, but once it clicks, a little bit of work here goes a long way for our users.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/support.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/support-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/support-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/support-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/support-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/support-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/support.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<a href="http://caniuse.com/#search=srcset">caniuse: <code>srcset</code></a><br />
<a href="http://caniuse.com/#search=picture">caniuse: <code>picture</code></a><br />
</figcaption>
</figure>
<p>As new as these standards are, the list of supported browsers is growing fast. All these syntaxes have been available since Chrome 38, Opera 27, and Firefox 38 (with a few caveats). Last but not least: the first version of Microsoft Edge will ship with about half of these features.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/picturefill.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/picturefill-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/picturefill-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/picturefill-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/picturefill-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/picturefill-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/picturefill.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="http://picturefill.responsiveimages.org">Picturefill</a></figcaption>
</figure>
<p>For browsers that don’t yet support any or all of these syntaxes, there’s a polyfill that has us all covered. Scott Jehl wrote a script that mimicked the behavior of the <code>picture</code> element way back when we were writing the original spec, just to get our heads around how it might work. Since then, that script has evolved into a full-blown responsive images polyfill. <code>picture</code>, <code>srcset</code>, <code>sizes</code>, <code>types</code>, all of it.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/faster-websites.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/faster-websites-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/faster-websites-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/faster-websites-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/faster-websites-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/faster-websites-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/faster-websites.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Now that our websites are smaller, we can focus on making them even faster. And there’s sort of a plot twist here: when we talk about performance on the web, we’re not necessarily talking about making things go faster, like so many Vin Diesels. More often than not, we’re talking about <em>perceived</em> performance—making the site look and feel ready, even if it isn’t completely done loading out assets.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/criticalcss.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/criticalcss-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/criticalcss-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/criticalcss-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/criticalcss-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/criticalcss-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/criticalcss.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Even though they’re some of the smallest requests on the front end, requests for external stylesheets can have the biggest impact on the time it takes a page to render.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/blocking.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/blocking-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/blocking-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/blocking-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/blocking-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/blocking-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/blocking.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;head&gt;
  …
  &lt;link href="all.css" rel="stylesheet"&gt;
&lt;/head&gt;</code></pre>
</figcaption>
</figure>
<p>When we talk about performance, you’ll hear a lot of talk about “blocking requests”—meaning that the page won’t even start to render until those assets have been requested and fully transferred. There’s a good reason for that: if our CSS didn’t block, we’d see flashes of unstyled content as the page loaded—a flash of plain text before the CSS is applied. But for assets that might not be necessary right away, we could drastically improve perceived performance by avoiding that blocking behavior.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/media-attr.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/media-attr-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/media-attr-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/media-attr-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/media-attr-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/media-attr-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/media-attr.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;head&gt;
  …
  &lt;link href="all.css" rel="stylesheet"&gt; 
  &lt;link href="medium.css" media="(min-width: 35em)" rel="stylesheet"&gt; 
  &lt;link href="large.css" media="(min-width: 55em)" rel="stylesheet"&gt;
&lt;/head&gt;</code></pre>
</figcaption>
</figure>
<p>In a perfect world, we’d be able to use the <code>media</code> attribute that we’ve come to know and love from responsive images to serve only the stylesheets that apply to the user’s browsing context.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/all-downloaded.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/all-downloaded-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/all-downloaded-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/all-downloaded-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/all-downloaded-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/all-downloaded-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/all-downloaded.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<table class="downloaded-table">
<thead>
<tr>
<th><code>media="…"</code></th>
<th>iOS</th>
<th>Android</th>
<th>Chrome</th>
<th>IE10</th>
<th>Firefox</th>
<th>Opera</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code>only all</code></th>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
</tr>
<tr>
<th scope="row"><code>handheld</code></th>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
</tr>
<tr>
<th scope="row"><code>tv</code></th>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
</tr>
<tr>
<th scope="row"><code>(min-width: 7777px)</code></th>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
</tr>
<tr>
<th scope="row"><code>(min-device-width: 9999999in)</code></th>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
</tr>
<tr>
<th scope="row"><code>(min-device-pixel-ratio: six?)</code></th>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
</tr>
<tr>
<th scope="row"><code>(dinosaurs: friggin’ sweet)</code></th>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
<td>Downloaded</td>
</tr>
<tbody>
</table>
</figcaption>
</figure>
<p>That doesn’t work, and there’s a good reason for that: media queries are designed to respond to changes in context; window size, resolution, and so on. If we didn’t load a stylesheet until a media query applied, we could end up with a flash of unstyled content whenever the user’s context changed. Worse, if their connection dropped out while browsing, they could get stuck with no styles at all.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/blocking-illus.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/blocking-illus-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/blocking-illus-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/blocking-illus-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/blocking-illus-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/blocking-illus-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/blocking-illus.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Even if a stylesheet doesn’t apply—and could never apply—it has to block the rendering of the page until that asset has been fully downloaded. We end up making users wait for assets they might never need.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/papayawhip.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/papayawhip-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/papayawhip-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/papayawhip-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/papayawhip-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/papayawhip-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/papayawhip.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;head&gt;
  …
  &lt;style&gt;
    body {
      background: papayawhip;
    }
    …
  &lt;/style&gt;
&lt;/head&gt;</code></pre>
</figcaption>
</figure>
<p>We could avoid all this—<em>technically</em>—by inlining all of our CSS in the head of the page. Just… bust out a copy of Frontpage and party like it’s 1999. No blocking requests, sure, but this would suck to maintain. And bloat the page. We’d also completely lose caching.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/14kb.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/14kb-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/14kb-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/14kb-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/14kb-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/14kb-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/14kb.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>So, we’re totally gonna do this. But—hear me out—we’re going to do it in a very calculated way.</p>
<p>A new TCP/IP connection can include up to 10 TCP packets—about 14KB of data—in the very first response from a server. That’s more than enough to get our markup into the browser, but doesn’t include any external requests. Just the markup… and any styles that we inline in the head of the document.</p>
<p>If we inline our “above-the-fold” styles and include them in that initial 14KB transfer, we could deliver a <em>visually</em> complete page in as much time as it takes to make an initial TCP/IP connection.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/grunt-criticalcss.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/grunt-criticalcss-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/grunt-criticalcss-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/grunt-criticalcss-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/grunt-criticalcss-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/grunt-criticalcss-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/grunt-criticalcss.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="https://www.npmjs.com/package/criticalcss">Grunt CriticalCSS</a></figcaption>
</figure>
<p>Now, we’d never want to take the time to comb through all our CSS for those above-the-fold styles; this is a case for automation. This Grunt task renders the page in a headless browser and parses out all the necessary styles into their own stylesheet, ready to be included in the head of your page.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/critcss-head.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/critcss-head-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/critcss-head-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/critcss-head-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/critcss-head-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/critcss-head-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/critcss-head.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;head&gt;
  &lt;style&gt;
    /<em> Critical CSS goes here </em>/
  &lt;/style&gt;</p>
<p>&lt;script&gt;
    function loadCSS( href ){
      …
    }
    loadCSS( "all.css" );
  &lt;script&gt;
  &lt;noscript&gt;
    &lt;link href="full.css" rel="stylesheet"&gt;
  &lt;/noscript&gt;
&lt;/head&gt;</code></pre>
</figcaption>
</figure>
<p>The head of our pages should now look something like this.  We’ll have a block of our critical CSS inlined. Once we have those styles in place, we’ll use a little JavaScript to inject all our non-critical stylesheets asynchronously. It happens quickly enough that there’s no visual lag, even if the user scrolls quickly. I inline this function as well—there’d be no sense in removing a blocking request for an external stylesheet only to replace it with a blocking request for an external script, after all. I add an old-fashioned <code>link</code> to the stylesheet inside a <code>noscript</code> tag as well, because there’s no harm.</p>
<p>We’ve introduced a dependency on JavaScript for all our styles, and since this is the first thing we’re running on the page, we don’t have to worry so much about JavaScript breaking down on us here. We may as well cover the small number of users with JavaScript wholesale disabled while we’re at it.</p>
<p>It’s easy to feel a little squeamish about a big block of CSS in the <code>head</code> of your documents, but you shouldn’t worry about this from a maintenance standpoint any more than you worry about minification now. Generating CriticalCSS should be a <em>build</em> step; you shouldn’t ever need to muck around with it by hand. This’ll be up on HBR soon too.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/async-webfonts.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/async-webfonts-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/async-webfonts-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/async-webfonts-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/async-webfonts-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/async-webfonts-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/async-webfonts.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Once we have a page showing up as quickly as possible, we can start looking for more specific points of failure—and believe it or not, webfonts are one of the biggest ones.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/font-delay.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/font-delay-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/font-delay-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/font-delay-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/font-delay-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/font-delay-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/font-delay.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Most browsers will wait about three seconds for a font to load before giving up and showing the fallback text, which is a lifetime in performance terms. But WebKit-based browsers—Safari, older Android, and Blackberry—wait 30 seconds. This is a huge single point of failure for a site, no matter how fast it loads otherwise.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/mitt.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/mitt-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/mitt-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/mitt-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/mitt-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/mitt-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/mitt.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<blockquote><p>
  Hey @slate, it matters how fast your webfonts load.<br />
  <cite><a href="https://twitter.com/jmuspratt/status/561239961924403200">@Muspratt</a></cite>
</p></blockquote>
</figcaption>
</figure>
<p>And it doesn’t necessarily fail in the kind of ways we might expect.</p>
<p>The “not” in this headline was italicized, which meant a request for another font file. That request timed out. Things got a little scary for about thirty seconds there.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/font-face.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/font-face-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/font-face-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/font-face-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/font-face-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/font-face-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/font-face.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>@font-face {
  font-family: 'WebFont';
  src: url('webfont.eot');
  src: url('webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype');
  font-weight: normal;
}</p>
<p>@font-face {
  font-family: 'WebFont';
  src: url('webfont-bold.eot');
  src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
       url('webfont-bold.woff') format('woff'),
       url('webfont-bold.ttf') format('truetype');
  font-weight: bold;
}</code></pre>
</figcaption>
</figure>
<p>Font-face has a pretty smart syntax; the fallback pattern is built-in, so no matter what format a browser needs, we’re really only looking at one request for each file. For a while, I advocated loading all our type asynchronously—and that still works, but the issue isn’t <em>loading</em> the fonts so much as <em>applying</em> them. If our stylesheet calls for text to use a font that isn’t available at render time, that text isn’t shown until the font is available.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/font-loading-spec.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/font-loading-spec-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/font-loading-spec-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/font-loading-spec-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/font-loading-spec-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/font-loading-spec-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/font-loading-spec.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="https://drafts.csswg.org/css-font-loading/">https://drafts.csswg.org/css-font-loading/</a></figcaption>
</figure>
<p>So, instead of messing with <code>@font-face</code>—and potentially breaking a really smart native loading pattern—the “font events” spec gives us a JavaScript API that tells us when our font files are fully loaded. We can <em>then</em> apply them to the page. Since they’re not being applied during the initial render, they won’t block rendering.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/font-events.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/font-events-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/font-events-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/font-events-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/font-events-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/font-events-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/font-events.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<pre><code>&lt;script&gt;
  document.fonts.ready().then(function() {
    document.documentElement.setAttribute( "class", "fonts-ready" );
  });
&lt;/script&gt;
&lt;style&gt;
    p {
        font-family: sans-serif;
    }
    .fonts-ready p {
        font-family: Garage Gothic;
    }
&lt;/style&gt;
</code></pre>
</figcaption>
</figure>
<p>The font events API is pretty simple; a couple lines of JavaScript to say “once all the fonts are fully loaded, add a <code>fonts-ready</code> class to the HTML element. Then, in our CSS, we qualify the webfont family with that class.</p>
<p>That’s it; you’re done. No changes to anything else.</p>
<p>Now you might see your fallback fonts for a split second before the webfont is loaded under bad browsing conditions, but I honestly consider that a feature—whatever it is that your user wanted to read is available right away.</p>
<p>
<figure>
<img src="https://static2.bocoup.com/assets/2015/11/05183211/ffobserver.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/ffobserver-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/ffobserver-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/ffobserver-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/ffobserver-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/ffobserver-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/ffobserver.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption><a href="https://github.com/bramstein/fontfaceobserver">https://github.com/bramstein/fontfaceobserver</a></figcaption>
</figure>
<p>This is a brand new spec; I <em>think</em> it’s only available in Chrome. Bram Stein put together a great polyfill for it, though.</p>
<p>
<figure data-toggle="figcaption">
<img src="https://static2.bocoup.com/assets/2015/11/05183211/rich-robertson.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/rich-robertson-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/rich-robertson-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/rich-robertson-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/rich-robertson-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/rich-robertson-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/rich-robertson.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<figcaption>
<blockquote><p>
Too many times woodworkers make something and think it’s nice, but it doesn’t solve problems for people.<br />
<cite>Rich Robertson</cite>
</p></blockquote>
</figcaption>
</figure>
<p>So, listen. If you’ll indulge me, I’m gonna talk about woodworking one last time—and I’m gonna talk about myself a little bit after all.</p>
<p>I wasn’t a fancy woodworker, prior to a few years ago. I was a contractor; I did grunt work. Additions; roofing. If you live in Cambridge, I might have built your porch. It wasn’t glamorous work; there were no intricate carvings, no exotic South American hardwoods. I never cut a dovetail. There was cheap pine and nailguns and roofing shingles nobody would ever see.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/porch.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/porch-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/porch-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/porch-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/porch-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/porch-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/porch.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>I loved that work. I loved it deeply, but not because I planned on winning any awards. It was simple, functional work. I walk by a lot of it every day—there’s a set of stairs a block from my apartment that those homeowners will have forever. They outlived my father. They’ll outlive me. No one will ever think about them when they’re carrying groceries into their home, because we did our jobs the right way. No one notices when their windows aren’t drafty, but they’d notice if they were.</p>
<p>That work was beautiful to me because it was invisible. Because we built purpose. We didn’t build a porch, we built the place you drink your morning coffee. We didn’t build a roof: we protected a home.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/roof.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/roof-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/roof-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/roof-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/roof-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/roof-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/roof.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>That’s the meaning I take from working on the web, as ephemeral as this medium might seem sometimes. When we work harder, we get better at doing things the right way. When we get better at doing things the right way, we build something more important than a website; something that will outlast any of us here.</p>
<p>We build a connection between every single person in the world and all the information in the world. We do more than just build websites—I don’t <em>care</em> about websites. I care about <em>purpose</em>.</p>
<p><img src="https://static2.bocoup.com/assets/2015/11/05183211/thanks.jpg" srcset="https://static3.bocoup.com/assets/2015/11/05183211/thanks-383x215.jpg 383w, https://static2.bocoup.com/assets/2015/11/05183211/thanks-500x281.jpg 500w, https://static1.bocoup.com/assets/2015/11/05183211/thanks-640x360.jpg 640w, https://static3.bocoup.com/assets/2015/11/05183211/thanks-700x394.jpg 700w, https://static2.bocoup.com/assets/2015/11/05183211/thanks-1100x619.jpg 1100w, https://static1.bocoup.com/assets/2015/11/05183211/thanks.jpg 1920w" sizes="(min-width: 85em) 668px, (min-width: 70em) 62.962963vw, (min-width: 60em) 70.3703704vw, (min-width: 35em) 77.7777778vw, 85.1851852vw" alt=""></p>
<p>Thank you.</p></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://bocoup.com/weblog/smaller-faster-websites">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>