Delivering exceptional digital experiences are no longer optional for companies that want to compete. We all know this to be true, yet far too often companies view performance as reactive rather than proactive. For instance, the reactive approach means that they rely on front-end monitoring solutions to alert them to outages after the fact. Of course, a proactive approach doesn’t neglect ongoing monitoring altogether, but it prioritizes performance earlier in the development lifecycle. A proactive approach both helps ensure better experiences for users as well as can deliver a faster time to market.
As users, we know what it is like to experience performance problems once they are live and in production. Ideally, you want to catch any performance issues at the source. Unfortunately, this isn’t a reality for many businesses. But, it doesn’t have to be this way.
Test for Performance Early and Often
We advocate for treating performance problems as bugs. This isn’t meant to diminish their significance in any way–they can be both small and big issues–but recasting them in this light does seek to define them as an unintended programing behavior. They simply mean that someone, be it IT/Ops, Designers, or Developers, made a mistake. By catching these mistakes, teams are able to triage and resolve them before they have a widespread impact.
Functional testing is already done under the “early and often” mantra. The same needs to be true of performance testing by integrating it into the development lifecycle.
Test for UX and Timing Metrics
To integrate performance testing in pre-production, you need to establish the right metrics to test.
Measuring the user experience with metrics such as SpeedIndex, Start Render, and Visually Complete allows you to augment browser event timings. By measuring visual metrics about how the page is shown to a visitor you can gain a deeper understanding of the UX so you can identify areas of improvement.
You’ll want to make sure to compare your UX metrics with timing metrics, such as:
- Fully Loaded
It is also important to consider any custom timings that are important to your business or industry. For example, if you are a media company you likely care about time to first ad. Make sure to incorporate any custom metrics into your testing plan, too.
Create and Enforce Performance Budgets
Performance budgets are a critical part of building a culture of performance because they can create a focus on performance for the entirety of a project. It makes performance a priority throughout the dev cycle, rather than something that is considered at the end.
Performance budgets bring together designers and developers in important conversations about how best to optimize a release, and helps designers ensure that design doesn’t overtake performance.
They can also keep your site from getting too big—if you don’t consider performance early and often, there’s a good chance you’ll end up with slow, obese sites.
In addition to performance budgets, it can also be useful to have a database of performance defects that you test against on a regular basis. With 300 performance-related defects, for example, Rigor Optimization can help ensure you test against the most meaningful ones continuously.
Fail Based on Performance
Some performance-related issues will be obvious but easy fixes. For instance, unoptimized images or video are usually easy fixes, but they can result in big performance gains. By examining the Performance Budget metrics mentioned above, it is fairly easy to identify which defects need to be addressed.
What about failing on other metrics? This can require a bit more context. For that reason, it’s important to examine metrics within the bigger performance picture. How does your current performance stack up against your last build? Are your performance metrics better or worse than they were a few dev cycles ago?
Context such as this can help you ensure that you aren’t over or underreacting to the metrics you are focusing on right now.
Where to Test?
We discussed earlier how production monitoring is meant to identify unforeseen outages or slowdowns so you can respond. Testing in pre-production, on the other hand, seeks to identify the deltas between two code states. To do so, testing should occur when there is a change in the environment, such as a code push.
Staging is the first key junction and can consist of any common, pre-prod environment that is stable, consistent, and functional. It should be similar to production, and you should be sure to include any third party content that might exist in production.
Testing should also occur in development as a sanity check before commits/PR.
While you’re at it, don’t forget to test entire user flows rather than just single pages. Here’s more information on how to identify key user flows.
Again, we aren’t advocating for ditching performance testing in production. Testing in production helps close the loop, verify that no performance defects were deployed, and aid in tracking and trending performance KPIs.
We believe that testing for performance throughout the development lifecycle is critical. It helps ensure you are delivering great user experiences and equips you to get ahead of any performance defects before they impact your user. Remember, performance isn’t like a coat of paint. You can’t simply put it on at the end.
Rather, it needs to be integrated throughout the whole build process. It’s for this reason that you should automate, test early, and test often. If you’d like to learn more about how we can help your team get ahead of defects and adopt a lifecycle approach towards managing your digital experiences set up a demo here.
E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online. However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...Read More
Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...Read More
Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...Read More
Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...Read More