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 js/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).

For the js/css minifier, I found I had to exclude some javascript like jquery.js and some css files like the theme files. I set the javascript to the bottom of the page.

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.

Info

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!

Tip

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

Running it through Pingdom Tools and GTmetrix here’s what I got:

Website speeds of mattbagleyphotography.com

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.

Conclusion

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.

Pingdom ping times for sailingonward.com

After these changes, the response times went down by over half!