Extract & Inline Critical-path CSS in HTML pages
APACHE-2.0 License
Bot releases are hidden (Show)
https://github.com/addyosmani/critical/compare/v2.0.0-21...v2.0.0-22
minimistOpts
to meowOpts
. (#397) 055b669https://github.com/addyosmani/critical/compare/v2.0.0-20...v2.0.0-21
https://github.com/addyosmani/critical/compare/v2.0.0-19...v2.0.0-20
Thanks to @XhmikosR & @jlukic
https://github.com/addyosmani/critical/compare/v1.3.5...v1.3.6
get-port
to devDependencies. 537256ahttps://github.com/addyosmani/critical/compare/v1.3.4...v1.3.5
Thanks to @XhmikosR
Published by bezoerb over 6 years ago
See the complete changes for this release: https://github.com/addyosmani/critical/compare/v1.1.0...v1.1.1
Published by bezoerb over 6 years ago
Maintenance release
https://github.com/addyosmani/critical/compare/v1.1.0...v1.1.1
Published by bezoerb almost 7 years ago
inline-critical
which makes cssrelpreload.js no longer dependent upon loadCSS.js resulting in a smaller payload.Published by bezoerb almost 7 years ago
This release brings some great changes to the Critical API
A full list of changes between v0.9.1 and v1.0.0 is available.
Huge thank you to @pocketjoso for his help as well as his awesome work on penthouse
Published by bezoerb about 7 years ago
Maintenance release
https://github.com/addyosmani/critical/compare/v0.9.0...v0.9.1
Published by bezoerb over 7 years ago
See: https://github.com/addyosmani/critical/compare/v0.8.4...v0.9.0
More detailed release notes later
Published by bezoerb over 7 years ago
Fixed remote url handling (#194,#195)
For a complete list of changes see: https://github.com/addyosmani/critical/compare/v0.8.3...v0.8.4
Published by bezoerb over 7 years ago
Published by bezoerb over 7 years ago
Maintenance release:
https://github.com/addyosmani/critical/compare/0.8.1...v0.8.2
Published by addyosmani almost 8 years ago
See the commit list for 0.8.1 for the latest changes since 0.8.0.
Published by addyosmani about 8 years ago
See the commit list for 0.8.0 for the latest changes since 0.7.3.
Published by addyosmani over 8 years ago
Full credit to @bezoerb and our community for working on this release.
Published by bezoerb over 8 years ago
Maintenance release:
https://github.com/addyosmani/critical/compare/88f66ba...39498c2
Published by addyosmani almost 9 years ago
critical
?"Critical" resources are any of those that can block initial rendering of your web page and the fewer of those there are, the less work the browser has to do to get content on the screen. Optimising the critical rendering path involves prioritising the display of content on your web page that relates to the current user action. So, stuff they can actually see.
critical
(this project) extracts & inlines critical-path (above-the-fold) CSS from HTML.
A full list of changes between 0.6.0 and 0.7.0 is available.
As always, a huge thank you to @bezoerb for all his wonderful help maintaining this module as well as grunt-critical.
📖 Dean Hume's excellent Smashing Magazine post on understanding and optimising critical path CSS using critical
and grunt-critical
is worth checking out
📹 Totally Tooling Tips: Critical Path CSS is a quick video walkthrough of critical path CSS and tools with Matt Gaunt and I
📝 FourKitchens also have a short write-up on how they're using critical
with Gulp for their build process.
I've noticed a few folks using critical
with Jekyll and other static site generators. Getting this setup for your index/landing-page is pretty straight-forward and looks a little like this if using Gulp:
gulp.task('critical-css', function() {
critical.generate({
// Base directory
base: '_site/',
// HTML source file
src: 'index.html',
// CSS output file
dest: 'css/critical.min.css',
// Viewport width
width: 1280,
// Viewport height
height: 900,
// Minify critical-path CSS
minify: true
});
});
This is the type of task I run once all of the others in my Gulp/Jekyll build process (such as Sass compilation) are fully completed. Here's PageSpeed Insights verifying the setup works on my site:
To see a real-world Jekyll + Gulp setup using this for multi-resolution CSS, check-out the FourKitchen's gulpfile.js.
A comprehensive list of tools in the critical path CSS ecosystem is also maintained by this project in case you're interested in trying out alternatives. We just want you to get fast and stay fast 💌
Published by bezoerb over 9 years ago
This release brings some great changes to the Critical API to make it more stable and easy to use.
stream
method which lets you integrate critical lot a lot easier with gulp
options
across stream
cli
and module
options
to customize critical for your production needs
pathPrefix
Path to prepend CSS assets withignore
Ignore CSS selectorshtmlTarget
has been deprecated and will be removed in 1.0.0
styleTarget
has been deprecated and will be removed in 1.0.0
Use the inline
flag to inline the critical CSS to your HTML markup
generateInline
has been deprecated and will be removed in 1.0.0
inline
has been deprecated and will be removed in 1.0.0
htmlTarget
has been deprecated and will be removed in 1.0.0
styleTarget
has been deprecated and will be removed in 1.0.0
Use the generate
method along with the inline
option to inline your critical-path CSS directly.