- David Anttony
- Last Updated July 27, 2022
HOW to optimize page speed with my best practice methodology
Page Speed Optimization Best Practices:
Page speed is a huge subject area so without having any guidelines or best practices to follow it’s not easy to come up with the fastest and most efficient speed methodologies for your website be it a WordPress site or another.
This page speed best practice optimisation guide will give you the tried and tested steps you need.
Page speed best practices optimization for SEO
Before we dive in though let me emphasize the importance of page speed for SEO in 2022 and beyond.
Before Google created its Core Web Vitals set of metrics, page speed was still important but not weighted as much as other SEO elements.
Since the advent of Core Web Vitals Google of course has lifted the bar when it comes to page speed.
Speed is a LOT more important now because there is no point having great content when it loads too slow!
Too slow these days is 5 to 6 seconds on mobile networks!
Three seconds or less is best.
Every second your page takes to load beyond 4 seconds means you risk losing new visitors to your site either because they ‘bomb out’ before pages load, or as in most cases – your content does not rank well on Google so you do not show up in the top search results.
OK let’s dive into the page speed best practices methodologies
You are probably going to kick me right now!
Because – there are currently no general well used page speed best practices step-by-step methodologies!
If you search online you will find lists like this :
- Enable compression
- Minify CSS, JavaScript, and HTML
- Reduce redirects
- Remove render-blocking JavaScript
- Leverage browser caching
- Improve server response time
- Use a content distribution network (CDN)
- Optimize images
These lists while accurate, don’t actually give you a working process to solve page speed issues fast – spending the least time and getting the most results.
They are just generic speed steps but not in the best actionable sequence.
This document gives you an actionable sequence to work with helping you solve your page speed issues faster.
In addition – following the steps below will help you fix issues automatically by completely removing things causing the issues in the first place like :
- Reduce redirects
- Minify CSS, JavaScript, and HTML
- Leverage browser caching
- Remove render-blocking JavaScript
Website page speed is still a relatively new field so the best methodologies for how to get your pages to go from 20 seconds full load to 2 seconds full load are not set in concrete.
Rest assured though – today I will give you my step by step speed methodology which I have developed over the last four years working on hundreds of sites – most of them WordPress.
I recommend you start off with this process and the run from there to develop your own speed optimisation methodologies that work for you and your sites
We have a page speed optimization best practices cheat sheet to download
Use this page speed optimisation cheat sheet in conjunction with this document.
Work in 'onion layers'
It’s super common to feel overwhelmed when you do your first speed project.
The hardest thing is to know where to start. This document {and it’s associated cheat sheet – link above} allows you get started and break the speed issues down into layers – fixing the big issues first.
It’s important to note at this point that not all speed issues should or can be fixed or in some cases worth fixing.
Some issues may just be too expensive time wise to fix. These are best fixed the next time your rebuild the site.
After each step below you should run a new speed scan (after clearing all caches) and see the speed effects created.
Not only will you learn what works by doing this – and what gets the best results – once you get to a point where you are happy with the page load speed you can stop.
You will find out very fast that it’s very easy to go fro 20s full page load to 3s full load — but going from 3s to 2s may be way too hard for you. The last page speed mile is always the hardest and most difficult to fix!
Page speed best methodology training course
The page speed methodology that I share with you today is documented in great detail in my online page speed training course.
Fast Access List
How to optimize a web page -Page speed best practices - WordPress or otherwise
Step 1 ~ How to optimize page speed – run a GTMETRIX speed test
Why run a GTmetrix page speed test first?
The easiest way to analyse the current speed issues on your site, or on a specific page, is by using a GTmetrix report. Their reports are very comprehensive containing a huge array of visual speed data allowing you to see the key issues very fast.
Why not run a Google PageSpeed Insights report first?
While it is super important to keep your eye on Google PageSpeed Insights – the report itself is not easy to read – is not very visual – is not very interactive – and in short, is a poor speed testing tool for speed benchmarking and debugging purposes.
Google PageSpeed Insights is a tool simply to see what Google sees about your site. So never ignore it! It does have some good data, but usually you can find all the same data on GTmetrix displayed in a better way!
BUT – if you get a great GTmetrix speed report results your Google report will reflect the speed results – they both use the same base tool – Google Lighthouse.
GTmetrix has a great visual showing why use GTmetrix and not Google PageSpeed Insights.
How to run a GTmetrix page speed test
- Go to gtmetrix.com
- Enter your URL you want speed tested and run the test
Right now it is not important to choose any settings – this will come later - IMPORTANT Make sure you enter your URL correctly
https://crunchlets.com is different from http://crunchlets.com/
– and https://crunchlets.com/ is different again to
https://www.crunchlets.com
– use the correct URL that is shown in your browser address bar
– this will avoid adding a 301 redirect to the page speed test giving you a false reading!
Step 2 ~ Page speed best practices – check the # of requests being loaded
What are requests?
First off what is a request? A request is a resource such as an image or font.
Your webpages are built of multiple requests (resources) – and the greater the number the slower the page load speed.
If your webpage has more than 100 requests – depending to a large extent on the type and size of the request – your page will not load fast.
Reducing page complexity is a key part of page speed. Making your pages simpler – fewer images – fewer fonts – less fancy functionality requiring javascript – then the faster your pages will load.
How to check the number of requests in a GTmetrix page speed test
- Scroll down once your scan has finished running to the Page Details section of the GTmetrix report
- The Total Page Requests are listed on the left at the bottom – see the image above
- You can also see this information in other parts of the report such as on the Waterfall Tab.
Step 3 ~ Can the number of requests be reduced?
If at all possible reduce the number of requests by simplifying the page.
Reducing page complexity, especially in the case of a live site, is often not an easy task.
The best time to simplify a site is when it is being built!
Taking great care when building a new website is the best way to make it fast right out of the box.
When a web page has a lot of image requests what can you do?
Removing excess images of course is the first thing to do! But most pages do not have images added except for a specific purpose.
The other easiest way if you have a lot of images to reduce the number of requests when a page is loaded is to Lazy Load the images. This is the way most people reduce the number of images being loaded when a page loads.
Lazy loading basically means images (or content) are loaded as the viewer scrolls down the page and NOT at the initial page load time.
If you are running a WordPress site one of the easiest tools to use is WP Rocket.
While WP Rocket is a paid premium plugin it is worth every dollar! I load it on EVERY WordPress website and each time it ALWAYS gets results without exception!
WP Rocket has a great Lazy Load functionality baked right in – a simple mouse click will get it running in a jiffy.
How to find out the different requests being loaded and the number of each type
It is possible with a simple mouse click on your GTmetrix report to find out how many images are being loaded. The same goes for other request types like fonts.
- On your GTmetrix report scroll down and click on the Waterfall tab
- Then click on the Images button on the Waterfall tab
- Look at the bottom left of the Waterfall Chart and you will see that only the image requests are displayed and the number for images is shown at the bottom of the list – in this case (see image below) there are 6 images out of a total of 9 requests
- To filter by other request types click the button of the type you are wanting to see and unclick any other buttons
How to reduce the other types of requests such a JS (javascript) and CSS (style sheets)
Reducing JS and CSS request types is not that easy because they create the infrastructure behind a page.
You may need a developer to assist you with this or we can help you by speed optimising your site for you.
If you are running a WordPress site the #1 cause of increased JS and CSS scripts is having plugins loaded that are not needed. So where you can on WordPress sites remove all plugins that are not being used or are not needed – including ones used just in the admin side of the site.
Page Speed Optimisation & Consultancy Service
Want help getting your site fixed up? Let me optimise your site for you. I have limited availability but I take on a couple of page speed optimisation projects a month. I also offer page speed consultancy services.
Step 4 ~ Now’s the time to find out and fix the oversized requests being loaded
Introducing Page Weight
The total number of requests is a critical piece of information that you need to assess what is called the page ‘weight’.
To assess the full ‘weight’ of a page you also need to know the size of the resources being loaded.
- Page Weight = number of requests * size of requests
The greater the page ‘weight’ the slower the page will load.
How to find oversized resources
Again your GTmetrix report comes to the rescue with a mouse click or two.
- Go to the Waterfall tab
- Click on the All button to make sure all requests are being displayed
- Click on the Size column heading to sort the requests by size (click again if it sorts small to large)
- You will now be able to see a list of your requests sorted by size
As can be seen above a large resource of 418Kb is displayed in the list above. This is nearly 1/2 megabyte!
If you hold your mouse over the file name on the left it will show you the full file and path name of any request you mouseover.
In the example above the file is a font file. The way to fix that is to use a different font! An average font file is about 50kb.
Fixing oversized resources
If the request is a video or an image the solutions are fairly easy – remove them – or optimise them.
However, if like in the case above the file is a font file it can be difficult to optimise because those files affect the way the page is displayed.
In the case above it would need a replacement font to be used that is not as heavy. Your developer would probably need to do this for you.
As part of our page optimisation service (for WordPress sites) we can assist you with all these issues to make your site run super fast.
How to optimise images for faster loading
Over 90% of your page speed issues will come from oversized images!
That’s a huge chunk of page speed for sure.
Optimizing images for the web is a massive subject in its own right and to some extent – depending on how your site has been built – can be quite complex and you may need to be competent with tools like Chrome Developer Tools.
Here's some tips to help you reduce your image sizes and reduce page load time
- Use WebP and SVG – stop using PNG and JPG all the latest browser releases full support these now.
- Use programs like Photoshop or photopea.com (free) to create WebP.
- Test your images with tinypng.com to see if you have the best compression.
- Cut the images down physically trimming off parts not needed.
- Unless you are catering for devices and audiences that require retina images – size your physical images (pixel wise) to the exact size they are displayed on the page (this is not always that simple because of responsive web design).
- Even if your site caters for retina images certain images – which are often physically large – like background images – you can afford to make these lower quality because you may be blurring them with CSS anyhow!
- Avoid using high res full-width Hero-type images above the fold seeing they severely affect your LCP – Largest Contentful Paint metrics.
- 100% remove sliders that appear at the top of your pages – they not only slow your page speed (in a massive way) – users don’t want to wait for them to load, so 95% of your visitors never see slide 2 especially on mobile.
Step 5 ~ Find out the # of servers/domains requests are loaded from and reduce them
DNS lookups and how they affect page speed
A webpage may get created by loading requests from multiple locations – servers/domains.
The more locations that are used the slower the site will be.
Each time a different location is used something called a DNS (domain name system) look-up is needed.
Each DNS look-up (plus associated SSL – secure sockets layer processing) takes on average about 50 milliseconds. On a bad day though this could be 400ms or more.
So if you have 20 of these then you inherently have :
- 20 * 50ms = 100ms or 1/10 of a second on a good day
- 20 * 400ms = 8000ms or 8 seconds on a bad day
You may think so what – 1/10 of a second is nothing and you would be right.
Loading fonts locally on WordPress with a plugin
A good little plugin you can use on WordPress to load Google fonts from your own site is the OMGF plugin.
Loading Google fonts locally can often speed up your site IF the fonts that you use on your site are not commonly used fonts.
Like many speed solutions, there are always caveats – and loading fonts locally is no exception. Sometimes it helps other times it doesn’t – it all depends on the rest of your web architecture specifically if you are using a CDN or not.
Loading Google Analytics code locally on WordPress with a plugin
Similar to the Google fonts – you can also load Google Analytics code locally seeing this piece of code can often slow your site a lot.
The WordPress CAOS plugin is similar to the OMGF plugin (created by the same team – hence the similar crazy acronym!
Again it’s a solution that should be fully tested on your site with full speed testing.
How to find out how many different request locations are being used to load a page
Gtmetrix can assist you with the answer to this but it’s not a one-click solution.
- Go to the Waterfall tab on your GTmetrix report
- Click on the All button
- Click on the Domain column heading to sort by the domain (server) – this groups your requests together based on their domain source
- Manually count the number of different domains
In the example below you will see just one domain in use.
Page speed best methodology training course
The page speed methodology that I share with you today is documented in great detail in my online page speed training course.
Step 6 ~ Find the requests that fail to load and fix the issues
You can see any issues with your request on your GTmetrix report under the Status column on the Waterfall tab.
It can be quite tricky to debug failed requests but the starting point is to look at the request full URL this will often give you a lot of clues.
When a page does not exist a 404 error is displayed but when a resource that the page requests does not load the page continues to load but the page speed is affected because the browser has to wait for the resource still.
If you don't want to do the speed work on your site - or do our page speed training courses we can do the work for you 🙂
Full WordPress
speed optimisation service
fixing your page
speed issues
(limited service I only do a few site each month).
Step 7 ~ Find the slow loading requests and work out why they are loading slow or remove them
Slow loading requests are shown on the GTmetrix Waterfall report as a long bar. The longer the bar the longer the load time for that request.
To find the slow loading requests visually scan the gtmetix Waterfall report (waterfall tab) and then work out what is causing the request to take so long to load.
You will find it’s one or more of these :
- loading from a 3rd party server
- a large resource
- errors found while loading the request
Step 8 ~ Look for old, unused, or forgotten code
All too often – especially on an older website – you will find unused code that has been forgotten about.
Often the unused codes are marketing tracking codes or user behaviour monitoring codes like Hotjar.
When using code like Hotjar it loads a lot of requests slowing your site down often by 1 to 4 seconds!
If you are using user behaviour tracking codes make sure you only use them while you are running active tests. Once you have finished remove them.
In the example above from a client’s site you can see Hotjar in action – it loads from 4 different servers and you can see from the length of the last resource bar it impacts the page load speed a lot.
How to find old code that slows your site down
- On your GTmetrix report go to the Waterfall tab
- Sort on the Domain column and visually scan for code you are not aware of
- Sort on the URL column as well next to see similar name requests grouped together
- If you find anything unusual use the Filter Requests (Search) box to search on part of the file name like Hotjar to filter all the requests that have that in the file name
- Once you find any requests research where they are being loaded from and see if you can remove them
Step 9 ~ Look for inefficient code like jQUERY code
Historic or poorly built websites tend to have a lot of inefficient code – jQUERY code is a good example of this.
As you can see in the example below using the Filter Requests box to look for jQuery it flagged 20 requests. That’s a lot of jQuery!
The example below is from a WordPress website and the cause if probably using a poorly optimised theme that offers a lot of nice ‘whizzy-bang’ functionality but at a severe speed cost.
You may see code like this on WordPress sites built with page builders when you or the designer have added a lot of ‘cool’ stuff. The ‘cool’ stuff can add a lot of extra JS code (javascript) slowing your page speed down.
Reducing page functionality reduces JS code which in turn speeds your page up.
Page speed best methodology training course
The page speed methodology that I share with you today is documented in great detail in my online page speed training course.
Step 10 ~ Check your PHP version & upgrade if needed
What is PHP?
PHP is a programming language running on your your server that drives most CMS platforms like WordPress and Joomla.
It was created in 1995 by Rasmus Lerforf and is still one of the most widly used server-side scripting languages.
Here’s a small PHP code/script sample:
PHP versions expire!
While you may think it’s about ‘keeping up with the Jones’ when it comes to updating your PHP version, it’s really about security – and in context of this article – speed.
PHP versions have a life and when they expire they are not supported which means any security vulnerabilities are not patched leaving your site open to being hacked.
Upgrading your PHP can speed up your site
So if your site core site software runs on PHP – WordPress – Drupal – Magento -Joomla etc. – the good news is that usually a new release of PHP has speed benefits.
Very roughly upgrading from php 7.4 to 8.1 can give your site a 10 to 20% speed boost instantly!
So for speed it’s super worth while keeping it up to date but not too up to date!
WARNING! Don't rush in too fast to update your PHP
You should update your PHP but not too fast! Wait until a major update is at least 6 months old and is very stable.
Right now php 8.1 is the latest and stable php version – it’s now 7 months old and I am recommending all my clients to update right now.
Where can I find out the current versions of PHP
How do I find the current PHP version used on my site?
The answer to this question is not simple because it depends on what CMS (content management system) you are using and what server set up you are using.
- If you are using WHM on your server : WHM’s MultiPHP Manager interface (WHM >> Home >> Software >> MultiPHP Manager)
- If you’re using cPanel : MultiPHP Manager interface (cPanel >> Home >> Software >> MultiPHP Manager)
- If you are using WordPress you can find your PHP version in the Site Health area under the Tools menu.
Click on the Info tab then scroll down to the Server details and expand the section
Many server hosting companies automatically update your PHP version
You should check if you have PHP auto update set on your web hosting control panel.
Do note though that updating your PHP version can crash your site. So if auto updates are active there is a risk for you and it’s a fairly big risk.
Fortunately most auto updates are a couple of versions behind so the risk of crashing your site is reduced.
If you manually change your PHP version you should do a full site backup first – just in case a real side-wobbler bug crops up.
On sites like Kinsta they have an easy button press update and if things fail you can reverse super fast with little site down time.
Ideally if you are using server hosting like Kinsta or Cloudways – I recommend both of these platforms – you should test the changes first on a Staging site.
Step 11 ~ Cache the pages and page content - page and server caches
What is caching (Web cache) ?
Caching is just a smart word for a copy.
What makes caching effective at reducing a web page load time is that the copy can be kept in server memory, stored locally on the clients hard drive (browser cache), or consist of data that was compiled from many different sources, or a combination of all these things.
The end result of using web cache technologies is that when someone requests a web page the final web page in completed form is delivered faster to them.
Here is a visual scenario to help you get the idea better.
Imagine a cake shop that bakes and sells cakes. They need a lot of ingredients to make their cakes.
Some of their ingredients can be pre-packaged and stored for use.
So when they get a truck delivery of flour they split the sacks up into individually weight packs and add the other dry ingredients to make a batch of cakes like salt – raising agent – dried fruit and so on. The same goes for other ingredients like butter – it can be cut up and stored ready for use.
The truck is like the server – and the pre-packed items are like a browser cache – fast and ready to use.
Your browser cache stores all the parts needed to create a page so that if the parts (HTML, CSS, Javascript, images) have not expired, they can be used to build the final page WITHOUT going to the server for anything.
As you can imagine a page loaded from browser cache loads very fast seeing it’s loading from your local hard drive.
However – if any ingredients have expired – each has an expiry date built into the meta data – they need to be fetched from the server again – a much slower process.
List of different types of Internet cache
Caches exist throughout every part of any computer system to assist with speed.
Here’s some common Internet caches you may have heard about:
- Browser Cache
– how many times have support people told you to clear this! This is one of the most well known caches. Browsers cache all the parts needed to build a page – HTML – CSS – Javascript – images – videos etc. - Object Cache
– you may have heard about this but not really known what it is. Object caches on the internet store in memory compiled database data of common data . So a list of countries could be a common object and another example could be a product best seller list if you are running an e-commerce site. - OP Cache / OPcache / OPcode Cache
– PHP code that runs a lot of websites like WordPress has to be compiled before it can be executed – the compiled code can be cached and stored in memory for fast reuse. - Page Cache or Site Cache
– is something you will be aware of if you use a WordPress caching plugin like WP Rocket {highly recommended}. This type of cache stores HTML versions of completed CMS (Content Management System) pages. A CMS like WordPress generates a webpage from a combination of HTML, CSS, Javascript, images, videos and database results. An average page may perform 30 to 40 database look ups to collect all the data needed to spin up a web page. - Server Side Cache
– These are caches that are generated and held on a web server. They are very similar to page caches that WP Rocket creates but are a lot faster. - Varnish Cache
– This is a server side cache created by a special piece of server software. Cloudways makes extensive use of Varnish to get amazing speed results for an incredible hosting price. - Redis Cache
– This is a database cache that stores database results in memory. Redis is a database as well but is used extensively on fine tuned sites for storing database data in memory. Cloudways – which I highly recommend { all my sites are on there} – extensively uses Redis to speed up the sites on its system. - CDN
– Content Delivery Network, while not being a traditional cache, it does behave like a cache – and it has a cached copy of most of your web page resources. CDN’s act as a distributed global cache reducing web page load times if your visitors are globally distributed.
Caching sounds so perfect but what's the downside
The downside of caching is that caches get stale. The content eventually becomes out of date so the caches need to be recreated from the original content held on your server.
Most of the time caches are automatically recreated in the background by the software that manages them.
The challenge with this is that a lot of content can expire at once so regenerating it can impact the server CPU and memory and can cause sites to stall or even crash { on low spec cheap hosting servers}.
This is why on WordPress page caching systems like WP Rocket – the best WP caching tool {my experienced opinion} – you should set long cache refresh rates (over 12 hours – 24 hours if possible).
If your website only has content added every other day then set cache expiry times for WP Rocket and other caches to 48 hours.
The longer you can keep a cache active the more effective they are at their job of increasing page speed.
The other key downside to caching content is that from time to time you manually need to clear them which can be pesky, but WordPress caching tools like WP Rocket help you do this easily with a button press.
If you would like me to configure your WP Rocket caching settings for you I offer a WP Rocket configuration service.
Step 12 ~ Review your PHP memory settings
WordPress PHP memory settings
If you are using WordPress the default PHP memory setting is 40meg.
This is quite small, especially for sites that use site builders like Elementor or are e-commerce sites.
To find out what memory settings are in place for your WordPress site go to the Site Health tool under the Tools menu then click on the Info tab.
Scroll down the WordPress Constants section and expand it to see all the constants set for your WordPress installation.
If you see WP_MEMORY_LIMIT that tells you how much memory is available to your site visitors.
[ WP_MAX_MEMORY_LIMIT shown below indicates the memory available to the admin users ]
Changing your WordPress memory settings
Step 13 ~ Review your server hosting
If you were to give each element that affects your page load time a percentage weighting, your hosting would probably weigh in at about 40% to 60%.
That’s a huge percentage and yet I have this option as the last on our list!
Changing your hosting provider is not a small job and there are huge risks involved if you are not technically skilled.
The reason this is at the end of the list is that even if you have a red hot server, you still need to perform all the steps above. Better then that you look at this last because after optimising your pages you may find your speed is acceptable.
However I always recommend clients to review their hosting annually. The reason for this is to save money, get better and simple server admin systems, get better support for less cost and of course increase speed.
Several years ago server uptime was a huge deal so hosting providers touted 99.99% uptime. These days uptime is a given!
If your server goes down a lot you should be dumping it fast because it’s like a river without water!
What is not a given these days is fast and scalable web hosting.
Scalable means that if you have a sudden surge of visitors all coming at once can your website still respond fast or does it crash – hence all those 500 errors you see on the web.
Cheaper hosting may provide fast speed for 2 or 3 users but what if you have a 100 on your site all at once and Google Bot, Bing Bot and Semrush Bot all come to the party at the same time as well!
Imagine Google bot getting a 500 response from your server if it only comes to visit you once a month – not the best for your SEO!
Red hot scalable hosting
There are some great hosting provider players out these these days like Pantheon and WP Engine but these are deeper pocket hosting providers.
While it’s possible to get great VPS hosting from $5 per month you will need to be a techi to use it seeing it’s unsupported – as in you get a server box and that’s it.
The average person does need some support if things go South West in a hurry!
I personally recommend Kinsta and Cloudways.
Kinsta for better support – but this comes at a slightly higher price than Cloudways.
Cloudways for better price, good support and maximum flexibility.
All my hosting is on Cloudways because I am more budget focused and require more flexibility to spin up a new server for client testing in minutes for pennies on the dollar to use for just a couple of hours.
I recommend Kinsta though because it has a great price point and an excellent support team and many of my high quality clients use Kinsta hosting so I have had a lot of exposure to their systems and have come to appreciate their great services.
And more importantly – Kinsta is a SUPER FOCUSED company creating a lot of trust for you.
Wherever you look on the web you will find Kinsta articles ranking high which in itself shows they are super focused. But if you look at the source code on those articles you may see a very unique form of advertising!
When I spotted this for the first time I knew I was looking at a very different company. This was the one thing that got me 100% hooked with them seeing it showed me they were willing to go the extra mile and not just talk about it in fancy advertising.
Full disclosure – I’m an affiliate for both Cloudways and Kinsta but now you probably know why I am willing to put my reputation on the line to work with them. I highly recommend both companies.
If you want to give Cloudways a free spin – no credit card needed – use this link : getus.at/cloudways and use the coupon code AFFYBOY20 to get 20% off your first month if you run ahead with them.
I also offer a very affordable full Cloudways WordPress migration and configuration service if you want to get up and running seamlessly.
If you want to do it on your own Cloudways has a WordPress migration plugin that is super easy to use.
That’s all for now folks !
If you want to learn more about page speed and learn how to get a WordPress page to load in less than 1 second check this page speed article out.
And if you need more assistance I can help you with my WordPress onsite page optimisation service or Page speed consultancy.
And if you are in the mood for a learning deep dive into page speed check out my main page speed online training course.
Some of the links on this page are affiliate links that I receive a small commission from if you click them and buy. These support my work and help me create great free content at no cost to yourself.