File this under “cool things I didn’t know about HubSpot local development”: you can actually configure your custom module CSS to load asynchronously, rather than being injected directly into the page inside <style></style> tags. This gives you more control over how and when your styles are loaded, makes the markup a bit cleaner, and can contribute to better performance and SEO by reducing render‑blocking CSS on initial page load.
Just add -
"css_render_options" : {"async": true}
to your modules meta.json<link class="hs-async-css" rel="preload" href="https://[portal_id].hs-sites.com/hubfs/hub_generated/module_assets/1/208954721852/1773141719328/module_before_after.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://[portal_id].hs-sites.com/hubfs/hub_generated/module_assets/1/208954721852/1773141719328/module_before_after.min.css"></noscript>
That’s pretty handy from an SEO perspective! By reducing render‑blocking CSS and letting the browser load those styles asynchronously, you’re giving your pages a better chance to start rendering meaningful content sooner, which can have a positive impact on core web vitals and overall search visibility. It also saves a lot of work from a development and maintenance standpoint.
In days gone by, if you wanted to optimize every module down to the last detail, you’d end up stripping the CSS out of each individual module and wiring everything up manually—usually by having it async‑load from a separate stylesheet that consolidated all the CSS for your custom modules. That meant more files to manage, more room for mistakes, and a pretty clunky workflow whenever you needed to tweak or debug something.
Now, you can accomplish the same thing with a simple configuration change in local development. A quick edit to your module’s settings is enough to switch its CSS over to asynchronous loading, without all the extra plumbing. You still get the performance and SEO benefits, but with a much cleaner, more maintainable setup.