Implementing of critical rendering path

EOrlov — Tue, 25 Jun 2024 14:44:54 GMT

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?

Re: Implementing of critical rendering path

EOrlov — Wed, 26 Jun 2024 09:05:21 GMT

Any news on this?

Re: Implementing of critical rendering path

Anton — Thu, 27 Jun 2024 08:04:26 GMT

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

topic Re: Implementing of critical rendering path in CMS Development

Implementing of critical rendering path

Re: Implementing of critical rendering path

Re: Implementing of critical rendering path