HTML bloat - any roadmap?

TTimes · ‎Aug 4, 2022

Hi

Coming from Wordpress with Advanced Custom Fields and custom themes and template I'm blown away by the amount of HTML bloat going on in HubSpot CMS.

We're building custom HubSpot themes, obviously with HubL, with focus on performance (lightouse etc).

We found that by building themes with custom modules directly instead of sections not only saves us time, but also improves bloat quite a bit. But it's still pretty extensive.

We don't use the flexible sections builder where the editor can drag modules into columns and adjust width etc. We find that a bit stricter approach ensures that the intended design is preserved which our clients appreciate (so that they don't "break things" as they would say).

Does anyone know if there's any method we haven't discovered to cut down on bloat or if it's in the developer roadmap of the HubSpot devs to cut down on bloat? I found a forum post somewhere saying that the engine is built on a (heavily?) customized Bootstrap 2?

Example of module bloat

This is the wrapper for ONE custom module inserted directly with drag an drop onto a page (not through Add Section):

In Wordpress we would have:

<body>
   <div class="site">
      <section class="example-section-one"></section>
      <section class="example-section-two"></section>
   </div>
</body>

The immense bloat also makes devtools inspection an unessecary timewaster with all the nested wrapper.

What are our options - and if none further - is there anything in the dev pipeline to crack down on bloat?

Cheers.

educarneiro · ‎Mar 19, 2024

The bloat issue is real and it's still there. It makes drag-and-drop with built-n modules almost unusable if you want to avoid bloated code.

Anton · ‎Aug 4, 2022

Hi @TTimes,

while you're 110% right with everything you've said - there are a few techniques how to reduce the DOM.

use no_wrapper=True(example) on (custom) modules will cut a few wrapping divs. BUT - I've also have seen weird errors by doing so. Like with "no_wrapper..." the module didn't worked at all - as soon as I removed it - it worked. Nothing else was changed.
You can implement every grid you want. Bootstrap5 - no problem. Tailwind - no problem. Completly up to you. But you'll have a lot of fun by remapping the logic of HubSpot grid to the framework classes.
You can always go the static template route and write plain HTML layouts with Hubls inside. This is great if you don't want to use the Drag&Drop builder. This won't work if you're planning to have the Drag&Drop functionality. But you could use a mix of both. Like hard coded (custom) modules inside a HTML template and some Drag&Drop areas somewhere.

Regarding the pipeline - this should be answered by some HubSpot devs. My last info is several years old.

hope this helps,

best,

Anton

TTimes · ‎Aug 8, 2022

Hi @Anton

Thanks for the reply.

We don't run any grid framework as they are not really relevant since display:grid and display:flex etc. are well integrated in modern browsers and we don't support anything below (and including) IE11 - unless the client specifically needs it.

We run our own frontend setup with HS and everything works great in tandem.

However, I truly hope that something is going to happen with the immense number of wrappers that HS is outputting.

@dennisedson Can you share any insights on the matter?

CMS Development