CMS Development

EOrlov
Member | Platinum Partner
Member | Platinum Partner

Implementing of critical rendering path

SOLVE

 

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?

 

 

0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader

Implementing of critical rendering path

SOLVE

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

Anton Bujanowski Signature

View solution in original post

2 Replies 2
EOrlov
Member | Platinum Partner
Member | Platinum Partner

Implementing of critical rendering path

SOLVE

Any news on this?

 

0 Upvotes
Anton
Solution
Thought Leader

Implementing of critical rendering path

SOLVE

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

Anton Bujanowski Signature