Here’s proof in some undeniable data, this is a technical article that could make your eyes bleed and send you to sleep if you’re not interested in website performance. It describes our journey to have the fastest hosting and site setup possibly available for us and for our clients.
Everyone wants to be fast and with that comes a long process of figuring out how to optimise a website to match against three specific categories. Performance, SEO, Accessibility and best practice. We’ll talk about each area below and how it related to Get Leads in order to get 100/100 based score on Google Lighthouse.
We originally launched our new Get Leads website back in October last year. It had been in development for around 6 months prior to that figuring out the strategy needed to be executed to draw new work in the area and with the customers we desire to work with, the professional services sectors. Competition was low in Wagga with other agencies and IT guys websites being fairly well optimised on the web server side but usually not at the application level. If you tested sites you’d get between a 50-80 type speed test rating for Google’s core metrics. At that point in time I managed to rank myself number 1 for “Web design Wagga” after 6 months of writing blogs like this one as well as some other press release off-site SEO work. “Web Design Wagga” is the search term that get’s most of the organic traffic for my geographic area.
One important point of note here is that if you get a referral from organic ranking as a web design agency often these customers are not the best customers. It’s the ones you get from word of mouth referral that are the best. That said, you still need to practice what you preach when it comes to having the best practices implemented for your site.
You can’t control your competitors
I found Get Leads on the back foot in April with a competitor finally upgrading their site no doubt in response to a new contender in the market. The site was well designed, applied strategy and to my horror scored a 99/100 for Google’s core metrics. At the same time my ranking went down to number 2 on Google for my chosen target keyword. Making websites fast 10 years ago use to be far easier I remember to what it is now and so I crawled down the rabbit hole note knowing where it would lead me and if I would be able to achieve a 99 ranking or even a 90 ranking.
I have nothing to hide with the below screen captures, I’d say I’d prefer Wagga based agencies to be offering quality hosting and best practice and as you will see some of them DO while other fail. It get’s Wagga businesses ahead on the national stage by doing good work.
If you are the owner of one of the above and you care enough to email me because you’ve updated your performance let me know and I’ll update your screen capture. Don’t even mind if it’s says you’re 110% and faster than mine.
How do you test your metrics and find out what you need to improve
In the past I’d always used GTMetrix to do my performance testing and then earlier this year they went super commercial and demanded that if I used them I’d need to have a paid account. There’s a stack of free performance testing tools out there including Google’s own Core Metric test Lighthouse. If I’m just doing a basic test on a customer site or prospect I may even use Speed Vitals which is fast easy and fairly visual.
If you really want to fine tune though you need to use the Lighthouse feature you can find in the dev tools on Google Chrome or in my case Brave browser.
Choose the categories on right and click “Analyze page load” to get to the fun part.
The struggle is real and complex
This is why you don’t have your designer build and maintain your website. A few metrics that need to be tuned to get the performance you’re after to compete.
- Image size – You want your images to look amazing but not to slow your site down – webp format
- CSS / JS – Delay – Defer – Combine
- Minify files, HTML, CSS, JS
- Content Delivery Network (CDN)
- Excluding some images from Lazyload due to placement
- Prefetch
- Browser Cache Lifetime
- Preload – Fonts / key images
- Prioritising content
- CLS – Content Layer Shift
- LCP – Large Contenful Paint
- Accessibility – Aria titles and labels
- General SEO best practices – Alt tags on images
- TTFB – Time to First Byte
I’m sure alot of the above could be considered another language or even just too hard for most website owners. Having control at the level unlike the SaaS systems that should remain unnamed will allow you to amp things up.
Why you should care about performance?
For those of you with little idea about the knock on affect here, one of the key ways Google will rank your site is from your website performance. It’s a factor that gives a lot more weight than it use to and one to consider closely. You may gain a place or two on Google against your closest competitors by having your website optimised. See my article on ranking factors for more details on how to rank. If you’re a new site and have no authority then I’ve also got a good article for you on how to start if you have no domain or online authority.
What are the drawbacks?
As your site is truely optimised for speed there will be no doubt several mechanisms here that will minify production ready files. We’re all use to making changes and finding those changes active straight away after we hit save. With my Litespeed caching it’s also try that you save and the cache can be setup to automatically refresh. It will however take time for those changes to be distributed to the CDN. You can find that changes you’ve made have a longer browser caching policy than expected.
You can also really be on the line between having a functional site and a site that’s broken. This is why it can take a very, very long time to optimise your website. It’s a case of test, fail, test, pass, test, fail until you get to a point where everything’s working. Except then you realise you need to test on mobile as well and find out that things work ok on your computer emulating a mobile device and then you use your iPhone and again your mobile menu stops working.
What are the biggest challenges?
Absolutely for me it was the metric LCP which stands for largest content paint or the largest item that slows your site down the most when your site loads. Here it’s not just a matter of optimising your image and making it a webp next gen image. You may need to assign some special attributes to the image itself that prioritises and prefectices it’s load. In addition to that making sure it’s not lazy loading and that it’s not a CDN image but one that is loaded directly from your server.
If all of this sounds over whelming to you then you’re not alone, most web professionals struggle with optimising their site to this level and LCP is by far the number one issue that needs attention but I think once have a few tricks up your sleeve you can apply these methodologies on a more regular basis as part of your build.
The best tools for optimising your WordPress website
Most IT guys just want to buy a tool such as a plugin, pay the money, download it and enable it and bob’s your uncle. You’ve got a fast site scoring 100. Because every site is different it will always require some form of manual configuration by a web team. This is why websites should be managed by agencies and note by IT teams that have little to no experience with the application layer.
My list of tools will be different to most:
- Perfmatters (yearly subscription around $150 AUD)
- Webp converter loaded by Brew (yes, I know you can use a plugin like shortpixel or EWWW to do thse conversion but I like to do it before I upload)
- Hazel is super cool and watches changes to folders so when you dump a png or a jpg you can ask it to conver to webp using the previous tool and delete the old jpg or png. I do the same for all my invoicing but also use OCR on my download folder to rename the file that is moved to the appropriate naming convention. Sorry, that’s another post.
WP Rocket is by far the most popular plugin out there with website professionals and is close to $500 AUD per year for agencies. While I’ve used it a few years ago I would prefer perfmatters, it seems simpler and allows you to save custom configuraitons or profiles which you can use with different site “types”. Perhaps Rocket has this as well but given I’ve got my configs all setup for DIVI, Bricks, Elementor, Oxygen and Woocommerce sites Perf makes more sense to me if I can get the same 100/100 score.
Time to First Byte
This use to be my go-to when it came to determining if a website hosting platform was fast or not. I can remember a TTFB being below 500ms being awesome. Now, I’m use to something below 5ms with my hosting setup. I will say a bit of a warning that it’s not a metric that is an all in all type one you must improve and can expect results from.
Open Litespeed or NginX or Apache
This is a topic on it’s own and everyone will have their own preference for flavour of website server. My preference here is Litespeed which allows for easy integration with CDN’s like quic. I have used NginX on AWS and found it fast but due to the nature of the AWS and the EC2 instance I strugged with the command line configuration.
If you’re using apache, stop, just go back 20 years and ask yourself what was I using back then. Still today I see most hosting packages using Apache with a cPanel style hosting plan.
Litespeed allows for granular control over it’s configuration and i would say is by far the quickest I’ve seen even compared to WP Engine with Nginx which I have many competitors resigning themselves to using this platform for simplicity and security. It’s good, don’t get me wrong but would prefer control over the server level myself and ability to spin another one up at a moments notice and migrate sites from A to be B seamlessly.
SEO and Website Performance Resources
A great talk from Harry Robets from the Amsterdam web performance conference in 2022.
