# Implementing of critical rendering path

**URL:** <https://community.hubspot.com/t/implementing-of-critical-rendering-path/110067>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [June 25, 2024, 2:44pm UTC](https://community.hubspot.com/t/implementing-of-critical-rendering-path/110067 "2024-06-25T14:44:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![EOrlov](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/eorlov/32/196616_2.png) [@EOrlov](https://community.hubspot.com/u/EOrlov)\
**Post date:** [June 25, 2024, 2:44pm UTC](https://community.hubspot.com/t/implementing-of-critical-rendering-path/110067/1 "2024-06-25T14:44:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![EOrlov](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/eorlov/32/196616_2.png) [@EOrlov](https://community.hubspot.com/u/EOrlov)\
**Post date:** [June 26, 2024, 9:05am UTC](https://community.hubspot.com/t/implementing-of-critical-rendering-path/110067/2 "2024-06-26T09:05:21Z")

</div>

Any news on this?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 27, 2024, 8:04am UTC](https://community.hubspot.com/t/implementing-of-critical-rendering-path/110067/3 "2024-06-27T08:04:26Z")

</div>

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:

```lia-code-sample
{#- 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

```lia-code-sample
{% if template_css %}
 {{ require_css(get_asset_url(template_css)) }}
{% endif %}

```

best,

Anton