Add css async option to module's meta.json file

John

It would be amazing to have an async argument in modules. Maybe in meta.json?


I saw in the require_css function there is now an { async: true } argument and that would be helpful for a footer module’s css to load asynchronously, for example. 

HubSpot updates
3 Replies
Sjardo
Contributor | Diamond Partner

If we can simply get an option where you can set if you want to defer CSS and JS of the module, that would be great! This way we can simply tell each module what to do with the css.

 

A second step would be reading what module is just on the top XXX pixels of the page and defer everything else (with overwrite option if nessesary) .

 

Design_Manager___HubSpot.png

BenjaminRazi
Participant | Gold Partner

In most cases, if we want to improve page speed, we need to keep CSS and JS in separate files to access async and defer parameters. But, unfortunately, that forces us to miss out on the enormous value of keeping everything (HTML, CSS, JS) organized in the module.

 

This is critical to be 'compliant' with Google's Core Web Vitals.

ANelson5
Member

Agreed on this being critical to Google's Core Web Vitals.  I'm in the process of preparing a client's new site for launch soon and am noticing this exact limitation.  I tried a hacky approach that seemed to pass the Core Vital test that was failing, but is FAR from adequate:

  1. Removed any\all CSS in my Coded Modules and stuck them in my global level CSS file
  2. Unlinked the CSS's that I was referencing in my template and added them as <link>'s in the 'Additional markup before </body>' area
  3. Cloned my Drag\Drop page template as HTML and removed the reference to the default layout.css

As I mentioned, I got around the test that was failing, but I've had to fallback on on terrible web development practices to do so.  I'm hoping Hubspot can add this quickly.