A Finely Tuned MachineThis weekend I found myself, once again, running some performance and load testing against the Perpetual βeta website. To my dismay, I found about a dozen pages on the site that were outside of my self-imposed performance envelope. It seems I have been sloppy of late.
Let’s roll back the clock… at the beginning of 2014, I had tuned this website to the point where the average page weight was 100KB. This weekend, I found that some individual page weights were in excess of 1MB and, in some cases, multi-megabytes.
Of course, this website has been subject to multiple revisions since 2014. I’ve changed the design, added CSS definitions, added JavaScript methods… yet, I have worked hard to keep her as lean as possible. If we examine a sample text-only page from the site, Something’s Rotten in Denmark, for example, we can see that the page weighs in at 161KB. Thus we have added only ~60KB of extra weight in the years since 2014.
So, if an average page has a weight of ~160KB, how did I wind up with pages weighing in at 1-4MB?
The answer, my friend, is imagery.
That’s right. Once I started adding images to the site, the bloat really started to take effect. It doesn’t take much, an animated GIF here, a non-optimised JPEG there, the odd 1MB+ PNG… oh yeah, I was piling on the pounds.
The problem for me has always been that I find image management, for the web, to be a royal pain in the arse. Now that we’re supposed to be all responsive, any image that we put on a web-page requires multiple instances of itself. We need large, medium, small and thumbnail variants; we need ×2, ×3 and other PPI instances. We might need grayscale, rounded, rotated… please stop, I can’t take any more.
Additionally, we must then optimise each variant of each image to the smallest possible file-size (whilst maintaining image quality) to minimise bandwidth consumption and improve download times. It’s a living nightmare.
Cloudinary to the Rescue
I needed a solution to both my image management and optimisation requirements. I had seen Cloudinary mentioned on other weblogs from time-to-time and had internalised the positive comments of her users. When I learned more about the impressive range of features on offer, I decided to take the plunge.
I am so glad I did.
It is with Cloudinary that I have managed to get my page weights back under control, not to mention no longer having to deal with the asset management nightmare I was previously struggling with.
Now, I add an image to my CMS and, with a little bit of programming juju, I get back the URL of an optimised image that’s lightweight and of a quality that should not be noticeably different from its source, regardless of device, orientation or resolution.
All of my pages are now of a < 1MB weight, even those with multiple images, animated GIFs or videos. A couple of hundred KB per page is, once again, the new normal for the Perpetual βeta.
If this article has whet your appetite, please use my affiliate link to Cloudinary —