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.
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.
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:
cacheCriticalCSS: true.2. HTML Structure:
<div>element.<div>.3. Unique Key:
4. Cache Implementation:
Benefits:
Example Usage:
<div class="page_layout_nxt" data-pagetype="homepage_loggedin_mobile"><!-- Page content --></div>When
cacheCriticalCSSis set to true, the critical CSS for this specificdata-pagetypewill be cached and reused for subsequent requests with the same unique key.Pull Request:
https://github.com/GoogleChromeLabs/critters/pull/168