Are you missing opportunities because your website is slow? Countless companies have improved their web performance resulting in increased conversion rates, increased traffic, and access to a larger market. Also, web performance now impacts your Google search engine and ad rankings.
At Shopify, we’ve seen what works and what doesn’t work when companies want to improve their web performance. We want to share with you our top learnings to get you started on the path to success.
Often, companies think they can run an audit and “fix” their site speed through a one-time project. This rarely works, especially when you’re updating your site frequently to adjust to market conditions.
Instead, we advocate a different approach. First, organizational change lays the foundation so that your team is empowered to drive change. Second, ongoing monitoring is critical to understanding where you are and where you want to go. Once those two are in place, you can take the next steps - actually improving your web performance through a cycle of continuous improvement.
Align your organization to drive change Jump to heading
Leadership buy-in Jump to heading
Web performance requires multiple teams to share a common goal. Thus, any successful effort to improve performance must have leadership buy-in. When team priorities come in conflict, a charter from leadership can help resolve those conflicts and maintain momentum.
Empowered champion Jump to heading
Once leadership sets the goal, they must then select a champion with the power to drive change. This person will be the focal point of a multidisciplinary team and must have decision making power.
Core team Jump to heading
Successful core teams are small and nimble. They are led by the champion and have representatives from development, design, and marketing at a minimum. Some of these people may be in an agency you partner with. In smaller organizations, some of these functions may overlap. Representatives must have the power to make decisions and drive change within their own teams.
Why is the core team important? A common example is when marketing wants to add a new tracking widget that uses a lot of JavaScript, lowering the performance of the website. Having leadership buy-in, the core team is now empowered to make the tradeoffs associated with these decisions. This organization would now be less likely to have an excessive number of unmanaged and legacy third parties, but still have the ones they need.
When starting a new performance initiative, the team may meet and communicate regularly as they learn their website and organization's unique problems. They will need to research and install processes and tooling to help overcome those problems. Later, these meetings and communications can be made as needed when new issues arise.
Understand and set up web performance testing Jump to heading
How would you improve a process if you hadn’t measured it yet? You wouldn’t want to devote a large amount of effort on a lever that would have minimal impact. Measurement is the central driver of any web performance work. We have two different measurement techniques which together give us a full picture of performance.
Lab testing Jump to heading
Lab, or synthetic, testing is when we run a single test through a tool like WebPageTest or Lighthouse to get a very detailed picture of one specific page load or user interaction. That picture includes key performance metrics and data on every resource (file) loaded, how it affected the browser timings, and more. We can emulate specific devices and networks too.
Lab testing is used for debugging and initial testing of optimizations. It is also used as a continuous-integration (CI) testing tool. For example, as a developer makes changes in the codebase, we can force performance testing before those changes are integrated into production. Sometimes CI testing uses performance tools like Lighthouse and WebPageTest, and other times they use proxies for performance like bundle sizes.
Real user monitoring (RUM) Jump to heading
We don’t care about web performance for the sake of web performance. We care about it because it impacts user experience. Different users can have vastly different experiences from us. Thus, we always want to keep an eye on real user data so that we can better identify bottlenecks and regressions. RUM data consists of key performance metrics like load timings in addition to user analytics like network connection, device type, and location.
Before beginning any performance work, we need to establish a baseline of real user performance. Thus, setting up RUM data collection is a priority after aligning the organization.
If you have high enough traffic, you can access public RUM data from the Chrome User Experience Report (CrUX) through several tools, like TREO and the CrUX dashboard. Note that this only represents your Chrome traffic, and any iOS devices will have no data. You can also capture the metrics yourself using the web-vitals package, and send that data to your analytics tool. If you have the budget, SpeedCurve is a great tool for tracking RUM and sending you weekly updates on your performance.
Kick off the continuous improvement cycle Jump to heading
Now that you have your organization ready and real user monitoring baseline in place, you can begin the fun part. Improving web performance is an iterative cycle. First, we want to establish an ongoing RUM baseline. Then, we can launch multiple performance optimization cycles with the following steps:
- Measure - using your RUM data and lab tests, find your biggest opportunities for improvement.
- Optimize - learn how to fix those issues and experiment with solutions
- Test - run lab tests to test each of your experiments
- Implement - implement the fixes that showed improvement in your lab testing
- Monitor - After you have enough RUM data including the changes, verify that your changes also improved performance for real users.
What’s next? Learn more about fixing web performance. Jump to heading
In this post, you learned how to set up your organization for success, the different testing environments, and the continuous improvement process. The next step is to continue learning both in terms of testing performance and fixing common issues.
Learning web performance best practices and how to fix issues can be a challenge. That’s why we started this blog as a resource to help you out. Sign up for our newsletter to be notified of new posts, and bookmark this site.
Also, if you need assistance, check out one of our Shopify experts or contact our Shopify Plus Professional Services team. We can provide web performance training and help you through the process of optimizing your site.