The Business Case for Web Performance With Next.js App Router (Part 2/4)

Previous Article Here.

Your website performance is no longer just a “nice to have” in today’s digital age. Performant websites are now a consumer expectation that leads to better engagement, conversions, and brand association. In an era where user attention spans are shortening by the day, and your competitors are focusing on performance, something like the Next.js upgrade starts to sound more like a need to have in your technology stack.

Direct Impact on Revenue

Performance improvements have a direct and measurable impact on revenue. Studies have consistently shown a correlation between website speed and conversion rates. For instance, Amazon found that every 100ms of latency costs them 1% in sales. Similarly, Google reports that a delay of just one second in mobile site load times can impact conversion rates by up to 20%). This direct relationship between site speed and revenue generation is a clear indicator of the value of performance optimization.

The evidence for performant websites is concrete these days. Companies like Google have invested time and resources into persuading others to prioritize performant websites, and have even favored those who comply with their search engine (more on that later). Here are some more stat highlights to support these motivations:

Tencent Video saw?70% better CTR?for videos by passing Core Web Vitals. Cdiscount improved all 3 metrics which contributed to?6% revenue uplift?in their Black Friday sale. Wix increased mobile origins passing Core Web Vitals by?over 250% year-on-year. Nykaa found that a 40% improvement in LCP led to?28% more organic traffic?from T2/T3 cities. NIKKEI STYLE's 18% LCP improvement resulted in?9% more pageviews per session. NDTV gained a?50% better bounce rate?after halving LCP, along with other product changes.. Agrofy Market's 70% better LCP correlated to?76% reduction in load abandonment.. Flipkart achieved?2.6% reduction in bounce rate?by improving Core Web Vitals metrics. Ameba Manga improved the?number of comics read by 2-3 times?by improving the CLS score 10 times. Yahoo! Japan fixed CLS which led to a 98% reduction in poor pages and?15% uplift in page views per session.. AliExpress improved CLS by 10 times and LCP by double, which translated to?15% lesser bounce rates. GEDI saw 77% reduction in CLS and an?8% reduction in bounce rate.

And this is just the tip of the iceberg. More case studies are provided here, and a basic google search provides result after result if you’re not convinced.

SEO Benefits

End user experience and behavior are not the only compelling reasons to care about performance. If you’re like the many websites I’ve worked on in the media world, much of your traffic, and therefore your digital asset is tied up in your website's SEO.

From Google itself:

Google's core ranking systems look to reward content that provides a good page experience. Site owners seeking to be successful with our systems should not focus on only one or two aspects of page experience. Instead, check if you're providing an overall great page experience across many aspects.

The actual benchmarks set by Google for their core web vitals ranking algorithm are as follows:

Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, strive to have?LCP occur within the first 2.5 seconds?of the page starting to load. First Input Delay (FID): Measures interactivity. To provide a good user experience, strive to have an?FID of less than 100 milliseconds. Starting on March 12, 2024, Interaction to Next Paint (INP)?will replace FID as a Core Web Vital. Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, strive to have a?CLS score of less than 0.1.

Yet you’d be surprised how few sites meet these. Older versions of Next.js closed the gap and make hitting these metrics a bit easier. App router expands on this and makes it difficult to build a site that does not meet these standards. App router specifically does a good job solving INP (mentioned above), which is going to be an even newer standard that changes the playing field when it comes to Google search rankings. If you have an older version of Next.js this new INP metric is going to be tough to hit without sacrificing some of your business requirements.

User Experience and Brand Perception

Last but not least, I’d be remiss to not mention some of the hard to measure impact of providing a good web experience for users. Users respond in kind with higher engagement, more brand affinity, and a great lasting impression that they’re more likely to share with their network.

If you have a slow site, you expose yourself to the exact opposite. Slow sites are notorious for high bounce rates and leaving a poor taste in users mouths that give a neglected or outdated impression of your brand. A fast, sleek, and helpful website can set the tone for the entire customer relationship.

An Example Cost Benefit Analysis

So far we’ve talked about the technical specs, and proved the business impact of performance in general. For the next article, in tomorrow's post, let's go through a hypothetical example of what this could look like for an enterprise company. Read the next article here.