Home
Code Optimization
HTML Projects

CSS and JavaScript Minifier Tool Full Source Code

Free CSS & JS Minifier tool helps you compress HTML, CSS, and JavaScript code online for faster website loading and SEO boost.
Aaqib Amin

In the world of web development, website speed is a critical factor for both user experience and SEO. One of the easiest ways to speed up your site is by minifying your code. This post provides the full source code for a lightweight CSS & JS Minifier tool that you can give to your users or even integrate into your own projects.

This article will break down the features of this specific code, show you exactly how to use it, and explain who can benefit from this simple yet effective script.

CSS and JS Minifier Tool Source Code
Table of Contents

How to Use This Minifier Source Code

Using this code on your own website or blog is incredibly straightforward. You don't need any special libraries or frameworks. Just follow these three simple steps:

  1. Step 1: Copy the HTML
    This is the structure of the tool. It creates the input box, the output box, and the buttons. Place this code within the <body> of your HTML file.
    <div class="container">
<textarea id="input"></textarea>
<div class="buttons">
<button onclick="minifyCSS()">Minify CSS</button>
<button onclick="copyOutput()">Copy Minified CSS</button>
</div>
<textarea id="output" readonly=""></textarea>
</div>
  2. Step 2: Copy the CSS
    This code styles the tool, making it responsive and easy to use. You can place this inside a <style> tag in your <head> or in your website's main stylesheet. 
    .container textarea{width:100%;height:200px;padding:10px;font-size:14px;box-sizing:border-box;border:1px solid black}
.container{display:flex;flex-direction:column;align-items:center}
.buttons{display:flex;justify-content:center;margin-top:20px}
button{padding:10px 20px;background-color:#000;color:#fff;border:none;border-radius:5px;cursor:pointer;margin:15px}
button:hover{background:blue}
  3. Step 3: Copy the JavaScript
    This is the "engine" of the tool. It contains the logic for minifying the code and copying it to the clipboard. Place this inside a <script> tag just before your closing </body> tag.
    function minifyCSS() {
  var input = document.getElementById("input").value;
  var output = input;
  output = output.replace(/\/\*.*\*\//g, '');
  output = output.replace(/\s*{\s*/g, '{');
  output = output.replace(/\s*}\s*/g, '}');
  output = output.replace(/\s*:\s*/g, ':');
  output = output.replace(/\s*;\s*/g, ';');
  output = output.replace(/\s+/g, ' ');

  var inMedia = false;
  output = output.split('\n').map(function (line) {
    if (inMedia) {
      if (line.indexOf('}') >= 0) {
        inMedia = false;
      }
      return line.trim();
    } else {
      if (line.indexOf('@media') === 0) {
        inMedia = true;
        return line;
      }
      return line.trim();
    }
  }).join('\n');

  document.getElementById("output").value = output;
}

function copyOutput() {
  var output = document.getElementById("output");
  output.select();
  document.execCommand("copy");
}

That's it! Once all three parts are on your page, the tool will be fully functional for you or your visitors to use.

Features of This Minifier Source Code

This script is designed to be simple and effective. Here are its main features:

  1. Lightweight and Fast: The code uses no external libraries (like jQuery) or heavy frameworks. It's pure, vanilla JavaScript, which means it loads instantly.
  2. Removes Unnecessary Whitespace: The core of the minifyCSS() function is a series of regular expressions (regex) that find and remove extra spaces around brackets { }, colons :, and semicolons ;.
  3. Strips Code Comments: The line output = output.replace(/\/\*.*\*\//g, ''); is designed to find and delete all CSS comments (e.g., /* this is a comment */), further reducing file size.
  4. Handles Media Queries: The code includes special logic to correctly handle @media queries, ensuring that line breaks inside media query blocks are preserved correctly during the minification process.
  5. One-Click Copy Feature: The copyOutput() function provides essential user-friendly functionality, allowing a user to copy the entire minified code to their clipboard with a single click.

Who Can Use This Code?

This source code is perfect for a variety of users:

  • Web Developers: A developer can quickly use this script to clean up small CSS files before deploying a project.
  • Bloggers & Content Creators: Tech bloggers can offer this code as a free tool or resource for their readers, just like this post does.
  • Students: Anyone learning JavaScript can study this code to understand how regular expressions and DOM manipulation work in a real-world example.

Troubleshooting & Limitations

While this code is effective for most CSS, it's important to understand its limitations:

  • Primarily for CSS: The function is named minifyCSS() for a reason. While it will remove spaces and comments from JavaScript, it is not an advanced JS minifier. It will not rename variables or shorten function names, which is a key part of "uglification" or advanced JS minification.
  • Simple Regex: The regex used is basic. It may not handle very complex or poorly formatted CSS. Always test your minified code to ensure your website's layout is not broken.
  • No File Upload: This is a simple "paste-and-copy" tool. It does not include functionality to upload .css or .js files.

Why Minifying CSS & JS is Important

  1. Faster Website Loading: Minified code loads quickly across all devices.
  2. Better SEO Ranking: Google prefers websites with optimized and fast-loading code.
  3. Improved User Experience: Visitors stay longer on responsive and lightweight websites.
  4. Reduced Bandwidth Usage: Smaller files save server resources and user data.
  5. Cleaner Code Management: Easier to maintain and manage front-end code, especially for large websites.

By using a CSS JS minifier online, you can compress website files, improve front-end performance, and provide a smooth browsing experience. Bloggers, freelance developers, and online business owners can all benefit from this front-end optimization tool.

Frequently Asked Questions (FAQ)

Is this source code completely free to use?

Yes, the code provided here is free for you to use on any personal or commercial project. You can copy it, modify it, and share it.

Will this code break my JavaScript?

It's possible. This script is optimized for CSS. JavaScript sometimes relies on automatic semicolon insertion, which can break if all line breaks are removed. Use it mainly for CSS or simple JS and always test afterward.

Why is minifying code important for SEO?

Google uses page load speed as a ranking factor. Minifying CSS/JS reduces file size, improves Core Web Vitals, and can help with better rankings.

How is this different from an advanced tool like UglifyJS?

This is a simple minifier that removes whitespace and comments. UglifyJS is an advanced uglifier that also rewrites code and shortens variable names for maximum compression.

Related Posts

Final Thoughts

Providing a free minifier source code is a great way to add value to your website. This script is the perfect starting point. It's lightweight, easy to understand, and solves a common problem for web developers and designers.

By using this code, your users can take a direct step toward making their websites faster, improving their SEO, and providing a better experience for their visitors. Feel free to copy this code and use it on your own site.

Post a Comment