GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
https://npm.im/critters-webpack-plugin
Apache License 2.0
3.42k stars 108 forks source link

Optimizing Performance by Caching Critical CSS #168

Open akshaymhk opened 2 months ago

akshaymhk commented 2 months ago

Caching CSS Based on a Data-Attribute (e.g., data-pagetype)

To enable this feature, first pass a key in the options: cacheCriticalCSS: true.

Next, add a class named page_layout_nxt to any <div> in the HTML and provide a data attribute (e.g., data-pagetype). This data attribute can be any unique key based on a combination of page name, user logged in status, and device type (mobile/desktop).

Critical CSS is then saved in the cache and returned from the cache instead of being recalculated for the same unique key. This will improve the Time to First Byte (TTFB).

Related Issue:

This pull request closes #169