5 Simple Ways to Measure, Monitor and Improve Site Speed

Taking action to create an optimally fast website speed is important for many reasons, such as user experience, conversion rate, loyalty, and not least, search engine ranking.

If you run a website, I shouldn’t really have to tell you how important it is to improve site speed. Not only for your website performance, but also just simply the experience user have.

No one likes to wait for a page to load. Slow web page loading is definitely in the top 10 reasons why people are leaving your website.

Even small improvements make a big difference. Google will tell you that a one second speed increase can increase conversions for mobile sessions by up to 27%.

To put that in perspective if your average conversion rate is currently 2.0% and your average site speed is 3.0 seconds, then getting it down to 2.0 seconds could increase your conversion rate to 2.5% straight away, and if nothing else changed (traffic & AOV) then it’s equivalent to 27% increase in revenue.


Steps to improve site speed

In this guide I am going to explore 5 key areas you can tackle to improve your site speed. Let’s cut to the chase, they are not 5 minute tasks that will magically speed up your website.

You might get lucky and find that something simple is heavily affecting your site speed, this does happen. But to get to that ideal site speed it will take some time, and some digging and detailed work. You may even want to hire someone in to do this for you.

1: Review your web hosting

2: Enable performance features

3: Reduce code bloat

4: Optimize your media

5: Improve content structure

But before we get into these, let’s look at the reasons why you should put the effort in.


Practical Benefits of Improving Site Speed

User experience

A fast website creates a good first impression for visitors and makes them more likely to stay and explore. A slow website can frustrate users and make them leave before they see your content or products. 

According to Google, 53% of mobile users abandon sites that take longer than 3 seconds to load.

Conversion rate

The speed of your website can also affect how many visitors take action on your site, such as signing up for a newsletter, making a purchase, or contacting you. A study by Akamai found that a 100-millisecond delay in website load time can hurt conversion rates by 7%. Conversely, if you improve your site speed you can boost your conversions and revenue. For example, Walmart discovered that improving page load time by one second increased conversions by 2%.

Loyalty

Having a fast website can also help you retain your customers and encourage them to come back. A survey by Econsultancy revealed that 79% of online shoppers who are dissatisfied with website performance are less likely to buy from the same site again. On the other hand, a fast and smooth website can increase customer satisfaction and loyalty, which can lead to repeat purchases and referrals.

Search engine ranking

Site speed is also an important factor for SEO, as Google considers it as a signal of quality and relevance. A fast website can help you rank higher on Google’s search results page, which can drive more organic traffic to your site.

Google also uses a set of metrics called Core Web Vitals to measure the user experience of web pages, and site speed is one of them. Starting from June 2021, Google will use Core Web Vitals as part of its ranking algorithm, which means that having a fast website will be even more crucial for SEO.


Measuring Site Speed & developing a report

To improve site speed, you first need to measure it and report upon which areas need attention. It’s a good idea to screenshot your current site speed reports, so that when you do some work and look again, you can see what the improvement was.

One of the key indicators is called Core Web Vitals these are a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.

As well as trying to pass Core Web Vitals, you are going to want to review and fix the highlighted issues that come up in the reports. You will find that different tools report slightly different things, because of the way that they test. Remember than not everyone is using the same device, so in real life site speed is not fixed – this is why it’s important to test in several different ways.

Warning, it’s going to get technical and some people might find this overwhelming at first, but stick with me and I will try to simplify it and keep it actionable. After all you just want your site to be faster, you don’t need to become an expert in highly technical IT.

There are lots of tools that you can use, if you haven’t had any recommendation, then try these:

Google PageSpeed Insights

Access This Tool

It’s considered the industry standard by most web developers and measures the performance of your web pages on both mobile and desktop devices. It provides recommendations on how to improve them.

You will find that the scoring system is quite harsh and even if you think your site is quite quick, you might find your results quite weak. It is possible to get a very high score though, if you follow the reported issues and fix them.

GTmetrix

Access This Tool

This tool has been around for a long time and has an impressive interface and reporting model. It has some interesting Pro features like being able to test with different connection types.

You will tend to find that the GTmetrix score is more generous than Google PageSpeed Insights. This can be a good and a bad thing, and you will want to put the difference between them into context.

Pingdom Website Speed Test

Access This Tool

This much simpler tool allows you test from different locations from the input screen and gives a much simpler set of results which I find to be middle of the road in terms of how critical they are, which is good if you want to do some quick testing without getting in too deep.

It doesn’t differentiate between desktop and mobile though, so take it with a pinch of salt.


Step 1: Review your web hosting

In many cases, shared hosting packages are a big reason why your site is slow. Shared hosting packages have heavy limitations on number of processes. Basically if you have shared hosting, your site is being throttled as much as possible to allow the host to sell the server to as many people as possible.

If you are using WordPress, Joomla, Drupal, or another self-hosted web platform, then you will want to look at your hosting and potentially migrate to a less throttled service to improve site speed.

If you are using Shopify or another fully hosted solution, then skip this step as there’s nothing you can do about your hosting without moving.

Beware of ‘Popular’ Hosts

Just because a web host is popular, does not make it a good choice. GoDaddy, Ionos, 123reg and some others have made a popular name for themselves but I have found the experience with them to be nothing short of frustrating.

I use SiteGround, they are by far the best host I have ever used and migrating to them is easier than you think. Not only is their hosting fast, their UI is intuitive and their support is 1st class.

When you migrate, your first year is really cheap, so you’ll probably actually find you save money from the beginning whilst upgrading to a better service.

Improve site speed with Siteground Hosting

You will likely see a big site speed increase from moving alone, before any modifacations, and you might even find it to be cheaper overall because of SSL and mailboxes being included.

To my web clients I also recommend Rocket.net and Cloudways. These are more premium than SiteGround and offer even better performance.

Shared vs Dedicated Hosting

Anyone looking for really fast site speed won’t find it with cheap shared hosting. Managed services, or dedicated servers offer the best potential, but come with a much higher price tag.

If you are small business used to paying $10-15 per month for your hosting, then suddenly jumping up to 16 core, 500Gb SSD private server at $400 per month is going to seem a step too far.

But if you are running a 6 figure online store and want to grow to 7 or 8 figures, then you shouldn’t be scrimping it up and paying less than $200 per year for your web hosting. It’s a false economy.

You might just find that upgrading to a low spec managed server with SiteGround Cloud Hosting at about $50/month gives you the performance boost you needed with little work.


Step 2: Enable performance features

For open-source software, performance tools are a must. If you are running Shopify, Webflow, Bigcommerce, Wix, Squarespace or some other hosted platform, then there will be an athorised addon for site performance. But it will be more limited in nature because it cannot affect the core platform.

Performance tools offer a range of features that help to improve site speed:

  • Caching: server and browser caching is where assets and code are stored to save loading them each time a resource is requests, it speed up browsing, but needs careful configuration.
  • Database cleanup: This feature helps to clean up your database, removing unnecessary data and optimizing its performance.
  • CDN support: A Content Delivery Network (CDN) helps to speed up the delivery of content to users by distributing it across multiple servers.
  • Media optimization: This feature helps to optimize the loading of media files, such as images and videos, on your website – see more about this in step 4.
  • Critical CSS: Critical CSS is a technique that involves identifying and inlining the CSS rules that are necessary to render the above-the-fold content of a page.
  • GZIP Compression: GZIP compression is a method of compressing files to reduce their size, which can help to speed up the loading of web pages.

WordPress Tools

There are 5 tools that I recommend with WordPress, there is not really one ‘perfect’ setup, and again it depends upon how much you want to spend and how intensive your website is on requests.

SiteGround Optimizer

If you take my hosting suggestion and use SiteGround, they have their own performance tool. SG Optimizer does a really good job without spending any additional money.

SG Optimizer has really good caching features including a memcache which is managed within the hosting space.

It is not perfect though and has some missing features found in premium tools. You may also find that it conflicts with plugins you end up adding. This could mean you might end up switching off some of the features.

Note, you cannot use this tool with other web hosts.

Get SiteGround Optimizer.

WP Rocket

This premium tool for WordPress is relatively easy to use and will improve your site speed straight away.

It has a lot of configurable options, and you will need to follow their guidelines to get the setup right. If you are not passing Core Web Vitals, then adding WP Rocket will give you the tools to achieve that.

Get WP Rocket | Learn About WP Rocket

Perfmatters

This much more lightweight plugin has many of the highly technical features that you will need to speed up a slow website, whilst not being overbearing and hard to configure.

Note: We use Perfmatters on this website, combined with Siteground Optimizer.

Get Perfmatters | Learn About Perfmatters

FlyingPress

Yet another premium tool with excellent features.

Get FlyingPress

WP Optimize

I use WP Optimize alongside SiteGround Optimizer and use it to clean the database regularly. It has caching and other performance features, but the cleaning feature is the best one of note.

Get WP Optimize


Step 3: Reduce code bloat

Code bloat refers to the excess code in a website’s backend that isn’t necessary for its functionality. This can include redundant or unnecessary scripts, oversized libraries, and excessive inline styling. While each piece of code might seem insignificant on its own, collectively, they can significantly slow down your website.

The primary consequence of code bloat is reduced site speed. Each unnecessary line of code adds to the time it takes for a browser to download and process the page. In a digital landscape where speed is king, even a few extra seconds can lead to increased bounce rates, decreased user satisfaction, and lower search engine rankings.

Identifying Code Bloat

Identifying the code bloat process involves analyzing your site’s code to pinpoint unnecessary or inefficient elements that could be slowing down your site. Here’s how you can go about this

Using Browser Developer Tools

These tools can help you see which scripts, CSS files, and other elements are loading on each page and how long they take to load. Chrome’s DevTools, for instance, offers insights into your site’s performance, network activity, and resource loading times.

Analyzing with Website Audit Tools

There are several online tools designed to analyze your website and highlight areas of improvement, including potential code bloat:

  • Google PageSpeed Insights: This tool provides a detailed analysis of your site’s loading time and offers suggestions for improvement, including minimizing code.
  • GTmetrix: GTmetrix goes beyond basic speed tests, offering detailed reports that can help identify specific files and scripts contributing to code bloat.
  • WebPageTest: This tool allows for more advanced testing, including multiple test runs and detailed performance breakdowns.

Checking for Inline Styles and Scripts

Inline styles and scripts, while convenient, can add unnecessary weight to your pages. Manually inspecting your site’s HTML or using a tool like W3C Validator can help identify inline code that could be externalized.

Regularly reviewing your website’s codebase is essential. Look for:

  • Unused or duplicate CSS/JS files.
  • Outdated libraries or frameworks.
  • Excessive inline styling or scripting.

Strategies for Reducing Code Bloat

After identifying the areas of code bloat on your website, the next step is implementing strategies to reduce it. These methods range from simple tweaks to more advanced optimizations, all aimed at streamlining your site’s code for better performance.

Minimize the Use of Heavy Frameworks and Libraries

Before integrating any framework or library, assess whether its functionality is essential to your site. Sometimes, native HTML, CSS, or JavaScript can achieve the same results without the extra weight.

If a framework is necessary, opt for lighter alternatives. For example, consider using Vue.js or React instead of Angular for simpler applications.

Optimize CSS and JavaScript

  • Minification: Use tools like UglifyJS for JavaScript and CSSNano for CSS to remove unnecessary characters from your code without changing its functionality.
  • Tree Shaking: This technique removes unused code from your scripts. Tools like Webpack and Rollup can help with this, especially in JavaScript modules.
  • Concatenation: Combine multiple CSS or JavaScript files into one. This reduces HTTP requests and can significantly speed up your site.

Avoid Inline Styles and Scripts

Move inline styles and scripts to external files. This not only reduces code bloat but also allows for better caching by the browser. Instead of multiple images, use CSS sprites to combine images into one. This reduces HTTP requests and can help with faster page loads.

Streamlining WordPress Websites

Regularly review your WordPress themes and plugins. Remove or replace those that are not essential or are poorly coded. Use plugins like WP-Optimize to clean up your WordPress database, removing unnecessary data that can slow down your site.

For more advanced optimization, implement code splitting to divide your JavaScript into smaller chunks that are loaded as needed. Lazy loading delays the loading of non-critical resources at page load time. Moreover, use CDNs to serve static resources like CSS, JavaScript, and images. This reduces the load on your server and can decrease loading times.


Step 4: Optimize your media

Media files like images and videos are often the largest contributors to page size, significantly affecting site speed. Optimizing these media files is crucial for a faster, more efficient website.

Image Optimization Techniques

Large media files take longer to load, slowing down your site. Understanding the impact of these files is the first step in optimization. Also, different formats and compression levels can dramatically change file sizes without compromising quality.

Use formats like JPEG for photographs and PNG for graphics with fewer colors. Consider newer formats like WebP for better compression and quality. Tools like TinyPNG or ImageOptim can reduce file sizes without a noticeable loss in quality. 

You should also use different image sizes for different devices. HTML5 offers the ‘srcset’ attribute, allowing browsers to choose the most appropriate image size.

The best practice is to distribute media via CDN. CDNs can host your media files, delivering them from the server closest to the user, reducing load times. Lastly, use Scalable Vector Graphics (SVGs) for icons and shapes. They are smaller in size and scale without losing quality.

WordPress Media Optimization

WordPress, being one of the most popular content management systems, offers various ways to optimize media:

  • Use WordPress Image Optimization Plugins: Plugins like Smush, EWWW Image Optimizer, or ShortPixel can automatically compress and optimize images as you upload them.
  • Choose the Right Image Dimensions: When uploading images to WordPress, ensure they are not larger than the maximum display size needed. WordPress also allows setting default sizes for thumbnails, medium, and large images.
  • Leverage WordPress’s Built-in Features: WordPress automatically creates multiple sizes of each image uploaded. Use the appropriate size for different contexts (thumbnails, full-size, etc.).
  • Optimize Background Processes: Plugins that regenerate thumbnails or optimize old images can slow down your site if run during peak hours. Schedule such tasks during low-traffic periods.

Shopify Media Optimization

Shopify stores, particularly those with a large number of product images, can benefit greatly from media optimization:

  • Use Shopify’s Built-in Image Editor: Shopify provides a basic image editor for cropping and resizing images. Ensuring images are the correct size before uploading can save loading time.
  • Compress Images Before Uploading: Tools like TinyPNG can be used to compress product images without losing quality before uploading them to Shopify.
  • Be Mindful of Image Sizes: Shopify recommends using 2048 x 2048 pixels for square product photos, which is an optimal size for high-resolution displays.
  • Use Shopify’s CDN: All images uploaded to Shopify are automatically served via their CDN, which helps in faster loading across different geographical locations.

Step 5: Improve content structure

Properly structured content loads more efficiently, as it allows browsers to render the page progressively. A well-organized site helps users find what they need quickly, reducing bounce rates and improving engagement. Here’s how you can optimize your content structure:

Prioritize Above-the-Fold Content: 

Ensure that the content at the top of the page (above the fold) loads first and includes the most important information. This gives users something to engage with while the rest of the page loads.

Optimize Content Hierarchy: 

Use HTML5 semantic elements like <header>, <footer>, <article>, and <section> to structure your content logically. This not only aids in SEO but also in faster rendering.

Implement Lazy Loading: 

Lazy loading defers the loading of non-critical resources at page load time. This is particularly useful for images and videos that appear below the fold.

Stabilize Layout During Load:

Ensure elements like images and ads have defined sizes so that they don’t cause unexpected layout shifts as they load.

Avoid Inserting Dynamic Content Above Existing Content:

Dynamically loaded content can push down existing content, causing layout shifts. Be mindful of where and how you load dynamic content.

Responsive Design: 

Ensure your site is responsive, meaning it adjusts smoothly to different screen sizes. Mobile users often have less bandwidth and processing power, so efficient content structure is even more critical.

Optimize Touch Interactions: 

Make sure buttons and links are easy to interact with on touch screens. Larger touch targets can improve the mobile user experience.

Regularly review your site’s content structure. Remove or update outdated content and ensure new content adheres to your optimization strategies. Use Web Analytics to analyze user behavior to understand how they interact with your content and make data-driven decisions to improve structure and layout.


Conclusion

I hope this guide has provided you with good information and you have started the work.

Understanding the benefits of improving site speed should prompt you to prioritize it. Simply follow the steps and try it out. I suggest testing on a development copy of your website if possible.

Should you have any questions about implementing these suggestions, please post them in the comments.

Thanks for reading, follow me, please share this, and subscribe below to give me some kudos.

Chris Bradshaw

Share this

What to read next...

Tools you might like...

No Comments...

Leave a Reply

Your email address will not be published. Required fields are marked *

About the author

I created Ecom Uprising because I spent more than a decade searching the internet to find the answers I needed to grow the businesses I was working for, and I wished there had been one easy to use resource with reliable information. So here it is.

Thanks for reading, Chris

Browse sections

Get more useful insight like this

** We 100% do not share details with third parties, nor do we spam our mailing list. Just useful insight **

Answers await...