Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Ewa Gasperowicz] Caching strategies and their performance footprint

[Ewa Gasperowicz] Caching strategies and their performance footprint

Content level: Intermediate

Does your site need a performance boost? With Service Worker supported in all main browsers, you can up your game with precise caching behaviors and management. Network requests use time and bandwidth. Caching resources take valuable storage space. Let’s discuss how to strike a balance between the two with some fine-tuned caching strategies.

Ewa Gasperowicz
Google / Switzerland

Google Developers Group Lviv

October 12, 2018
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Programming

Transcript

  1. #dfua Caching • What NOT to cache • WHAT to

    cache • WHEN to cache • How to UPDATE
  2. #dfua Don’t cache, put in trash! • Oversized or unoptimized

    images • Unnecessary libraries • Non-essential fonts • etc.
  3. Selective image strategies Inline, embedded in doc always in cache

    cached at best effort (with limit) fallback (with ALT text)
  4. #dfua Precaching Push assets to cache ahead of time •

    Static assets like styles, scripts, important images • Versioning is important • Updates when the service worker updates
  5. #dfua const version = '15'; self.addEventListener('install', event => { event.waitUntil(

    caches.open(`static-${version}`) .then(cache => cache.addAll([ '/script-e9cght.js', '/style-bhj371e.css', '/banner-45ea2e4.jpg' ])) ); }); SW version # Asset version #
  6. #dfua Precaching pros&cons • Easy and automatable • Good for

    performance • Not for a whole site • Upfront network cost • Possibly caching unnecessary urls • Hard to update unversioned assets
  7. #dfua Runtime Caching Cache resources when they are accessed first

    time • Dynamic content • Non-revisioned content • Updates depending on used strategy • Non-crucial content (e.g. not on critical path)
  8. #dfua self.addEventListener('fetch', function(event) { event.respondWith( caches.open('mycache-runtime').then(cache => { fetch(event.request).then(response =>

    { cache.put(event.request, response.clone()); // ...usually also send response to the page }); }); ); }); Fetch event Cache
  9. #dfua Runtime caching pros&cons • Updates not independent on SW

    • Cache assets in response to user behavior • Asset needs to be fetched first • Site’s storage size grows over time • Need to limit no of entries and expiration policy
  10. #dfua Workbox • CacheFirst • CacheOnly • NetworkFirst • NetworkOnly

    • StaleWhileRevalidate • Custom handler Plugins & Extensions
  11. #dfua Custom handler const FALLBACK_IMAGE_URL = '/images/icons/fallback.svg'; const imagesHandler =

    workbox.strategies.cacheFirst(opts); // Cache images from Cloudinary workbox.routing.registerRoute( new RegExp('https://res.cloudinary.com/pieshop/.*'), ({event}) => { return imagesHandler.handle({event}) .catch(() => caches.match(FALLBACK_IMAGE_URL)); });
  12. informative // Fallback strategy function svgFallback({url}) { const alt =

    url.searchParams.get('alt'); const svg = `<svg><path ... /><text><tspan> ${alt || ''}</tspan></text></svg>`; return new Response(svg, { headers: {'Content-Type': 'image/svg+xml'} }); } Fallback
  13. informative // Fallback strategy function svgFallback({url}) { const alt =

    url.searchParams.get('alt'); const svg = `<svg><path ... /><text><tspan> ${alt || ''}</tspan></text></svg>`; return new Response(svg, { headers: {'Content-Type': 'image/svg+xml'} }); } Fallback (with alt)
  14. #dfua Summary • Caching is about resiliency as much as

    offline • Don’t just jump in, have a strategy • Make your site lean • Have proper versioning for static assets • Cache selectively • Control the size of your app over time