- Perfect benchmarks.
- Blistering speeds.
- Amazing value.
- Nothing much really.
- Genuinely struggling here!
- i. Foreword
- 1. Page Speed Tools
- 2. Testing Themes & Plugins
- 3. Reducing HTTP Requests Using Inline SVGs
- 4. Setting a Site Icon or Favicon
- 5. Mini Progress Report
- 6. Bye Bye Elementor!
- 7. Putting it All Together
- 8. W3 Total Cache
- 9. Cloudflare
- 10. Stackpath CDN
- 11. Autoptimize Minification Plugin
- 12. Final Page Speed Tweaks
- 13. Blog Post Comparisons
- 14. Page Speed Test Results
- 15. Summary
- 16. Compressor.io
- 17. Key CDN Performance Test
Hey WordPress speed freak, let me show you how to build the fastest WordPress setup possible – all using free themes and plugins with the occassional premium option should you feel the need for extra features.
What’s the fastest WordPress setup? GeneratePress & Hostinger are in a league of one. The speed league!
Initially the plan was to setup this site using my preferred system that has evolved over recent website builds. Then I realised, this is the perfect opportunity to do something different.
Like going into forensic detail each time I add a plugin or logo. Not just the usual: we tested fifty themes and found the best one.
- It’s almost impossible to find the fastest when Internet traffic is so volatile.
- Keep it simple – stick to bytes and requests. Static values give solid results.
- We can do the highspeed stuff at the end.
Look at this GT Metrix report for GeneratePress on shared hosting.
Analysing the minutae has been both rewarding and excruciating at the same time. It’s definitely given me plenty to consider, in a good way.
It’s easy to make WordPress fast, but squeezing that last few drops of perfomance is where GeneratePress really shines. If you want a Rockstar theme then look no further.
GeneratePress & Elementor make a world-class WordPress speed combo that tip the scales at only 26kb and 9 requests. Wow!
This is the lightest free/premium theme from a renowned developer that I could find, but don’t take my word for it. The stats speak for themselves.
Personally I was slow in moving to GP, but now I’ve finally made the leap I couldn’t be happier. The information that this journey has unearthed has been a big factor in my decision making.
Choosing is hard, I’m the most indecisive person ever, but stone cold facts help make your thought process straightforward. For that I’m genuinely grateful to GeneratePress and their owner Tom Usborne.
It goes without saying that I’ve run GeneratePress before, but only as an install-and-delete job. I was too focused on load times to see the real benefits, such as its featherweight page size. The way it just worked where other themes stuttered.
Trust me when I say this theme is all you need. Change a few colors, add a logo and you’re good to go blogging.
* Starting out with the intention to use a page builder, I quickly found out that GeneratePress and Elementor are the lightest combination. Later on I decided to opt for traditional HTML. This isn’t anything against Elementor, but wanted to make that clear now so not to mislead anyone.
Anyhow, I’m getting carried away, best get back to the job in hand.
This isn’t going to be the most extensive post about theme selection. Instead it will focus on quality and detail with regard to file size and low requests. Page speed tuning will take on more significance towards the end of the site setup.
I’m not writing a beginner’s guide either. Presumably if you’re into page speed on a serious level, you’re already an advanced WordPress enthusiast.
It won’t be a coding masterclass – I’m a non-coder.
A nice clean design will always be important, but content is still Don King. Combine that with the fastest WordPress setup possible and you’ve got knockout power.
So why did I go with GeneratePress and Elementor over Themify, my normal choice that I’ve used to great success in the past?
In all honesty, I couldn’t resist once the facts were established. The differences are truly stunning – this is website dynamite that I’m passing on.
If John Hennessey tuned websites, he’d be over the moon with the results we’re getting. How about 7000 words, 70 images and 100/100 on GT Metrix?
Read further and all will be revealed…
1. Page Speed Tools
Although I normally use a selection of Page Speed Tools, for this project’s setup phase I’m going to use GT Metrix to audit the themes and plugins. Even Google suggests just picking one that you like.
My advice is choose from the big four: PageSpeed Insights, WebPage Test, Lighthouse and GT Metrix.
Always select a Page Speed Tool inline with your goals. They all have pros and cons rather than one is better than the other.
While it’s natural for us to pay attention the download times, what I’m more concerned about for now is the download size in kb and the amount of requests.
This is important for not only excelling in page speed tests, but for a superfast download time.
My primary objective is to find the lightest WordPress theme and page builder. Once I’ve done that then it’s over to the full site setup and final tuning.
1.1 GT Metrix
To shine a light on our preferred data – file size and request – GT Metrix is ideal.
The interface is clear and the waterfall chart displays crisply enough; we can easily digest the information and save a PDF copy if necessary.
Further on in our project we’ll be making good use of PageSpeed Insights and WebPage Test.
1.2 The Problem with Pingdom
Pingdom is especially good for reading headers, but it’s recently causing me a problem due to how my hosting is set up. If your host has an Apache server with Nginx in front of it, Pingdom won’t recognise that you’ve got GZip compression enabled and will mark you down, according to an engineer from WPMUDEV.
As I explain later, the reason above doesn’t necessarily hold water. I’ve since found out that turning off Brotli compression actually solves the problem if you insist on scoring all As in Pingdom.
Pingdom’s results breakdown is simplified compared to its rivals, which is a good and bad thing depending on your viewpoint.
Good for a speed-up beginner, but not so good for performance pros like ourselves. Especially when every other site picks up GZip. Even the less-well-known testing tools don’t seem to have a problem with compression tests.
Sitechecker finds the GZip and so does Varvy so why does Pingdom have a problem? You can guarantee that they know there’s an issue. I’ve seen loads of tests on popular tech blogs that also post Pingdom screen shots with no page image in sight.
This is poor from a renowned page speed tool like Pingdom. Seriously unimpressed.
1.3 Do Download Times Matter?
Once your websites, be it WordPress, Jamstack or any other format, is set up then download times are the most important metric for user experience.
Your visitors don’t see page speed scores, but they do see how quickly your website is rendered on their screen.
The problem with download times for initial testing is that the scores can be erratic. The same web page tested ten times will show ten different download times. This is mainly due to Internet traffic.
So the point being, page size and requests are the two most reliable metrics. That’s why in this instance they are what I’ll be referring to.
As a side note, I’m not saying don’t trust people when they show load times to prove a point. Though I am saying consider it with their goal in mind.
Example: Kinsta, a popular hosting company, was saying don’t bother with Google’s PageSpeed Insights results. They’re unreliable. This isn’t true at all. Do they honestly think that a multi-billion dollar software company doesn’t know how to make an accurate web page testing tool?
They clearly didn’t take into account the differences between the mobile and desktop test.
Most popular Page Speed Tools only check desktop performance, which isn’t exactly the real world anymore – mobile makes up over half of all searches.
PageSpeed Insights is more like an MOT test for your car. It checks that you’re doing things correctly. In other words, you can have a Ferrari, but if the roads are busy you will be stuck behind the guy in an old banger.
The reason above is why a perfectly optimized site can take longer to download than a site with a poor page score.
Kinsta should know this. They probably do, but then again they probably get people complaining about their PSI scores.
It doesn’t matter how good your hosting or website. The Internet is a constantly changing environment and times will be up and down. What matters is your average page speed time.
1.4 Shared Hosting – is it Fast Enough?
My only experience with web hosting has been with Bluehost and now Hostinger. Bluehost are part of the EIG hosting group and well known for cramming servers. They weren’t too bad. In fact I was able to get great results, but inconsistently.
Since moving to Hostinger’s business plan, my sites are blisteringly quick and more consistent. Maybe if my views increased I would need to upgrade my package, but for the price and quality nobody touches Hostinger.
You can get awesome results on shared hosting. It definitely is quick enough, as long as it’s set up properly.
1.5 Benchmarking a Fresh WordPress Install
After registering the Page Speed Tweaks domain name, I nipped over to Hostinger and installed a new copy of WordPress.
The great thing about this is we can see how everything compares on an even footing.
My only minor regret is that I decided to do this once I’d connected to Cloudflare, as it’s something that I do on autopilot thesedays. However, I have only pointed my domain to the Cloudflare servers so other than that no settings have been touched.
2. Testing Themes & Plugins
Due to the forensic detail that we’re trying to achieve, I’m certain that we won’t be affected by a lack of evidence from only targeting two unique themes. Not including the WordPress freebies hidding in our theme files.
Quality over quantity, as the old saying goes.
2.1 WordPress Twenty Twenty
First out of the blocks was the Twenty Twenty theme, which did give me a pleasant surprise. For your average blogger there is really no need for anything else.
Twenty Twenty is definitely fit for purpose. It’s a fast theme, but not the lightest out there. Mainly due to it’s new font stack which pilled on the bytes like a McDonalds code burger.
You can see in the waterfall report exactly where the page was heaviest – the font stack calls. Most Google fonts are easy to disable, but certain WordPress fonts are more deeply ingrained within the theme itself.
WordPress 2015 had a font called Genericons and when I turned it off it broke the site, so bear this in mind. Twenty Twenty could potentially work the same way.
2.2 WordPress Twenty Nineteen
Another recent WordPress theme that is popular due to being free and included with a stock copy of WordPress CMS. How does it fair against the GT Metrix audit? Let’s see…
Twenty Nineteen does a wicked job straight out the gate. 42.7kb and only 8 requests is a superb. It’s lightweight and to the point. Feature rich, maybe not, but when we’re after performance and not design awards, what does it matter?
What does the waterfall have to say? Let’s check it out.
All in all it’s a good showing from Twenty Nineteen, but my spider senses tell me that there’s lighter options available in the world of WordPress.
2.3 WordPress Twenty Seventeen
Getting on in age, Twenty Seventeen isn’t going to have the benefit of the latest tricks of the trade, but it’s still a popular theme. How could it not be when it’s been bundled for free with the World’s most popular content management system.
Over to GT Metrix to find out the scores.
Oh dear, this one’s a fatty bum bum. It’s got the double chin of it’s big brother Twenty Twenty with regard to the bytes. For requests it’s got more than Twenty Twenty and Twenty Nineteen combined.
The search goes on…
2.4 Themify Ultra 2.6.4
Web page speed is definitely not about being sentimental, but seen as though I’ve been using Themify from the start, I want to consider it.
Themify brought out one of the first theme builders, which comes pre-installed with all their themes. It’s also available seperately as a plugin.
One point to consider when moving to a new theme is that it takes time to get to really know a theme inside out. Not just for setting a site up, but the minutae that can add up to significant performance benefits.
Afterall, I scored a perfect Google Lighthouse audit using Themify Ultra so why would I not put it in the mix?
Lighthouse is available on Chrome DevTools, you know the drill, just right click on your web page and you’re already there.
My initial view is that it’s midway size wise and at the upper end of the request scale.
Now let’s head over to the waterfall report. The html is what seems to be taking the most time, here, but the rest of the files are parallelizing nicely.
2.5 GeneratePress 2.4.1
We’re off to a flyer, not surprising. Theres a reason why they’ve had almost 2.5 million downloads, 200,000 active websites and 9000 five-star reviews written by 50,000 happy customers.
What can I say, 26kb and only 9 measly requests. If this theme was a Christmas character it would be Scrooge. Speaking of Christmas, it’s nearly that time of year so get your loved one a new theme, you can’t go wrong for $49 on this little beauty.
I’m so impressed I’m gonna say it twice. 26kb. Yikes!
Now that’s what I call digital feathers – they must’ve been plucking the turkey bytes.
GeneratePress is an awesome theme built on its own lightweight framework for extra speed.
Cloudflare has its own extension in W3 Total Cache.
2.6 Themify Ultra & Elementor Sample Page
Before you shout at your screen, this one was a bit dumb. Themify already has a built in page builder so adding Elementor is loading two builders.
However, in the name of science it had to be done to prove a point or three.
714kb makes this the Andy Ruiz of the mini test. Only this one hasn’t laid an egg and stunk the place out. Our first time in the B league, too.
On to the waterfall to see the damage caused…
I mean, it’s not the worst performing site ever, it’s just not as good as it could be.
The best part of the bigger sites is better parallelization. With smaller sites that load super quick files, everything is more ziggy zaggy.
One of the biggest nails in Themify’ coffin is that it seems to load things unnecessarily. Elementor and GeneratePress are the polar opposite; they only load an item if it’s in use. Surely that’s coding 101. I’m going to ping Themify an email and see what they have to say.
2.7 GeneratePress & Themify Builder Plugin
The best comparisson I could get was to load GeneratePress with the Themify Builder plugin, as this is the most likely real-world scenario.
True, it would have been more accurate had I installed Elementor as well, but that would be borderline silly. Nah, scratch that. It would be very sillly.
Previously the only reason why I loaded Elementor with Themify was because I had no choice. Scratting around in the settings menu didn’t turn up an off-switch for the integrated Builder, though I could swear I’d seen something along those lines before?
Searching online didn’t bear any fruit either so that’s how I ended up with almost 800kb.
It’s a glaring fact that GP and Themify Builder are exactly half the page weight of Themify Ultra itself. Yes, Ultra is a superbly flexible WordPress theme solution. It’s billed as a multi-purpose theme capable of building any site… but so what. GeneratePress is also supremely flexible.
Not to mention it packs a heavyweight punch in a straweight frame.
Clocking in at 82.6kb and 13 requests this is still a cool setup. Themify does have a lot to offer, but the twin menus can be confusing and are definitely a case of overkill.
Themify also uses jQuery, which is render blocking and can be tricky to overcome with regard to page speed tool audits.
2.8 GeneratePress & Elementor
Now here’s a cool setup. How do they do it – only 26kb page weight and 9 requests. Need I say anymore? This combination speaks for itself.
Looking at these images is driving me crazy. They’re like a never ending puzzle, especially now tiredness is kicking me in the eyeballs.
Next time, I’m going to get the old-school gadget out and write things down. What do they call them? Ah, yes, a pen. Who’d have thought they still come in handy?
Truth be told, pens are amazing for writing, but don’t tell penny one.
Jokes aside, how could you not be happy looking at these results? 26kb is off the charts.
You can’t go wrong sticking with GeneratePress and Elementor. Surely it’s impossible to get much lower without sacrificing quality or features.
2.9 GeneratePress & Elementor Sample Page
Looking at the uptick in numbers you’d be forgiven for thinking 457kb is a bit heavy. Then your mind goes back to the 714kb that Themify Ultra weighs in at for the exact same web page. Just how does a theme that is 160kb on its own add another 257 kb to the mix.
Well I’m rubbish at maths, but that doesn’t add up to me.
Maybe a dive in the waterfall will wake us up…
On a more positive note, the waterfall looks almost vertical. Maybe it’s struggling under the sheer weight of things. Damn!
2.10 GeneratePress Premium
We’re living in Neverland now. Where’s Michael, I need the keys to the front door. What can I say: GeneratePress Premium and Elementor for 27.3kb and 10 requests.
How do they do it? It’s code magic. Quite possibly GeneratePress hide the code down the back of the sofa when your antivirus isn’t looking.
Have you got any better suggestions?
Most premium options go on an all-inclusive code buffet. They stuff the gizzards till the turkey explodes all over your computer desk.
This theme really is made with love on Vancouver Island. And here’s me thinking it’s just a marketing gimmick in the footer.
Canadian’s are so polite they don’t swear or blitz your data allowance with unnecessary downloads. They’ve even added an animation switch so you visit their site to party or actually read without distration. That Tom Usbourne dude is hella cool.
If you’re after building a professional blog then the free GP theme is a no-brainer. You can then upgrade in your own time, but for $49 and a 30-day money-back guarantee, you can’t go wrong if you jump in headfirst to buy a theme.
What’s even better is that there’s a 40% renewal discount – so only $29.40 the following year. Heck it’s only like 60 fags. 🙂
The endless settings make this superlight theme a stonking brute when it comes to features. Even if you only use a few settings, like I have, you still have access to customer support. We tend to use those things less frequent as our experince grows, but it’s invaluable if you’re in your first year or two of web design.
Not forgetting that the GeneratePress Premium plugin doesn’t even add any weight to the downloads.
2.11 GeneratePress Child Theme & Elementor
In line with my usual site setup process, I installed a child theme. This is the best possible way to ensure your settings and code snippets don’t get lost.
Your standard theme will update without issue because everything is kept seperate.
Child themes are essential for anyone tweaking their WordPress. No performance hit, just the safest environment for updates.
There’s often talk of redirects on child themes, but I’ve yet to see one on mine. Maybe it’s the plugin that I use? Regardless, let’s not waste our breath on things that aren’t a problem. Instead let’s get on with the install procedure.
Crossing the line at 80kb and 13 requests is amazing for a theme and page builder. Good hey? Oh, yes, did I also say that includes a Google Analytics script and also the token for Google Search Console?
If this is straight out the box, imagine how slick the site is going to be once we start tightening the hatches and nailing shut the doors?
We’ve got a cool plugin to sort Google Analytics. CAOS it’s called. More on that later.
Sorry, I forgot to say that my final choice was actually GeneratePress and Elementor. Though I’m sure you already knew that right from the start?
In all honesty, I won’t be doing that much with Elementor, as once my site is setup, most of my content will be posts rather than pages. I guess it will still come in handy if I put the effort in to learn how to use it to my advantage.
Maybe I can keep an Elementor diary concentrating on performance tips rather than design aspects? Now there’s a thought.
3. Reducing HTTP Requests Using Inline SVGs
A styling trick that I’ve seen some Googlers use is inline SVGs instead of PNG or JPG for social icons. When it comes to making fewer HTTP requests, inline icons are your best friend.
You might not think too much about those dirty stop outs in your footer, but if you’re super social and have six social media accounts, that’s six requests.
GT Metrix will throw a bit of a tantrum if you don’t reduce your HTTP calls.
Unfortunately WordPress doesn’t allow direct upload of SVG files, due to security issues. There are endless code snippets online to place in your functions.php file, but they never seem to work for me.
I’m only using SVGs for the logo up to now, but will follow this exact process for social icons once I create accounts in the future.
Code snippets are almost always better than plugins from a performance perspective. You should be able to find one that works if you’re persistent. However, it’s only necessary to overide WordPress’ security mime type settings if you’re uploading to the media gallery.
For Themify I was able to place the code into header.php, but it didn’t work on GeneratePress so I made a hook instead. Both options remove the need for a code snippet.
Using a plugin makes sense if you have the social-icon-party in the footer, but not if you’re only doing it for a logo say.
Also consider that some security plugins like WordFence might affect what files you can upload. Cloudflare can also affect settings, but only if you’ve activated them yourself in the firewall settings or on a blacklist.
It’s often said that web browsers can’t cach inline SVGs, but if that’s the case why do Googlers use them in AMP themes?
Anyhow, I’ve got a trick to show you once we install Cloudflare. Caching Everything is the ultimate page rule setting that makes your shared hosting account think it’s been hypnotized and turned into a VPS.
Check out our Cloudflare Setup tutorial for the step-by-step instructions.
Back to the inline SVG. It’s an easy process. You can find free SVG icons online. Pick them all from the same place so they match one another.
- Find a free SVG icon website such as Icon Monster.
- Pick your desired icon.
- Click on embed.
- Select the code – copy and paste into your child theme’s footer.
- To change color give the inline SVG a class and pick a color.
- Add CSS in the customizer or…
- Include fill=”#ffffff” in the inline SVG path.
- To change color using CSS use the customizer Exta CSS section.
- Fill=”#ffffff” for stroke color.
- Background-color=”#000000″ for the background.
Icon Monster offers the choice of Base64s, but personally I always opt for SVGs as they are easier to adjust and are smaller in size.
Also making them inline overcomes the security hurddle within WordPress.
3.1 Page Speed Tweaks Inline SVG Logo
Inline SVGs aren’t just for lightening your footer. You can use them for the site logo icons and the actual logo itself. Granted, it might be a bit tricky with certain themes.
As you might be aware, what you can do in one theme isn’t always going to work in another theme. Annoying things are part and parcel of WordPress theme tuning.
Looking at my latest GT Metrix figures, it’s possible to see that my inline logo was worth the effort. It only added 1.5kb to my page weight, but with ZERO http calls. Now that’s what I call a tweak worth it’s weight in code.
Sorry for the crappy pun – couldn’t help it.
3.2 How to Make Your own SVG Logo
Step one is to use any graphics tool, such as Photoshop or a free online version like Canva, to make the logo to suit your site header and or footer.
I tend to use Photoshop for removing backgrounds; it’s also neat for compressing images. All of my screen shots are resized using Photoshop.
A time-tested tip is to combine free tools so together you have a full toolkit. This is a great way to save money on recurring monthly charges.
Canva is my tool of choice for making the logos. It has some amazing features that are also easy to use and there’s a pro version or you can buy images super cheap. Twenty-four hour access is usually only $1.
However, if you’re smart you don’t even need to do that. See if you can combine the free shapes into the same combination as the paid images. You might not get it exact, but you can certainly get it near enough, especially if you’re converting the logo into an SVG.
Once I run the logo through a free online converter, it turned all black, but the cool thing is you can use fill=”#000000″ to adjust the color to suit. This gives SVGs an added flexibility that you simply can’t get with regular image formats such as JPG and PNG.
Changing the background-color is also easy. Just give the logo a class. Then use the tips shown above in the social icons to adjust the CSS inline or in the customizer.
Stroke and fill are both the same. Background-color does what it says on the tin.
3.3 Using a Traditional Logo
Of course in the interest of scientific accuracy, I did see how much difference my traditional PNG logo made. It was roughly 3.5kb heavier and added one request.
Will a regular logo ruin your speed dreams? Hell no, but every little bit counts when you’re into perfomance websites.
My advice is to use the site customizer as intended and select your site logo there. Alternatively upload a site logo to the image gallery and link to it from header.php. Both options will do the job satisfactory.
4. Setting a Site Icon or Favicon
In the name of performance, ignore the site icon picker in the WordPress customizer. While this is fine for most people, it actually does two jobs in one.
Firstly, it asks for a 512 x 512 icon that is used as an app icon. Then it’s used in the WordPress mobile app.
Secondly, the large image is then cropped down to favicon size, which causes our friend GT Metrix to mutter and grumble that we’re not scaling images correctly.
Thankfully it’s a simple procedure to overcome.
Head over to Real Favicon Generator and make a set of Icons.
You can follow the steps below to install just the favicon.ico file in your root directory with all your other WordPress files. Most browsers automatically look for favicon.ico and display it automatically. It’s super simple to setup.
Alternatively, if you’re after making your site into a PWA – progressive web app – Google is a bit stricter and you need a decent favicon plan to suite all angles. Hence why I recommend Real Favicon Generator. It has everything you need.
There are plenty of other favicon solutions like Google’s own Firebase App Manifest Generator.
Real Favicon Generator has more options to fine tune, though.
- Plan A – for performance – just upload favicon.ico to your root directory.
- Plan B – ultimate favicon setup – follow our PWA tutorial for a detailed look at progressive web apps and icon sets, including how to check icon compliance with Favicon Checker.
5. Mini Progress Report
Now we’ve got a superlight theme and page builder with an inline logo and the slickest favicon package around. It’s not yet the absolute fastest WordPress setup, but we’ve laid the foundations for phase two.
We’re only just starting on the chassis – when we get the race suspension and bodykit we’ll be going places. You’d better believe it.
5.1 Fastest WordPress Setup FAQs
Stick around to find out what happens next in the Page Speed Tweaks mega build. We’ve got Cloudflare to sort out, Stackpath, plus our special guest – Rank Math.
Elementor might get a run out, too.
Ask an awesome question about the Fastest WordPress setup by commenting below.
We’ll feature the best in our brand new FAQ page.
6. Bye Bye Elementor!
During the process of building my pages, I realised that I wouldn’t be needing a page builder. The reason being, I’ve got a nice collection of website parts from following Online Tutorials on YouTube. Most of them are testimonials or services sections, which is where I got the home page card design from; it was one I made earlier.
Check out their website here: Online Tutorials.
You don’t just have to use testimonial cards for showing happy clients. They make great services cards, too. Just be creative.
Most of the tutorials that I followed were because I liked the look of them on the video. In hindsight, some of them aren’t much use unless you’re into Bootstrap and the like.
For normal folks, never mind speed chasers, all the redundant CSS you load on Bootstrap is a waste. It’s like loading FontAwesome for one hamburger icon.
- Stick to traditional HTML cards.
- Not all the tutorials will work on mobile. Some look amazing, until you resize your browser window.
- Try and follow more recent tutorials or ones from a solid developer.
- The more you follow the same tutor, you’ll learn their style quicker and whizz through each lesson faster. Jumping about from one content creator to another achieves the opposite.
6.1 Page Builder or Traditional HTML?
During this review I found out how considerate Elementor is when it comes to resources. Unlike some plugins, it doesn’t unecessarily load on every page. Even when it does it’s still got an amazingly small footprint. However…
All I want on my homepage is a selection of my best blog posts.
Even the best page builder in the world will never be as light as traditional HTML.
Taking the above into account, I thought it made sense to switch up my plans and delete Elementor. Nothing against the plugin itself, but it’s pointless using only a few percent of something. That’s how websites get bloated and we’re all about having the lightest code base possible.
I’d just like to say that this post hasn’t been scripted, it’s just been a real-world example of starting a site with page speed optimization in mind.
Apologies if anyone feels shortchanged or that I’ve tricked them, which definitely isn’t the case. All I wish to do is show you the ups and downs. A real look behinds the curtains so to speak.
Who hasn’t installed a plugin and then changed their mind about it? Not any real WordPress user that’s for sure and definitely not an optimization geek!
That’s about it for now.
7. Putting it All Together
Back again guys, if you’re still with me that is? 🙂 It’s been a long post, but that’s the name of the game thesedays. Just pick out the bits you need and spit out the bits you dont.
Time for a progress report…
- We’re currently running no page builder, just GeneratePress.
- Six plugins installed: CM Table of Contents; GP Premium; Rank Math SEO; Smush and WPForms Lite.
- Page size 89.5kb 18 requests.
7.1 Plugin Considerations and Selection
My usual selection of plugins is about 10 on an AMP site, because some plugins don’t work with AMP due to the restriction imposed by AMP.
On regular WordPress sites I tend to have a few more. For example, I use WPForms Lite, whereas on AMP I’d make my own form.
- CM Table of Contents: this is the first time I’ve used this plugin, purely because it was recommended in Rank Math and I trust their work so went with it. Granted, it’s not the most widely used table plugin, but it works perfectly. Coding jump links for tables is an absoulte pain, so it’s worth its place.
Elementor:as discussed, I’ve decided to stick with traditional HTML for my homepage. It’s only a glorified archive page for my most popular posts. No page builder it is, then.
- GP Premium: this is how a lot of theme builders are chosing to implement their premium version. Just a simple plugin that activates all the extra features, which as we’ve proven doesn’t bloat the site unlike a lot of other premium themes out there.
- Rank Math SEO: this is a new rival to yoast. The team got in touch with me after seeing a post I’d shared on Medium, but at the time I didn’t fance moving all my sites over from Yoast. Now I have had time to reflect and having done my due dilligence, Rank Math is my preferred choice over Yoast. It’s got a much smaller footprint with extra features, including rich snippets. A really powerful plugin that’s easy to use. Look out for a full review later.
- Smush: what can I say other than it’s a great image optimization plugin that’s well known in the WordPress world. There are other options, but it’s done it’s job for me plus it’s free or premium. Personally all I’ve used is the free version, but that might change in the future.
- WPForms Lite: another really usefull plugin, which unlike Contact Form 7 doesn’t load on every page. (You’re welcome to tell me if I’m wrong on that?)
Let’s head over to GT Metrix and see how we’re shaping up…
And the waterfall now.
The site is fluctuating at the moment, but for a stock theme with ZERO caching I don’t think we’re doing too bad. Can’t wait to see how things start performing once we add all the spicy bits.
7.2 To-Do List: Caching and CDNs
The site won’t be running optimally until I install a caching plugin and a CDN. After that we should be well on our way.
My preferred setup is:
- W3 Total Cache plugin – free version.
- Cloudflare CDN for content delivery and security – free version.
- StackPath CDN for content delivery – $10 per month.
There are plenty of caching solutions out there, but for me W3 Total cache is the best one. Similar to page speed tools, though, some people have their favorites. What matters is that it works for you.
Cloudflare is one of the biggest CDN companies that actually started out in security. It was when they realised that providing a CDN would help make the Internet safer they started their content delivery network. They also have one of the fastest DNS services.
Optimize Cloudflare correctly, using page rules, for TTFB just as quick as any VPS or managed WordPress hosting.
Once you get Cloudflare setup and optimized, there are a host of security options to enable full encryption throughout your pipeline. It all takes time, but it isn’t hard to achieve.
For ultimate performance you need to set up the free x 3 page rules.
Stackpath is only $10 a month and not super necessary, but for that price I just go along with it. The more data centres the better so the choice is yours.
The number one reason people buy premium products is FOMO – fear of missing out. I’ve used free antivirus for the last 15 years plus and never had a virus!
Ironically, the last time I did have a virus was when I used Norton when it was only $10. Now it’s at least four times that price. Suppose times change and I’m not missing Windows 98 either. 🙂
The point I’m making is, software companies can’t make a terrible free version, because that would give them a bad name. They have to give you 90% of what you really need. Surely the other 10% isn’t even necessary? Like I say, I only use a paid theme and shared hosting, oh and Stackpath.
Though I do plan to splash out on a few plugins in 2020, just to test for you guys.
8. W3 Total Cache
There will be individual guides for all the major plugins and services coming soon, but for this post I’m just showing how much of an improvement or regression each one makes.
W3 Total Cache is like the hammer of my tool kit. I wouldn’t build a site without it and nor should you. The free version is perfectly capable, but if you’ve got a site that’s making money then of course it makes sense to upgrade to the paid version.
W3 Total cache is an amazing plugin once you get to know its technicalities.
You’ve got to be careful because you can lock yourself out of your site, if you tick too many options in the security section. Apart from that there’s nothing to worry about.
So I installed the plugin and opened up one of my older sites and literally copied the settings like for like.
I kept minification turned off because I use Cloudflare for that if I’m using AMP. With this site though I’m using Autoptimize for minification.
One golden site speed rule is never use minification or compression twice on the same item, because it’s like wrapping and opening your Christmas presents twice.
As you can see we’ve got 18 requests, which isn’t a lot, but we’ll be reducing that significantly once we dip into our bag of tricks.
Time to have a quick peek at the GT Metrix waterfall chart – no doubt you’re sick to the sight of them now!
Although I hooked the site up to Cloudflare at the start, I didn’t touch any settings, just pointed the Hostinger name servers towards Cloudflare and started building my site.
This time, however, I whizzed through my normal procedure. Set up security properly – installed a free Cloudflare SSL certificate on my origin server. We’re now running a fully encrypted setup along our pipeline. Why wouldn’t we when it’s all free?
Cloudflare really is an amazing company considering what they give us for free.
Further Reading: Cloudflare Setup Tutorial
Notice how Cloudflare’s Rocket Loader adds an extra request and a few kb due to the JS file.
Initially I started out with Fast Velocity Minify – the plugin owner said I shouldn’t use Rocket Loader because it loads files asynchronously, but I tried to explain to him that although it does affect GT Metrix scores slightly, my testing showed it increased painting of above the fold content, which shows the viewer a faster page.
There’s impressing your viewers and getting top benchmark results, which aren’t always inline with one another. In an ideal world we’d be achieving both. That’s what I’m trying to do here.
10. Stackpath CDN
The primary reason why I use Stackpath, apart from being amazing value at $10 per month, is that it syncs well with W3 Total Cache and Cloudflare.
You can either it through your dashboard or create your site account at Stackpath’s end.
Although our page size and requests are roughly the same, we’ve boosted our GT Metrix scores slightly. Not much, but it all adds up. We’re nearly at the magic 100 on the PageSpeed Score.
It boggles the mind searching through so many pics that look identical. That’s why I decided to put the fancy black numbers on the headings, as it helps you find a landmark when scrolling through the page. See how thoughtful I am, guys.
11. Autoptimize Minification Plugin
Fast Velocity Minify was my go-to minification option; it still is a first-class plugin for page-speed tuners. I’d tried Autoptimize several times, but could never beat my FVM results, but persistence paid off in the end.
It’s a fact that if you want to get amazing results, you have to amazing things. Now I’m not suggesting that getting a flawless benchmark result is like climbing Mount Everest, but you still have to put in endless testing to get to know the countless permutations.
The one setting you don’t consider could be the one that works!
Straight away, we can see that the request column is minus five. Not bad, but there’s more to come.
11.2 Autoptimize Inline CSS
Second on our Autoptimize to-do list is the CSS section. I’m quite well-versed about what settings to make, which I’ll go into in the full report. For now let’s concentate on the results.
If my maths serves me well, that’s another few kb less and more importantly six fewer requests, which makes the YSlow Score a bit greener.
11.3 Autoptimize Miscellaneous Settings
We’ve now only got HTML as the last main item to sort, plus a few other requirements like emojis.
There’s form input for your CDN root URL. It states it isn’t necessary for Cloudflare, but seen as though I’m running Stackpath as well I just included the latter.
We’ve only dropped one request, but more importantly the page size has had a salad sandwich.
12. Final Page Speed Tweaks
We really are down to the wire now, only a few more tricks up our sleeve. Is it possible? Can we really get a perfect GT Metrix audit in the bag on shared hosting?
According to the naysayers, you need Site Ground or some other premium host.
Well I say bollocks to that. I’ve had perfect audits using Bluehost – the one everyone complains about – and now with Hostinger – my preferred choice.
Don’t believe me? Read on for the proof…
12.1 CAOS Google Analytics
When you run standard Google Analytics code it usually creates two requests. The code isn’t a problem, because it’s usually downloade asynchronosly after your page has loaded.
Benchmark results are a different type of fish, though. You’ll get complaints about serving content from too many resources.
It is true that due to HTTP 2.0 parallelizing of files means that your page can load much faster. However, you only need one errant file to download late and it could cause issues.
Step forward CAOS for Google Analytics. It loads your scripts using a Cron job and updates them everyday with Google. (Google don’t recommend this, by the way.)
Now we’re only showing just over fifty kb and half-a-dozen requests. Cool.
The waterfall reports are getting smaller, too.
12.2 Cloudflare Rocket Loader
Things are coming to a head, I won’t keep you waiting much longer seen as though I’ve already explained about Rocket Loader. It’s good at it’s job, just GT Metrix doesn’t think so.
We’ve got to give the Cloudflare engineers some credit, they don’t come up with stuff that doesn’t work!
Yikes, we’ve nearly done it. Told you all along it isn’t impossible, just takes a bit of page-speed tweaking.
12.3 Turning off Google Analytics
While you can get perfect scores on Google while running Google Analytics, you can’t on others. That’s not because they’re biased. That’s one thing you can’t accuse Google off.
There’s been endless times when I got a bad score for a Google product on a Google audit. Crazy, but true!
Let’s see what happens now.
Bingo! That’s less than thirty kb and only four requests. Need I remind you it’s all thanks to Hostinger?
Now I know what you’re thinking: “It’s a fluke. He’s only done it because there’s no images.” Well, don’t get ahead of yourself. Even I’m surprised by my next conjuring trick.
Yes, hard to believe, but it gets even better.
13. Blog Post Comparisons
The good news, we’ve already hit top form with our favorite speed test. We need a tougher challenge. How about a blog post with 72 images? This very blog post, in fact?
Only one way to find out…
Not bad for a first attempt. Most people would be more than happy with it. Rest assured, Page Speed Tweaks always wants more. “More Oliver?” Yes, more.
13.1 Smush Pro Plugin
We’ve already had solid results with the free version of Smush. Bearing in mind that all the images on here were saved from Photoshop as high-quality progressive JPGs.
You can save almost have the file size by dropping down to medium quality, but I think when there’s lots of small print you need something slightly better. There are times when less isn’t always more.
Bonus point, most benchmark audits like progressive JPGs over other versions. They load in stages or as it says on the tin: progressively.
I’ve just tried Imagify because it was recommended by Tom over at Online Media Masters, who is someone who I’ve learned a lot from.
The irony is, instead of scoring 96/100 with Smush, I scored 100/96 due to Imagify using their own CDN. It set 69 cookies and tanked my cookie score.
Sadly I had such high hopes, but their server was slow as heck, dropped my times a ton. Not to mention, someone had asked the exact same question on WordPress.org forum. They shut the topic as resolved, leaving the guy fuming. This disappointed me greatly and I cancelled my free trial with immediate effect.
There’s nothing worse than poor customer service, especially when it’s only advice or feedback. No excuses!
Smush Pro Speed Report – Perfection!
Wowzers! We’ve done it again. Only this time we’ve achieved a flawless result with seventy two – yes 72 images – there I’ve said it twice, I’m so pleased.
But hang on, don’t get too excited. I run another benchmark and it caused the same issue with cookies and my score dropped back to 100/96.
This obviously made me think, why the hell am I going to pay $49 dollars a month for a plugin that makes my scores no better than the free version? Fair enough, you get plenty of other features, but it’s stuff I don’t need or want.
Another free trial cancelled.
Imagify and now Smush Pro.
13.2 Online Media Masters
Now I don’t want anyone to get the wrong idea, this next section is purely a comparison with someone in the same field. You might call it stalking, but I call checking other people’s page speed part of the job.
How else do you know if you’re improving or getting worse?
This blog post had just over 7000 words when I did the comparison. Tom’s had about 5000 words.
Some of his blog posts are 15,000 words! Yikes. Credit to him. Proof of how good long-form content does wonders for your search results.
Another reason why I’m cheekily testing Tom’s post is because I know he’s on Site Ground. (Unless he’s moved recently?) It’s not that I want to prove Site Ground or Tom wrong, but I do want to prove that there is other ways to get where you want to be.
People think expensive = awesome, but my results prove that inexpensive can also be awesome, too.
In my eyes you can’t beat Hostinger for unparalleled value and solid performance.
The results you’re seeing are from their mid-tier business package.
It’s a valid point that I’m on a brand new site setup, but bear in mind I’ve got ten sites in total and a shared server is always competing for resources regardless of how old your site is.
Tom has about thirty hefty blog posts and no doubt thousands of visitors.
That is bound to affect his server speeds, but today’s testing is about benchmark results, not clock watching. When we set a website up light as a feather, speed comes naturally.
From what I could gather, it seemed like Tom was having the same issue with his images as I did, but he didn’t seem to have the cookie problem.
It’s hard to comment on another man’s setup; however, you can learn a lot from digging around. By doing so you can often see if a problem is isolated or global and save a lot of time in the process.
Even if a blog post takes ten seconds to load. The full page doesn’t need to load in one second. It’s the above the fold content that needs to load instantly. That’s where the perception of speed comes from.
Let’s be honest, all the results we’re seeing are still top of the line.
A few benchmark points doesn’t make any difference in the real world, but humans are competitive. Everyone wants the fastest or the best, don’t they?
Here’s the waterfall results…
There you go, guys. Hopefully that’s proven that shared hosting isn’t as bad a what people make out. I’ve taken a site from a domain name to benchmark heaven in a matter of days.
Should you need any questions answering, feel free to hit me up in the comments.
Oh, one last thing…
14. Page Speed Test Results
We can’t stop there, not when everything is running so smoothly. How about a few more pretty pics for the Page Speed Tweaks album?
Here goes, guys. Count your lucky stars.
First of all let’s start at the worst result: Pingdom from Solar Winds. this was no surprise, because I proved earlier that it doesn’t seem to pick up GZip correctly from my websites.
There have been other people asking the same question: “Why doesn’t Pingdom pickup GZip?”
For some weird reason, Pingdom loads too fast locally and doesn’t display an image. That’s why I had to test from Germany, as it was the closest place that an image loaded rather than the white screen.
Since I came across the post discussing Pingdom not spotting GZip correctly, I had no reason to doubt the reason explained by the engineer. However, I’ve since found out myself that it’s more likely to be due to Pingdom having issue with Brotli compression. When I turned Brotli off in Cloudflare it gave me an A for compression.
Now we’re on the homepage, the results are slightly better due to it being a much lighter page. Damn Pingdom for spoiling our blitz on the number 100.
That yellow is making me cringe.
14.2 Google PageSpeed Insights
Some people say PageSpeed Insights is irrelevant because it doesn’t have a timer. That’s ridiculous. Google know what they’re talking about – they run half the Internet.
Best practices are what help make things, not only faster, but better to use. This is why when Google speaks, we should listen!
That’s the desktop result in the bag. How will we do on mobile?
Come on now, chaps, you didn’t think anything less, did you?
If we can smash the green with our seventy-two-page blog post, it goes without saying that we won’t fail with our piddly home page with four requests.
What about mobile – arguably the most important result?
Well one thing’s for sure, I’m glad this blog post is coming to a close. Writing almost ten-thousand words is like a third of an average book. Then stick a hundred images in that all look the same.
Yep, my head is fried, but it’s all in the name of science.
Now for the grand finale.
14.3 Google Lighthouse (Chrome DevTools)
Amittedly, it’s not a perfect result. It’s still a hell of a result, but the only reason why the PWA section is blank is that I haven’t optimized for it yet.
In fact, it’s highly unlikely that I won’t bother. Unless you’re a famous brand, who is realistically going to save your PWA to their desktop or phone screen?
I’ve already revealed the Lighthouse easter egg, so it’s not something that I need to do again.
PWAs do work offline, though, plus they load instantly second time round.
Maybe I’ll revisit this one later on… for now here’s our final result.
Shame the last section is gray,
but I think all gray is prettier than half-green.
Well it was bound to get the better of me in the end. Plus PWAs are FASTER the second time around and work offline.
14.4 WebPage Test
This time, I’m absolutely sick to death of screenshots and optimizing images. If you want to check out the results from WebPage Test, here’s a couple of PDF links for you to digest.
**Click on the links to download the .pdf test results.
14.5 GT Metrix
Only joking, you’ve seen enough waterfall charts for this year.
For anyone jump-linking down to this section, click this link 13.1 final GT Metrix results to pop back up. Too busy, then don’t worry, they look like this: 100/100.
Well it’s been quite a ride. Not one I intend to do again in a hurry. Hopefully, though, you’ve learned a few things along the way in our quest for the fastest WordPress setup.
- Free plugins are fine, just mix and match them for the full toolkit.
- Shared hosting is great – as long as it’s with a reputable company like Hostinger.
- GeneratePress is a supefast theme.
That’s all for now, folks.
PS: Just one thing, guys… since I’ve finished this post at almost 10,300 words and over 100 images. We’re still hitting 99/99 on GT Metrix and our latest update below is 100/99 so even closer.
The results we are achieving are unheard of for shared hosting.
If anyone is still in doubt, I’ve just told you all exactly what I’ve done. Nothing hidden or scripted. Just the truth that might offend some people – the ones who push super expensive junk we don’t need!
The search for speed is never ending, especially for the fastest WordPress setup possible. 99/99 was good, but when you’re so close to 100/100 it’s sometimes worse than been a million miles away.
I’ve been experimenting with images to see how things could be improved and to learn new tricks, if that’s even possible thesedays.
My system was finely honed and I thought that using Smush after cropping and optimizing my images on Photoshop was the right thing to do, but I noticed that GT Metrix always complains about images. Even when you use the images it provides you with, it can still tell you that they need optimizing.
So I put the images through Compressor.io as a test, seen as though it’s free.
Compressor.io gave me the best results. Surprisingly it’s better than Smush!
It was a simple task on my 20-pic image test that I made, but individually compressing 120 images, plus altering the file names and replacing them in this post has been painful, but it’s been worth it for the extra one percent.
I’ve used free image compression tools before, but only to have a mess about with them. It never dawned on me that they would actually be better than the plugins.
You see there are only a handful of actual compression technologies that are created by computer scientists. Then these get repackaged as things like Smush and ReSmush, but they’re all the same thing underneath.
Why Compressor.io is awesome is because most of the plugins charge us for lossy compression, but give us lossless compression for free. Compressor.io gives us LOSSY for free.
The effort I put in to get the extra one-percent improvement was definitely worth it, because I’ve learned that I can now do without Smush altogether. What is more amazing is I was so close to paying $50 a month for the pro version and now this has happened.
Read our full guide to optimize WordPress images with Compressor.io.
Even with the best hosting in the world, it’s almost impossible to get 100/100 on a long blog post simply because GT Metrix will flag you for too many DOM elements.
The main thing is that it doesn’t affect load times.
I also tried turning lazy loading on in Autoptimize and it’s the first lazy loading that has actually worked for me. It reduced the page requests to 8 and helps with errors on PageSpeed Insights.
After quickly turning lazy loading off, I’ve now decided to keep it on after more testing.
Now I’ve got to redo 100 plus images for the Rank Math post, but once that is sorted, it won’t be too bad now I know to use Compressor.io beforehand.
Such is life in the fast lane!
17. Key CDN Performance Test
Here’s a cool tool that you might find useful – Key CDN Performance Test. It checks your connection and TTFB times from 14 locations from around the world.
We’re doing quite good, apart from India, but everything else is green so musn’t grumble.
As an aside, I’ve actually found out that Cloudflare on its own is faster than when combined with Stackpath. This is purely because when running two CDNs you have a small hop from one to the other, which I explain in detail on this Cloudflare Setup tutorial in section 12.
You only lose between 0.2 and 0.5 seconds, but using Stackpath also restricts your static content to 54 data centres as opposed to Cloudflare’s 194 so there’s actually more benefits using Cloudflare as a lone wolf.
It’s also not a diss on Stackpath entirely, because you can serve your full site from Stackpath by pointing your nameservers in their direction.
The message is that doubling up on CDNs isn’t really necessary or the best thing to do.
Pros and cons – not right or wrong!