Image – Source: Freepik
In this article, you will learn about the importance of regular speed tests and explore key testing tools and metrics. You will also see a practical performance audit with the interpretation of the results.
Ready to discover the key web performance optimization techniques?
Read this guide if you want to:
- Learn how to run your performance test and prioritize the key metrics (including the Core Web Vitals).
- Gain a clear understanding of the performance audits from PageSpeed Insights, Pingdom, and GTmetrix.
- Achieve a faster-loading site to enhance visitor experience.
- Optimize SEO performance and visibility on Google.
- Discover user-friendly plugins to improve your site’s performance in a few clicks.
Let’s get started on optimizing your online presence for peak performance!
Why You Should Test your Website Speed
Firstly, a page that may seem fast to you could be slow for others. Consistently fast load times ensure a great user experience for all visitors, improving positive interactions and encouraging visitors to come back.
Website speed plays a pivotal role in key business aspects:
1. Enhanced SEO Performance
Core Web Vitals measure aspects of user experience such as page loading speed, interactivity, and visual stability. By optimizing these factors, you can improve your website’s overall performance and increase its chances of ranking higher in search results.
Optimizing Core Web Vitals increases engagement, client retention, and improved website performance. Search engines like Google prioritize user experience when ranking websites. Consequently, they are more likely to rank these websites higher in search results, improving their visibility and traffic.
2. Improved User Experience and Outstanding First Impression
A speedy website impresses visitors from the moment they land on it. Quick-loading pages keep users engaged and satisfied, leading to higher retention rates.
A study conducted by Rakuten 24 reveals the significant impact of improving Core Web Vitals and other business metrics. As a result, they saw an improvement in the following KPIs:
- Revenue per visitor increased by 53.37%.
- Conversion rate improved by 33.13%.
- Average time spent on the page increased by 9.99%.
- Exit rate decreased by 35.12%.
This sets the stage for a positive browsing experience and reinforces the credibility of your WordPress site.
3. Optimized Conversions and Revenue
There’s a strong correlation between website speed and conversion rates. According to a study by Bidnamic, slower page loading times are directly linked to lower conversion rates.
Site speed and conversion rate – Source: Bidnamic
Essentially, a slow website can cost you money, as it discourages visitors from engaging with your content and completing desired actions.
3 Web Performance Tools to Use
It’s recommended to monitor and optimize your site’s speed to deliver a top-notch experience for every visitor. To audit your performance, you can use one of these three tools that are useful for experts and novices alike.
PageSpeed Insights (Free)
PageSpeed Insights analyzes the performance of your web pages and provides suggestions to improve speed and user experience. It focuses on Core Web Vitals and other key performance indicators (KPIs).
Core Web Vitals – Source: PageSpeed Insights
PageSpeed Insights evaluates web pages and assigns a grade out of 100, indicating their performance.
Overall performance score – Source: PageSpeed Insights
Additionally, it includes a diagnostic section with actionable improvement suggestions. Use it to pinpoint areas for enhancing Core Web Vitals and to receive a detailed checklist of changes to implement.
GTmetrix (Freemium)
GTmetrix provides insights into page size, number of HTTP requests, and breakdowns of content types such as images, JavaScript, and videos. It also offers total loading speed metrics.
Performance report from GTmetrix – Source: GTmetrix
Use it to customize your tests based on device and server locations, allowing for tailored analysis, like testing from Vancouver on an iPhone X.
Pingdom (Free)
Pingdom offers insights into content size by content type, overall page size, page loading time, file request tests, and server response codes. However, it lacks information on Core Web Vitals.
Performance report from Pingdom – Source: Pingdom
Use it for monitoring website uptime and availability, along with measuring speed. There is an alerting system for immediate notifications if any issues arise with your site.
Performance Metrics: What to Monitor When Conducting an Audit
During a speed audit, it’s important to track specific metrics to measure performance accurately. Here are the key metrics to monitor, providing valuable insights for informed decision-making and targeted improvements.
Largest Contentful Paint (LCP)
It measures the loading performance of a web page by determining the time it takes for the largest content element to become visible to the user.
A fast LCP ensures that users quickly see the main content of a page, resulting in a positive user experience.
Cumulative Layout Shift (CLS)
CLS measures the visual stability of a web page by evaluating the unexpected layout shifts that may occur during the page load. It quantifies how many elements move around while the page is being rendered.
A low CLS score indicates a stable and visually consistent browsing experience with no shifts in content layout.
Interaction to Next Paint (INP)
It’s a Core Web Vitals metric that assesses page responsiveness.
A low INP means that the page consistently responds quickly to the vast majority of user interactions.
Loading Time
Loading time refers to the duration it takes for a web page to fully display its content after a user requests it.
In 2023, Tooltester found that the average web page load time was 2.5 seconds on desktop and 8.6 seconds on mobile. Those findings were based on analyzing the top 100 web pages worldwide.
Total Page Size
Total page size indicates the overall file size of a web page, including HTML, CSS, JavaScript, images, videos, and other resources. Monitoring page size helps identify heavy or unnecessary elements that may slow down loading times.
According to httparchive.org, in 2023, the average web page size was approximately 2.5 MB for desktop sites and 2.2 MB for mobile sites.
Median total page size on the web – Source: httparchive.org
Number of Requests
TAn HTTP request refers to any file, image, or resource that a browser needs to fetch to load a web page. This includes things like HTML files, images, CSS or JavaScript files. Every time a browser makes an HTTP request, it adds to the loading time. Therefore, cutting down on requests can really speed up how fast a page loads.
According to Web Almanach by HTTP Archives, in 2022, the typical web page made 76 requests for loading on desktops and 70 requests for loading on mobile devices.
Distribution of HTTP requests on the web – Source: WebAlmanac by HTTP Archives
How to Run a Performance Test
Keep in mind that various factors can impact the quality and accuracy of your results so it’s crucial to conduct thorough testing before analyzing the data.
Tips for running an effective performance test
To run effective performance tests, take into account these six key recommendations:
- Use an incognito window to ensure accurate results unaffected by browser cache.
- Test multiple pages throughout the website, not just the homepage, to assess overall performance.
- Prioritize mobile testing to address the increasing number of mobile users.
- Test across different devices to ensure compatibility and responsiveness.
- Conduct tests from various geographical locations to capture potential regional differences in load times.
- Run tests multiple times and calculate the average score to obtain a more reliable performance benchmark.
Ready to launch your performance test? Then follow those actionable steps:
Step 1: Choose your speed testing tool
Select the appropriate testing tool from options like Pingdom, GTmetrix, or PageSpeed Insights.
- Choose the appropriate test location to simulate different user scenarios.
Select different testing locations – Source: Pingdom
- Select the right device for testing, considering factors such as desktop, mobile, or tablet (mobile and tablet simulators are not available on Pingdom, but you can do it on GTmetrix and PageSpeed Insights).
Choose between mobile or desktop to run the test – Source: PageSpeed Insights
- Enter the URL of your website into the designated field within the chosen testing tool.
URL field to start the test – Source: Pingdom
- Initiate the audit to begin the performance test by clicking on the Start Test button for Pingdom or Analyze for PageSpeed Insights.
- Once the audit is complete, analyze the results.
Measuring Speed Test Results
Each performance tool provides KPIs, which offer valuable insights into a website’s performance. These KPIs help identify key issues affecting speed and overall user experience.
The results are usually organized as follows:
Overall performance score: This is a score out of 100 that provides an overall assessment of the website’s performance.
Core Web Vitals and other performance KPIs: These metrics are typically categorized with color-coding (red, orange, green) indicating performance levels. Red signifies poor performance, orange indicates room for improvement, and green represents satisfactory performance.
Overall performance score and Core Web Vitals – Source: GTmetrix
Diagnosis/Opportunity section: This section offers a comprehensive audit of the website’s performance. It highlights areas that require attention, along with recommendations on how to address these issues.
For instance, to remove render-blocking resources, PageSpeed Insights suggests optimizing your site’s CSS and JavaScript (which you can easily do with WP Rocket).
PageSpeed Insights mentions WP Rocket to eliminate render-blocking resources
“Passed Audits” section: Identifies aspects of the website’s performance that meet expectations.
Example of the Passed audits section – Source: PageSpeed Insights
Advanced data: Some tools like Pingdom or GTmetrix offer advanced data analysis, including which components contribute most to page weight and the number of requests per content type. This information helps identify heavy content and potential bottlenecks in the loading process.
Example of advanced data by Pingdom – Source: Pingdom
Analyzing Performance Results (A Real-Case Scenario)
Now that we’ve covered the theoretical aspects let’s delve into a practical example by conducting a real site audit. This hands-on approach will allow us to identify areas for improvement and strengths, providing valuable insights into optimizing website performance.
The performance was analyzed from a simple test site using the Twenty Twenty-Three theme and the audit was done with PageSpeed Insights.
Here are the main performance findings:
- Overall Performance: 72/100 mobile score (on average after running the test 10 times)
- First Contentful Paint: 2.4 seconds
- Largest Contentful Paint: 7.1 seconds
- Total Blocking Time:80 milliseconds
- Cumulative Layout Shift: 0.054
- Speed Index: 3.4 seconds
Example of performance KPIs – Source: PageSpeed Insights
How to interpret the results?
The analysis of the performance results indicates areas for improvement.
- The First Contentful Paint and Speed Index metrics are marked in orange, signifying a need for enhancement.
- The Largest Contentful Paint score is highlighted in red, indicating suboptimal performance that requires immediate attention.
Scrolling down to the diagnostics section, there are several actionable suggestions for optimizing website performance.
Flagged issues in the diagnostics section – Source: PageSpeed Insights
For this specific test, the following improvements were identified:
- Serve images in next-gen formats (WebP or AVIF): Use more advanced image formats like WebP or AVIF, which offer smaller file sizes without compromising quality.
- Efficiently encode images: Compress images to reduce their file size without sacrificing quality, resulting in faster loading times and improved performance.
- Serve static assets with an efficient cache policy: Using a caching plugin can help optimize website performance by efficiently serving static assets and reducing server load.
- Eliminate render-blocking resources: For better page loading speed and overall performance, think about including essential JavaScript and CSS directly in the webpage and delaying less important resources.
- Reduce unused CSS: Identify and remove unnecessary CSS code, to reduce the amount of data that needs to be loaded and processed by the browser.
Additionally, PageSpeed Insights includes a “Passed Audits” section that highlights aspects of the website’s performance that already meet best practices.
Example of a passed audits section – Source: PageSpeed Insights
Now, the goal is to achieve a green PageSpeed Insights performance score, along with green KPIs, starting from the Core Web Vitals grades. To do so, almost every audit must go under the “Passed Audits” section.
How to Optimize Performance
The most effective approach to optimize WordPress performance and address your performance audits is to implement these six easy steps.
1. Implement Caching
Caching is a technique used to temporarily store web page data, such as HTML pages and images, on a server or user’s device. Stored data can be quickly given to users instead of going to the main server every time. It improves performance and provides a better user experience, as users can access their content quickly.
The recommended tool you can use and why:
- WP Rocket – It’s one of the best caching plugins out there. After activating the plugin, caching is automatically applied to your website. There is nothing to do on your end.
2. Optimize CSS and JS Code
To enhance performance, it’s important to remove unnecessary elements and ensure clean, efficient coding practices. For example, you should remove development comments, unused CSS classes, and redundant JavaScript functions.
The recommended tool you can use and why:
- WP Rocket – Once again, this plugin handles the technical tasks for you. To optimize the code, simply check the boxes on its user-friendly interface, and the plugin will do the job.
Use WP Rocket to optimize CSS:
CSS optimization – Source: WP Rocket
With WP Rocket, you can also load JS deferred and delay JS execution:
JS optimization – Source: WP Rocket
3. Optimize Your Images
Images are often one of the main culprits for a slow site. It’s essential to compress images and serve them in the right format, such as WebP and AVIF. When optimizing images, make sure not to impact quality too much; you don’t want overly pixelated images.
The recommended tool you can use and why:
- Slider Revolution – This slider builder is likely the most advanced option available within the WordPress ecosystem. It empowers users to craft sliders from scratch using its powerful builder, all without the need for any coding skills. The new Velocity Engine is all about performance which improves markup, reduces file size, and uses less memory. Slider Revolution also comes with several optimization features, such as:
- Lazy-loading: Lazy-loading is a technique used to defer the loading of non-essential images until they are needed in the viewport.
- Defer JS loading: This allows the critical content of the page to load first, enhancing perceived performance and user experience.
- Optimize file size: Optimizing file size involves compressing files (such as images, CSS, and JavaScript) to reduce bandwidth usage and improve page loading speed.
Easily optimize the loading speed of your slider with Slider Revolution
- Imagify – It’s a user-friendly image compression plugin that reduces file sizes with minimal impact on quality. The compression process is automatic, requiring no action from you. As a result, your images are smaller, your web pages lighter, and your site faster. By using it, you’ll benefit from two key image optimization features:
- Smart compression mode: This option automatically compresses images, balancing performance and quality.
- Conversion to AVIF and WebP (next-gen formats): Imagify converts your image to WebP by default, but you can also choose to create an AVIF version.
Image optimization to boost performance – Source: Imagify
4. Choose a Reliable Hosting Provider
A reliable hosting provider ensures that your website remains accessible to visitors at all times with minimal downtime. Fast servers also contribute to quicker page loading times.
Check out our WordPress hosting guide for helpful tips and guidance when choosing your provider.
5. Select a Lightweight and Optimized Theme
Lightweight themes are designed to minimize unnecessary code and features, resulting in faster loading times and better overall website performance.
The recommended tool(s) you can use and why:
Consider using a lightweight theme such as OceanWP, Astra, or GeneratePress for improved performance. If you opt for a feature-rich (heavier) theme, ensure it includes built-in performance options.
6. Consider Using a Content Delivery Network (CDN)
A CDN helps improve website performance by storing your website’s content on servers around the world. This enables faster delivery of content to users worldwide, reducing latency and improving page loading times.
The recommended tool(s) you can use and why:
Top hosting companies often provide CDNs, which might be part of your plan. In any case, you may contact your host to check if they offer this service.
Alternatively, here are two popular CDNs you might want to think about.
- RocketCDN is ideal for beginners as they handle all installations and even create the CNAME for you.
- Bunny.net is an excellent choice if you’re also looking to optimize videos and images.
If you’re interested in learning more about page load speed and improving WordPress performance, check out our dedicated guide.
Bonus: Optimize Performance Further with WP Rocket and Imagify
Here’s a practical example of the performance optimization you can achieve by using the plugins mentioned in the previous section.
WP Rocket and Imagify were installed on the test site. The goal was to improve performance and move the red audits to the “passed audits” section.
When implemented, they helped achieve a score of 98/100 on PageSpeed Insights (against the 72/100 initial score).
98/100 on PageSpeed Insights (with WP Rocket and Imagify) – Source: PageSpeed Insights
Most of the previously red issues from the diagnostics section turned to green under “Passed Audits”.
The previous issues are now in the “passed audits” section – Source: PageSpeed Insights
Optimizing performance doesn’t require advanced coding skills. With the tools and plugins mentioned in the section, speed optimization becomes much more manageable and accessible to everyone.
Final Thoughts on Measuring Performance on WordPress
Having a fast website is essential for giving users a great experience. If your site takes forever to load, people might leave right away. Speed also matters for search rankings. When your website loads fast, search engines like Google tend to rank it higher in search results.
Using tools like PageSpeed Insights, GTmetrix, and Pingdom helps you see how fast your website is and where you can make improvements. By focusing on the right KPIs, you can make your page load faster and more appealing to users.
To help you in this speed optimization journey, you can use plugins like WP Rocket for caching and Imagify for compressing images.
