# Google Page Speed Insights Render Blocking Resources - Custom Module CSS

**URL:** <https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192>\
**Category:** CMS Development\
**Tags:** developer-tools\
**Created:** [February 23, 2021, 8:55pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192 "2021-02-23T20:55:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mycar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mycar/32/28756_2.png) [@Mycar](https://community.hubspot.com/u/Mycar)\
**Post date:** [February 23, 2021, 8:55pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192/1 "2021-02-23T20:55:54Z")

</div>

![38494iC3669A55FC689473.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/e/2e940f62b175c793ad721165bd142c44439c3e62.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?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [February 25, 2021, 6:36pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192/2 "2021-02-25T18:36:18Z")

</div>

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](https://developers.hubspot.com/docs/cms/hubl/functions#require-css). Specifically, the part about async

---

<div class="post-metadata">

**Author:** ![Mycar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mycar/32/28756_2.png) [@Mycar](https://community.hubspot.com/u/Mycar)\
**Post date:** [February 25, 2021, 8:11pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192/3 "2021-02-25T20:11:42Z")

</div>

Hi @dennisedson , thanks for the reply.

 ![38687i72E5C79964605FCB.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/6/56c6f239b3a0ee752415be77bcce06d82be152fd.jpeg)

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?

---

<div class="post-metadata">

**Author:** ![John](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/john/32/43512_2.png) [@John](https://community.hubspot.com/u/John)\
**Post date:** [February 26, 2021, 1:26pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192/4 "2021-02-26T13:26:06Z")

</div>

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](https://community.hubspot.com/t5/HubSpot-Ideas/Add-css-async-option-to-module-s-meta-json-file/idi-p/412977) to add an async option to module’s meta.json file.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [February 26, 2021, 1:51pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192/5 "2021-02-26T13:51:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mycar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mycar/32/28756_2.png) [@Mycar](https://community.hubspot.com/u/Mycar)\
**Post date:** [February 26, 2021, 4:32pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192/6 "2021-02-26T16:32:07Z")

</div>

Thanks @John

---

<div class="post-metadata">

**Author:** ![OliaGozha](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oliagozha/32/58649_2.png) [@OliaGozha](https://community.hubspot.com/u/OliaGozha)\
**Post date:** [March 22, 2021, 8:00pm UTC](https://community.hubspot.com/t/google-page-speed-insights-render-blocking-resources-custom-module-css/32192/7 "2021-03-22T20:00:23Z")

</div>

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.

```lia-code-sample
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") }}"
 });
 });

```