Some styles miss in critical file output

[mrtuvn]

Is this a normal behavior ? After run gulp task gen critical i will expected file get all neccessary styles need for render page without jank or unstyles. In a reality i tested this with default luma theme of magento (not use default magento file critical) . https://github.com/magento/magento2/blob/2.4-develop/app/design/frontend/Magento/luma/web/css/critical.css

I found this file critical.css generated miss some styles relate (breadcrumbs). This link on top below nav. User while load page may notices some breaks in this component because styles not available soon enough

Here is my screenshot for reference (when page loading)

Expected results Page should load at early stage without missing styles (look like jank or broken)

Actually results Some area miss styles can see when page loading!

[volodymyr-lisniak]

@mrtuvn Could you show me your criticalConfig.js file?

[mrtuvn]

of course here you go

[mrtuvn]

module.exports = { hostname: 'app.contribution', generic: 'test', useHttp2: true };

file local.js Not sure you can reproduce same like mine

MAYBE OUT OF SCOPE OF THIS REPORT Used ubuntu 18.10 My enviroment running in docker (nginx,php,mysql,node) node v10.22.0 npm v6.14.6

When run critical task inside dockeri got issue like this

So i have to run outside of it (right in project root folder contain my project) From host machine (outside) node v10.24.0 npm 6.14.11

[volodymyr-lisniak]

@mrtuvn Maybe you have broken the page at the moment when you run gulp critical --luma?

Here are my examples with different configs (criticalConfig.js)

module.exports = {
    ...
    height: 130,
    ...
};

critical.css 11KB

module.exports = {
    ...
    height: 900,
    ...
};

critical.css 16KB

[mrtuvn]

i have tested with luma install with sample data inside docker but somehow critical task gulp can't run inside that. So i have to run from outside host machine. Task run complete without anyproblem but the final result seem miss some styles

My expect is file output critical should be have all neccessary styles need for render page without jank. I don't have retouch/modify that file after file generated

Your results pretty much close like me

[volodymyr-lisniak]

@mrtuvn Does critical.css size change with different settings in your case?

module.exports = {
    ...
    height: 900,
    ...
};

critical.css 16KB

module.exports = {
    ...
    height: 130,
    ...
};

critical.css 11KB

[mrtuvn]

Yes i think value will be difference

[volodymyr-lisniak]

I think this problem is caused by the page you are tested. If you check the styles on the home page everything should be ok because critical.css created for exactly this page.

module.exports = {
    ...
    url: `${ptotocol}://${localConfig.hostname}.${localConfig.generic}/`,
    ...
};

As a solution, I can recommend creating critical styles only for the header (130px in the case of the Luma theme). And for the rest of the page, you could use the loader to hide the unstyled content before the main styles are loaded.

[volodymyr-lisniak]

@mrtuvn Does it satisfy your request? Can I close the issue?

[mrtuvn]

OK i think we can close it now. Thanks you