image 3 Reasons Why WordPress is the Best CMS

8 Must Have Compression Tools for Website Developers

fast-web-speed

Let’s face it — people hate slow websites. Having a slow website will reduce the number of sales and conversions, and it can make your brand appear less professional and/or reliable. Fortunately, there are a handful of free tools that can help with your conversion rate optimization by speeding up the performance of your website.

Images

Images are often the “swag” that makes a website “pop” — the crucial difference between a wall of text and a visually engaging piece of content.  However, everything comes with a price and with images that can be some serious load time.  Image compressing tools will remove extra data from the image file, reduce the actual dimensions of the image, and reduce the number of colors used to result in a smaller (and clearly happier) image file.

  • tinypng.com – This is an amazing tool if you love transparent PNG’s but hate the large size that typically is associated with them.  If you like technical details, TinyPNG describes itself as a tool that “uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!”  To the naked eye, there is no change in the image, but the savings can be more than 75% in size!
  • jpegreducer.com – JPEG/JPG images are raster file types, which means that there is a grid system that contains a dot of color in each grid’s square. As JPG’s get larger in dimensions (width and height) in addition to number of colors used, the JPG will get larger in file size. This tool will break your JPG image up in to smaller grids, and determine where savings can be achieved by including less data.  This compression is known as “lossy compression”, which will typically result in the image’s quality to go down when more compression is utilized. I find that most images can be reduced somewhere between the 50% and 75% compression level without a noticeable change in quality.

 

CSS

One of the common culprits of a bloated website is unused and un-optimized CSS stylesheets.  CSS compressors are used to improve your webpage’s load time by removing as much unneeded information, such as comments, white space characters (spaces, tabs, line returns) and long-hand CSS style selectors. Some compressors go as far to even organize common elements used in each CSS file and group them with other selectors that contain the same style.

  • CSScompressor.com – This is a great tool that offers support for CSS1 – CSS3.  You will definitely want to play around with the various compression levels to make sure that you weren’t overzealous and broke your site’s layout.
  • Ask Apache CSS Compressor – What I love about this tool is that it will additionally validate your CSS, which will result in a more predictable experience across devices and browsers.  Based on the YUI Compressor, this free online tool will allow you to validate and compress your CSS via file upload (up to 24 mB!) or directly through an external URL.

JavaScript

Nearly every website on the internet is powered by JavaScript, so your website probably has an opportunity to save some page load time through JavaScript minifcation.  One of the handy benefits that many of these minification tools provide is known as “obfuscation”.  Obfuscation makes the JavaScript file significantly harder to decipher to humans, which can help protect your code from prying eyes (note: there is no way to entirely prevent client-side JavaScript from being reverse engineered and/or hacked).

  • JavaScript Compressor – This free online tool is based on the PACKER algorithm by Dean Edwards.  In many regards, Dean set the benchmark for JavaScript minification with the PACKER algorithm.  Tried, tested and true, this is a tool to quickly trim down your JavaScript assets.
  • JSMin – JSMin reduces file size by trimming out extra spaces and comments.  JSMin does not obfuscate your code, but it certainly uglifies it.
  • YUI Compressor – Based on JSMin, the YUI Compressor was able to achieve higher performance while still delivery results that are consistent.
  • xidea jsa compressor – If you are not intimidated by Chinese and are seeking the best level of compression and obfuscation, look no further.  This is one my “hidden gems” that I don’t tell anyone about — until now.  I have compared file sizes between various compressors and have found that this one wins 9 times out of 10.

I am sure that I missed many tools, but these are the ones that I use on a frequent basis with exceptional results.  Please feel free to ping me if you know of a compression tool that is a “must-have” for this list!

About jmwebdev
Related Posts
  • All
  • By Author
  • By Category

Leave a Reply

Your email address will not be published.