ether / critical
A Critical CSS generator for Craft CMS
Installs: 63
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 4
Forks: 1
Open Issues: 4
Type:craft-plugin
Requires
- ext-dom: *
- craftcms/cms: ^3.0.0-RC17
- guzzlehttp/guzzle: ^6.3.3
- ivopetkov/html5-dom-document-php: 1.*
- sabberworm/php-css-parser: ^8.1
This package is auto-updated.
Last update: 2024-11-06 10:11:00 UTC
README
A Critical CSS generator for Craft CMS.
Usage
Add the critical-css
hook to your head tag:
<head> {# ... #} {% hook 'critical-css' %} {# ... #} </head>
Wrap anything you consider to be above the fold with fold tags:
{% fold %} ... {% endfold %}
The fold tag supports an If statement, useful when using the tag in a loop:
{% for block in entry.pageContent %} {% fold if loop.index < 2 %} ... {% endfold %} {% endfor %}
Upcoming Features
- Exclude
@font-face
's if their font isn't referenced in critical. - Ability to ignore certain CSS files.
- Ability to clear all critical CSS files
- Ability to clear all critical CSS files for a certain template
- Ability to (re)gen critical en masse (loop through all elements)
- Support all possible templates (products, categories, static, etc.)
- Option to generate missing critical on page load
- Customize Critical CSS save location.