2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Delighting customers is the secret to retail success. Providing a fast, consistent online experience has been shown to significantly improve every metric retailers care about—from conversions and revenue to retention and brand perception.
This article outlines:
Page speed affects online retail business data
How to Compare Your Website Speed to Your Competitors
Performance optimization primer: Analyze what's slowing down your page, from images and third parties to stylesheets and custom fonts, and what you can do about it
For most online retailers, page speed has a measurable impact on the bottom line. Even small improvements can significantly improve metrics like conversion rates.
But what about your website? To understand the impact of page speed improvements on your own website, you need to look at your own Real User Monitoring (RUM) data.Association diagram is a great way to communicate performance to everyone in the business. You can use RUM to create these visualizations, making it easy for even the least technical stakeholders to see how performance correlates to user engagement and business metrics like bounce rate and conversion rate.
The Correlation chart gives you a histogram view of all user traffic broken down into groups based on performance metrics, such as Start Render, Maximum Contentful Paint, and Interactions Before Next Paint. The chart includes an overlay that shows you the user engagement metric or business metric (such as bounce rate or conversion rate) associated with each group. This lets you understand the relationship between performance, user engagement, and business at a glance.
In this correlation graph, you can see that the conversion rate peaks at just over 6% at a Large Contentful Paint (LCP) time of 1.1 seconds. As the LCP slows, the conversion rate drops rapidly, falling below 3% at 2 seconds. As can be seen above, optimizing site performance to reduce LCP times can lead to higher conversions overall and more revenue.
With SpeedCurve SyntheticWith comprehensive performance monitoring like , you can run page speed tests on any other site just like you would on your own. That means you get all the same rich, awesome data, screenshots, and slideshows for comparison.
YourCompetitive BenchmarksThe dashboard also lets you drill down and focus on things like page builds. That page renders twice as fast as yours…what are they doing differently? Do they have more JavaScript? Less? Are you making 400 requests and they’re only making 80? This is the place to find out.
Page Speed Benchmarks is a public-facing dashboard that shows you a snapshot of the current performance of leading retailers in the US, EU, UK, and Japan.
To provide a great, fast online experience, start by asking yourself two questions:
What's causing my page to appear slow to my users?
What can I do?
The good news is that most of the issues that slow down pages for shoppers happen on your pages, which means you can control them. Here’s an overview of the most common performance issues on retail sites, and how to track and fix them.
What causes your web page to slow down? The vast majority of performance issues are caused by four reasons:
Third parties, such as trackers and analyzers
Style Sheets
Custom fonts
Page size, especially image size
Today, a typical retail web page can contain up to 75 third-party scripts, such as trackers and analytics beacons.
Third parties add a ton of value by increasing conversions (via location beacons) and helping you understand your users like never before (via analytics tags), so they aren’t going away anytime soon. But they can significantly impact how your page renders (or even whether it renders!).
Start by taking a proactive approach to understanding any potential performance impairments that could be caused by a third party.
You can’t fix what you don’t measure. That’s what we created in SpeedCurve Dedicated third-party dashboardsso you can understand at a glance how third parties are performing, track individual scripts andSet a performance budget.
Once you understand the performance of your third-party scripts, you can use historical data to develop an SLA with the vendor.
case study: Marks & Spencer radically transformed its performance by focusing on third-party content
While page size doesn’t always correlate to a slower user experience, it often does. Large, unoptimized images are often the culprit.
In addition to optimizing your images (to ensure you're not serving 1MB of assets to your users!), you should also ensure that your most important images (such as your main product images) are rendered early.
Performance budgets and alerts are a good way to respond to performance degradationA performance budget starts with your team (everyone: marketers, designers, and developers) agreeing on principles for user experience and site speed. First, you need to decide which metrics you want to track, then set thresholds based on past performance.
For images, some metrics to consider are:
Largest Contentful Paint – This is the size of the largest visual element (image or video) in the viewport. LCP is Google’s Core Network MetricsIt is one of the set of metrics that go into Google’s search ranking algorithm, so it’s a good idea to track it.
Image Size – The total size of all images on the page. This is a good way to see at a glance if you have large, unoptimized images added to your page.
Image Requests – The total number of images on the page.
case study: How Zillow became bigger, faster, and more appealing on a budget
Style sheets are a great boon to the modern web. They solve a ton of design problems, from browser compatibility to design maintenance and updates. Without style sheets, we wouldn’t have great things like responsive design.
However, poorly implemented stylesheets can cause a host of performance issues. These issues range from long CSS download and parsing times to poorly placed stylesheets preventing the rest of the page from rendering.
Again, you can’t fix what you don’t measure. Your comprehensive monitoring tools can tell you:
How many stylesheets do I have in my page, and how many of them block the page from rendering?
Is this number going up or down?
How big are CSS requests?
How will the stylesheet behave for each of my third parties?
Custom fonts give designers unprecedented control over the fonts used in their designs. This desire for control is why custom fonts have skyrocketed in popularity. But this popularity comes at a performance cost.
Some fonts require a lot of CSS code, while others require a lot of JavaScript or external hosting - all of which can significantly slow down page rendering.
In addition to tracking font size and number of requests, you can also use SpeedCurve to measure when the first H1 element has finished rendering. (In SpeedCurve, we call this metric Hero H1. It is the time it takes for the three elements we capture to render.) Hero rendering time) If your site uses custom fonts, there’s a good chance those fonts are being applied to the H1 copy, making this metric an effective way to measure how quickly your custom fonts are rendering.
As with all the other metrics we track for you, you canCreate performance budgets and get alerted when they exceed thresholds.
case study: NerdWallet used the H1 Render metric to help load fonts 30% faster
I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.
