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
. 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") }}"
});
});

