Boost Your Page Speed: Reduce File Size

Do Not Scale Images in HTML 🖼

Are you resizing images in-browser? Don’t do it. It’s that simple. Some web programmers, when desiring a thumbnail image, will include the full-sized image and just use the image’s height and width attributes (via HTML or CSS) to resize the image. This saves time and space, since you don’t have to generate or store a thumbnail image. Great idea, right? Not at all. This practice is accompanied with three major negative factors that need to be considered.

Bandwidth

Any server administrator would be appalled to learn that they’re using the bandwidth cost of a full-sized image to display a thumbnail. Let’s take an extreme example of scaled-image thumbnailing. A wallpaper website is displaying thumbnails of each wallpaper so that they can offer a selection of wallpapers in a small area of space. The full wallpaper (1024×768; 200 KB) is used and simply scaled down to 133×100. A hypothetical 133×100 thumbnail dedicated to its own file would only take up approximately 5 KB. That’s a difference of 195 KB per wallpaper per page load. By scaling the wallpaper in-browser, you save a whopping 5 KB of server space, but you pay for it in bandwidth. You should be willing to trade 5 KB of space for 195 KB bandwidth — especially when multiplied per file — any day. This holds true for even less extreme examples, such as half-sizing an image. The bandwidth cost will add up on high-traffic servers.

Download Time

The full image may not be displayed, but the user still has to wait for it to download. Even a user on a dial-up or mobile connection could download a 133×100 thumbnail in a second; but if you scale a full-size image, especially multiple images per page, there is an unbelievably noticeable difference in page loading times. A collection of 10 wallpapers on the page with legitimate thumbnails would take only 50 KB — a near instantaneous download for a user with average Internet speeds. The same wallpapers scaled in HTML would require a download of 2 MB! That’s a noticeable page loading difference.

Parsing Time

Though also the subject of the third article in this tutorial trilogy, parse time is also affected by inline scaling. The use of an image’s width and height attributes will be covered again, except shown in a different light. By setting them, the browser must calculate for and resize the larger image in order to create the thumbnail. These are precious milliseconds wasted on every image load for every viewer!

Minify JavaScript 🐛

A quick and easy way to save bandwidth and decrease download time is to shorten JavaScript and CSS file lengths. JavaScript, especially, is filled with redundancy and unnecessarily long variable names. Why reference myFavoriteVariable 500 times, when you can just call it x and save 17 bytes with every reference? Why display 100 tab indents when it will run just the same without them? Don’t get me wrong! I’m not advocating hideous code. For the love of all that is good, use yourFavoriteVariableName and indent your code blocks. When programming, readability is important. When processing, readability is useless. But how can you program legibly and still send a compressed file to the client? The answer is to use a minifier!

Uncompressed Script: 301 bytes

Whitespace only: 212 bytes

White-space and comments are all that were removed.

Simple: 186 bytes

Advanced: 139 bytes

Minify CSS 🗜

While JavaScript compression will save a ton of bandwidth, let us not forget about CSS! I have yet to find a CSS compression utility that absolutely trumps the rest, so feel free to use whichever one serves the best user interface for your tastes.

Make Favicons Small and Cacheable 🔍

Your favicon is a very important and highly-accessed part of your website. Some browsers render it as 32×32 and many software packages practice the use of a 32×32 favicon by default. Don’t let them fool you. Well over 90% of your viewers are going to be viewing your favicon as 16×16. It is pointless to have the vast majority of your viewers downloading (remember: download time and bandwidth costs) an image that’s four times larger than they’ll be able to see. Use a 16×16 favicon by default, and use modern HTML <link /> attributes so that needy software may opt-in to using larger alternatives.

Compress Components With GZip 🤐

Finally, we get to server-side programming! Ah, the most complicated — but the most fun — area of web programming. gzip, if you aren’t aware, is a method of file compression. Unlike the JavaScript and CSS compression tools, it doesn’t just remove useless characters. It changes the file type altogether: think .zip or .rar files. Modern web browsers support receiving gzip files and are capable of automatically extracting and displaying them. This is the case for any file type. There are two ways to gzip a file: one with static files and one with dynamic files.

Dynamic Files

This section will use PHP to describe the process of gzipping contents on the fly. Your development language likely also support gzip compression, so you may apply these principles despite not being able to copy PHP code directly.

Static Files

To save server resources, if you know a file is not going to change very often, you may want to store a gzipped copy on the server instead of having PHP automatically generate one every time the file is accessed. You can either use the gzip program provided by the gzip homepage to compress every file manually, or you can just use PHP’s gzencode function to create any non-existent gzip files. To do this, have users access a PHP file which will determine whether or not their browser supports gzip. If their browser does, send them the gzipped file. If it does not, send them the uncompressed file. I’ve included an example of this, but you may feel free to create your own.

Configure Entity Tags (ETags) 🔖

Last but not least, you’ll want to set up entity tag headers. There’s a very simple analogy that can be used to explain how ETags work.

  • “Yes, here is version 256.” Medium sends you the newest version of the article.

Conclusion 🔚

You should now be well-versed in handling scaled images and minifying your JavaScript and CSS components. This introduction to caching and compressing data already makes you a more valuable and resource-savvy developer, but if you want to delve deeper down the rabbit hole that is micro-optimization, check out part two of this trilogy Reducing Server Calls or part three Reducing Parse Time. You can also follow me on LinkedIn, Medium, and Twitter for updates, or check out my portfolio at CharlesStover.com.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store