Feature Request: Caching CSS Based on Data-Attribute

[akshaymhk]

Implement a feature to cache CSS based on a data attribute (e.g., data-pagetype). This will optimize the process by caching critical CSS, thereby improving the Time to First Byte (TTFB).

Proposed Solution:

1. Enable Feature:

• Introduce an option key: cacheCriticalCSS: true.

2. HTML Structure:

• Add a class named page_layout_nxt to any <div> element.
• Provide a data attribute (e.g., data-pagetype) to this <div>.

3. Unique Key:

• The data attribute should be a unique key, which can be a combination of factors such as page name, user logged in status, and device type (mobile/desktop).

4. Cache Implementation:

• Save the critical CSS in the cache based on the unique key.
• Retrieve and use the cached critical CSS instead of recalculating it for the same unique key.

Benefits:

• This feature will significantly improve the TTFB by reducing redundant CSS calculations.

Example Usage:

<div class="page_layout_nxt" data-pagetype="homepage_loggedin_mobile"> <!-- Page content --> </div>

When cacheCriticalCSS is set to true, the critical CSS for this specific data-pagetype will be cached and reused for subsequent requests with the same unique key.

Pull Request:

https://github.com/GoogleChromeLabs/critters/pull/168

[kara]

Closing this issue because ownership of Critters has moved to the Nuxt team, who will be maintaining the project going forward. This repo is archived and won't receive any future updates.

If the issue is still relevant, please re-post it to the actively-maintained fork at https://github.com/danielroe/beasties.