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>Speeding Things Up With Service Worker, Resource Hints, and More (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://www.aaron-gustafson.com/notebook/speeding-things-up-with-service-worker-resource-hints-and-more/">

<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>
  Speeding Things Up With Service Worker, Resource Hints, and More (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://www.aaron-gustafson.com/notebook/speeding-things-up-with-service-worker-resource-hints-and-more/">Source originale du contenu</a></h3>
    <p>User experience encompasses more than just the interface. Download speed, render performance, and the cost of accessing a site are often overlooked areas when it comes to the practice of UX, but they all affect how users experience what we build on the Web.</p>

<p>I’m always looking for ways to improve these aspects of my own site. And, since it’s my own personal playground, I often use it as a test-bed for new technologies, ideas, and techniques. My latest adventure was inspired by a bunch of <a href="https://www.aaron-gustafson.com/notebook/links/">articles and posts I’ve linked to recently</a>, especially</p>

<ul>
  <li><a href="https://adactio.com/journal/9775">Jeremy Keith’s “My First Service Worker”</a>,</li>
  <li><a href="https://css-tricks.com/serviceworker-for-offline/">Nicolas Bevacqua’s “Making a Simple Site Work Offline with ServiceWorker”</a>,</li>
  <li><a href="http://deanhume.com/Home/BlogPost/service-workers--dynamic-responsive-images-using-webp-images/10132/">Dean Hume’s “Service Workers: Dynamic Responsive Images Using Webp Images”</a>, and</li>
  <li><a href="https://medium.com/@cramforce/not-so-micro-optimizations-f867c47b832d#.satdv0fap">Malte Ubl’s “Not so micro optimizations”</a></li>
</ul>

<p>After reading these pieces, I decided to see how much I could do to improve the performance of this site, especially on posts with a lot of images and embedded code samples, like <a href="https://www.aaron-gustafson.com/notebook/labeled-with-love/">my recent post on form labels</a>.</p>

<h2 id="using-resource-hints">Using Resource Hints</h2>

<p>To kick things off, I followed Malte’s advice and used <a href="https://w3c.github.io/resource-hints/">Resource Hints</a> to <em>prime the pump</em> for any third-party servers hosting assets I use frequently (e.g. Disqus, Twitter, etc.). I used the code Malte references in <a href="https://github.com/ampproject/amphtml">the AMP Project</a> as my starting point and <a href="https://github.com/aarongustafson/aarongustafson.github.io/blob/source/source/_javascript/main/resource-hints.js">added two new methods (<code>preconnect()</code> and <code>prefetch()</code>) to my global <code>AG</code> object</a>. With that library code in place, I can call those methods as necessary from within my other JavaScript files. Here’s a simplified extract from <a href="https://github.com/aarongustafson/aarongustafson.github.io/blob/source/source/_javascript/post/disqus.js">my Disqus integration script</a>:</p>

<div><link rel="stylesheet" href="https://assets-cdn.github.com/assets/gist/embed-e75a8866f2a8f51e8bbbf8ca746676f1e7cacb08f4b1d9b52ea62524b333cc6d.css" />
<div id="gist28197221" class="gist">
    <div class="gist-file">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-resource-hints-sample-js" class="file">

  <div class="blob-wrapper data type-javascript">
      <table class="highlight tab-size js-file-line-container" data-tab-size="8">
      <tr>
        <td id="file-resource-hints-sample-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="file-resource-hints-sample-js-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">if</span> ( <span class="pl-s"><span class="pl-pds">&#39;</span>AG<span class="pl-pds">&#39;</span></span> <span class="pl-k">in</span> <span class="pl-c1">window</span> <span class="pl-k">&amp;&amp;</span> <span class="pl-s"><span class="pl-pds">&#39;</span>preconnect<span class="pl-pds">&#39;</span></span> <span class="pl-k">in</span> <span class="pl-c1">window</span>.AG ) {</td>
      </tr>
      <tr>
        <td id="file-resource-hints-sample-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
        <td id="file-resource-hints-sample-js-LC2" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">window</span>.AG.preconnect( <span class="pl-s"><span class="pl-pds">&#39;</span>//disqus.com/<span class="pl-pds">&#39;</span></span> );</td>
      </tr>
      <tr>
        <td id="file-resource-hints-sample-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
        <td id="file-resource-hints-sample-js-LC3" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">window</span>.AG.prefetch( <span class="pl-s"><span class="pl-pds">&#39;</span>//<span class="pl-pds">&#39;</span></span> <span class="pl-k">+</span> disqus_shortname <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">&#39;</span>.disqus.com/count.js<span class="pl-pds">&#39;</span></span> );</td>
      </tr>
      <tr>
        <td id="file-resource-hints-sample-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
        <td id="file-resource-hints-sample-js-LC4" class="blob-code blob-code-inner js-file-line">}</td>
      </tr>
</table>

  </div>

</div>

</div>

<pre><code>  &lt;/div&gt;
  &lt;div class="gist-meta"&gt;
    &lt;a href="https://gist.github.com/aarongustafson/7f05709cca9293e4efea/raw/b6ca32d30643137603def7b4805d7bdcbfe63137/resource-hints-sample.js" style="float:right"&gt;view raw&lt;/a&gt;
    &lt;a href="https://gist.github.com/aarongustafson/7f05709cca9293e4efea#file-resource-hints-sample-js"&gt;resource-hints-sample.js&lt;/a&gt;
    hosted with &amp;#10084; by &lt;a href="https://github.com"&gt;GitHub&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>

</div>

<p>While a minor addition, the speed improvement in <a href="http://caniuse.com/#search=resource%20hints">supporting browsers</a> was noticeable.<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup></p>

<h2 id="integrating-service-worker">Integrating Service Worker</h2>

<p>With that in the bag, I set about making my first <a href="http://www.w3.org/TR/service-workers/">Service Worker</a>. I started off gently, using Dean’s piece as a guide. I added a WebP conversion bit to <a href="https://github.com/aarongustafson/aarongustafson.github.io/blob/source/tasks/gulp/images.js">my image processing Gulp task</a> to get the files in place and then I created the Service Worker. By default, <a href="https://gist.github.com/deanhume/c04478df744ce833925c#file-client-hints-service-worker-js">Dean’s code</a> converts <em>all</em> JPG and PNG requests to WebP responses, so I set it up to limit the requests to only those files being requested directly from my server. I have no way of knowing if WebP equivalents of every JPG and PNG exist on the open web (probably not), but I know they exist on my server. Here’s the updated code:</p>

<div><link rel="stylesheet" href="https://assets-cdn.github.com/assets/gist/embed-e75a8866f2a8f51e8bbbf8ca746676f1e7cacb08f4b1d9b52ea62524b333cc6d.css" />
<div id="gist28206589" class="gist">
    <div class="gist-file">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-webp-service-worker-js" class="file">

  <div class="blob-wrapper data type-javascript">
      <table class="highlight tab-size js-file-line-container" data-tab-size="8">
      <tr>
        <td id="file-webp-service-worker-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="file-webp-service-worker-js-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-s"><span class="pl-pds">&quot;</span>use strict<span class="pl-pds">&quot;</span></span>;</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
        <td id="file-webp-service-worker-js-LC2" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
        <td id="file-webp-service-worker-js-LC3" class="blob-code blob-code-inner js-file-line">self.addEventListener(<span class="pl-s"><span class="pl-pds">&#39;</span>fetch<span class="pl-pds">&#39;</span></span>, <span class="pl-k">function</span>(<span class="pl-smi">event</span>) {</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
        <td id="file-webp-service-worker-js-LC4" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
        <td id="file-webp-service-worker-js-LC5" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">var</span> request <span class="pl-k">=</span> <span class="pl-c1">event</span>.request,</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
        <td id="file-webp-service-worker-js-LC6" class="blob-code blob-code-inner js-file-line">        url <span class="pl-k">=</span> request.url,</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
        <td id="file-webp-service-worker-js-LC7" class="blob-code blob-code-inner js-file-line">        url_object <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">URL</span>( url ),</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
        <td id="file-webp-service-worker-js-LC8" class="blob-code blob-code-inner js-file-line">        re_jpg_or_png <span class="pl-k">=</span><span class="pl-sr"> <span class="pl-pds">/</span><span class="pl-cce">\\.</span>(?:jpg<span class="pl-k">|</span>png)<span class="pl-k">$</span><span class="pl-pds">/</span></span>,</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
        <td id="file-webp-service-worker-js-LC9" class="blob-code blob-code-inner js-file-line">        supports_webp <span class="pl-k">=</span> <span class="pl-c1">false</span>, <span class="pl-c">// pessimism</span></td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L10" class="blob-num js-line-number" data-line-number="10"></td>
        <td id="file-webp-service-worker-js-LC10" class="blob-code blob-code-inner js-file-line">        webp_url;</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L11" class="blob-num js-line-number" data-line-number="11"></td>
        <td id="file-webp-service-worker-js-LC11" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L12" class="blob-num js-line-number" data-line-number="12"></td>
        <td id="file-webp-service-worker-js-LC12" class="blob-code blob-code-inner js-file-line">    <span class="pl-c">// Check if the image is a local jpg or png</span></td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L13" class="blob-num js-line-number" data-line-number="13"></td>
        <td id="file-webp-service-worker-js-LC13" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">if</span> ( re_jpg_or_png.<span class="pl-c1">test</span>( request.url ) <span class="pl-k">&amp;&amp;</span></td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L14" class="blob-num js-line-number" data-line-number="14"></td>
        <td id="file-webp-service-worker-js-LC14" class="blob-code blob-code-inner js-file-line">         url_object.origin <span class="pl-k">==</span> location.origin ) {</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L15" class="blob-num js-line-number" data-line-number="15"></td>
        <td id="file-webp-service-worker-js-LC15" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L16" class="blob-num js-line-number" data-line-number="16"></td>
        <td id="file-webp-service-worker-js-LC16" class="blob-code blob-code-inner js-file-line">        <span class="pl-c">// console.log(&#39;WORKER: caught a request for a local PNG or JPG&#39;);</span></td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L17" class="blob-num js-line-number" data-line-number="17"></td>
        <td id="file-webp-service-worker-js-LC17" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L18" class="blob-num js-line-number" data-line-number="18"></td>
        <td id="file-webp-service-worker-js-LC18" class="blob-code blob-code-inner js-file-line">        <span class="pl-c">// Inspect the accept header for WebP support</span></td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L19" class="blob-num js-line-number" data-line-number="19"></td>
        <td id="file-webp-service-worker-js-LC19" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> ( request.<span class="pl-c1">headers</span>.has(<span class="pl-s"><span class="pl-pds">&#39;</span>accept<span class="pl-pds">&#39;</span></span>) )</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L20" class="blob-num js-line-number" data-line-number="20"></td>
        <td id="file-webp-service-worker-js-LC20" class="blob-code blob-code-inner js-file-line">        {</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L21" class="blob-num js-line-number" data-line-number="21"></td>
        <td id="file-webp-service-worker-js-LC21" class="blob-code blob-code-inner js-file-line">            supports_webp <span class="pl-k">=</span> request.<span class="pl-c1">headers</span>.get(<span class="pl-s"><span class="pl-pds">&#39;</span>accept<span class="pl-pds">&#39;</span></span>).includes(<span class="pl-s"><span class="pl-pds">&#39;</span>webp<span class="pl-pds">&#39;</span></span>);</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L22" class="blob-num js-line-number" data-line-number="22"></td>
        <td id="file-webp-service-worker-js-LC22" class="blob-code blob-code-inner js-file-line">        }</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L23" class="blob-num js-line-number" data-line-number="23"></td>
        <td id="file-webp-service-worker-js-LC23" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L24" class="blob-num js-line-number" data-line-number="24"></td>
        <td id="file-webp-service-worker-js-LC24" class="blob-code blob-code-inner js-file-line">        <span class="pl-c">// Browser supports WebP</span></td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L25" class="blob-num js-line-number" data-line-number="25"></td>
        <td id="file-webp-service-worker-js-LC25" class="blob-code blob-code-inner js-file-line">        <span class="pl-k">if</span> ( supports_webp )</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L26" class="blob-num js-line-number" data-line-number="26"></td>
        <td id="file-webp-service-worker-js-LC26" class="blob-code blob-code-inner js-file-line">        {</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L27" class="blob-num js-line-number" data-line-number="27"></td>
        <td id="file-webp-service-worker-js-LC27" class="blob-code blob-code-inner js-file-line">            <span class="pl-c">// Make the new URL</span></td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L28" class="blob-num js-line-number" data-line-number="28"></td>
        <td id="file-webp-service-worker-js-LC28" class="blob-code blob-code-inner js-file-line">            webp_url <span class="pl-k">=</span> url.<span class="pl-c1">substr</span>(<span class="pl-c1">0</span>, url.<span class="pl-c1">lastIndexOf</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>.<span class="pl-pds">&#39;</span></span>)) <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">&#39;</span>.webp<span class="pl-pds">&#39;</span></span>;</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L29" class="blob-num js-line-number" data-line-number="29"></td>
        <td id="file-webp-service-worker-js-LC29" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L30" class="blob-num js-line-number" data-line-number="30"></td>
        <td id="file-webp-service-worker-js-LC30" class="blob-code blob-code-inner js-file-line">            <span class="pl-c1">event</span>.respondWith(</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L31" class="blob-num js-line-number" data-line-number="31"></td>
        <td id="file-webp-service-worker-js-LC31" class="blob-code blob-code-inner js-file-line">                fetch(</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L32" class="blob-num js-line-number" data-line-number="32"></td>
        <td id="file-webp-service-worker-js-LC32" class="blob-code blob-code-inner js-file-line">                    webp_url,</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L33" class="blob-num js-line-number" data-line-number="33"></td>
        <td id="file-webp-service-worker-js-LC33" class="blob-code blob-code-inner js-file-line">                    { mode<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&#39;</span>no-cors<span class="pl-pds">&#39;</span></span> }</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L34" class="blob-num js-line-number" data-line-number="34"></td>
        <td id="file-webp-service-worker-js-LC34" class="blob-code blob-code-inner js-file-line">                )</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L35" class="blob-num js-line-number" data-line-number="35"></td>
        <td id="file-webp-service-worker-js-LC35" class="blob-code blob-code-inner js-file-line">            );</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L36" class="blob-num js-line-number" data-line-number="36"></td>
        <td id="file-webp-service-worker-js-LC36" class="blob-code blob-code-inner js-file-line">        }</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L37" class="blob-num js-line-number" data-line-number="37"></td>
        <td id="file-webp-service-worker-js-LC37" class="blob-code blob-code-inner js-file-line">    }</td>
      </tr>
      <tr>
        <td id="file-webp-service-worker-js-L38" class="blob-num js-line-number" data-line-number="38"></td>
        <td id="file-webp-service-worker-js-LC38" class="blob-code blob-code-inner js-file-line">});</td>
      </tr>
</table>

  </div>

</div>

</div>

<pre><code>  &lt;/div&gt;
  &lt;div class="gist-meta"&gt;
    &lt;a href="https://gist.github.com/aarongustafson/ff6aef09a10038e1728a/raw/078af4350bca2900c2d4dc10b3827948bc401c9b/webp-service-worker.js" style="float:right"&gt;view raw&lt;/a&gt;
    &lt;a href="https://gist.github.com/aarongustafson/ff6aef09a10038e1728a#file-webp-service-worker-js"&gt;webp-service-worker.js&lt;/a&gt;
    hosted with &amp;#10084; by &lt;a href="https://github.com"&gt;GitHub&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>

</div>

<p>When I began tucking to the caching possibilities of Service Workers, following Nicolas’ and Jeremy’s posts, I <a href="https://github.com/aarongustafson/aarongustafson.github.io/blob/source/source/_javascript/serviceworker/fetch-cached.js">opted to tweak Nicholas’ caching setup a bit</a>. I’m still not completely thrilled with it, but it’s a work in progress. I’m sure I will tweak as I get more familiar with the technology.</p>

<p>To keep my Service Worker code modularized (like my other JavaScript code), I opted to <a href="https://github.com/aarongustafson/aarongustafson.github.io/tree/source/source/_javascript/serviceworker">break it up into separate files</a> and am using Gulp to merge them all together and move the combined file into the root of the site. If you’d like to follow a similar path, feel free to adapt this Gulp task (which builds all of my JavaScript):</p>

<div><link rel="stylesheet" href="https://assets-cdn.github.com/assets/gist/embed-e75a8866f2a8f51e8bbbf8ca746676f1e7cacb08f4b1d9b52ea62524b333cc6d.css" />
<div id="gist28197221" class="gist">
    <div class="gist-file">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-gulp-scripts-js" class="file">

  <div class="blob-wrapper data type-javascript">
      <table class="highlight tab-size js-file-line-container" data-tab-size="8">
      <tr>
        <td id="file-gulp-scripts-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="file-gulp-scripts-js-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">var</span> gulp <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
        <td id="file-gulp-scripts-js-LC2" class="blob-code blob-code-inner js-file-line">    path <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>path<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
        <td id="file-gulp-scripts-js-LC3" class="blob-code blob-code-inner js-file-line">    folder <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp-folders<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
        <td id="file-gulp-scripts-js-LC4" class="blob-code blob-code-inner js-file-line">    gulpIf <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp-if<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
        <td id="file-gulp-scripts-js-LC5" class="blob-code blob-code-inner js-file-line">    insert <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp-insert<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
        <td id="file-gulp-scripts-js-LC6" class="blob-code blob-code-inner js-file-line">    concat <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp-concat<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
        <td id="file-gulp-scripts-js-LC7" class="blob-code blob-code-inner js-file-line">    uglify <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp-uglify<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
        <td id="file-gulp-scripts-js-LC8" class="blob-code blob-code-inner js-file-line">    notify <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp-notify<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
        <td id="file-gulp-scripts-js-LC9" class="blob-code blob-code-inner js-file-line">    rename <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">&#39;</span>gulp-rename<span class="pl-pds">&#39;</span></span>),</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L10" class="blob-num js-line-number" data-line-number="10"></td>
        <td id="file-gulp-scripts-js-LC10" class="blob-code blob-code-inner js-file-line">    <span class="pl-c">//handleErrors = require(&#39;handleErrors&#39;),</span></td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L11" class="blob-num js-line-number" data-line-number="11"></td>
        <td id="file-gulp-scripts-js-LC11" class="blob-code blob-code-inner js-file-line">    source_folder <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">&#39;</span>source/_javascript<span class="pl-pds">&#39;</span></span>,</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L12" class="blob-num js-line-number" data-line-number="12"></td>
        <td id="file-gulp-scripts-js-LC12" class="blob-code blob-code-inner js-file-line">    destination_root <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">&#39;</span>source<span class="pl-pds">&#39;</span></span>,</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L13" class="blob-num js-line-number" data-line-number="13"></td>
        <td id="file-gulp-scripts-js-LC13" class="blob-code blob-code-inner js-file-line">    destination_folder <span class="pl-k">=</span> destination_root <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">&#39;</span>/j<span class="pl-pds">&#39;</span></span>,</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L14" class="blob-num js-line-number" data-line-number="14"></td>
        <td id="file-gulp-scripts-js-LC14" class="blob-code blob-code-inner js-file-line">    public_root <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">&#39;</span>public<span class="pl-pds">&#39;</span></span></td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L15" class="blob-num js-line-number" data-line-number="15"></td>
        <td id="file-gulp-scripts-js-LC15" class="blob-code blob-code-inner js-file-line">    public_folder <span class="pl-k">=</span> public_root <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">&#39;</span>/j<span class="pl-pds">&#39;</span></span>,</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L16" class="blob-num js-line-number" data-line-number="16"></td>
        <td id="file-gulp-scripts-js-LC16" class="blob-code blob-code-inner js-file-line">    rename_serviceworker <span class="pl-k">=</span> rename({</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L17" class="blob-num js-line-number" data-line-number="17"></td>
        <td id="file-gulp-scripts-js-LC17" class="blob-code blob-code-inner js-file-line">        dirname<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&quot;</span>../<span class="pl-pds">&quot;</span></span></td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L18" class="blob-num js-line-number" data-line-number="18"></td>
        <td id="file-gulp-scripts-js-LC18" class="blob-code blob-code-inner js-file-line">    });</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L19" class="blob-num js-line-number" data-line-number="19"></td>
        <td id="file-gulp-scripts-js-LC19" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L20" class="blob-num js-line-number" data-line-number="20"></td>
        <td id="file-gulp-scripts-js-LC20" class="blob-code blob-code-inner js-file-line">gulp.task(<span class="pl-s"><span class="pl-pds">&#39;</span>scripts<span class="pl-pds">&#39;</span></span>, folder(source_folder, <span class="pl-k">function</span>(<span class="pl-smi">folder</span>){</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L21" class="blob-num js-line-number" data-line-number="21"></td>
        <td id="file-gulp-scripts-js-LC21" class="blob-code blob-code-inner js-file-line">    <span class="pl-k">return</span> gulp.src(path.<span class="pl-c1">join</span>(source_folder, folder, <span class="pl-s"><span class="pl-pds">&#39;</span>*.js<span class="pl-pds">&#39;</span></span>))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L22" class="blob-num js-line-number" data-line-number="22"></td>
        <td id="file-gulp-scripts-js-LC22" class="blob-code blob-code-inner js-file-line">        .pipe(<span class="pl-c1">concat</span>(folder <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">&#39;</span>.js<span class="pl-pds">&#39;</span></span>))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L23" class="blob-num js-line-number" data-line-number="23"></td>
        <td id="file-gulp-scripts-js-LC23" class="blob-code blob-code-inner js-file-line">        .pipe(insert.transform(<span class="pl-k">function</span>(<span class="pl-smi">contents</span>, <span class="pl-smi">file</span>){</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L24" class="blob-num js-line-number" data-line-number="24"></td>
        <td id="file-gulp-scripts-js-LC24" class="blob-code blob-code-inner js-file-line">            <span class="pl-c">// insert a build time variable</span></td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L25" class="blob-num js-line-number" data-line-number="25"></td>
        <td id="file-gulp-scripts-js-LC25" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">var</span> build_time <span class="pl-k">=</span> (<span class="pl-k">new</span> <span class="pl-en">Date</span>()).<span class="pl-c1">getTime</span>() <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">&#39;</span><span class="pl-pds">&#39;</span></span>;</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L26" class="blob-num js-line-number" data-line-number="26"></td>
        <td id="file-gulp-scripts-js-LC26" class="blob-code blob-code-inner js-file-line">            <span class="pl-k">return</span> contents.<span class="pl-c1">replace</span>( <span class="pl-s"><span class="pl-pds">&#39;</span>{{BUILD_TIME}}<span class="pl-pds">&#39;</span></span>, build_time );</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L27" class="blob-num js-line-number" data-line-number="27"></td>
        <td id="file-gulp-scripts-js-LC27" class="blob-code blob-code-inner js-file-line">         }))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L28" class="blob-num js-line-number" data-line-number="28"></td>
        <td id="file-gulp-scripts-js-LC28" class="blob-code blob-code-inner js-file-line">        .pipe(gulp.dest(destination_folder))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L29" class="blob-num js-line-number" data-line-number="29"></td>
        <td id="file-gulp-scripts-js-LC29" class="blob-code blob-code-inner js-file-line">        .pipe(gulp.dest(public_folder))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L30" class="blob-num js-line-number" data-line-number="30"></td>
        <td id="file-gulp-scripts-js-LC30" class="blob-code blob-code-inner js-file-line">        .pipe(rename({suffix<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&#39;</span>.min<span class="pl-pds">&#39;</span></span>}))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L31" class="blob-num js-line-number" data-line-number="31"></td>
        <td id="file-gulp-scripts-js-LC31" class="blob-code blob-code-inner js-file-line">        .pipe(uglify())</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L32" class="blob-num js-line-number" data-line-number="32"></td>
        <td id="file-gulp-scripts-js-LC32" class="blob-code blob-code-inner js-file-line">        .pipe(gulpIf(folder<span class="pl-k">==</span><span class="pl-s"><span class="pl-pds">&#39;</span>serviceworker<span class="pl-pds">&#39;</span></span>,rename_serviceworker))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L33" class="blob-num js-line-number" data-line-number="33"></td>
        <td id="file-gulp-scripts-js-LC33" class="blob-code blob-code-inner js-file-line">        .pipe(gulp.dest(destination_folder))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L34" class="blob-num js-line-number" data-line-number="34"></td>
        <td id="file-gulp-scripts-js-LC34" class="blob-code blob-code-inner js-file-line">        .pipe(gulp.dest(public_folder))</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L35" class="blob-num js-line-number" data-line-number="35"></td>
        <td id="file-gulp-scripts-js-LC35" class="blob-code blob-code-inner js-file-line">        .pipe(notify({ message<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">&#39;</span>Scripts task complete<span class="pl-pds">&#39;</span></span> }));</td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L36" class="blob-num js-line-number" data-line-number="36"></td>
        <td id="file-gulp-scripts-js-LC36" class="blob-code blob-code-inner js-file-line">        <span class="pl-c">//.on(&#39;error&#39;, handleErrors);</span></td>
      </tr>
      <tr>
        <td id="file-gulp-scripts-js-L37" class="blob-num js-line-number" data-line-number="37"></td>
        <td id="file-gulp-scripts-js-LC37" class="blob-code blob-code-inner js-file-line">}));</td>
      </tr>
</table>

  </div>

</div>

</div>

<pre><code>  &lt;/div&gt;
  &lt;div class="gist-meta"&gt;
    &lt;a href="https://gist.github.com/aarongustafson/7f05709cca9293e4efea/raw/b6ca32d30643137603def7b4805d7bdcbfe63137/gulp-scripts.js" style="float:right"&gt;view raw&lt;/a&gt;
    &lt;a href="https://gist.github.com/aarongustafson/7f05709cca9293e4efea#file-gulp-scripts-js"&gt;gulp-scripts.js&lt;/a&gt;
    hosted with &amp;#10084; by &lt;a href="https://github.com"&gt;GitHub&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>

</div>

<p>As most of the walkthroughs recommended that you version your Service Worker if you’re doing any caching, I set mine up to be auto-versioned by inserting a timestamp (lines 23-27, above) into my Service Worker header file (line 3, below):</p>

<div><link rel="stylesheet" href="https://assets-cdn.github.com/assets/gist/embed-e75a8866f2a8f51e8bbbf8ca746676f1e7cacb08f4b1d9b52ea62524b333cc6d.css" />
<div id="gist28197221" class="gist">
    <div class="gist-file">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-_header-js" class="file">

  <div class="blob-wrapper data type-javascript">
      <table class="highlight tab-size js-file-line-container" data-tab-size="8">
      <tr>
        <td id="file-_header-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="file-_header-js-LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-s"><span class="pl-pds">&#39;</span>use strict<span class="pl-pds">&#39;</span></span>;</td>
      </tr>
      <tr>
        <td id="file-_header-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
        <td id="file-_header-js-LC2" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-_header-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
        <td id="file-_header-js-LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-k">var</span> version <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">&#39;</span>v{{BUILD_TIME}}:<span class="pl-pds">&#39;</span></span>,</td>
      </tr>
      <tr>
        <td id="file-_header-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
        <td id="file-_header-js-LC4" class="blob-code blob-code-inner js-file-line">    default_avatar <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">&#39;</span>https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&amp;f=y<span class="pl-pds">&#39;</span></span>,</td>
      </tr>
      <tr>
        <td id="file-_header-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
        <td id="file-_header-js-LC5" class="blob-code blob-code-inner js-file-line">    missing_image <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">&#39;</span>https://i.imgur.com/oWLuFAa.gif<span class="pl-pds">&#39;</span></span>;</td>
      </tr>
</table>

  </div>

</div>

</div>

<pre><code>  &lt;/div&gt;
  &lt;div class="gist-meta"&gt;
    &lt;a href="https://gist.github.com/aarongustafson/7f05709cca9293e4efea/raw/b6ca32d30643137603def7b4805d7bdcbfe63137/_header.js" style="float:right"&gt;view raw&lt;/a&gt;
    &lt;a href="https://gist.github.com/aarongustafson/7f05709cca9293e4efea#file-_header-js"&gt;_header.js&lt;/a&gt;
    hosted with &amp;#10084; by &lt;a href="https://github.com"&gt;GitHub&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>

</div>

<p>Service Workers are still pretty new (and <a href="http://caniuse.com/#feat=serviceworkers">modestly supported</a>), but it’s definitely interesting to see what’s possible using them. <a href="https://adactio.com/journal/9844">Like Jeremy</a>, I want to do a bit more exploration into caching and how it may actually <em>increase</em> the monetary cost of accessing a website if not used properly. Like any powerful tool, we need to wield it wisely.</p>

<figure><img src="https://media.giphy.com/media/dlmcYrvalMmAw/giphy.gif" alt="Animated GIF of a guy accidentally launching a board into his helper while power sanding." /></figure>

<h2 id="making-gists-static">Making Gists Static</h2>

<p>On particularly code-heavy posts (yes, like this one), I make liberal use of Gists. They’re quite useful, but <a href="https://gist.github.com/BinaryMuse/803483">the Gist plugin for Jekyll</a>, while good, still requests a script from Github in order to load the pretty printed version of the Gist. On some posts, that can mean 5 or more additional network requests, not to mention execution time for the JavaScript. It’s yet another dependency that could prohibit you from quickly getting to the content you’re looking for. Additionally, <a href="https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/">if JavaScript should be available, but isn’t</a>, you get nothing (since the <code>noscript</code> content is only evaluated if JavaScript support isn’t available or if a user turns it off).</p>

<p>With all of this in mind, I decided to revise the plugin and make it capable of downloading the JavaScript code directly. It then extracts the HTML markup that the JavaScript would be writing into the page and just embeds it directly. It also caches the result, which is handy for speeding up the build process.</p>

<p>You can grab <a href="https://gist.github.com/aarongustafson/b98add8f3580f6707cf5">my fork of the Gist Jekyll Plugin as, well, a Gist</a>. It’s also <a href="https://github.com/aarongustafson/aarongustafson.github.io/blob/source/plugins/gist_tag.rb">in the source of this site on Github</a>.</p>

<h2 id="hopefully-a-little-faster">(Hopefully) A Little Faster</h2>

<p>All told, these changes have gotten the render time of this site down significantly across the board.<sup id="fnref:2"><a href="#fn:2" class="footnote">2</a></sup> Even more so on browsers that support Service Workers and Resource Hints. I’ll likely continue tweaking as I go, but I wanted to share my process, code, and thoughts in case any of it might be useful to you in your own work. In the end, it’s all about creating better experiences for our users. How our sites perform is a big part of that.</p>

<div class="footnotes">
  <ol>
    <li id="fn:1">
      <p>Sadly I forgot to run some speed tests prior to rolling out this change and I didn’t feel like rolling back the site, so I don’t have solid numbers for you. That said, it seemed to shave nearly 2 seconds off of the load time on heavy pages like the post I mentioned. <a href="#fnref:1" class="reversefootnote">&#8617;</a></p>
    </li>
    <li id="fn:2">
      <p>Again, I don’t have the numbers, but I am routinely seeing <code>DOMContentLoaded</code> reached between 400-600ms with Service Worker caching in play. <a href="#fnref:2" class="reversefootnote">&#8617;</a></p>
    </li>
  </ol>
</div>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://www.aaron-gustafson.com/notebook/speeding-things-up-with-service-worker-resource-hints-and-more/">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>