How to know if HubSpot has minified CSS and JS files?

Developer Support CMS Development
, , , , , , ,
1

Hi there,

I’m fairly new to HubSpot - how can we check if HubSpot has minified the CSS and JS files? I am using a theme and not sure if the theme’s CSS and JS are being minified automatically or not.

Also, what about the module.css and module.js files of multiple modules? Does HubSpot minify them too? If yes, again, how can I confirm?

2

Hi @iusmanabbasi,

all files that are created/uploaded into the design-manager will be minified. To check this you can inspect the page and look into the <head> tag, search for your file and open it in the inspector.

Also you can read more about minification in the dev documentation

As for module CSS & JS . There are several things to keep in mind:

  • If you paste your CSS/JS into the HTML+Hubl area just as <style> or<script> tag, it will render it everytime you use the module directly in the DOM where the module is located. That is by far the worst thing for performance you can do :blush:.
  • If you use the module.css and/or module.js areas for your code the code will be rendered once per page - regardless how often you use the module on the page.
  • You can create seperate CSS/JS files just for this one module and link it in the right sidebar(if you’re working with the Design-Tools). This will also lead to one time rendering of the files regardless of the amount how often the file is used on a single page.
  • If you want to modify some CSS or JS part of a module via Hubl you have to insert it in the HTML+Hubl area. To avoid getting the code rendered directly in the DOM where the module is located you can use {% require_css %} <style>…</style>{% end_require_css %} for CSS and {% require_js %} <script>…</script>{% end_require_js %} for JS in the HTML+Hubl area. You can read more about this here and here

best,

Anton

3

Perfect! Thanks a lot, @Anton!