Inlining or Caching? Both Please!

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 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 regular <link rel="stylesheet" href="site.css"> element. If site.css is loaded locally, which should happen in any service worker supporting browser, the second page will have a green background. If site.css is loaded from the server, the background will be red.

An excerpt from Inlining or Caching? Both Please!

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.