Sign up for our newsletter
Receive our monthly round up of what's new with WordPress.
That's a scary number (more here, from Trinity). Like a third of movie goers turning away from a theatre when they notice a long queue at the ticket box. I once worked for an advertising agency that produced amazing creative work. We had all sorts of awards at reception, including a couple of Cannes Lion. We also had a VERY slow website and wonder whether we lost business because of the slow website performance.
Fast forward 10 years and I'm wondering the same. So I went back to their website but this time armed with GT Metrix and had a look again. I'll share what I found in a bit.
A pandemic strikes and you find yourself stuck at home with too much time on your hand. Routines are disrupted and escaping to the gym is a no-go. What do you do, then? It’s obvious: check and compare the hosting performance of 1,486 websites of creative agencies in the US, UK, and Australia.
TTFB? Check. Page Speed Score? Check. DOM Content Loaded Time? Check.
If you know what this means you’re likely a developer and curious about the data. You’ll want to check GTMetrix reports of the outliers in the list and figure out, in the waterfall view, what process is particularly slow or surprisingly fast. A TTFB of 21ms? Woah!
(Some devs, instead, will head over to social media to remind folk why GTMetrix isn’t the best tool for this kind of analysis and that we should have used Google SpeedInsight instead.)
Creative types - agency owners, designers, marketers, and SEO guns - will have switched off at the first acronym mentioned. It’s complicated stuff and technical detail for a right-brained person is soul-destroying.
But page load speed is so critical to the overall experience that technicalities must be considered earlier on in the design process. A ton has been written about it already so I won’t repeat the same stats and recommendations -- just have a look at this article on page speed by Cloudflare. Instead, I’ll try to frame it differently.
Here’s an example and, I suspect, a failed experiment. A month or so ago Kmart Australia, seeing their customers shift from in-store to online, decided to route website visitors to a virtual waiting room to manage capacity. Shoppers were asked to wait a couple of minutes before being allowed to browse their website.
I’m not sure how long this lasted but people were left perplexed. There wasn’t so much of an outcry on the social but a general WTF type of sentiment.
The good news is that most developers building and managing ‘mission critical’ websites make the right decisions in regards to infrastructure and capacity management. The queue paradigm is certainly a creative solution but doesn’t quite work from a business perspective.
No, this wasn’t a manual process -- I didn’t have that much time on my hands. Fortunately, I work with some clever people who can write scripts that pull data, work magic and spit out numbers on a spreadsheet.
Here’s what we did:
To get more representative performance metrics we took three ‘readings’ on different days and kept the ones with the best Fully Loaded Time result.
Here are the other ones we looked at more closely, including their definition on GTMetrix:
|Metric||GT Metrix Definition||In layman’s terms|
|Time To First Byte (TTFB)||Time to First Byte (TTFB) is the total amount of time spent to receive the first byte of the response once it has been requested.||The time you wait that often feels like eternity before the page starts loading up.
The smaller the number - in milliseconds - the better.
|First Contentful Paint||First Contentful Paint|
First Contentful Paint is triggered when any content is painted – i.e. something defined in the DOM (Document Object Model). This could be text, an image or canvas render.
|When enough content is displayed on a web page for the reader to have something to consume (and therefore not waiting around tapping his /her fingers).|
|Onload Time||Onload time occurs when the processing of the page is complete and all the resources on the page (images, CSS, etc.) have finished downloading.||All of the page’s content will have rendered but there may still be other stuff running in the background that doesn’t affect the user experience.|
|Fully Loaded Time||The point when there has been no network activity for 2 seconds after the Onload. Essentially, GTmetrix is now waiting until your page stops transferring data before completing a test, resulting in more consistent page load times.||This is when GTMetrix is 100% happy that every element of a page has loaded and the browser is not communicating anymore with the server.|
Please note: a website performance is affected by a ton of external factors unrelated to web hosting, the choice of CMS, theme, or how pages are coded. This was never going to be a scientific paper. Also, we only checked homepages which are the most visited and tend to be heavier than the rest.
With a good grasp of what the KPIs are and mean we are now ready to look at the data.
Lyft SEO! With a minuscule Fully Loaded Time score of 360ms - that’s a third of a second!
But as you can see from the screenshot below - all 13KBs of it - they don’t quite have a website. We excluded Lyft and a number of other outliers in our analysis, as mentioned earlier.
Let’s set some benchmarks before looking at results: the scores agencies should be aiming for. For this, we’ve asked Vito Peleg of WP FeedBack to share some of his wisdom.
Vito has made a name for himself in the WordPress community for launching a very successful plugin -- WP FeedBack PRO -- A platform that makes it easy for you to manage your WordPress agency, by allowing you to capture client feedback on live websites and putting it all into a central dashboard.
He has also recently hosted the WP FeedBack Virtual Summit, a 7-day event that attracted several thousand attendees and that we were proud to sponsor.
Before all this though, he ran his own agency in London, so he is very much across the creative process and all the technical stuff behind the scenes.
This is the first number I look at and while it can be impacted by running too many processes, it’s a good measure of how a server performs. Aim for the lowest number possible and if it gets over 250ms have a chat with your devs and hosting provider.
I believe in UIs that stand out and tell a great brand story, so it’s always a balancing act to produce an amazing design that happens to be ‘lite’ too. I try to keep it under 1.2s, which will be perceived by the end-user as quick off the mark.
Half a second max over First contentful paint, but I only look at this number if it’s particularly high.
I take Google’s advice on this, which is 2s, and add a little bit extra to allow some cool features that help give a page personality and help with CRO. This means that on GTMetrix I’m seeing anything between 2 and 4 seconds.
It’s tempting to add images and animations but also quite easy to have a neat and elegant-looking page weighing under 2MB.
If you have any questions for Vito he’s very active in his Facebook Group and is more than happy to provide advice.
Results are pretty consistent across every region, with the exception of Australia that returned a particularly high TTFB average. This may be due to Australian agencies hosting their websites abroad chasing American or European business. Or just opting for the most discounted offer they find online. Hard to say.
TTFB is slow across the board. American websites are the quickest off the mark but an average of 617ms is sluggish.
Let’s see what’s slowing down one of the websites on our list with the highest TTFB, which also happened to have a Fully Loaded Time close to 14 seconds.
This, incidentally, is what the waterfall view in GTMetrix looks like. A Gant chart for all the files associated with a web page. There are multiple things going wrong here, starting with that huge 1.15s delay on a 301 redirect.
This screenshot will look scary to most but grab the attention of speed optimization pros as wherever you see a delay there is an opportunity to speed it up and cut the total page load time down.
This is when, in most cases, the browser has rendered enough information for the viewer to consume. GTMetrix explains this very well in their First Contentful Paint Explained article, and was kind enough to let us use the image below shows where this step fits in the ‘Page Load Journey’.
While the hosting environment has a significant influence over TTFB, subsequent steps are more about how a page is engineered: HTML, scripts, the sequence they are added in and calls to external resources such as Google Fonts and analytics scripts. These are all components a developer has control over.
It’s interesting to see in our data that First Contentful Paint is a respectable 1.5s for all regions.
Here’s the catch: key content may have loaded but not the rest of the page’s assets. The more this is noticeable the more it becomes annoying, particularly if you’re navigating multiple pages.
Onload Time is where you want to get to ASAP. There may be some processes still working but by the time you hit this milestone but you will have delivered the full experience.
We’re seeing an average delay of 0.8s between the previous First Contentful Paint step, which isn’t bad and not far off Vito’s recommendation.
Looking at the numbers, it’s interesting to see that this value (apart from a few outliers) is pretty consistent across the data set. The same can’t be said of TTFB and I’m wondering whether this may be due to agencies using the usual page builders, themes, plugins, etc… so building websites that are technically similar?
I wasn’t going back to check how 1,500 websites were built so did this little bit of analysis instead, comparing the 0.8s average -- Online Time minus First Contentful Paint -- with homepages of six of the most popular page builders.
Congrats to Divi and Themify for taking gold with 0.6s, with Elementor only 0.1s behind. Beaver Builder and Visual Composer may just have had a bad GTMetrix day. Bearing in mind that this was a quick test with a very small data set, so as unscientific as one can get.
With our batch of agency websites performing well for this measure can we speculate that their poor performance is due to being slow off the mark with their TTFB?
With an average of 5.1MB agency homepages is quite overweight. This is more than twice the 2MB HTTP archive report for desktops for the January 2020 - May 2020 period.
While it’s good practice to keep a page lean there is nothing stopping them from building heavier ones but packing a 6.4 L V8 engine under it.
Crowd Faction is an Australian-based marketing agency offering a range of digital and print services and are Convesio customers too. We know them well.
Had they been part of the study they would have contributed to pushing the numbers down:
|TTFB||First Contentful Paint||Onload Time||Fully Loaded Time||Total Page Size|
There were no compromises to achieve this either: their homepage looks great, provides useful info to the reader, AND is under 1MB.
We asked Martin Cartwright, owner of the agency, what tools he used to build it:
There are many builders as you know in the market I’m comfortable with most and the one I used on our site is WP Bakery.
Crocal, with some modifications.
Keeping pages to a minimum size with plenty of white space without compromising on website quality. The most important element in any WordPress website in my view is loading speed and whilst keeping the pages light on size, images are optimized together with the team at Convesio for our web hosting which enables us to optimize performance for the site across all platforms/devices.
We found a much more interesting story in cohort data looking at Hourly Rate, Minimum Project Cost, and Employee Count metrics, that are publicly available on Clutch.
Let’s plot the average TTFB values against the hourly rate agencies shared on Clutch (bearing in mind that about a third of them did not).
The trend is inequivocabile: TTFB reduces as the rate goes up.
We see a similar trend looking at Fully Loaded Time:
Websites of agencies charging $200/hour or more are 3 seconds faster than those charging less than $25.
So you get what you pay for, right? Assuming agencies with a slow website build slow ones for their customers too.
A similar relationship between cost and website performance can be seen in this cohort too.
TTFB drops from 863ms for agencies offering projects from $1,000 to 699ms for those that don't get out of bed for less than 50K.
The drop in Page Load Time is much more pronounced, though:
Could this be that agencies working on bigger budget projects dedicate more time and resources to speed optimization?
Does the size of the company impact website performance too? Let’s have a look.
|TTFB||First Contentful Paint||Onload Time||Fully Loaded Time||Total Page Size|
|2 - 49 employees||816ms||2.3s||5.3s||8.0s||4.7MB|
|50 - 249 employees||791ms||2.2s||5.1s||8.1s||6.3MB|
It’s interesting to see that freelancers are building ‘lighter’ homepages for themselves, and if TTFB is a measure of the quality of hosting the performance narrative continues.
Big agencies have heavier and slower homepages and I can tell you why too. When the CEO decides to re-design the website a bunch of Art Directors, Account Managers, and Strategists gather in the boardroom to fight for a piece of homepage real estate. Art directors tend to win and their Cannes-nominated TVCs become the homepage’s background.
Ten years ago I worked for such an agency and produced this type of work, which I will tell you about next.
Grey is a top-tier advertising agency that has been around since 2017 and the creative force behind some of the best ads you’ve seen.
For the record, grey.com is not one of the agency websites we looked at as part of this study. They are not Convesio customers either and it’s not a WordPress website either.
Back in my days in the Melbourne office some of the more interesting projects included building 3D tomatoes flying around the homepage of a pasta sauce brand and the Everybody Hurts campaign to raise awareness about speeding. The latter went viral thanks to its integration with Facebook; this was at a time when the API economy was just being born and Facebook was still good.
The creative team produced consistently good work and I felt that our website never did it justice. Rather than showcase our flying tomatoes it featured three lame dancing robots. In Flash.
(Please note: this is a reconstruction from memory as I couldn’t find any screenshots nor Archive.org pages.)
I was quite vocal about my dislike of our homepage and no doubt pissed Management off by calling the robots pretentious, unoriginal, and stuck in 2004 at a conference.
Fast forward to 2020 and I wonder what grey.com looks like now. Let’s take a peek.
Much better! The lame dancing robots have been fired and they’re showcasing some great content.
But does GTMetrix agree? Let’s see...
|TTFB||First Contentful Paint||Onload Time||Fully Loaded Time||Total Page Size|
Oh, dear. The numbers are so outrageously bad that there must be something obviously wrong. Given the homepage is a series of videos in full-screen mode (which also means that the Art Directors won the board meeting room battle again) we’ll check for these first in GTMetrix.
This is what calls to Vimeo look like in GTMetrix’s waterfall view.
The thing is… I didn’t stare at a blank screen for 30 seconds waiting for the page to load up. The Onload Time was 8.9s - still very high - but the IRL experience wasn’t so bad. Not for me anyway, as I’m sitting comfortably home with a cable connection to a metropolitan hub. I suspect that if I had been living somewhere remote, I would still be waiting for the homepage to load.
Grey’s audience - big businesses and fellow creatives - are sitting behind a fast internet connection too. So there is less of a need to save bandwidth and optimize for speed.
Receive our monthly round up of what's new with WordPress.
Convesio is not just another hosting provider. Our infrastructure was designed from the ground up for hosting high performance, scalable WordPress sites.FREE TRIAL
Group6 Interactive has been a Convesio customer for 6 months and its founder, Nate Fineberg, is as speed obsessed as we are. And very good at it.
Nate practices what he preaches too. His website loads in 1.7s seconds and feels even faster than that. Have a go and you’ll see what I mean: https://group6interactive.com/
Impressive stuff. I’ll let Nate introduce himself and explain how he does it.
A quick intro: tell us about yourself and Group6 Interactive
I have been in the coding world since about 1998, I moved specifically into website development in 2002. Before opening my own creative agency I was working at Sony in San Diego as a web developer. Established in 2011, Group6 Interactive is a full service digital marketing agency specializing in website design and development, accessibility, graphic design, online marketing and search engine optimization.
Your website loads in 1.7s, less than a third than the average of this study. How were you able to achieve this?
First and foremost, and always a top priority, quality optimized code. Assets are only loaded when needed, not on all pages keeping requests as low as possible and using properly sized, optimized images. This is a WordPress site, I do not use themes and bloated page builders, and I always try and use the least amount of plugins possible. Also, I use Cloudflare and a high quality host.
Is there a client site that you're particularly proud of for its speed but also not compromising on design?
ProEst, proest.com, this is one of our newest clients, the site has over 60 pages and 200+ blog posts. We’ve got the onload time down to 1.6s on the homepage and should be able to shave off some more milliseconds as we continue to optimise.
There are a lot of stats that make the case for fast websites and Google telling us to keep pages loading under 2 seconds. Has performance translated to more business opportunities in your and your client's cases?
More recently yes it has, we have clients coming to us because they are not happy with the performance of their current website. I have noticed clients and potential clients are more conscious of fast loading websites and asking general questions around website performance.
Unfortunately with WordPress websites it's extremely easy to be sold a "custom" website when really all the company is doing is purchasing a premium theme for $60 and plugging in content and images. In most cases those themes are coded poorly and extremely bloated, so from the very beginning you're getting a site that will not perform and in most cases hurt your business.
Any tips to fellow agency owners to help them speed up their websites?
Take the time to learn and understand the factors that affect page load times and overall website performance. Stay away from WordPress themes that "do it all", and premium/free themes in general. Use frameworks instead, build all of the functionality into the framework, limit the amount of plugins, plugins load files, those are requests, keep requests as low as possible and only request files and assets when needed.
If you need to use a theme, run the theme through a performance tool like GTmetrix. Approach every website with the goal of designing and building it with best practices and industry standards as the number 1 priority, that is the foundation to website performance.
Lastly, it's very important to use a high quality host.
Learn more about Nate and what Group 6 Interactive do:
Before moving on to the final part of this article here’s a sneak preview of some good things here at Convesio, that Nate is involved with too. This is from one of this client’s websites...
Check out the 389ms Onload Time on this baby…
I’ll preface the following points by pointing out that httparchive’s results for the January 2020 to May 2020 period show that the median Onload Time is 6.5s. This for a much larger dataset too. So when I’ve called agency websites slow it was in the context of the performance they should be aiming to achieve.
The most interesting finding, IMHO, is the correlation between how much an agency charges and the performance of their website. Page load speed is a measure of quality, influences conversion, and business folk are increasingly aware of this. A fast loading homepage gives an agency an advantage.
We mustn't forget that page speed is also good for SEO and one of the signals Google takes into account when ranking a page.
If there is one thing agencies reading this should take away is that building speedier websites is a sound commercial strategy. Nate at Group6 Interactive and Martin at CrowdFaction know this well and are reaping the benefits.
It doesn’t take too much effort to make a website load fast and delight your audience. You don’t necessarily have to re-design it either -- often just a few simple tweaks and some clever use of optimization tools will suffice.
You should have gathered by now that we have a healthy obsession with speed. The platform was conceived and built for performance and to address the many frustrations agency owners have looking after WordPress' back end and infrastructure.
Convesio’s founder, Tom Fanelli, asked himself -- why is it that as technology progresses web hosting providers seem frozen in time offering little innovation?
Our platform is different from anything else in the market and value extends beyond the technical solution: our customers can tap into a team of experienced engineers to make their websites perform at the highest level. Bearing in mind that in many cases it's not just a question of adding a speed optimization plugin and enabling a CDN but more of a forensic process to figure out what is slowing things down and what can be done about it without compromising functionality.
This is what we offer:
A Docker-based WordPress hosting solution that is the first self-healing, autoscaling, platform-as-a-service for creating and managing WordPress sites.
If you’re interested to learn more, schedule a demo or perhaps request a free optimization analysis first.