Importance of Website Page Load Speed

1. User Experience

As your website is the first experience a lot of people have with your business and with your brand, the speed of your website impacts that crucial first impression of your business as a whole. Visitors frustrated by slow loading websites will have a bad opinion of your business building poor brand association.

2. Conversions

Numerous studies have shown that this poor experience leads to a significant drop in sales and revenue, frustrated users are more likely to give up and not buy or opt-in as a lead.

This is compounded if you are paying for ads or content to attract those visitors; you are paying to lose a sale.

3. SEO

Google recognises these first two factors and also realises that slow loading websites hurt their business! Frustrated searchers cost Google money. Google became the search and ad giant it is by delivering users what they are looking for quickly.

So they want to offer fast-loading websites to their users. Slow websites get penalised in the search rankings and in the ad bidding process. You will pay more per ad click if your website is slow.

Improving your Core Web Vitals For Google

Mobile Speed Score Is The Most Important Metric

Now that the majority of internet traffic is on small mobile devices, only the mobile layout of your website is indexed in Google. So the only speed score that really matters for SEO is the mobile PSI score.

Also when your website is loading fast on mobile devices using a 3G connection, your speed will be great on larger devices and faster connections.

Core Web Vitals - Google's New Metrics To Measure User Experience.

Core Web Vitals are also a ranking signal for SEO so it is important to optimize your site for these metrics. These are 3 very different ways to measure the speed and user experience on your website. Once again it is important to focus on the mobile scores.

LCP - Largest Contentful Paint

This score measures how long it takes for the largest element ‘above the fold’ to load on the page. 2 main factors affect this:

  1. How well optimised your site is in general (how long it takes to load)
  2. The design and layout of your page; where large elements are placed and how large they are.

Action:
Any optimising of the page speed will improve the LCP slightly, up to a point.
Simplify your website, compress images and move large elements below the fold.

CLS - Cumulative Layout Shift

This score measures how much things on your page shift around while the page loads. Common causes of these shifts are the structure of the CSS on the page, slower loading fonts or having large or third party elements loading on the page that shift things when they finish loading such as video embeds, iFrames, ads or pop-ups.

Action:
Avoid using these elements in the top part of your website, delay pop-ups from displaying immediately on load, preload fonts, specify the dimensions of elements

FID - First Input Delay

This metric only measures real-world user experience data. It is the amount of delay that occurs when a real user clicks on a button or link. This delay will occur if the browser is still working on loading the website elements when the user clicks on the website.

Action:
So pushing larger elements down the page and optimising ‘above the fold’ on the page will help the LCP score but may still impact the FID. The whole page should be simplified and load quickly.

Selecting Fast and Secure Hosting

Hosting

Hosting your website on modern cloud hosting, close to the bulk of your audience will make a big difference to your websites load speed.

If you are on cheaper shared hosting, consider upgrading to AWS Cloud hosting, which we have found to be the fastest in our tests with identical websites.

Older hosting infrastructure is not as fast as newer technology and shared hosting environments often means your website does not have access to enough resources to load quickly.

Action:
Make sure your website has plenty of CPU and RAM resources available to it to load quickly.
Hosting the server close to the target audience improves speed slightly, even with a CDN and caching in place.

Implementing Wordpress Caching & CDNs

CDN

Using a CDN like Cloudflare or Stackpath means that your website files can load from a data centre in the same city as the viewer, even if your server is hosted on the other side of the world.

Free Cloudflare is the minimum CDN we recommend on all websites, but this is a very basic CDN and only delivers part of the website’s files.

Cloudflare APO provides a deeper integration between WordPress and the Cloudflare cache, improving speed significantly. This is available on the Pro plan.

Stackpath provides a more comprehensive integration and a faster network, costing the same as Cloudflare Pro it typically outperforms it on mobile PSI score by around 10 points.

Action:
Contact our support team if you need help setting up a CDN.

Caching

Caching plugins create a static copy of your page that can be served up faster to website visitors. My favourite way to think about it is that it is like serving up a completed lego set rather than sending the individual pieces and assembling them on the fly.

New cloud-based caching systems get amazing results, but often create display issues on complex or poorly built websites and should be tested first.

NitroPack Cloud-based caching and CDN systems replace the CDN and Caching plugins, optimising the sites cache in the cloud network, optimising and controlling the loading experience of the whole site.

This provides the best performance scores but often creates issues especially on the less simplified sites, also it delays a lot of CSS and scripts from loading until the user interacts so make sure the ‘above-the-fold’ content of the website loads without relying on these.

WPRocket is our preferred WordPress caching plugin, it has a comprehensive list of features and covers almost everything you need to optimise your site.

When set up correctly and coupled with Stackpath CDN it gets great results, comparable to Nitropack on a well-built website. It is a premium plugin with an ongoing license but this also means that its developers are actively improving the plugin and adding new features.

Breeze is a good, simple free caching plugin, it is limited in scope but is better than not having caching in place.

Action:
Check what caching your website has in place and consider upgrading to something more powerful.

Optimising Themes, Plugins & Scripts for Performance

Software

The theme and page builder software used to build your website plays a big part in how fast your website loads. Poorly built themes and bloated page builders add a lot of unnecessary scripts and CSS to the page which slows down the load time.

Caching solutions can reduce the code bloat to a certain extent, but also this can often lead to issues and some elements not displaying properly. It is always best to start with a simple lightweight theme framework, such as Genesis and only add what you need.

Page Builders such as Divi, Elementor, WPBakery make it easier to design and edit your page, but they add to the code bloat. Add-on packs for these plugins are also usually a source of a lot of bloat. Never have more than 1 page builder on the site.

Divi and WPBakery are particularly bad because they inject shortcodes into the content which take a lot of time to clean out when you rebuild the site with a different builder.

Beaver Builder is the best option out of these page builders, it produces cleaner code than most of the alternatives and builds pages that perform well.

Oxygen Builder is a new generation of WordPress Builder, it utilises the Gutenburg blocks and avoids the need for a Theme altogether. The code from Oxygen is a lot cleaner and lighter. In our side-by-side test of a long sales page, Beaver was slightly faster without browser caching and lazy loading (41 vs 32 avg Mobile PSI), but Oxygen was much better once caching was implemented on both (50 vs 80 avg Mobile PSI).

Avoid multi-purpose themes from marketplaces like Themeforest as these are usually bloated out of the box to accommodate all the options they have available. Also avoid using images sliders, galleries and other large media plugins. Some plugins can also be a drag on your pages load speed, so choose wisely and always consider if you could do something else.

Action:
Build your website as simply as possible, get a WordPress expert to assess if your website can be simplified to reduce code bloat.

Scripts, CSS & Loading Priority

Lazy Loading & Preloading improve the user experience by only loading initial what is required for the user to start interacting with the website, but then pre-loading what they may look at next so that when a user click-through to the next page it is ready to go.

Tag Manager loads tracking scripts (and other scripts) asynchronously, which means they don’t hold up the rest of the page and just fire when they are ready.

Hotjar and other heat-mapping user behaviour tools provide really valuable data for improving user experience and conversions, especially for a new design. But they slow down the page load speed, so remove these codes when you don’t have an active test running.

Recaptcha Anti-spam is another useful tool that unfortunately slows down the page load speed. Consider replacing this with Cleantalk Anti-Spam which doesn’t slow down the website speed.

Opt-ins & Pop-ups can often increase conversions, opt-in and leads. But they can also create a horrible user experience and slow down your website. Choose in-obtrusive pop-overs, use a lightweight privacy pop-up plugin. Don't shift the layout of the page or you will hurt your CLS score. Delay offers for a few seconds after the page loads and only use a screen take-over for exit-pops. Especially on mobile, pop-ups should cover a small part of the screen, not hide the main content and should be easy to close.

For opt-in forms, you are usually better to use a lightweight form builder such as Gravity forms and integrate that with your CRM rather than use the CRMs plugin.

Chat boxes and live chat widgets can be great for capturing leads and assisting sales, but remove them if your customers don’t use them. A lot of these slow down the page significantly. Crisp is a lightweight option and the API integrated versions of support tools are sometimes not too bad. The scripts for these can often be added to Tag Manager.

Conversion tracking tools can provide valuable data about how people are finding your business and how users from different sources behave, but these services slow down page speed, so if not being used, they should be disabled.

Prioritize & Minify CSS and Javascript. This is usually done by the caching plugin to reduce the file size and makes sure that the important elements are loading first. Sometimes however this can cause issues on the site and the code needs to be adjusted for this to work without error.

Combining CSS & Javascript is not necessary with modern servers as they supply all files in a single request now and so you avoid the potential issues of combining them. But older servers still require this to be done to reduce load time.

Optimising Images and File Size for faster pages

Media & Filesize

Websites with a small file size load faster so reducing the file size is an important consideration. Images should be compressed to the smallest possible file size and converted to webP format for mobile devices. Remove unnecessary scripts, plugins, fonts, font weights, and any other files not needed on the page.

Reduce clutter on the database to improve the servers ability to serve the files required for the page, so delete unused plugins and themes and any other unnecessary database entries.

Consolidate Fonts & Font-weights. Quite often webpages are loading font versions and weights that are not used on the site at all. Make sure you are only loading what is being used. And consider reducing the number of different fonts and font sizes you use on your website.

Image sliders, background videos & large design elements add a lot to the file size of the page and also usually rely on scripts which adds more to the load time of the page. Avoid using these things and keep the page design simple.

Image Scaling & Compression makes a huge difference to the load time. There is no point in loading a large, super-high-resolution image if a smaller, compressed image will look exactly the same. It is best to compress images before uploading them using Tinypng, however, there are a lot of plugins such as Smush Pro, Imagify & Shortpixel which will also compress images on your website or as you upload them.

WebP Next-gen image formats allow your page to load a smaller version of each image, optimised for mobile screens, this improves the load time and speed scores for mobile (which is the most important for most sites). WebP Express is a great free plugin for this, but a number of other optimisation tools support this.

Listen to Podcast Episodes on this topic

How Website Performance Can Boost a Growing Online Business

How Website Performance Can Boost a Growing Online Business Stephani Roberts from the Audacious…

How Page Builders Affect your SEO

Choosing a Page Builder is a big strategic decision that could affect the performance…

How A Responsive Website Affects your SEO

The success of an SEO campaign strategy is dependent on several things, one of…

Three Things You Should Work On Your Website To Grow Your Business

A lot of people focus on just their marketing to grow their business. They…

Here Are Some Of Our Favorite Resources!

WPRocketLearn More

Media & Filesize

WP Rocket is the most powerful web performance plugin in the world. It will instantly reduce your load time and boost your Google PageSpeed and Core Web Vitals scores. No coding skills needed.

CleanTalkLearn More

CleanTalk

CleanTalk is a Cloud-Based spam filtering service that allows you to protect your website from spam without slowing down your website. CleanTalk provides spam protection that invisible to visitors without using captcha or other methods where visitors have to prove that they are real people. No Captcha, no questions, no counting animals, no puzzles, no math. Fight spam!

CloudwaysLearn More

Cloudways

Focus on your business and avoid all the web hosting hassles. Our managed hosting guarantees unmatched performance, reliability and choice with 24/7 support that acts as your extended team, making Cloudways an ultimate choice for growing agencies and ecommerce businesses.

NitropackLearn More

NitroPack

NitroPack is the #1 all-in-one speed solution in the world, optimizing 111,000+ websites from all kinds of industries. Achieve quick load times, improved Core Web Vitals, and a better user experience in less than 5 minutes without writing a single line of code.

Free Training - Learn the 5 Fundamentals of a High-Performance Website

It’s easy to build a website that ‘looks nice’. But does it make you money?

Do you feel like your website could be performing better as a money-making asset for your business?

Feel like it’s time to level up your website, but not sure where to start or what needs to change?

All articles in this category

The Most Common Cause Of A Slow Website Page Speed

Are you losing customers to sluggish page loads? A study by Google revealed that…

WordPress Caching Explained Simply - How It Speeds Up Your Website

We can all agree that one of the most irritating things when browsing a…

How To Choose A Good WordPress Theme For Speed?

A common question we get asked is what WordPress theme is the best to…

How Website Performance Can Boost a Growing Online Business

How Website Performance Can Boost a Growing Online Business Stephani Roberts from the Audacious…