Code minification & compression in webflow

While Webflow offers a visual interface for building websites, minifying and compressing your code can offer several benefits like faster loading times and improved SEO. Here's how you can achieve this with short and clean code examples:

1. Using Webflow's Built-in Features:

Custom Code: In the Custom Code section, Webflow automatically minifies your JavaScript and CSS when saving. This is a simple and effective way to get started.

Example:

HTML
<script>
  function myFunction() {
    // Your code here
  }
</script>

<style>
  body {
    color: #333;
  }
</style>

• Global Site Settings: Under the “Settings” tab, you can enable “Minify custom code” and “Compress HTML” options. This applies compression across your entire website.

2. Advanced Code Minification Options:

• External Tools: Use online tools like UglifyJS or CSSNano tominify your JavaScript and CSS code manually. You can then paste the minified code into Webflow's Custom Code section.

Example:

JavaScript
// Minified code generated by UglifyJS
(function(){var e={},t=/[a-zA-Z0-9_$]/;function r(n){if(e[n])return e[n];var i=n.length;if(i>60){var a={},o=0;for(;o<i;)a[n.charAt(o++)]=!0}else{a=[];for(o=0;o<i;)a[n.charCodeAt(o++)]=!0}return e[n]=a}function n(e){var t="";for(var r=0;r<e.length;r++){var n=e.charCodeAt(r);if(32<=n&&n<=126)t+=e.charAt(r);else{if(n>255)return"";t+=r?"%"+n.toString(16).toUpperCase():"%"+"0"+n.toString(16).toUpperCase()}}return t}function i(e){var t=r(e);if(!t)return e;var n="",i=0;for(var a=0;a<e.length;a++){var o=e.charCodeAt(a);if(t[o]){if(n)n+=i;i=0}else{if(1!=i)n+=" "+n(e.substr(a,i));i=1}}if(n)n+=i;return n}e.minify=function(e){return i(e)};})();

• Webflow Integrations: Integrate third-party tools like Parcel or Webpack in your build process to automate minification, compression, and other optimization tasks.

Need Help?

Need a High Converting SaaS Landing Page?