CSS Minifcation Issues

[MDiazCritelli]

Hello community!

We are currently working on SEO technical improvements and one of the main warnings we received from SEMrush (SEO tool) is that there's a header module of our template theme that's affecting almost every page and that is causing delays in the website. 

This is the link of the module: https://jjandsenvironmental.com/hs-fs/hub/7739966/hub_generated/module_assets/1675974060486/module_1...

I know Hubspot automatically minifies everything but I don't know why it's not applying it to this one. 

I was able to find the module in the design managers and tried creating a child theme to duplicate that module and minify the module.css code but I am afraid that when publishing the changes on my site my crush or all the style of the website would be modified.

What's the best way to minify that specific module without impacting anything else on my website?

Thanks a lot for the help!

[pm8rsh88 · Accepted solution]

I'm wondering if you may have a syntax error, which is preventing it from minifying?

On line 1509 of your CSS file, you have formatting that I have not seen before, or can find answers to. Try fixing the syntax to see if that works. 

.link-badge ? span:after,
.link-badge ! span:after {
  display: none;
}

You also have an empty ruleset, which you might want to consider removing unless you plan to use it in the future. 

.growfast-mega-menu .growfast-mega-menu__col {}

[MDiazCritelli]

Hey!

Thanks for your answer.

I'd love to try doing the changes but it doesn't allow me to make any changes in the parent theme. How do you suggest I make the changes?

Thanks!

[pm8rsh88]

You will need to create a child theme, edit and use that instead, as you can't edit the parent theme. 

[Gracjan]

Hi @MDiazCritelli , 

I guess HubSpot won't minify css file if there are some syntax errors in it but at first glance everything seems to be fine. What you could try to do is to copy the module into your child theme (you already did that) and then create a separate CSS file and copy&paste the css code from the module.css. After that you can link the CSS file in your module like so: {{ require_css(get_asset_url('FILE_PATH')) }}

Gracjan

[MDiazCritelli]

Hey Gracjan,

Thanks a lot for your quick response and help. Couldn't quiet get what you are suggesting. 

What do you mean by "create a separate CSS file"? If I already created a child module, shouldn't I just paste the new minified code and paste the new module.css so it overwrites the ones on the parents module? I thought this could be the solution but my fear is that the website will crush or that the styles will not look as my website and instead as the original theme template. 

What's the CSS file you are suggesting I link with {{ require_css(get_asset_url('FILE_PATH')) }}. ? That file path should be the new module.css created in the child theme?

Sorry for not following-up so easily but I'm not a developer hehe.

All the best.
Mateo.