Website visitors are quick to abandon your site if it doesn’t load nearly instantaneously. If your website sees high traffic volumes, those abandonments can be extremely costly. As a website owner, you need to stay on top of your website’s performance to make sure you’re meeting your visitors’ expectations of page load time. Otherwise, you risk losing them before they’ve even begun shopping.
What is website performance monitoring?
Website performance monitoring is the practice of regularly tracking key metrics related to your site’s technical performance, such as server performance, time to first byte, and error rate, to ensure a smooth experience. This practice allows you to uncover systemic or spiking issues that may affect your users’ browsing experience, leading to high bounce rates and reduced revenue.
There are many techniques that you can use to monitor various aspects of your website’s technical performance. These techniques fall into two broad categories: synthetic monitoring and real user monitoring.
What is synthetic monitoring?
Synthetic monitoring is when you use scripts to simulate the user’s experience instead of relying on actual user data. Synthetic monitoring allows you to detect and fix website availability and performance issues before they become a real problem for users.
With synthetic monitoring, you can test a new landing page or page feature before launch to ensure the end-user experience is perfect at release time. Synthetic monitoring involves three types of monitoring: uptime, page speed, and transaction.
Uptime monitoring
Uptime monitoring refers to continuously tracking your website’s availability and responsiveness. Uptime monitoring tools fire an HTTP request at regular intervals (anywhere from 30 seconds to 24 hours) to a specific URL, looking for a positive response. The HTTP request simulates the first step of a browser loading a page.
If a response is received, the page is considered available. If the tool doesn’t receive a response, it logs a downtime incident. Uptime monitoring tools can also pinpoint the exact cause of the site incident (such as a page being down), which can help you resolve the error.
Page speed monitoring
Page speed monitoring runs regular tests of the website’s page load speeds and looks for changes. Marketers can do this manually with a tool like PageSpeed Insights or at automated, regular intervals with a tool like Boostify. And for a more detailed option that layers on actual interactions from real users, a tool like our web performance dashboard can be helpful.
Transaction monitoring
Transaction monitoring ensures all user interactions are working as they should by running scripts to simulate a number of user activities. Don’t let the name mislead you—transaction monitoring doesn’t only review purchases. Transaction monitoring tools audit sign-up forms, cart checkouts, log-ins, and other similar interactions.
A good transaction monitoring tool will perform these interactions on different devices, locations, and servers. It is a more robust version of uptime monitoring.
What is real user monitoring (RUM)?
Real user monitoring (RUM) captures and analyzes every user’s action on the site by installing JavaScript code on all your web pages. RUM enables you to gain insight into the real user experience, yielding valuable information synthetic monitoring may not have picked up. For example, users from a specific country may experience a slow load time, or users may get lost in the checkout process.
The risk with real user monitoring is that you only discover issues once users experience them on the live website. But, when combined with synthetic monitoring, real user monitoring can give you a full picture of your site’s performance.
Reactive vs. proactive monitoring
Reactive monitoring is what it sounds like: waiting for something to go wrong before fixing it. This could be a customer complaint that they can’t access the site or your monitoring tool alerting you to a network issue. Reactive monitoring is less costly to implement than a more proactive approach. However, it also means that performance issues are likely to persist for longer on a live website, which can lead to customer frustration, extended periods of downtime, and significant lost revenue.
By contrast, proactive monitoring takes a more controlled approach. Website owners can set up various levels of alerts advising them of potential issues. Proactive monitoring requires a more active approach and typically involves a larger investment than reactive monitoring, but it allows you to anticipate and prevent issues before they happen, saving your business’s reputation, costly downtime, or user frustration. It’s a constant process, but for many businesses, it’s worth the investment.
Contextualizing issues: the RED method
Simply collecting data isn’t enough to improve your website performance. You need actionable insights to understand where to make improvements. The RED method helps you uncover the “why” behind service issues, making it easy to understand what’s going wrong and how to fix it quickly. RED is an acronym for assessing three common factors for performance issues:
- Rate. Rate refers to the number of service requests per second. Essentially, it tells you how often users visit your site. A spike in visits can overload your servers, leading to weakened performance.
- Error. Errors are the number of failed requests per second. Errors mean something didn’t load correctly. An increase in errors indicates that there may be bugs in your website’s code.
- Duration. Duration is how long each service request takes. If your site's duration increases, it may be dealing with large files or server response issues.
Not all performance monitoring tools organize their data in the RED framework. But by understanding this framework as a website owner, you can put the outputs from these tools into more context.
Common web performance issues and solutions
- Slow page speed
- Inefficient or outdated code
- Slow or bloated third-party applications
- Slow server response time
- Server errors
Here are the most common website performance issues you might encounter and how to solve them:
Slow page speed
Slow page speed or load time is usually a result of page density. The less heavy “stuff” a page has on it, the less data it needs to send to the user, and the faster it’ll load. The most common culprit for heaviness is images. There are a few ways to fix slow page speed:
- Focus on first contentful paint (FCP): By prioritizing FCP, you can ensure that you load the first elements on a page. This signals to site visitors that the page is loading quickly, which in turn can help keep them from bouncing off the page. We follow this principle here at Shopify, which is why our stores are the fastest in the world—and fast by default—rendering 1.8x faster than stores on other platforms. Plus, 93% of brands on Shopify have a fast storefront, more than any other major commerce platform.
- Reduce image sizes: The most common image-size issues are file type and resolution. Photo-resolution PNG images are the largest offender. Aim to reduce your image files to 100–300 kB, depending on the size and placement of the image.
- Stop resizing images on responsive pages: If an image is 1280px on desktop but resizes to 800px on mobile, resizing can contribute to a slow page load. Instead, use a size that works on both desktop and mobile.
- Implement lazy loading: Lazy loading allows websites to wait to load non-critical aspects of the page until they’re needed. Focus on ensuring the entire top of the page loads immediately and lazy-load elements further down the page.
Inefficient or outdated code
Many sites dealing with website performance issues need to look at their code. Bloated JavaScript or CSS is very common and leads to slow load times and a frustrating user experience. The most common culprits are large themes and outdated custom JavaScript.
To fix inefficient or outdated code, implement a system of regular code reviews every six to 12 months. In these reviews, you should identify and remove unnecessary or unused HTML files and review JavaScript and CSS files for redundancies or minification.
Slow or bloated third-party applications
Third-party applications can cause major issues because they rely on querying other websites outside your own. Whether they rely on a third-party server to load a chat widget or include code for a heatmap that increases load times, third-party integrations can be a key source of slowdowns.
To prevent these issues, conduct a regular review of third-party code impact, perhaps as part of an overall code review. You can use Chrome Developer Tools to see where problematic third-party plug-ins or widgets exist. Remove any that are unnecessary or redundant.
For codes that need to stay, review opportunities to delay loading or incorporate their code into a tag management system such as Google Tag Manager.
Slow server response time
Websites that serve many countries need to ensure consistent website performance for all users in all countries. However, if your server is in the United States and traffic comes from a different continent, international users may experience slower load times than US users. Additionally, too many people trying to access one server can lead to slow response times or even a complete outage.
That’s just one reason why here at Shopify, we’ve gone to great lengths to bring our servers closer to where the action is happening. We expanded our servers to locations across Europe, which helps sites render closer to users—and keeps businesses closer to customers. The result? Shopify has the fastest server speed in commerce—2.8x faster on average.
To fix a slow server response time, use a CDN (Content Delivery Network), which uses servers spread across multiple countries to improve load times and deliver a consistent experience. At Shopify, we have a built-in CDN backed by CloudFlare and enterprise-grade servers available for all customers. Additionally, ensure your server can handle high traffic volumes—especially during peak seasons.
Server errors
A server error indicates an issue with where the website is hosted, as opposed to the website’s code itself. The most common reasons for server errors are provider outages or DNS errors.
If the problem is a DNS error, review your DNS settings. DNS errors are most common when businesses migrate platforms or add subdomains.
If the problem is due to a provider outage, inform your server provider, as they will need to address it. If you host your own servers and have an outage, discuss solutions with your IT team.
Website performance monitoring tools
Today, there are many capable tools for monitoring web performance and a wide range of price points:
- Website performance dashboard: Free for Shopify customers
- PageSpeed Insights: Free
- Datadog: $0–$34+ per month
- Pingdom: $10+ per month
- Uptrends: $17.50–$58.36+ per month
- FreshPing: $19–$119+ per month
- SolarWinds Web Performance Monitor: $1,275+ per month
- New Relic: Request a quote
Factors affecting the differences in price are the frequency of monitoring checks, the number of monitoring features, and the volume of traffic the tools monitor (higher-traffic websites can be more expensive to monitor). If you’re just getting started, a free option like PageSpeed Insights or Datadog is likely sufficient. As your company and website scale, a more costly option may be necessary.
Monitor and boost website performance with Shopify
A fast website is the lifeblood of a strong business. By keeping up on your website performance monitoring—and investing in the right technology—you’ll set your business up for success. Not just in the short term, but for years to come.
Poor site speed can have a major impact on conversions. Which means the reverse is true: improving your site speed can boost them.
See how your site speed stacks up—and get a custom report for your business—at Shopify.com/Sitespeed.
Monitor website performance FAQs
What is the best strategy for website performance monitoring?
First, decide which performance metrics matter most to your business. Then, review which tools and processes you’ll need to track these functions and metrics, combining synthetic monitoring with real user monitoring. Set up alerts for the right teams to act on emerging trends, and then make the data easily accessible with dashboards.
What should I consider when choosing website monitoring tools?
When choosing a modern web monitoring tool, consider monitoring frequency, synthetic and real user monitoring capabilities, the ability to send real-time alerts, metrics customization, the ability to test from different locations, data visualization and accessibility, and key platform integrations.
How do I improve the end-user experience?
You can use performance monitoring to improve the end-user experience by focusing on performance metrics that most impact the user, such as Time to First Byte (TTFB) and Time to Interactive (TTI). These metrics track when the user begins to see the page load (TTFB) and when they can click elements on it (TTI).
