Google Page Speed Insights Render Blocking Resources - Custom Module CSS

SOLVE
Mycar
Participant

Mycar_0-1614113546783.png

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?

 

0 Upvotes
1 Accepted solution

Accepted Solutions
John
Solution
Top Contributor | Platinum Partner

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.



I like kudos almost as much as cake – a close second.

View solution in original post

6 Replies 6
dennisedson
Community Manager

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

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Mycar
Participant

Hi @dennisedson , thanks for the reply.

Mycar_0-1614283735631.png

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?

0 Upvotes
John
Solution
Top Contributor | Platinum Partner

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.



I like kudos almost as much as cake – a close second.

View solution in original post

dennisedson
Community Manager
@John sneaking around in the forums 😁. Nice to see ya!
Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Mycar
Participant

Thanks @John 

0 Upvotes
OliaGozha
Contributor

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