Minify CSS to help with website performance

[NancyL]

We're trying to minify our css file in hope that it would help to improve the speed of our pages and  ran into problem below:

The list of CSSm Lint errors has been reduced to 14. The remaining ones are due to the way certain properties are being created. For example:

{% include "hubspot/styles/responsive/modules.css" %}
{% include "hubspot/styles/patches/recommended.css" %}

{% set baseColor = "#26D07C" %}

.body-container-wrapper li:before {
position: absolute;
content: '';
top: 12px;
left: -20px;
background: {{ baseColor }};
height: 2px;
width: 8px;
}

The developer who has been working on this says that we can just hardcode in the value instead and it will pass the CSS Lint test. My concern is if we wanted to make changes in the future, we would have to do it manually and it would take longer. Do you have any suggestions on how to approach this? Any help would be greatly appreciated! 

Thanks,
NancyL

[Siyuan]

Im also dealing with the same problem. In my head, how come HS iwon't build an integration or addon for minfication, instead of them doing it?

But how can I update the files and where am I suppose to look at on HS to update my JS and CSS files.

[AJLaPorte_diagr]

HubSpot should be minifying your CSS by default. Do you have a link to your site where we can look at it? 

[NancyL]

Hi,

I'm aware of that but  HS said because we have syntax errors, our css files cannot be minified. We're planning to apply the mentioned edits to the css on this page: https://www.brandify.com/.

Did it help to clarify?

The issue comes up as we run the test on webpagetest.org, anyone has experience testing their HS hosted pages there? According to the result, we also have issues with cache static content, we got "F"  grade for it but HS claim that our content is cache, any suggestion how to can test/verify that? 

Thanks,
Nancy 

[AJLaPorte_diagr]

Ah ok, if you have syntax errors in your css file, we'd need to be able to see the whole file in order to help figure out where those could be (might be something as small as missing a curly brace on a variable). 

As for caching issues, someone from HubSpot would have to speak on that. I know a lot of people have in the developer slack have brought up the lower performance marks they get with Google Page Speed Insights. If you would like an invite to the slack channel for it just send me your email in a DM and ill invite you over to it. You can try asking around in there. 

-AJ

[NancyL]

Hi AJ,

Please see here for our css files, and regard the  first questions,  we were thinking to manually remove: {{ baseColor }} with the hex code as it showed on CSS Lint that they are errors, not sure if this would be best practice and if doing so would help or is there any better way we can  fix our css so HS can minify it. 

Also we tried to minify this css using another program and was able to generate a min.css file. Can we load it to HS to use? is it the best practice to do so?  

Thanks,
Nancy

[AJLaPorte_diagr · Accepted solution]

Hi Nancy, 

As @Gonzalo has mentioned, the link you posted is to the backend of your portal and we are unable to see this information without being added to the account. From what I was able to find by grabbing you sites CSS file and looking through it:

Note: Comments in Bold are what was found. The pieces in red are the variables referenced in the bolded text.

/* you have an underclared variables - either comment out or remove */

.custom-menu-primary .hs-menu-wrapper > ul{ 
  background:;<--------------------- Comment Out or Remove
}
.custom-menu-primary .hs-menu-wrapper > ul > li{
  background:;<--------------------- Comment Out or Remove
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a{
  color:;<--------------------- Comment Out or Remove
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{
  color:;<--------------------- Comment Out or Remove
}

.custom-menu-primary .hs-menu-wrapper > ul ul li{
  background:;<--------------------- Comment Out or Remove
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{
  color:;<--------------------- Comment Out or Remove
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{
  color:;<--------------------- Comment Out or Remove
}



/* you have an underclared variable - either comment out or remove */
.jumbo-3-testimonial-section .testimonial-cm p{
  opacity: 0.4;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: ;  <--------------------- Comment Out or Remove
  opacity:0.4;
  padding: 20px 20px 20px 45px;
  margin: 0 0 50px 0;
  text-align: left;
  position:relative;
}


/* you have an underclared variable - either comment out or remove */
.jumbo-3-testimonial-section .testimonial-cm h4{
    font-size: 16px;
    font-weight: 800;
    line-height: 26px;
    color: ;  <--------------------- Comment Out or Remove
    opacity:0.4;
    margin-top: 10px;
    margin-bottom: 3px;
}


/* you have an underclared variable - either comment out or remove */
.jumbo-3-faq-section-two .accordion_group h5:before{
    content: "\f128";
    position: absolute;
    font-size: 18px;
    line-height: 31px;
    color: ;   <--------------------- Comment Out or Remove
    font-family: FontAwesome;
    left: -43px;
    top: 2px;
    font-weight: 300;
    background: #e7e7e7;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 100%;

}

/* you have an underclared variable - either comment out or remove */
.jumbo-3-faq-section-two .accordion_group.expanded h5:before{
    background:; <--------------------- Comment Out or Remove
    color:#ffffff;
}

/* you have an underclared variable - either comment out or remove */
.jumbo-3-section-five{
    padding:75px 0px;
    color:;  <--------------------- Comment Out or Remove
    background: rgb(249, 249, 249);
}

/* you have an underclared variable - either comment out or remove */
.jumbo-3-section-five h2{
    color:; <--------------------- Comment Out or Remove
}


/* you have additional css no apart of a variable - remove it */
.jumbo-3-single-team-member .social-icons .fa {
   text-align: center;
    line-height: 30px;
    font-size: 20px;
    border-radius: 50%;
    color: #333;
    margin: 0 2px;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    margin-right: 10px;ease-in;   <----- Remove the 'ease-in;' portion
    transition: all .2s ease-in;
}

/* you have an underclared variable - either comment out or remove */
body .row-fluid .jumbo-5-jumbo-5-contact-us-one-col .wrapper{
    max-width:850px;
    background:; <--------------------- Comment Out or Remove
}



/*You have an additional '.' before your jumbo-7-jumbo-home-section-one class, remove additional period*/
body ..jumbo-7-jumbo-home-section-one .row-fluid .left-col-width{
    width:50%;
}


/*You have an additional '.' before your jumbo-7-jumbo-home-section-one class, remove additional period*/
body ..jumbo-7-jumbo-home-section-one .row-fluid .hero-cta-grp{
    margin: 62px auto 0;
    float: none;
    display: block;
    text-align: center;
    width: 100%;
    max-width: 296px;
}


/* you have an underclared variable - either comment out or remove */
.jumbo-lp-2-section-3 h2{
    color:; <--------------------- Comment Out or Remove
    font-size: 38px;
    margin-bottom: 0px;
    letter-spacing: .25px;
    font-weight: 300;
    padding-bottom: 40px;
}


/*You have an additional '.' before your jumbo-7-jumbo-home-section-one class, remove additional period*/
body ..jumbo-lp-7-features-section .row-fluid .features-cm-container>span {
    margin-right: 0;
}


/*Look like you have a class inside of your css declarations. Remove the .jumbo-blog-1*/
.span3.pop-post-image {
.jumbo-blog-1     float: left;
    width: 50px;
    margin-right: 15px;
}

There were also some places where I noticed a double semi-colon on some properties. The easiest way to find these items is to search for the classes above in your stylesheet then fix accordingly. For example, search for .span3.pop-post-image should take you to the issue area. You might have to go through the search results if this class selector is repeated in your CSS till you find the right chunk of code with the error. You can also search for ;; to find the areas with the double semi-colons. 

I hope this helps troubleshoot your issue and gets you to getting your CSS minified. In terms of best practices, I (personally) would keep the HubL variables (like {fontColor}}) in your stylesheets as it helps with updating multiple places later on. As far as minifying outside of HS, I do know some people who do this but its because of their in-house development processes and other things they may use for building out the files. I don't see any reason why HS's minification wouldn't be enough for your site though so I would stick to using theirs. 

-AJ

[sgarga]

I am suffering from similer problem. I manually minify css file but when i test it on semrush it again show warning. Please help to resolve this. The issue is only with style.css file because when i manually minify and add js files it remove warnings of js files from semrush. But when i do same with style.css file it doesn't do anything.

[MKern1]

Hi! Did you end up finding a solution for this? We also work with SEM rush and having the same issuse with a few CSS files in Hubspot. Thanks! 

[kyle4]

have you found an answer to this? I am dealing with the same thing.

[Gonzalo]

Hello @NancyL,

Did you fix that already?

We can't access that link as that is your internal portal link and we don't have access to it.

To help you we need a public link to the file (or a link to any published page and the name of the file should be enough).

[NancyL]

Hi, 

Here's the link to our site: https://www.brandify.com/

Thanks,

Nancy