Down the Rabbit Hole: How to Tame the Site Speed Challenge

rabbit hole

Photo Credit Valerie Hinojosa via Creative Commons License

About a month ago, I suggested a client have an SEO analysis done of their site. The site gets a fair amount of traffic, and it had been a while since it had been checked for performance.

If, like me, you have mostly small, local clients, you may not often pay much attention to website performance. Basic “brochure” sites are not reliant on lightning fast speed and most decent hosting companies do a good job of maintaining acceptable site speeds as long as the site is well made. I have actually never had a client complain about site speed.

Yet, the perfectionist in me has started to wonder about how well the sites I have built are performing, and my curiosity led me to spend the past three weeks learning more about this by researching and testing.

Website speed and performance testing is not an exact science. Focus on:

  • Making sure your site is on a good host
  • Page speed is 2 seconds or less
  • Images are optimized and sized to the space they are in
  • Unused plugins are removed
  • Use a caching plugin like WPRocket or Autoptimize
  • Testing, monitoring and improving website speed and performance is time consuming. It is important to understand best practices for developing and maintaining a website to optimize its speed. If you are a freelancer, you may be better off outsourcing to providers who specialize in these services once you have learned the basics.

SEO ANALYSIS

An SEO expert will include in their website analysis/review, as a first step, a speed/performance test. Google’s website rankings are in part dependent on speed and performance, in addition to keywords and content, among other factors. There are several ways to test a website’s performance, and a variety of matrices on which a site can be evaluated.

The most common testing tools are:

GTMetrix
Google Page Insights
Pingdom Speed Test
WebPageTest
Yslow
dotcom-tools

Speed Test ScreenshotYou can test your site in all of these – each has different criteria and reporting and will therefore give varying results. I am a type “A” personality … if you’re like me, it will be frustrating to see some low scores in these tests. GTMetrix, especially, is a hard grader. Pingdom is a lot more kind and it is easier to see happy green scores in the 90’s. Google Page Speed doesn’t actually tell you a speed – it gives you a score out of 100 for both desktop and mobile performance, and, like GT Metrix, does not offer high scores easily. The WebPage Test site is also a great tool, as it shows different qualifications and how your site scores for each.

There are plenty of plugins that promise to help your site score better on any or all of these testing platforms. I have found the process of chasing an “A” score to be relatively futile. There is a lot to be learned in making the effort to get all “green” ratings, but you can easily go down a rabbit hole chasing after an imaginary rabbit without realizing you are actually holding a rabbit in your hand.

Take it from me … it is easy to get wrapped up in hours (and hours) of testing, tweaking, testing, tweaking to try to increase the “performance score” of your website. Ultimately, I think the main focus should be how fast your site is loading. I have seen a high “A” grade in Pingdom with a load speed of 4-5 seconds, and a “C” grade with a load time of 1.5 seconds. I have seen speeds and scores change within minutes of a previous test on the same site. I still can’t wrap my head around the discrepancies – it would seem that a site loading in under 2 seconds would be considered performing well – an “A” grade. I stumbled across this validation of my theory in this article by WPRocket, a top-rated caching and performance plugin, “If you try and attain a perfect grade, by implementing all the suggestions Google PageSpeed makes, you will lose your sanity pretty quickly.” (If you have ever chased the “green lights” in the Yoast SEO tool, you have had a similar experience and insight).

A general rule of thumb is:

  • Under 1 second is the best
  • Under 2 seconds is good
  • 5 seconds or more requires action

Here are two tests done on the same website hosted in two different places. Note that the version with the “C” grade loaded .14 seconds faster than the site that is graded “A.”

Website Speed Test Screenshot

PUTTING IT TOGETHER AND SUMMING IT UP

To learn more about the relationship between different variables, I took my own website (and a couple of others) and tested them on various web hosts and with various plugins. There are lots of blogs/articles about how to speed up your website, but I wanted to understand from experience how to speed up a site and improve its performance.

Here’s what I learned:

HOSTING

Most website speed and performance articles will tell you that the first factor in website speed is choosing a good hosting company. There are lots of great Managed WordPress hosts out there now, which are set up to maximize WordPress website performance. Which host is best for you/your client depends on a lot of factors, including budget, size of website and type of website. No matter what, if you want to increase the chances your site will run as fast as possible, choosing a good host can make a big difference. Chris Lema has a great article that talks about choosing the right host for you.

I have client websites hosted with GoDaddy, SiteGround, WPEngine and Liquid Web. I will be writing a follow up article that discusses my experience with each hosting company in more detail. For the purposes of this article, I will share the basic results of testing different variables to demonstrate how challenging it is to increase a “performance” score compared to improving site speed.

Here is an example of the same website on two different hosts. The speed and performance results are good for both, but slightly better on one.

Website Speed Test Screenshot

Website Speed Test Screenshot

OPTIMIZING IMAGES

I use Photoshop to optimize all images before I add them to a website. I teach my clients to do the same, and often use a plugin like EWWW to do periodic checks and optimize any images that need it (Here is a good list of image optimization plugins). Yet, the most commonly suggested “fix” or issue identified in some speed tests, is to “Optimize images.” If you look closely, you will see that some of the optimization recommended only result a difference of 1KB, so basically insignificant. The main point is to pay attention to the sizes of your images and to make them the appropriate size for the space they are assigned (don’t put a 900px wide image in a spot where it only needs to be 300px) and optimize it or compress it. Use the exact required size for images and don’t rely on your theme to resize them.

Another tool, if you don’t use Photoshop or an image optimizing plugin, is Compressor, which allows you to compress and then download your images, and it shows you how much it has saved/compressed your image:

null

Remember, if speed tests are marking you down because you could save 1kb by compressing an image it’s not worth bothering about!

CACHING PLUGIN

There are a number of caching plugins that help speed up your website. These plugins make a copy of your site in a separate folder in entirely static form or try to reduce calls to your server, as well as minifying and concatenating files (combining multiple files into one). This reduces database calls, the number of PHP requests and the number of HTTP requests. Many of the “warnings” on site speed tests can be resolved with a caching plugin (i.e. Remove Query Strings, Minimize Request Size, Specify a Vary: Accept-Encoding header, etc.)

WPRocket has a great reputation, but is not free. I found Autoptimize to be similar, and the basic version is free. WPRocket integrates well with CloudFlare, which is a benefit if you use this CDN.

These plugins have settings like those shown here, which allow you to specify which files can be minified to help your site run faster. Be careful with these settings, as, depending on your theme and host server settings, this can cause issues or break your site.

null

CDN

A CDN, or Content Delivery Network, stores some of your site content and delivers that content to a user of your website based on their geographic location, the origin of the webpage and a content delivery server. This is effective in speeding up websites with high traffic and websites that have global reach. The closer the CDN server is to the user geographically, the faster the content will be delivered to the user. CDNs also provide protection from large surges in traffic.

There are a few well known CDN providers. CloudFlare is the one I have tried. You need to be comfortable editing your DNS settings and know that the level of caching is a pain in the neck to clear (unless you are using WPRocket’s integration, with a quick “Clear CloudFlare Cache” button). Since most of my client’s websites are targeted to local users, I do not often have a need for a CDN. With that said, I am using it on my website and as you can see below, it does help a bit.

Here is a test with the same website: the first result is with CloudFlare activated. The second is without CloudFlare.

Website Speed Test ScreenshotWebsite Speed Test Screenshot

OTHER STUFF

THEME

I use the StudioPress.com Genesis framework by StudioPress, which is optimized to run fast. I also use Beaver Builder on some of my websites, which is reported to have little or no impact on site speed. I was curious, however, to see what the difference would be with the basic 2017 WordPress Theme activated compared to my custom (yet simple) Genesis theme. Here are the results:

Speed Test Screenshot

The first image is the Genesis theme, with Beaver Builder. The second is the same site, same host, with the 2017 theme. There isn’t much notable difference.

PLUGINS/CLEANUP

It is a good idea, not just for performance and site speed, but also for security and maintenance, to deactivate any plugins that are not being used, and to delete all deactivated plugins. I keep a history of plugins I have used on my sites, in case I delete something I later want to use again (and can’t remember what it was called!)

PAGE SIZE AND HOME PAGE

A Home Page with lots of content and images can get very big very fast. Some hosts, like WPEngine, do some magic behind the scenes to compress the page size. If you are not benefiting from this high level of compression, you should pay close attention to your image sizes, and use an optimizing plugin to help compress as much content as you can. You/your client should weigh the pros and cons of having a long Home Page. For mobile users, having a long scrolling home page may be desirable vs. having a lot of pages to find/click to in navigation.

Another factor in page size and speed can be external content and scripts. If you are feeding content from a 3rd party via an embed code or shortcode, this content may not be optimized and can impact your load speed. This is particularly true of feeds from Facebook, Instagram and Untappd. You/your client should make an informed decision about the relative benefit of these services if it is having an impact on the website speed.

GZIP

You can use this Gzip test to find out if your site is using gzip compression – a method of compressing files for faster network transfers, allowing your web server to provide smaller file sizes that load faster for your website users.

If your host is not doing gzip compression (WPEngine does this for you), you can add this code to the beginning of your .htaccess file to enable gzip compression yourself:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE

I have no consistent, definitive proof that this helps, but I have seen a difference in some performance tests after enabling gzip.

PHP VERSION

If your site is not on PHP7.0, you can speed it up by upgrading to this version. A good host will either put you on PHP7.0 automatically or give you the option to upgrade to this version.

FINAL WORDS OF COMFORT

Did I mention I am a perfectionist? Despite my many hours of testing, I never accomplished a perfect score on any test! So, I decided to test some other sites that I would think would be built for speed and performance, to see how they measure up and what they might be doing to get a perfect score. I chose WordPress.com and StudioPress.com – they should have all A’s right?

Well, I will sleep easier knowing that great websites don’t have to get straight A’s.

Website Speed Test Screenshot

Website Speed Test Screenshot

Website Speed Test Screenshot

Website Speed Test Screenshot

Disclaimer

I do not claim to have all the answers and look forward to hearing from others who may know more correct me or clarify points that are not complete. There are lots of articles like this one that talk about ways to improve your website’s speed performance. This has been a dizzying experiment and I can’t say much that is conclusive! I look forward to doing some tests on different hosts to see how much that impacts these tests.

In addition, now that I feel I have a good understanding of the factors that contribute to optimal website performance, I am outsourcing some performance testing and optimizing so I can focus on design and development. There are many companies that offer these services. I work with WPBuffs.

Also, in full disclosure there are affiliate links here … I only participate with companies I would recommend.