Love your cache: Optimize for the second load

Поділитися
Вставка
  • Опубліковано 27 лис 2024

КОМЕНТАРІ • 19

  • @DenisTRUFFAUT
    @DenisTRUFFAUT 4 роки тому +8

    1) For Cloud Storage you'd better put hash before the filename to increase throughput.
    2) The 3 realms files (index.html, sw.js, worker.js) will probably embed a custom importmap, thus need to be served with a cache-control: no-store. But pro-tip, in sw.js and worker.js, you can just use a single instruction : importScripts / await import of a hashed file, and bam you get best of both worlds : Fresh file, but cached content.

  • @MachineYearning
    @MachineYearning 3 роки тому +1

    Thank you so much for this Sam, caching strategy is one of the harder problems I've faced when implementing a service worker for a PWA.

  • @tonygentilcore
    @tonygentilcore 3 роки тому +19

    Great overview. Only thing I didn't understand was caysh ;)

    • @samthorau
      @samthorau 3 роки тому +3

      We pronounce it the other way here in Australia. I tried to use both pronunciations just to keep everyone on the level :)

  • @thegreengiant
    @thegreengiant 3 роки тому +12

    caysh vs cash

  • @jsinnaour
    @jsinnaour 3 роки тому

    Yep, cache is a lifesaver! Thanks for awesome videos ♥️

  • @berndeckenfels
    @berndeckenfels 3 роки тому

    Should be mentioned that immutable asset hashes also help with SRI.

  • @RodyDavis
    @RodyDavis 3 роки тому

    Is this a good case to use Snowpack? 🧐

  • @diraluke9789
    @diraluke9789 3 роки тому

    good dira luke

  • @demimurych1
    @demimurych1 3 роки тому

    Forgive me if I misunderstood something.
    18:00 *About http caching and file name*
    If I understood correctly, the speaker says that the use of a hash in the file name somehow affects the browser's caching behavior.
    I understood what the speaker said as -
    a file with name "filename.css" will not be able to be cached for long.
    Conversely, the file "filename -34523542.css", on the contrary, will be cached for a long time.
    *If this is exactly what the speaker wanted to say, then he is wrong*
    HTTP caching depends only on the HTTP headers. The cache does not depend on the file name.
    The browser will work the same for file filename.css and file filename-34523542.css.
    How exactly it will work is determined by the headers: cache -control etag last -modefied expires and so on.
    And no change in the file name can affect this fact.
    The exception is when the site uses a service worker who can independently decide how it relates to the response headers.

    • @cristianpallares7565
      @cristianpallares7565 3 роки тому

      Check out around 14:35. He mentions that you need to use http headers anyway.

    • @samthorau
      @samthorau 3 роки тому +4

      Thanks for the feedback, but at about 14:35 I say "but of course, just remaining a file like this doesn't mean anything to the browser", and I explain that you have to set a header.

  • @DanishAlready
    @DanishAlready 4 роки тому +1

    Could you provide code snippet for hashFor in eleventy?

  • @andrewrico8321
    @andrewrico8321 3 роки тому +1

    woohoo, 11ty.js ....Thumps up

  • @mulllhausen
    @mulllhausen 3 роки тому

    i was hoping to hear some techniques for pre-caching here. like quickly caching assets for the next page before the user clicks on them so they load instantly. but still it was a good talk

  • @spybot2d
    @spybot2d 3 роки тому

    #holistic lol

  • @Human_Evolution-
    @Human_Evolution- 2 роки тому

    I need to see code or else your words are useless.