Page Load Speed – Critical User Experience Factor

…and Google takes your website’s page load speed pretty seriously as well.

How fast does your page load? Have you tested it? Do you know how long your prospective visitors are waiting? Do you know how long they’re willing to wait?

They don’t wait very long.

When was the last time you waited 5 seconds for a page to load before you stopped and started your next search or clicked on the next Google result?

Your Page Load Speed is critical on at least two levels:

  1. User Experience: Nobody wants to wait for a page to load and every user has different expectations for how long they’ll wait.  Spoiler Alert: It’s not very long. If their first visit to your website takes a long time to load, in the back of their minds they’re expecting every page to have the same problem. One page might be “ok” but if they’re doing research and expect to click from page to page (which is exactly what we want them to do) they are adding up the time it’ll take in their minds while your first page is loading and making the decision that it’s not worth the wait.  They’ll stop the load, go back to Google and click the next item in the results page. If that one loads in 1 second, then they know the next pages they hit should be about the same. It’s not an unusual or even unrealistic expectation these days.  If your page doesn’t load fast, you will lose customers.
    • Keep in mind, User Experience directly relates to how much money you make!  If users are unsatisfied with your site, they won’t stick around. If they don’t stick around, they can’t become customers.
  2. Google: Yeah, those guys.  All of what I said above…they know.  They know far more about it than I do. They know on an industry basis how long users will wait. They know to the millisecond how long a user will, on average, wait for a page to load when they search for “Dental Implants” and if your Dental Implant page doesn’t measure up, it will affect its rankings in the Google Results. Your content might be excellent, great videos, links to and from highly authoritative sites, etc, etc.  All the makings of an otherwise highly ranking page.  But Google knows that if that page is slow, other pages might be slow as well and that will result in a sub-optimal user experience for the person doing the search and since that person is, in effect, a Google Customer, Google wants to make sure they get the very best user experience possible. With this in mind, Google does recognize page load speed as a ranking factor. Not the highest, but certainly not the lowest either.  No matter how you look at it, it’s a critical piece of the puzzle.

The not-so-subtle result of a slow loading site is fewer visitors and therefore fewer customers.  How many fewer though?  Here’s some industry statistics:

  • One well known study shows that when page load time improves from 12 seconds to 8 seconds, the conversion rate increases 74%.
  • A study by the Aberdeen Group found that a one second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction and a 7% loss in conversions overall.
  • Shopzilla speed up their site load speed by 5 seconds and recognized a 7-12% increase in conversions.
  • Amazon reported that they got 1% revenue increase for every 100ms of page load speed improvement.  When you’re Amazon and dealing with that much money, it’s significant.

A quick graphic to drive the point home. You may not be making $100K/day but the math is still evident and important.  If you’re making $100/day or $1000/day, the results are astounding:

one second delay cost

Aberdeen Group – 1 second delay cost

How can I find my Page Load Speed?

First things first, we have to know where you are.  There are three tools I use on a regular basis when optimizing for page load speed.  GTMetrix, Google’s Page Load Speed Test and WebPageTest.  Between the three of these, you will get a very good idea of how fast your page loads and tons of ideas for speeding it up.  Lets take a look at each and I’ll show the results for the SnugData home page to use as an analysis:

  • GTMetrix: You might think that since everything I do spins around how Google reacts to my machinations that I would focus on Google’s tool first.  I don’t. I’ve been using GTMetrix for quite awhile and I love their interface, their history tracking and their recommendations.  I would say if you use only one tool (and I did for a long time) it would be this one. You can get all the info you need and it’s free.  There are, of course, benefits to getting on a paying plan with them but their free service is invaluable.  Here’s the result of the GT Metrix output for snugdata.com:

 

SnugData Page Load Speed

SnugData Page Load Speed

Looks like I have some work to do! I’ve made some changes lately and haven’t focused on the page load speed so I should probably read my own blog.  But, this is a great example.  GTMetrix gives two grades, a PageSpeed score and a YSlow score. I get a mid-B for one and a high-B for the others. Of course I shoot for an “A” always but I’m actually pretty happy with a B from GTMetrix.

In their interface, the big numbers under Performance Detail and Page Details are indicative of how fast your site is. The Page Load Time for my page of 4.6 seconds is way too high – this is something I’ll have to put some time in to fix. If it’s more than 3 seconds, it’s a problem and you want it as close to 1 second as possible. My page size, shown next to the Page Load Time, is a big part of the problem.  Loading 1.33MB of data is a lot of work. I need to minimize that.  There are several ways to do that (and these will be spelled out in the bottom part of the GT Metrix output) but the usual culprit is images.  I use a lot of images and I don’t always take the time to ensure they are optimized.  If you get your images right, a lot of other performance metrics tend to fall into place.

Additionally, you can click on the tabs for PageSpeed, YSlow, Waterfall and the others to get detailed information on what to fix and this is where the real gold is.  These items would require a book to fully explain so I will just say that spending some time in these tabs and reading the help that pops up when you click in different areas will give you a ton of useful information.  For example, notice I got an “F” for “Defer parsing of JavaScript”.  This means that I have JavaScript that is executing before the user gets to see the page. This type of code should execute after the user sees the page so their user experience is improved as a result of a seemingly faster page load. I know this because this happens on just about every page.  The impact is high and is something I do work on but it’s not usually my main priority.  Little doubt though, that if I fixed this I would get an “A” here.

  • Google Speed Test: This site also gives grades and recommendations.  Keep in mind, this info is straight from the horse’s mouth insofar as performance and ranking goes, so don’t take it lightly.  They also break their grades into “Mobile” and “Desktop” ratings which, if you remember, Google puts even more emphasis on Mobile than Desktop these days(check out this article for more details).  Fixing an item in one area will often fix it in both but don’t take that for granted – you should double-check.  Given the above GT Metrix results, I expected the Google results to show some work needs to be done:
Google Page Load Speed Results for SnugData

Google Page Load Speed Results for SnugData

 

Got a 77 instead of the “B” that GT Metrix gave me so definitely need to up my game.  Notice the “Should Fix” item and the “Consider Fixing” items.  They expand in this interface and the screenshot shows some of the detail. Under Consider Fixing, we see the same warning about JavaScript we saw in the GT Metrix results.

Lastly, lets see how Web Page Test looks:

  • WebPageTest: Dang, from bad to worse.  Now I have two “Fs”.  Before you start having flashbacks to High School, keep in mind that unlike the High School grades, these grades can be improved dramatically with little work at times.  Sometimes, though, it’s extensive – it all depends on what’s causing the slow down. Below, I’ll go through some of the areas that are often problematic and offer a few insights into how they can be addressed.

    SnugData Web Page Test results

    SnugData Web Page Test results

How can I improve my Page Load Speed?

From the sites above, you should now have a very good idea of items to address.  You at least have a high level idea of what they are but possibly little to no idea how to proceed.  We’re going to fix that for you now.

There are number of usual suspects when dealing with pages that load slow. Large images, improperly formatted images, improperly “scaled” images, poor site structure, too many files loading, files loading in the wrong order, removing query strings, etc.  Much of this is usually taken care of by the website itself, the web host, or just by happenstance.  Some, though, creep in time after time and these are the items we’ll look at below:

  • Images: You may have noticed I mentioned several image related “usual suspects” above.  This is because the images on your web pages can be the most problematic when it comes to page load speed.  Large images just take longer to load so we need to give strong consideration of how to get the best optimization here.
    • File type: JPG or GIF? What about PNG?  Entire books have been written about this but I usually distill it into a single sentence.  Whatever looks best and is the smallest, use it. When working in this area, I routinely save an image in all three formats, work a little formatting magic on them, and then use the one that is the smallest but looks the best.
      • GIF – usually works best for images that don’t need real good clarity. Clipart, text, etc, etc.  GIFs, however, are not good for photos or other images where you want strong clarity.
      • JPG – works well where GIFS don’t show enough clarity. Usually larger than GIFs.  Most often used to show photos.
      • PNG – the 8 bit format is usually as clear or clearer as GIFs and often smaller so strong consideration should be given to using them.  24-bit and 32-bit images can be used that compete with JPGs for image clarity but often result in larger images.
    • Image Compression: There are a lot of ways to compress images but I find myself using Smush regularly these days. It does a great job of “smushing” images to their smallest size.  Works great, not much reason to look any further.  This is a WordPress plug-in so if you’re not using WordPress you may need to do it manually or find a tool that does it for you. Either way, this is important and makes a big difference
    • Image Scaling/Image Dimension: This is an odd one. If you upload an image to your website that is, say, 600×800 but then you resize it on your page to 500×700, this slows everything down. WordPress will upload the file you told it to and then resize it, reflow it, repaint it, re-whatever it to get it to the size you specified.  If you upload it as the size you intend to use it as, you save all that extra work and speed things up.
  • CDN (Content Delivery Network):  This is an often recommended approach to speeding up your site. A CDN will store local copies of static files from your site and serve them up when visitors visit your site. Keep in mind that images (and other static files) can be large and take a long time to send from your webhost to whoever is visiting your website. There is also distance to consider so if your website visitor is located a long ways from your webhost, then it takes longer for that data to get to them, impacting (severely) the page load speed.  CDN’s address this by having servers and data farms around the world and store your static information.  They serve the information to your website visitors from whatever resources are closest to them.
    • There are a lot of other benefits to using CDNs but Page Load Speed is often the most important.
    • CloudFlare is the one I use regularly and they are free for basic configurations (like I explained above). The setup is also pretty easy. There are very few good reasons to NOT use a CDN such as CloudFlare.
  • Minification of files: Oftentimes, the source code from your website will become fragmented over time, becoming comprised of many different files.  Many of these files contain formatting that takes up space within the file and, when “minified”, takes up far less space.  Multiply this by all the files on your site and the difference is usually quite dramatic.  There are many different programs that will do this on the fly and, in fact, CloudFlare mentioned above also does it. There is no real reason to not minify your code.
  • CSS Files: Over time, as you add more and more to your site, you may end up with multiple CSS files. Sometimes it helps to combine them.  For example, in SnugData’s GT Metrix results, one of the warnings I got was “This page as 15 external stylesheets. Try combining them into one”. Doing this reduces the amount of calls the website has to make while loading, thereby speeding up the process.

Page Optimization Plugins

Since I deal almost exclusively with WordPress, I’ll make a couple of recommendations of plugins I use for optimization:

  • Smush – explained above.  Does a very good job of smushing images to improve performance
  • CloudFlare – explained above. Serves static files to your website visitors from geographically close servers to reduce page load time. Also has tremendous additional benefits aside from improving site speed
  • W3 Total Cache – The complete package (as the name implies).  Does most of what is described on this page.
  • WP Super Cache – this is a static caching plugin.  In a nutshell, it takes the backend processing files that are written in the PHP programming language and generates static HTML files from them.  These static files are then served to your visitors instead of processing PHP and then serving the files.  This can speed up your site dramatically

Summary

I guess that’s about a wrap.  There’s always more to do to speed up your site but now you should be aware of the importance, you know how to check it, and you know a few things you can do to make it better.  As you get into it more and more you’ll find still more things to do. I would advise you to stop at some point (a “B” isn’t all that bad, right?) and then focus on making your site valuable to your users.  Page Load Speed isn’t everything.

As always, I’m an email or a phone call away so if you are curious or if you need help, just reach out.

Good luck!