How Do You Know if Your Using Minified Versions

When you minify your website's CSS, HTML, and Javascript files, you can shave some valuable fourth dimension off of your site's folio load speed. Now we aren't talking about cutting your page load speed in half or anything, but when it comes to the speed of your website, any picayune bit helps. How fast your site loads is not only important for showtime time visitors, but it is too of import for moving search engine ranking.

The term "minify" is programming lingo that describes the processes of removing unnecessary characters in the source code. These characters include whitespaces, line breaks, comments, and cake delimiters which are useful for us humans simply unnecessary for machines. We minify the files of a website containing CSS, HTML, and Javascript lawmaking so your web browser tin read them faster.

Here is an example of what CSS minification looks like.

CSS Before Minification

/* Layout helpers  ----------------------------------*/ .ui-helper-hidden { brandish: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); acme: 1px; margin: -1px; overflow: subconscious; padding: 0; position: accented; width: 1px; }        

CSS Afterward Minification

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{edge:0;prune:rect(0 0 0 0);superlative:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}        

Obviously, this is just a small example using a snippet of CSS code, but you can imagine the the corporeality of space this would salvage when minifying thousands of lines of code. And then, if you wanted to do this manually by paw, technically you could. Merely you would run a high gamble of error and needlessly shave valuable time off or your life!

Take my advice and use the tools at your disposal.

Online Tools to Minify Your Files Manually

Thankfully, you don't have to be a developer or know any of the programming languages in order to minify your site files. Minification has become standard practice in the world of web blueprint so information technology shouldn't surprise you to acquire that at that place are a lot of wonderful (and free) tools out in that location to practice the work for you.

Here is a list of some helpful tools to get your started. Since many of these can minify more than one code type, I've included the code type options in parenthesis.

• Closure Compiler (JS only) – Closure Compiler is office of Closure Tools, a suite of tools from Google Developers. It allows you to minify your Javascript along with other helpful optimizations. Yous tin pull in your Javascript using by inbound the URL of the js file location and and then choose how you want the lawmaking to be optimized and formatted. For case, you choose to optimize your code for Whitespace only if you want. One time you lot hit the compile push, it volition minify (or compile) the lawmaking for you too cheque your code for any errors.
• cssminifier.com and javascript-minifier.com (CSS and JS) – These two minifiers by Andrew Chilton are uncomplicated to use. Simply paste in your code and so click the Minify button to output the minified lawmaking. You tin even download the output code as a file for convenience.
• csscompressor.net (CSS but) – This online CSS compressor is quick, like shooting fish in a barrel, and complimentary to use.
• jscompress.com (JS only)- This JavaScript compression tool allows you lot to compress JavaScript code via Copy and Paste but you can also upload multiple JavaScript files at once. This is not bad for combining JavaScript files into one file for meliorate folio load speed.
• refresh-sf.com (HTML, CSS and JS) – This compressor volition minify JavaScript, CSS and HTML code types. Information technology also includes all the compressor options for each code blazon if y'all need them.
• htmlcompressor.com (HTML, CSS and JS) – This online compressor/minifier tool supports HTML, CSS and JS code types. It even supports different combination of code types similar CSS + PHP and JavaScript + PHP. And you can even cheque the compressed code for errors as well.
• minifycode.com (HTML, CSS and JS) – This site offers minifiers for JavaScript, CSS and HTML with a simple and clean UI that minifies your code with a single click of a push button. It also includes a "beautifier" tool to uncompress minified lawmaking to brand it like shooting fish in a barrel to read (basically the opposite of minification).
• Dan's Tools – Dan's Tools offers a CSS Minifier and a JavaScript Minifier. Both tools have a really clean UI that is and easy to use. They don't offer whatever advanced options but it is perfect for common minification purposes.

If you lot are looking for some offline tools to minify your HTML CSS or JavaScript locally, here are a few options:

• Smaller (HTML, CSS and JS)
• phpied.com/cssmin-js/ (CSS only)
• yui.github.io/yuicompressor (JS and CSS)

How to Minify Your Website'southward CSS, HTML & Javascript

Subscribe To Our Youtube Channel

How to Minify Your Minify your HTML, CSS and JavaScript Using an Online Tool

Many of these online tools have a like procedure which involve the following steps:

Paste in your source code or upload the source code file.
Optimize the settings for a specific output (if options are available)
Click a button to minify or shrink the code.
Copy the minified lawmaking output or download the minified lawmaking file.

For this example, I'1000 going to employ the minify tools from minifycode.com.

Outset, locate the css file (normally named manner.css) in your site files and open the file using a folio editor. Then copy the entire css code to your clipboard.

Go to minifycode.com and click the CSS minifier tab. And then paste the CSS lawmaking into the input box and click the Minify CSS button.

After the new minified code is generated, copy the code.

Then become back to the css file of your website and replace the code with the new minified version.

That's information technology!

Repeat the same process to minify your site'due south JavaScript and Html file(s) as well.

How to Minify HTML, CSS and JavaScript in WordPress Using Plugins

The easiest way to minify your HTML, CSS and JavaScript in WordPress is to use a plugin. This allows you to optimize your WordPress site files for decreased folio load times automatically with a few clicks of a button.

There are a lot of plugins out there that volition do the job but I will briefly mention a few standouts.

Autoptimize (FREE)

Autoptimize is probably the well-nigh popular minify plugins out there. It's popular because information technology ease easy to use and full of powerful performance features. It can aggregate (combine scripts), minify, and cache your lawmaking. As a bonus, y'all have additional options for optimizing Google Fonts, images and more.

To use Autoptimize, you tin download, install and activate the plugin from the WordPress Dashboard under Plugin > Add New.

Once the plugin is activated, navigate to Settings > Autoptimize. Then under the principal settings tab, check the code you wish to optimize (HTML, CSS, and/or JavaScript) and click Save Changes.

You lot tin can also click the Testify Advanced Settings push at the top of the page to farther customize how you desire your lawmaking to be optimized.

That's nigh information technology! Pretty elementary and powerful.

Fast Velocity Minify (FREE)

Fast Velocity Minify is another popular, costless and powerful WordPress plugin that does more than only minify. It minifies and combines your CSS and Javascript to reduce HTTP requests to your server, thus living up to its name to give y'all fast velocity page load times. In that location are addition optimization options available merely the default settings work beautifully for well-nigh sites.

To use the plugin, commencement install and activate if from your WordPress Dashboard by navigating to Plugins > Add New. Then search for "fast velocity minify" and in one case it popups up in the search results, click to install and actuate information technology.

Once the plugin is activated, your files will automatically become minified and optimized for best operation. That was easy!

Jump over to the plugin settings page (Settings > Fast Velocity Minify) to see all the options available. Under the Status tab, you can see a helpful list of your JavaScript and CSS files that have been candy.

Under the Settings tab, you lot can customize the way your files are being optimized. Since minification of HTML, CSS and JavaScript are already agile, you lot tin can use these settings to adjust the default options or disable minification for certain code types. There is fifty-fifty options for optimizing Google Fonts and Font Crawly.

That'south information technology!

W3 Total Cache (Gratuitous)

W3 Total Cache is a great caching plugin that includes the pick to minify your HTML, JS, and CSS.

WP Fastest Cache (FREE)

WP Fastest Cache – These FREE WordPress caching plugin is extremely pop with high reviews. The plugin performs diverse performance optimizations including combining and minifying your HTML CSS and JavaScript for ameliorate performance.

Once the plugin has been installed, but click the WP Fastest Enshroud tab in the WordPress Dashboard sidebar (the one with the amazing cheetah icon). Under the settings tab, you will observe options to combine and minify HTML and CSS files. Although minifying JavaScript is only available in the pro version.

Final Thoughts

If you want faster page load times and better performance scores, you will want to minify you HTML, CSS and Javascript files. With all the online tools bachelor, you can hands minify your code for any website. And for you WordPress users, in that location are some powerful plugins available to minify those files automatically with a few clicks. The plugins above are just a few of the swell plugins out there that handle minification amidst other functioning optimizations. In fact you may already have a performance type plugin that has minification already available. For case, many of the caching plugins include the minification option. I hope this postal service helps y'all determine which is the best option for you.

I look forward to hearing from you in the comments beneath.

Cheers!

How Do You Know if Your Using Minified Versions

Source: https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

Share this post