How We Cut WordPress Website Speeds By Half (Plus 3 Tips)

[et_pb_section fb_built=”1″ _builder_version=”3.22.3″][et_pb_row _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.3.1″]

Introduction

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.3.1″]

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:

[/et_pb_text][et_pb_image src=”https://thatwebsiteis.me/wp-content/uploads/SUnbird-speed.png” show_in_lightbox=”on” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″][/et_pb_image][et_pb_text _builder_version=”3.3.1″]

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:

[/et_pb_text][et_pb_image src=”https://thatwebsiteis.me/wp-content/uploads/sunbird-speed-2.png” show_in_lightbox=”on” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″][/et_pb_image][et_pb_text _builder_version=”3.3.1″]

This shares some useful (and technical) data we need to know – Mainly DOM Loaded.

DOM content loaded time (DOM loaded or DOM ready for short) is the point at which the DOM is ready (ie. DOM interactive) and there are no stylesheets blocking JavaScript execution. If there are no stylesheets blocking JavaScript execution and there is no parser blocking JavaScript, then this will be the same as DOM interactive time.

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. 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”|||” _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.3.1″]

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:

1. Reduce image file sizes – Image shrinking
2. Display correct image resolutions – Image resizing
3. Only load when needed – Lazy Loading Images

Image shrinking

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.

Image resizing

With image resolutions, WordPress has got you covered with srcset images. WordPress creates different sized images ready for all screen sizes (Expect for Divi Builder – They don’t use srcset – ouch – we have yet to find a plugin that works well with Divi for srcset images). 

Lazy loading

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 heaps reduce first time loading speeds and improves user expereince. We use A3 Lazy Load as it also looks out for iframes (such as youtube videos).

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:

Litespeed Cache

Swift Performance Lite

There are other settings to help performance (such as gzip, and Minify CSS and javascript).

3) Remove/Replace unused/unneed plugins

There are lots of plugins that add in their own css and javascript files even if the plugin is not being use (but is actived). Of cource, this is going to slow down the website loading times as there are more assets to load for the visitor. Some plugins can be switched for better performance plugins, while others may need to be completely removed. 

4) Extras

This is just a list of plugins for the more advanced WordPress users. Do backup before using in case you break your site.

Heartbeat Control

WP-Optimize

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 optermisting tricks put in place that were not talked about – These listed are just a start for you.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.3.1″]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”0|0px|40px|0px|false|false” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”1_2″ _builder_version=”3.0.47″][et_pb_image src=”https://thatwebsiteis.me/wp-content/uploads/sunbird-after.png” alt=”Testing Website Before Landing Page Optimisations” title_text=”Testing Website Before Landing Page Optimisations” show_in_lightbox=”on” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″ border_radii=”on|10px|10px|10px|10px”][/et_pb_image][et_pb_text _builder_version=”3.3.1″]

Homepage on all popular screen sizes BEFORE landing page optimisation

[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.0.47″][et_pb_image src=”https://thatwebsiteis.me/wp-content/uploads/sunbird-responsive-2018.png” alt=”Testing Website Before Landing Page Optimisations” title_text=”Testing Website Before Landing Page Optimisations” show_in_lightbox=”on” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″ border_radii=”on|10px|10px|10px|10px”][/et_pb_image][et_pb_text _builder_version=”3.3.1″]

Homepage on all popular screen sizes AFTER landing page optimisation

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.3.1″]

What was done:

1. Moved the iframe youtube video to BTF – Lazy loaded in – saved about 1-2 seconds loading times
2. Updated the background image – Shrink and resized a new background image better suited for the landing page
3. Minor Call To Action updates – Moved buttons around and improved CTA box – help with conversion rates

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.3.1″]

The Results

After The Big Change

The Performance Part:

[/et_pb_text][et_pb_image src=”https://thatwebsiteis.me/wp-content/uploads/sunbird-speed-new.png” alt=”Website after speed changes” title_text=”Website after speed changes” show_in_lightbox=”on” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″][/et_pb_image][et_pb_text _builder_version=”3.3.1″]

The Timeline Tab:

[/et_pb_text][et_pb_image src=”https://thatwebsiteis.me/wp-content/uploads/sunbird-new-speed2.png” alt=”Website after speed changes” title_text=”Website after speed changes” show_in_lightbox=”on” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″][/et_pb_image][et_pb_text _builder_version=”3.3.1″]

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

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]