critical

Extract & Inline Critical-path CSS in HTML pages

APACHE-2.0 License

Downloads
106.2K
Stars
10K
Committers
36

Bot releases are hidden (Show)

critical -

Published by bezoerb about 5 years ago

  • fix: rebase in external CSS with absolute url (#395) fdcf345

https://github.com/addyosmani/critical/compare/v2.0.0-21...v2.0.0-22

critical -

Published by bezoerb about 5 years ago

  • Bump dependencies 624361f
  • Update dependencies. (#396) d7a8d22
  • Rename minimistOpts to meowOpts. (#397) 055b669

https://github.com/addyosmani/critical/compare/v2.0.0-20...v2.0.0-21

critical -

Published by bezoerb about 5 years ago

  • README.md: various tweaks. (#387) 1012707
  • Update README.md ec39355
  • Fix minor typos in comments. 7f2e84f
  • Update CHANGELOG.md (#392) 90c55bc
  • Add back "use strict" statements. (#385) ceb4df7
  • Update dependencies. (#383) e0ca0e7
  • Use ES6+ more. (#390) 99d42f5
  • Merge pull request #391 from addyosmani/master-xmr-fixtures-dir c0b666a
  • blackbox.test.js: move fixtures path to a variable. 520efb5
  • README.md: use shields.io for all badges. (#386) 52c41d1
  • README.md: fix img URL. e9b4876
  • README.md: Optimize and add the preview image to the repo (#388) 35a1a19
  • Fix Support for Gulp 3 Streams (#378) c4011ea
  • Clean up .gitignore. (#384) eada900
  • src/file.js: fix typos in comments 2d9798e

https://github.com/addyosmani/critical/compare/v2.0.0-19...v2.0.0-20

Thanks to @XhmikosR & @jlukic

critical -

Published by bezoerb about 5 years ago

  • Skip the PAGE_UNLOADED_DURING_EXECUTION` tests. (#393) 54a1cb7
  • Skip the PAGE_UNLOADED_DURING_EXECUTION` tests. bf51c17

https://github.com/addyosmani/critical/compare/v1.3.5...v1.3.6

critical -

Published by bezoerb about 5 years ago

  • README.md: Optimize and add the preview image to the repo (#388) 6959f4f
  • Clean up .gitignore. (#384) 5e412de
  • Update test files. 26e05c2
  • Separate npm scripts. 8ced8fe
  • Fix PostCSS warning. dab82a4
  • Move get-port to devDependencies. 537256a
  • Update AppVeyor config from master. 1fadc30
  • Update Travis config from master. 440d613
  • Fix tests on Windows. (#330) 25ee370
  • Lint. 1c2e7ba
  • Update all dependencies to their safe versions. 0825d31
  • Remove yarn.lock. 4e4ce13

https://github.com/addyosmani/critical/compare/v1.3.4...v1.3.5

Thanks to @XhmikosR

critical - v1.2.0

Published by bezoerb over 6 years ago

  • f0aba49: Allow external stylesheets passed as css option [#290]
  • 045096d: Add Tests for #277

See the complete changes for this release: https://github.com/addyosmani/critical/compare/v1.1.0...v1.1.1

critical - v1.1.1

Published by bezoerb over 6 years ago

critical - v1.1.0

Published by bezoerb almost 7 years ago

Release highlights for v1.1.0

  • Bumped inline-critical which makes cssrelpreload.js no longer dependent upon loadCSS.js resulting in a smaller payload.

Bugfixes

  • Better temporary file removal [#255]
  • Fix corrupted 'File.contents' [#191,#218]
critical - v1.0.0

Published by bezoerb almost 7 years ago

This release brings some great changes to the Critical API

Release highlights for v1.0.0

  • Move from PhantomJS to Chrome headless #229
  • Much faster execution

Bugfixes

  • Don't enforce strict SSL for external assets #171
  • Allow http 2xx response codes #244
  • Replace '|' with its HTML character entity reference #248

Deprecation notice

  • Critical v1.0.0 requires at least node v6.4.0
  • Deprecated methods introduced in v0.6.0 have finally been removed

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

critical - v0.9.1

Published by bezoerb about 7 years ago

critical - v0.9.0

Published by bezoerb over 7 years ago

critical - v0.8.4

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

critical - v0.8.3

Published by bezoerb over 7 years ago

  • cc12aeb57100cee0c074899cfb9726c56be54bba Fixed multi-dimension critical-path CSS
critical - v0.8.2

Published by bezoerb over 7 years ago

critical - v0.8.1

Published by addyosmani almost 8 years ago

See the commit list for 0.8.1 for the latest changes since 0.8.0.

critical - v0.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.

critical - v0.7.3

Published by addyosmani over 8 years ago

critical - v0.7.2

Published by bezoerb over 8 years ago

critical - Critical 0.7.0

Published by addyosmani almost 9 years ago

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:

jekyll

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 💌

critical - 0.6.0

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.

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
  • 5927d0998ca4471cf3a5ab6bc62bcfdbf6fd78b6 Added Gulp stream support