It feels like every 6-12 months filament group redefine how to make pages as performant as possible with minimal fuss, and this article is no different.
One of the biggest issues with in-lining Critical CSS was having to have it duplicated in the CSS you request as well.now with service workers and the very smart folks at filament group we can have our cake and eat it too,
Here’s how it works: The page linked below includes some inline CSS and a caching function much like the example above. It also installs the service worker code above to check for files in local caches when requests are made. That first demo page contains a link to a second page which references site.css using a regularAn excerpt from Inlining or Caching? Both Please!
<link rel="stylesheet" href="site.css">element. If
site.cssis loaded locally, which should happen in any service worker supporting browser, the second page will have a green background. If
site.cssis loaded from the server, the background will be red.