Let’s assume you’re taking a road trip and you’ve mapped everything out on Google Maps. You decide to avoid the scenic route and minimise the number of stops you make.
Your ultimate goal is to go from A to B as fast as possible by eliminating delays, avoiding detours and bypassing high-traffic areas. The faster you arrive at your destination the better.
This need for speed is exactly what webmasters and website owners aim to do when they condense images and minify CSS and HTML coding.
These aforementioned modifications, however small, are simple solutions that save multiple bytes of data.
What does “minifying” mean?
Minifying helps speed up webpage download times and reduce parse times, which simplifies how servers read and or interpret the symbols within CSS and HTML coding on a given website.
A number of website owners forego these changes simply because they don’t follow website design and maintenance best practices.
In other cases, it’s because they don’t understand how small changes make a big difference in download times. However, these changes, along with condensing images, have a real and quantifiable impact on server response times.
Google has always viewed a website’s speed as an important indicator of usability. The faster a given page loads, the better the user experience.
In the end, visitors don’t want to wait aimlessly for slow loading webpages.
This does nothing but frustrate visitors and forces them to leave. So, what is involved in condensing images and minifying HTML and CSS coding?
There are multiple online tools that allow you to condense, optimise and or resize a given JPG, GIF, and or PNG image. Websites like imageoptimiser.net, jpegmini.com, and compressnow.com, allow you to upload a given image and condense it.
Doing this helps a webpage load faster by increasing bandwidth and reducing the overall size of the images.
In fact, compressnow.com allows you to choose just how much compression in percentage you need in order to optimise results.
Comparison between the original file and compressed version. The original file size of 486.28kb reduced to just 128.53kb, without too much degradation
Done correctly, compressing and or condensing shouldn’t affect the integrity of the image itself. It simply reduces its size so that it takes up less space and is easier to download.
When you input a given image into any of those aforementioned websites, you’ll get a comparison result before and after compression, thereby allowing you to quantify the benefits.
Your image will have one set of initial properties defining the amount of kilobytes (KB) and another set of properties after resizing.
For instance, you might have an image whose properties are 81.0 KB before resizing and 10.5 KB afterwards, which is a significant reduction in kilobytes of data.
Doing this for all the images on your website, and or a specific page, will make a substantial improvement in download times.
Compression and image degradation
Image compression saves data but it’s important to pay close attention to compressing infographics and or images created through Microsoft’s SmartArt and or excel.
Condensing these images too much sometimes means a degradation on the infographics or image itself. Ultimately, you want these types of images condensed enough so they save data, but not so much that they affect readability.
HTML and CSS minifying
Let’s go back to that aforementioned example of the road trip. We want to avoid unnecessary stops and high-traffic areas in order to find the quickest way to our destination.
Your website’s HTML and CSS coding provide servers with that all-important roadmap. However, it’s common for HTML coding and CSS coding to have gaps and or useless symbols.
Unnecessary characters, comments and symbols are removed when you minify a given HTML code or CSS code. Minifying doesn’t your website’s functionality – instead, it makes the coding easier to read.
CSS coding is found in your website’s or blog’s stylesheets. Unnecessary white space, block delimiters and or useless characters are removed through minifying. This leaves you with a condensed code with no gaps or useless symbols.
Minifying HTML and CSS codes increases page speed and download times by making the code easier to read and simpler to interpret.
Minify with online tools
There are a number of free online resources that allow you to minify HTML and CSS coding.
You’ll get a condensed and easier to read code that improves download times and your website’s speed.
If you want to see the results of your efforts, then all you need to do is go to the Google’s PageSpeed Insights section of Google Developers.
Google Page Speed
You can then measure individual URLs in order to see Google’s list of suggestions concerning HTML and CSS minifying in addition to those images you should condense.
In fact, Google will provide a list of suggested changes and passed rule sets. All are colour-coded in order to indicate status.
Again, making these small changes will improve your website’s performance and improve usability for your viewers.
A faster loading website means a better user experience.
A better user experience means a lower bounce rate, and ultimately greater customer satisfaction!
Have you condensed your website imagery or minified CSS? Did you see any improvements to site load or your PageSpeed score? Drop us a comment below.