CMS Development

arlogilbert
投稿者

Combined CSS nightmare

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)

8件の返信
Sjardo
トップ投稿者 | Elite Partner
トップ投稿者 | Elite Partner

Combined CSS nightmare

@jmclaren Hi,

 

One of the issue I see, is that on some pages alle the css files are automaticly combined into 1 big CSS file. Yet, on other pages this does not happen. I'm interrested in when it does or does not happen, so I can work around it and make sure nothing combines!

I am fully aware that combining css is not the way to go. Some of the issue's im facing are being questiond by @arlogilbert and answerd by you. Thats why I was interested in the current state of the issue, as it seems not solved yet.

It seems like a really, really bad developer expreciens if i have to create some useless CSS styling that includes any of the following, just to make sure that HubSpot wont combine my files.

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


And therefore, I would like to know if there is any information or documentation when CSS is combined, and when it wont.

Best,

Sjardo Janssen

 

0 いいね!
jmclaren
HubSpot Employee
HubSpot Employee

Combined CSS nightmare

For older HubSpot accounts that already had combining enabled those files will still be combined. This prevents this being a breaking change to pre-existing websites. For newer accounts combining is disabled. 

As Iscanlan noted above if you wish to disable it on an old account you can reach out to HubSpot Support through help.hubspot.com or in-app through the chat or ticket system.

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

RaduM
メンバー

Combined CSS nightmare

Too bad to hear combining the CSS is no longer a feature 🙁. We run our tests just a few weeks or a month ago and combining the CSS was huge improvement of the Google PSI score on mobile. <Render blocking resources> was practically eliminated after combining the CSS. I hope this is further investigated and maybe let people choose if they want or don't want to combine the CSS.

0 いいね!
Sjardo
トップ投稿者 | Elite Partner
トップ投稿者 | Elite Partner

Combined CSS nightmare

I completely missed that paragraph! i'll have a chat 😉

Thanks for the quick reply

Sjardo
トップ投稿者 | Elite Partner
トップ投稿者 | Elite Partner

Combined CSS nightmare

Hi,

 

are there any updates on this issue? We would really like to get more grip on the whole process.  

Best,

Sjardo

0 いいね!
jmclaren
HubSpot Employee
HubSpot Employee

Combined CSS nightmare

@Sjardo Generally speaking it’s not the best practice to do that for performance so we don’t. Thanks to HTTP 2 the way you should think about your CSS has changed from the days of monolithic files. Browsers can request multiple assets at once. 

 

First and foremost when optimizing the speed of your css you should only load css that’s actually needed to render the page. If you load CSS that isn’t used on the page that’s extra file size, and extra CSS processing in the browser that doesn’t need to happen. Your files should be cacheable, so if you navigate to a subsequent page - anything that was previously loaded should be pulled from cache so you only have a minimal amount of CSS to fetch.

 

In other words if you have 10 modules on your homepage, and a visitor navigates there. Then they click a link to go to your about page. The about page has some of the same modules as the homepage, plus 1 new one the visitor hasn’t seen. Instead of downloading MB of CSS they get a tiny few kb css file containing only the CSS for the new module. Everything else is returned from cache making loading incredibly fast.

 

Now there is further optimization you can do. If you have modules that are frequently always loaded together, you could put those in a shared stylesheet that you either load using require_css or an attached stylesheet to the module. A prime example of this are your site’s header and footer modules. If these modules are always used together, then why not bundle their css.  This will save some separate requests. Similarly if you have CSS classes that you share across modules you should do the same vs repeating CSS in each module.

 

More CMS Hub performance tips can be found in our documentation.

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

lscanlan
元HubSpot社員
元HubSpot社員

Combined CSS nightmare

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
ryanburr
メンバー

Combined CSS nightmare


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.

0 いいね!