Digital product is a complex web of interconnected elements that work together to deliver a consistent, speedy, and pleasant experience to the end user. The goal of the product team for an e-commerce or SaaS company is to convert the site visitor towards a desired outcome, whether that’s a purchase or a sign-up.
As with any complex systems, things tend to break from time to time. I’ve seen countless examples of crucial elements being broken for weeks at a time without any employee’s knowledge and tens of thousands of dollars being wasted as a result. In addition to loss mitigation, a smart audit can also help identify opportunities for optimization, which ultimately leads to additional growth.
One way to ensure these threats and opportunities bubble up to the surface is to conduct periodic audits of the website. Periodic audits are important to ensure that
- the system is designed in a comprehensive and resilient fashion (especially as new features are shipped constantly)
- no parts of the system is currently broken
- the guardrails set in place are doing their jobs
- identify opportunities for improvements
I’ve had the opportunity to lead & coordinate the launch and growth of seven DTC e-commerce brands with my current company. I'll be sharing some of my learnings in a series of blog posts that can hopefully shed some light on what's involved.
In part 1, we'll dive into Site Performance.
Need some convincing on why it's important? Check out these resources
- Amazon (PowerPoint, slide #15): 100 ms of latency resulted in 1% less sales.
- Google (video): 500 ms caused a 20% drop in traffic.
- Walmart (slide #46): a 100 ms improvement brought up to 1% incremental revenue
- Mozilla: Shaving 2.2 seconds off page load time increased downloads by 15.4%
- Yahoo: 400 ms resulted in a 5 to 9% drop in traffic
Site performance encompasses many aspects of a user’s experience. This include the amount it time the site takes to become (in order of importance)
- Visible - the 1st fold of the site is “painted,” the CSS has loaded, and the assets are loaded
- Interactive - the user can now interact the elements on your site such as clicking a link or a button, playing a video, scroll down to subsequent folds
- Fully loaded - all third party tags are now loaded and began communicating with their servers. These third party tags can include analytics platforms, advertising platforms, and personalization engines.
To further complicate the matter, these speeds vary based on the user’s network speed (wifi vs. 5G vs. 4G vs. 3G) and available device computing powers.
While there is general consensus on the importance of improving site speed, product and dev teams oftentimes overlook and de-prioritize them. As you can see above, there is consensus among the best companies in the world that the correlation between site performance and conversion rate is significant. The reason is quite simple — people are impatient. If they cant load your site, they’ll bounce.
Before we get any further on site speed, first ensure that you have the proper resource to act on the recommendations. This person should be a seasoned frontend developer with enough knowledge of the backend to flag any server load time issues. This person ideally has done site performance optimization work in the past. If you don’t have this resource, find an external consultant who can.
The surest way to measure site speed is with Google’s PageSpeed Insights. This tool tells you how fast your site is in the eyes of the almighty Google and provides you with specific recommendations to improve the score. Besides being a proxy for how fast your site loads for the end user, it can also have vast implications on your SEO ranking and AdWords Quality Score.
If you want to get deeper into page speed optimizations, download the Google Lighthouse extension. It’s the new engine behind how Google judge’s a site’s performance. It provides much deeper insights into how your site performs.
Lastly, make sure to try loading the site on mobile 3G. Is it significantly slower on 3G vs 4G? Can you further minimize your asset size? Do you have a robust caching layer? They are all crucial factors that can help further boost mobile network loading speed.
After making sweeping changes across the board, you will probably begin to see some improvements on your PageSpeed Insights score. So now that you've done all you can, what next? It's time to go deep.
Google Analytics also provides site speed reporting. It can give you insights, such as which pages are loading slower than average; how quickly your button responds to a user click, and how the site performs on different browsers/regions/devices. Using insights from GA, we can quickly identify pages that demand further optimization.
Page Timings Report
Page-load time for a sample of pageviews on your site. You can view the data across different dimensions to see how quickly your pages loaded from a variety of perspectives (e.g., in different browsers, in different countries).
As you can see above, two of our highest traffic'ed pages are loading slower than the site average. There are likely issues associated specifically with those pages, such as asset sizes and server response time.
As I mentioned above, time to paint and interactivity are the most crucial part of a good user experience. The majority of third party tags most likely won’t have a crucial role in your site's UX with the exception of key user-facing widgets like reviews and product recommendations. Almost all other widgets and tags can be delayed until the site is fully interactive.
For this reason, it’s important to make sure these tags are loaded at the end of the HTML body AND their execution orders are asynchronous. Being asynchronous means the browser wont block the site from becoming interactive waiting on the tags to load and execute.
Lastly, it’s best practice to use a tag manager solution, such as Google Tag Manager. It will help you better manage your tags and allow non-technical teammates to implement tags directly without developer assistance.
So you’ve done all this work optimizing your site speed, and your pagespeed insights score has gone up, but now what? Here a some considerations for measuring success.
While lower funnel metrics like Conversion Rate and AOV are always important factors, there are more upper-funnel metrics I’d keep in mind as well, such as bounce rate and Pageviews per Session.
A lower Bounce Rate indicates that less people are leaving right away due to slow site speed. The goal here is to retain the impatient users. Reducing Bounce Rate is crucial for a marketing-driven organization since every click has a concrete dollar amount tied to it.
Pageviews per Session
A higher Pageviews per Session indicates that user has confidence in the performance of the site and is not hesitant to keep exploring. Such hesitancy can arise from not wanting to wait for another long page load.
In this post, we walked through the importance of optimizing site performance, the tools you can use to measure site performance, how to further refine the optimizations approach, and measuring success.
In the next post, we’ll specifically dig into auditing for Mobile Readiness.