PHPackages                             m2-boilerplate/module-critical-css - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. m2-boilerplate/module-critical-css

ActiveMagento2-module[Utility & Helpers](/categories/utility)

m2-boilerplate/module-critical-css
==================================

Magento 2 module to automatically generate critical css with the addyosmani/critical npm package

1.0.20(2y ago)3679.5k↓28.6%17[3 issues](https://github.com/m2-boilerplate/Module-Critical-CSS/issues)[1 PRs](https://github.com/m2-boilerplate/Module-Critical-CSS/pulls)MITPHPPHP >=7.1.0

Since Nov 3Pushed 1y ago2 watchersCompare

[ Source](https://github.com/m2-boilerplate/Module-Critical-CSS)[ Packagist](https://packagist.org/packages/m2-boilerplate/module-critical-css)[ RSS](/packages/m2-boilerplate-module-critical-css/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (22)Used By (0)

M2Boilerplate Critical CSS
==========================

[](#m2boilerplate-critical-css)

Magento 2 module to automatically generate critical css with [critical](https://github.com/addyosmani/critical)

Features:
---------

[](#features)

- generate critical css with a simple command
- Fallback critical css for "empty" pages
- Add urls by creating a custom provider

Installation
------------

[](#installation)

Install the critical binary. Install instructions can be found on the [critical website](https://github.com/addyosmani/critical#install). Only versions >=2.0.3 are supported.

Add this extension to your Magento installation with Composer:

```
composer require m2-boilerplate/module-critical-css

```

Usage
-----

[](#usage)

### Configuration

[](#configuration)

The critical css feature needs to be enabled (available in 2.3.4+):

```
bin/magento config:set dev/css/use_css_critical_path 1

```

Features can be customised in *Stores > Configuration > Developer > CSS*.

### Generate critical css

[](#generate-critical-css)

Run the following command

```
bin/magento m2bp:critical-css:generate

```

Afterwards you should find the the generated css in `var/critical-css`. The css will now be integrated automatically on your website.

Add additional URLs via a custom provider
-----------------------------------------

[](#add-additional-urls-via-a-custom-provider)

The following example adds the magento contact page via a custom provider:

```