A few days ago I increased the loading speed of some of my sites. Or maybe I should say I decreased the loading time. Either way, they load faster.
Indeed, I had one site that was taking 8 to 20 seconds to load! Now it’s down to under a second. It’s so much better.
Turbo Mode Engaged
It wasn’t very hard to speed up the site. I used a minifier, some image optimizers, and some caching.
Minimize the Code
I used a
css minifier called
Autoptimize and combined it with a caching plugin for Wordpress (
WP Super Cache on some,
W3 Total Cache on others). I also activated the CDN option as well (just the mirror one).
The Optimized Picture
Optimizing your images can result in a huge speed gain. Some services will automatically optimize images for you.
- WordPress Plugins. Many plugins will automatically optimize the images. Be aware this can slow things down without caching.
- Content Distribution Networks (CDNs) like Cloudflare. They are easy, but normally come with a monthly fee.
Or use these Do-it-Yourself methods.
- Use an image optimizer website, such as Websiteplanet’s online image compressor. Upload the image to the site, which optimizes it, and then replace your site’s current image with the new one. It takes time, but once done you’re set!
- Use a photo editor such as GIMP to optimize the image. The main points being to resize the image if needed. You don’t want it larger than it needs to be. Then when saving, turn down the quality setting to 80% and don’t save any metadata.
I chose to use a WordPress Plugin and an image optimizing site. You don’t always have to choose having your cake or eating it.
Whatever method you use, be sure to check your images and how they look on your site. Don’t blindly optimize them, only to find out later they are all pixelated and look terrible. Gotta make it look great!
If you aren’t using WordPress, many other site builders have their own methods. For example, this site is built with Hugo and uses the built-in image processing to optimize the images. So, same as above, just different.
Cache is your Friend
I set it up to cache the pages, and to pre-build the cache. w3 Total Cache was a bit nicer on that part, as it would allow you to limit how fast it would build the cache. WP Super Cache didn’t limit it, and almost took the cpu higher than what my shared hosting provider allows.
Test, Check, and Verify
I just thought to myself: “Ya, that’s how it should be.” I mean, 100% is nice. And the time is even better. I didn’t save the speed shot before I did all the tests, but I it was something like 4 seconds.
I then ran them through Google’s Page Insight’s page and made adjustments until I could get them in the 90s for both desktop and mobile versions. Note that this score is not only related to speed, but also with the usability of the site. I had to change a few things to increase the mobile score, mostly making the website buttons and links bigger and spacing them out.
In the end, the sites became faster, and leaner. And by leaner, I mean not only faster, but the cpu usage on the hosting provider went down. And the uptime checker for the website was reporting that the site was responding faster. So yet another win.
After these changes, the response times went down by over half!