Usage

Prerequisites

To perform its function, django-critical-css requires:

• service for critical css calculation available (e.g. penthouse-service).
• redis worker available.

Templatetag for inlining critical css

django-critical-css provides the critical_css templatetag to inline critical css from the database into your template using templates/critical/critical.html.

{% load critical_tags %}

{% critical_css 'your/css/styles_path.css' %}

If page does not have any critical css saved in the database yet or the css path of the saved

critical-cms-object is different than the argument of critical_css the tag will return a normal stylesheet link-tag.

The css path will be modified as when using the django static templatetag, e.g.:

<link rel="stylesheet" type="text/css" href="/your_static_url/your/css/styles_path.css" />

Additionally, the templatetag will asynchronously trigger the calculation of critical css.

Object for saving critical css

Critical css is saved into the database together with the page url, the url of the css file, and the date of last modification.

Critical css calculation

The calculation of the critical css itself is not within the scope of this library. You have to use an external service that does this job. The default backend is penthouse-service. To use it run an instance of the service and provide the url in settings:

PENTHOUSE_URL = 'http://your_penthouse:3000/'

You can provide an additional configuration to penthouse-service.

PENTHOUSE_CONFIG = {
    'width': '720',
    'propertiesToRemove': [
        '(.*)animation(.*)',
        '(.*)transition(.*)',
    ]
}

Alternatively, you can define your custom function, which takes url and css path as arguments and returns critical css as string.

CRITICAL_CSS_BACKEND = 'function.calculating.critical.css'

Management command for emptying critical css

django-critical-css provides a management command to remove all critical-css-objects saved in the database. It will cause recalculation of critical css for each page on the first request.

python manage.py empty_critical_css

Additional settings

• By setting CRITICAL_CSS_ACTIVE to False you can deactivate css calculation for your dev environment. By default critical css calculation is set to active.
• By setting CRITICAL_CSS_IGNORE_QUERY_STRING to False you can ignore query string in the url. Then both urls /?p=1`and `/?p=2 will be treated as one / and only one database object will be created.

Usage with django-cms

It is possible to use django-critical-css together with the django-cms library. If django-cms is installed, a signal for deleting critical css upon publication of a page will be activated. This way, if the page changes, the critical css is recalculated and no obsolete content is shown. In draft mode, critical css is not active - the draft pages are always rendered through the traditional path.