Google Page Speed Insights Render Blocking Resources - Custom Module CSS

I’m trying to reduce page load time. Is it possible to locate where these css files are being loaded onto the page to either async or defer them?

Hey @Mycar ,

You should be able to inspect the page and see where they are rendered

Would be good to take a look at this function. Specifically, the part about async

Hi @dennisedson , thanks for the reply.

The stylesheets are loaded in <head>, but the code is automatically generated by hubspot so I have no easy access to it. How can I add attributes to these tags?

One thing you could do @Mycar is consolidate your commonly used module’s css to a modules.css file. But I do agree, it would be nice to have a setting for module’s css files to have the async option that is available in the function that @dennisedson mentioned.

That’s why I created this idea to add an async option to module’s meta.json file.

@John sneaking around in the forums :grin:. Nice to see ya!

Thanks @John

Thank you @Mycar for bringing up this issue.
We have been pondering over this same problem for a while within our small studio of two.
Another possible solution for this issue would be a bit of a javascript.
Here’s a code snippet that might work well to give you control over the loading process.

var linkLoader = function (param) {
 var headID = document.getElementsByTagName('head')[0];
 var link = document.createElement('link');
 link.type = 'text/css';
 link.rel = 'stylesheet';
 headID.appendChild(link);
 link.href = param.href;
};
document.addEventListener("DOMContentLoaded", function(event) { 
 linkLoader({
 href: "URL_TO_STYLE_FILE" // Example href: "{{ get_asset_url("/modules/shared_layout_styles.css") }}"
 });
 });