Combined CSS nightmare

Highlighted
Regular Contributor

It's kind of nuts that this is still a problem. Our dev team took great efforts to split out the CSS that is common to all pages on our site into a common.css and then generated page-specific CSS files for those pages with a fair amount of custom CSS in order to not have one gigantic bloated common.css

 

And in comes HubSpot trying to do its magic with combining CSS. The result is that now NONE of our CSS is cached in the browser because every single visit to a page on our site now requires downloading a new unique gigantic combined CSS file generated by HubSpot's wizards who are implementing practices that made sense in 2008 before the advent of HTTP 2 which allows simultaneous multiple downloads.

 

Combining CSS no longer improves load times for modern browsers and in our case, it actually makes our site far slower because nothing is ever cached in the browser (unless a visitor managed to visit all 30 pages on our site and cache each one's unique combined CSS file).

 

We have submitted this to support and supposedly the "engineers can't see the combined CSS". ¯\_(ツ)_/¯

 

Here are screenshots of what the HTML SHOULD look like and what HubSpot is butchering it to actually be. I don't know why the devs can't see it but this will seriously be the thing that causes me to just leave HubSpot entirely, I don't need or want you to "fix" my optimized web site.

 

What do we have to do to fix this? It's just so unbelievable.

 

Browser output (what HubSpot is butchering it to be)Browser output (what HubSpot is butchering it to be)Output (what it should be)Output (what it should be)

2 Replies 2
Highlighted
HubSpot Alumni

Hi @arlogilbert,

 

I know it's been a few months since you posted this. Sorry that you didn't get a response and that this is a frustrating issue. For what it's worth, there has been talk about improving this process. I know your question was more about the combination process, but just to clarify: there are separate processes for minification and for combination.

 

There isn't currently good documentation around what causes these processes to fail or how they work. The list that I have for what prevents minification is:

 

0% in hsla
0% in rgb
any @supports
any 0s

I've brought the issue up again today and we're now working on publicly documenting these processes and any specific syntaxes that break the minification/combination processes. My understanding with combination (and I realize that part of the frustration here is that it's not well-documented) is that we use a visual diff for determining whether or not to serve up the combined.css file. So we attempt to combine CSS files. Then we compare visually what the site looks like using the generated combined.css file. If it looks different (like if it doesn't match pixel-for-pixel), then we don't serve up that combined.css file. Otherwise the combined file is served.

 

I believe it's also possible to disable combination for a specific account. It's not a functionality that we've exposed to developers, but if you're still frustrated by having the combined CSS file served up, I'm happy to look into it for you. I think I can file a ticket internally to get your account added to that list, so let me know if you want that done.

 

Let me know if you have any other questions about these processes and I'll see what we can do on our end.

 

Leland Scanlan

HubSpot Developer Support
New Member

For what it's worth, there has been talk about improving this process.

...

There isn't currently good documentation around what causes these processes to fail or how they work.

...

I've brought the issue up again today and we're now working on publicly documenting these processes and any specific syntaxes that break the minification/combination processes.


Has there been any improvements to this process or to the documentation on what breaks CSS combination? I am in a situation where none of our CSS is combining (it is minified) and I have to individually drop my modules on a page and comb through them one by one to determine what is breaking the CSS combination.

Reply
0 Upvotes