Making Municipio lighter — loading only what a page actually needs

We’ve been doing a lot of work lately on something that is mostly invisible when it works well: making Municipio load less.

With Municipio 6.3, several parts of the frontend have been reworked around a fairly simple principle: a page should only load the code and styles it actually needs.

That might sound obvious, but on a large platform like Municipio it makes a real difference.

Why loading awareness matters

Municipio consists of a lot of reusable components, modules and integrations. That flexibility is one of the strengths of the platform — but traditionally it can also mean that a browser is given CSS, JavaScript, icons and other resources for functionality that never appears on the page.

A page containing a simple text article should not have to pay the performance cost of every component available in the design system.

So we’ve started making the platform much more aware of what is actually being rendered.

Components now register and load their assets when they are needed instead of assuming that everything might be needed everywhere.

The result is less unnecessary CSS and JavaScript, fewer resources for the browser to download and process, and a better foundation for faster Municipio websites.

Components bring what they need

A large part of this work has happened across Municipio and the Styleguide.

Component assets can now be built and loaded independently, allowing Municipio to determine which resources a page needs based on the components actually used on that page.

The same principle is being applied to utility styles and repeated component styles. Instead of loading the complete set globally, Municipio can increasingly include only the relevant pieces.

This changes the way we think about frontend assets in Municipio.

Rather than asking:

“What might this website need?”

we can increasingly ask:

“What does this page need right now?”

That distinction is important as the platform grows.

Smaller icon payloads

Icons have received the same treatment.

Municipio is moving towards SVG-based icons rather than relying on a large icon font containing icons a visitor may never see.

SVG icons can be loaded individually, which means that using a handful of icons no longer requires downloading an entire icon library.

It also gives us a cleaner foundation for how icons are rendered and styled across components.

Heavy functionality can wait

Not everything needs to be available during the first milliseconds of a page load.

The chat functionality is one example. It can now be lazy-loaded, allowing the primary page content to become available without immediately loading everything required by the chat interface.

This approach is something we want to use more broadly: functionality that isn’t necessary for the initial page experience should not compete with the content that is.

Removing dependencies where we can

Performance work is not only about splitting CSS files.

The alarm integration, for example, has been moved away from jQuery and now uses WordPress’ own API utilities.

The JSON Render module has undergone a larger change, replacing its React-based renderer with a lighter API-based implementation while also improving asynchronous rendering and asset handling.

Individually, changes like these may seem small. Across a platform and across thousands of page views, they add up.

Performance as an architectural concern

The important part of this release isn’t any single optimization.

It is that loading awareness is becoming part of the architecture of Municipio itself.

When we create a component, module or integration, we increasingly want it to be responsible not only for what it renders, but also for when its resources are needed.

That makes it possible for Municipio to continue growing without every new feature automatically making every page heavier.

There is still more work to do. Performance is rarely something you finish — particularly in a modular platform with many independently developed packages.

But the direction is clear:

Load what is needed. Load it when it is needed. Avoid loading everything else.

For visitors, the goal is simple: Municipio websites should feel fast regardless of how much functionality exists behind them.