CMS Development

Mycar
Participante

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver

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 Me gusta
1 Soluciones aceptada
John
Solución
Colaborador líder | Partner nivel Platinum
Colaborador líder | Partner nivel Platinum

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver

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.

Ver la solución en mensaje original publicado

6 Respuestas 6
OliaGozha
Colaborador

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver

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") }}"
    });
  });
John
Solución
Colaborador líder | Partner nivel Platinum
Colaborador líder | Partner nivel Platinum

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver

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.

Mycar
Participante

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver

Thanks @John 

0 Me gusta
dennisedson
Equipo de producto de HubSpot
Equipo de producto de HubSpot

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver
@John sneaking around in the forums 😁. Nice to see ya!
0 Me gusta
dennisedson
Equipo de producto de HubSpot
Equipo de producto de HubSpot

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver

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

0 Me gusta
Mycar
Participante

Google Page Speed Insights Render Blocking Resources - Custom Module CSS

resolver

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 Me gusta