Releases · addyosmani/critical

22 Dec 11:39

v0.7.0

0db4d29

Critical 0.7.0

What is `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.

Release highlights for 0.7.0

Now uses the latest versions of Penthouse and inline-critical under the hood
Remote resources are now supported when generating critical CSS for a page
Enabled inlining of external images by dropping imageInliner in favor of postcss-image-inliner
Windows: switched to local HTTP server when serving files over http to improve stability
Adds URL support for filetypes other than HTML.
Fix actually emitting Critical's errors in stream
Infra: Improve tests, test output cleanup, adjustments to adhere to Penthouse updates, fixed up AppVeyor tests

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.

Community highlights

📖 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.

Works great with static-site generators

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.

Alternatives

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 💌

Assets 2

07 Jul 14:52

bezoerb

v0.6.0

33ab082

0.6.0

This release brings some great changes to the Critical API to make it more stable and easy to use.

New Features

Introduced a new stream method which lets you integrate critical lot a lot easier with gulp
Unified options across stream cli and module
Added new options to customize critical for your production needs
- pathPrefix Path to prepend CSS assets with
- ignore Ignore CSS selectors
The Node.js module now returns a promise when no callback is provided

Deprecation notice (0.6.x)

Command-line interface (CLI)

The option htmlTarget has been deprecated and will be removed in 1.0.0
The option 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

Node.js module

The method generateInline has been deprecated and will be removed in 1.0.0
The method inline has been deprecated and will be removed in 1.0.0
The option htmlTarget has been deprecated and will be removed in 1.0.0
The option 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.

Commits

6691a78 Tests adjusted
4f7b974 Update README.md
df66578 Update CLI tests
d4bb1dd Fixed tests & locked clean-css version
26e40f9 Minor package.json tweak
aff8afd Correct expectation for adaptive
22627a0 Updated tests for new clean-css 3.2.7
0977b7c Bumped dependency (also see 0788c73, 056b787, b051f6a, 73a4fed and 147da54)
2d63464 Don't encode entities
d546647 Removed parallel testcase
b3b8d54 Added 'ignore' option
cf57c06 Deprecated some more things
bfb880d Deprecated htmltarget & styletarget for CLI and introduced --inline
f2428a4 Update README.md
d78b6ef Added pathPrefix support for CLI
63d63b5 Normalize newlines
96e99e0 Added test for pathPrefix option
3739672 Allows pathPrefix to be set through options. Updates README
5927d09 Added Gulp stream support

Assets 2

12 Apr 17:07

addyosmani

v0.5.7

b45733d

0.5.7

v0.5.6...v0.5.7

Assets 2

16 Mar 14:10

sindresorhus

v0.5.6

c68140c

0.5.6

Just a quick bug fix release.

v0.5.5...v0.5.6

Assets 2

03 Mar 22:18

addyosmani

v0.5.5

24186c5

0.5.5 - angelic expedient

This release of Critical adds new support for multi-dimensional critical CSS. When your site is adaptive and you want to deliver critical CSS for multiple screen resolutions this is a useful option. We also now support increased default dimensions for our generated CSS, moving towards a more practical set of default configuration.

Along with these additions, we've also improved our overall unit testing story and including several bug fixes that improve overall stability of the project.

Big thanks go out to @bezoerb @pocketjoso @sindresorhus @samccone for their help with this release.