Why Website Speed Matters
If people have a negative experience on mobile, they’re 62% less likely to purchase from you in the future.
And when it comes to negative mobile interactions, one of the top complaints Google heard is "slow experience."
This tells us that first impressions matter: If people's initial experience visiting a site is slow, they're more likely to bounce later.
The average mobile webpage takes 15.3 seconds to load.
In retail, Google has seen that a one-second delay in mobile load times can impact mobile conversions by up to 20%. See how much you could be losing with your business: https://www.thinkwithgoogle.com/feature/mobile/
Google recommends a load time of 5 seconds or less on mobile devices with 3G connections. Faster mobile experiences can lead to more engaged customers and higher revenue.
As of July 2018, Google Search now factors in page speed for mobile sites with their rankings.
How To Detect A Slow WordPress Website
The WordPress Speed Detective Start
While you can use https://testmysite.thinkwithgoogle.com/, we needed technical details to better understand the website speed issues.
We went to https://gtmetrix.com/ and put in our testing website URL and got back:
Important to notice that while PageSpeed and YSlow scores are important - we will be focusing on the Page Details section. As you can see, the page load time is rather high...
I also want to bring up the Timings Tab:
This shares some useful (and technical) data we need to know - Mainly DOM Loaded.
DOM Loaded is when all the content is downloaded ready for any programs to run - this should mean your site is ready to be interactive - ie useable.
Improving WordPress Website Speed
Let It Load, Let It Load...
We are going to provide the top issues and some easy fixes.
1) Optimise Images
The leading cause of a slow website is often large Image files. There are 3 ways to combat this:
- Reduce image file sizes - Image shrinking
- Display correct image resolutions - Image resizing
- Only load when needed - Lazy Loading Images
Image shrinking is easy enough with heaps of WordPress plugins already out there to be installed (We use EWWW Image optimisation). Settings image optimisation to 60% and resizing images on upload greatly helps reduce website speed. ImageOptim on Mac is also great for optimisation images before uploading them to the website.
With image resolutions, WordPress has got you covered with
With lazy loading, this is when only the images within view (or just below) are loaded while the images at the bottom are not - but as you scroll down closer, the images are loaded in. This greatly
2) Enable Cache
This is more for repeat visitors - when your page and assets are cached, they are stored on the visitor's computer or phone. When the visit a second time, they do not need to redownload all the assets but instead load them from their own device - greatly improving loading times.
There are heaps of cache plugins that can do this for you (We use W3 Cache) so try out the following for beginner caching:
3) Remove/Replace unused/
There are lots of plugins that add in their own
This is just a list of plugins for the more advanced WordPress users. Do
Super Progressive Web Apps
Self-Hosted Google Fonts
You could also move to a faster host to help improve TTFB
Note: There were other speed
Ordering Landing Page Design for ATF Loading
That's An Order, Captain
You may have heard of ATF (Above The Fold) - this is the part of the website that you see when the website loads. The term came from when newspapers where folded and you only saw the top page - hence the term Above the fold. What do you don't see is called BTF (Below The Fold).
By lazy loading images, we can improve "loading times" by reducing the number of images loaded ATF before the user scrolls to BTF. Your main Call To Action for that page should also be ATF.
Homepage on all popular screen sizes BEFORE landing page optimisation
Homepage on all popular screen sizes AFTER landing page optimisation
What was done:
- Moved the iframe youtube video to BTF - Lazy loaded in - saved about 1-2 seconds loading times
- Updated the background image - Shrink and resized a new background image better suited for the landing page
- Minor Call To Action updates - Moved buttons around and improved CTA box - help with conversion rates
The Performance Part:
The Timeline Tab:
We improved Fully Loaded Time by 4.3 seconds and got DOM Loaded down to 3.1 seconds - meaning the user can now interact with the site at 3.1 seconds instead of the old 6 seconds DOM Loaded time.
Also, notice that the Total Page Size is down by almost 2/3rds. By moving the iframe to BTL and optimising the background image, a lot of page weight was removed.
And as a side effect, we improved the PageSpeed and YSlow score.
Want us to take a look at your WordPress website speed? Contact Us