Page Speed Obsession … What I learned

I read this post about how to improve the speed of your site and quickly became obsessed with Google PageSpeed Insights.

My goal was to exceed post-author Raelene Wilson’s 91 and if possible reach her goal of 95. I did manage to reach to 95 but doing so was at the expense of plugins I wanted to keep.  So my homepage is now sitting uncomfortably at 94 for desktop.  I was able to achieve 95 for learnwp.ca. Adding new plugins and making theme edits will affect this.

If you’re ready to become obsessed too,  check your site here.

Improve your WordPress Site’s Page Speed …

We know that page speed is important both for user experience and as a factor for Google ranking, but how do you get a great result? These four steps will walk you through how I achieved my success.

1. Start with a great host

My site is starting with a big advantage, it is hosted with WP Engine [affiliate link]. WP Engine hosting services custom-built their own caching technology to deliver faster WordPress websites. I’m thrilled with the support, security and speed my site enjoys with WP Engine.

If you are with a different host you’ll need a caching plugin such as W3Total Cache.

2. Optimize images for the web

Optimizing images may make the most significant performance improvement you’ll see.  An optimized image will use less browser resources, displaying the content faster on the client’s screen. The best way is to losslessly compress your images with an image editing program. Play with the quality slider provided by the “Save for Web” functionality in Adobe Photoshop. You can see significant file size savings without negatively impacting the visual results.

Photon is a free image CDN (Content Delivery Network) offered by Jetpack. A CDN is a service that can help the static content on your site (images, CSS, Javascript) load faster (learn more about CDN’s here). Photon looks at the image width and height attributes and then serves the image resized to those dimensions or to the width of the containing element (whichever is smaller). I played with this on a development site but the thumbnail images vanished.

Apparently if your server takes too long to upload the image to Photon, the upload will time out and your image will appear to be broken. If this happens you’ll need to upload the image again but edit it so the file is smaller and make sure you give it a different name.  If I’m going to re-size the images anyway I would prefer to optimize it for the web myself. UPDATE:  Read about the Kraken plugin here

Raelene’s post talks about CDN options and mentions some plugins for image optimization.  I haven’t tested these.

[clickToTweet tweet=”Regularly check PageSpeed insights. New #WordPress plugins and images can drastically slow down your site.” quote=”Regularly check PageSpeed insights. New WordPress plugins and images can slow down your site.”]

3. Remove any plugins you don’t need

I  deactivated features of Jetpack that I don’t use.  I didn’t have any plugins that I wasn’t using, but if you do you might as well delete them. I checked the warnings from the page speed insights and realized that a few of the plugins that were causing a drain were ones I could live without, so I removed them. Give this a try and see how your results improve.

4. Autoptimize

I also played with the Autoptimize plugin.  You’ll need to clear your browser cache and test between each change you make.

Optimizing the JavaScript broke my site’s mobile menu.  I was able to fix this with the help of the plugin author through the WordPress.org forum.  The solution was to add the .js file that controls my responsive menu to the exclude field through the advanced tab.

Continue to test and review your site’s performance

When running WordPress website you have to be continually vigilant. Adding a new plugin and especially adding new images can drastically change the way your site performs.

Were you able to improve your site’s speed?

Please add a comment below. I would be interested to know what you did to improve your score.  What worked for you? What score were you able to achieve?

[clickToTweet tweet=”Page speed is important both for user experience & as a factor for Google ranking. Get a great result with 4 steps” quote=”Page speed is important both for user experience & as a factor for Google ranking. Get a great result with 4 steps”]