Implementing of critical rendering path

Develop, Build & Integrate CMS Development
1

We experience main.css with very low coverage on certain pages. What is the way to divide main.css into a part loaded by <style> inline and a deferred part?

2

Any news on this?

3

Hi @EOrlov,

implementing a more “component”-based/Atomic-Design approach is definetelly doable but can be quite a workload if you’re implementing it not from scratch.
If your main.css looks a bit like this:

{#- 1. Generic -#}
{% include './generic/_reset.css' %}
{% include './generic/_normalize.css' %}

{#- 2. Layout -#} 
{% include "./layout/_layout.css" %}
{% include "./layout/_bootstrap.css" %}

{#- 3. Global -#} 
{% include "./global/_buttons.css" %}
{% include "./global/_forms.css" %}
{% include "./global/_typography.css" %}
{% include "./global/_navigation.css" %}

{#- 4. Modules -#}
{% include "./module/module-a.css" %}
{% include "./module/module-b.css" %}
{% include "./module/module-b.css" %}
...

and you like to switch to an approach that will load the module-*.css files only if this module is used on a page, you can put something like this into your module.html

{{ require_css(get_asset_url("../../../css/modules/module-a.css")) }} {# change the path to your folder structure #}

if you want to include a template specific CSS file into a template you can put this:

{% set template_css = "../../css/templates/template-a.css" %} {# change the path to your structure #}

Note: If you want to use the template_css option, make sure that your base.html/layout.html has this line in the <head>-tag

{% if template_css %}
 {{ require_css(get_asset_url(template_css)) }}
{% endif %}

best,

Anton