Speeding Up Your Website

I admit it. I am thoroughly enjoying the new series on CW about The Flash. I mean, aside from him fawning over Iris every episode, the show is fun to watch. It just so happens that recently I have found myself striving for the ultimate page speed force as well. Unlike Barry, I would rather not have my server be struck by lightning! So over the next few weeks, I will be sharing what I have been finding to be useful tips, links to articles and resources in my struggle to fine tune web pages to a great PageSpeed Insights score.

Some of the areas I will touch upon are the following:

  • Optimizing your site’s images – Keep those large photos of kittens, small and cuddly to servers and the Page Speed Jedi at Google, GTmetrix and Pingdom will reward you young padawan.
  • WordPress Caching Plugins – There are many out there, but which one is the best? Which one requires a Doctorate in Computer Engineering to set up?
  • Modifying your htaccess file – Don’t be afraid! The htaccess file won’t hurt you. Treat it like a hippogriff. Bow and once it bows back, you can jump on it’s back and ride it like nobody’s business.
  • Minifying CSS – Use a plugin, don’t use a plugin. Noodles, don’t noodles? You are too concerned about what was and what will be. Just minify.
  • Minifying JS – See above!
  • Minifying HTML – God! More minifying… man, what is this Honey I Shrunk the Kids?
  • Leveraging Browser Cache – Can it actually be done? It seems like even when I do put some measurements in place, this little bugger always crops up. Is there a sure way to do this? I hope so.
  • GZIP Compression – Sounds cool right? It is cool!
  • Quality of your server – Yes, sometimes it just comes down to how cool your toys are. And there are some definite toys for men and boys when it comes to the quality of your server

Let’s tackle the first item in our list.

Optimize Your Images

It seems obvious, but with Retina iPads, responsive layouts and the need to have outstanding imagery to tell your company’s story, sometimes having optimized images can be tough. You don’t want to lose out on quality, but you also want those images to load fast.

I have been employing a few different plugins and techniques that are pretty standard. I think when using these techniques, it can definitely help out on the user experience side. But be careful, optimizing your images too much can lead to your site looking a little sloppy, especially if you have pixelated photos or just photos that look like they are straight out of AOL in 1994.

Plugins

EWWW Image Optimizer is a plugin I came across after reading this article at http://premium.wpmudev.org/blog/10-best-image-optimization-plugins-to-speed-up-your-wordpress-site/. I decided to give it a go, and was very pleased with the results and the ease of use. Once installed, you can go straight into your Media area and select the images you want to optimize. Pretty simple and straightforward.

WP Smush.it is another plugin that gets a lot of good reviews, but what attracted me to EWWW Image Optimizer was the fact that I could install it and then use it on photos that had already been uploaded to my site. I am sure in the near future I will give WP Smush.it a ride to rate the ease of use and how well it works.

Photoshop

I am going to assume if you have made it to this point, you must have Photoshop. But obviously taking some raw pictures in which a photographer gave you that are as large as Arnold’s biceps in his heyday, can’t be immediately uploaded to a website for use, although I have found some before. It is highly inadvisable. So first, bring the photos into Photoshop where you can reduce the file size dramatically using some of the steps outlined here http://madefreshly.com/blog/howto/how-to-properly-optimize-images-for-web-in-photoshop/. File types play a big part in whether you properly reduce the sizes and what you need it for on your site. So be detailed, if you need a banner image that is 1080 x 400 for your desktop version of your site, don’t upload one that is 1600 x 700. Use that noggin of yours!

What tools are you using to help with image optimization. I would love to hear as I am always on the lookout for better ways to do things.