How to Test and Interpret WordPress Site Performance with Jon Brown — Do Go Chasing Waterfalls

Our friends at WP Engine recently rolled out a beautiful new homepage built with Beaver Builder. We shared a link to the page in the Beaver Builders Facebook Group and a few folks noted that the overall load time of the page was quite high. Our good friend and WordPress developer extraordinaire, Jon Brown, came to the rescue with a great explanation.

The Facebook Conversation

Let me paraphrase the conversation here real quick:

Concerned Beaver Builder: I did a page load test with XYZ testing tool and it took almost 10 seconds to load!

Jon: Speed and performance is a design choice and is critical to sales conversions but that doesn’t mean it’s not a trade-off against other MORE valuable tools.

I see people look at letter grades and total load time often without understanding the waterfall. That will lead you astray unless you’re looking at very simple sites…

Those testing tool grades are really crude and ignore a lot of practical realities. They’ll say to avoid redirects when those are for ads, tracking scripts and other things that necessarily work that way. They often ignore HTTP/2 and recommend reducing requests and concatenating assets that wouldn’t matter and could even hurt… They don’t focus on speed index and rendering above the fold… 

True page load is <1.5s

Let’s Dig Deeper

I asked Jon if he would entertain a few more questions on the subject of performance and he very graciously agreed. These are my (Robby’s) questions with Jon’s answers.

Oh, did I mention that Jon runs a custom development shop called 9seeds so he’s available for hire to help you fine-tune your WordPress website’s performance!

1. You mentioned the “waterfall.” Can you explain a bit more about what the waterfall is?

There are a lot of tools out there to evaluate website performance. Many of these give a report that includes an easy to understand letter grade. Those letter grades are pretty blunt tools though, and while it’s nice when you get all As it’s not particularly insightful, let alone helpful, when you don’t see straight As. The only letter grade I find helpful is for image compression, which is an easy fix, go run your images through an optimizer.

Too often I see lay and novice developers get blinded by the letters.  There are a lot of factors that go into frontend web performance and one really needs to look at the “waterfall” which is just a graph showing all the HTTP requests, when they started, when they completed. I use WebPageTest.org to generate these.

The “waterfall” is where you “see” what the specific asset is that taking too long to load and/or that is blocking other things from loading.

Finally, recognize that straight As may require design choices (like removing sliders) and eliminating third-party assets (like Google Analytics, HotJar, etc) which are more valuable to the site owner than getting an A. Not every site can be made to get straight As without painful sacrifices.

2. You recommended WebPageTest as your testing tool of choice. Why do you prefer it and how does it differ from tools like Pingdom, GTmetrix (and/or, Google Page Speed?)?

Personally, I’ve never found anything better and more flexible at doing these than WebPageTest.org. However, I’ve used GTMetrix, Pingdom, Google Page Speed and others in the past as well and they’re just fine. Some of the new ones like Lighthouse are really cool for progressive web apps (not 99% of WordPress sites). I’m certainly not telling people to switch tools though, use the tool you know and understand. If you don’t know any tool, WPT is a great free one to learn with.  Just do get beyond the letter grades and start to understand what’s causing those letter grades.

3. On the note of “reducing request and concatenating assets,” is this no longer a best practice? Why?

Back when most sites were HTTP, as opposed to HTTPS, and web servers were all using the HTTP/1.1 protocol web servers could only send so many assets in parallel.  Each asset (image, script, stylesheet) was sent separately and each had it’s own overhead which slowed things down. Concatenating everything possible together reduced the number of HTTP requests and had huge performance benefits.

In the last couple years, there has been a huge push towards HTTPS everywhere, and web servers have started supporting the new HTTP/2 protocol. HTTP/2 has huge benefits like pre-fetch and pre-load but also can send all those tiny assets in parallel, so there is no need to be concatenating them. In fact, it can be better not to so that each tiny asset can be cached independently.

It’s important to keep in mind that this only comes into play if your web server supports HTTP/2 and that is only possible if your site is HTTPS.

That said, all the sites we work on these days are HTTPS and run on HTTP/2 capable servers, so I’m at the point I don’t even think about concatenating assets anymore, and I certainly don’t miss it!

4. Are there any other “myths” or outdated performance recommendations that you would recommend against?

The biggest is simply that every site can get straight As without making painful concessions like design changes or eliminating 3rd party assets you don’t control.  However, that’s really OK because you should start looking at something called Speed Index! WPT has a good write up on this, but it’s basically considering when the “above the fold” is perceived as fully loaded by the user. It’s about the user experience of speed, rather than the page being truly complete. This was on of the things about WP Engine’s new front page design, speed index was awesome. It was the deferred scripts that were taking a long time to load and complete.

5. Do you have any other performance tools, tips, or tricks that you would recommend for someone?

Tools I’ve come to rely on over the years:

• WebPageTest.org – My favorite!
• ImageOptim – desktop app to compress JPGs/PNGs
• ImageAlpha – desktop app to compress PNGs (mostly by reducing number of colors)
• CloudFlare – free as a massive global CDN and basic WAF. Plus impressive paid pro features like on the fly image optimization, route optimization and more.

Plugins:

• WP Rocket – Even on WP Engine, we use WP Rocket, it just works.
• Imagify.io – WordPress/Cloud-based image optimization.
• BeaverBuilder – I was not paid to say this! We get called to do performance audits on lots of sites and often see major frontend and backend issues with other popular page builders I won’t call out by name, but not with Beaver Builder, which is why we use it on our own site as well!

Thanks again, Jon, for taking the time to walk us through a more modern approach to performance. I wanted to give one last plug to Jon’s agency, 9seeds. If you’re looking for help with any sort of custom WordPress development, give them a holler!