The importance of page speed

Section titled What do your clients know about page speed? What do your clients know about page speed?

For our Storyblok partners, it’s no secret that page speed is a crucial factor in the success of a business, but do your clients know it? And, more to the point, how can you help them achieve it?

If your clients are still on the fence about choosing Storyblok, this article is for you to help them understand the importance of page speed and how they can massively improve it with Storyblok.

We will go through the importance of page speed as a ranking factor and the impact of page speed on user experience.

Section titled Page speed as a ranking factor Page speed as a ranking factor

While site speed doesn't carry as much weight as the relevance of a page, if there are pages with similar content, speed can become a deciding factor.
Speed has been a ranking signal for desktop searches since 2010 and for mobile searches since 2018. This is all part of Google’s efforts to bring a better experience to mobile users. They created Pagespeed Insights and also published best practices for optimizing your code.
Lighthouse is another tool released by Google meant for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more.

Section titled Impact of page speed on user experience Impact of page speed on user experience

Speed can also impact ranking indirectly through bounce rate. Consumer loyalty is fragile and this is confirmed by several studies.
According to a study done by Google in 2016, 53% of visitors leave a mobile site if it takes more than 3 seconds to load. The study also revealed strong correlations between page speed and revenue, bounce rate, session duration and viewability. In fact, there have been observed 2X more revenue for sites that loaded in 5 seconds instead of 19.
A newer study shows that a one-second delay in mobile load times can impact conversion rates by up to 20%. As page load time goes from:

To help you visualize the dimension of page speed impact, in 2012 (!) Amazon calculated that a page load latency of just one second could cost it $1.6 billion in sales each year.

Seeing how important speed is to users, Google expanded the importance of the user experience by adding a new ranking signal: Page Experience. Of course, this new ranking doesn’t only include speed, but it combines Core Web Vitals with existing metrics to create search signals for overall page experience. They measure dimensions of web usability such as load time, interactivity, and the stability of the content as it loads.

As described by Google: “We're combining the signals derived from Core Web Vitals with our existing Search signals for page experience, including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines, to provide a holistic picture of page experience.”

Section titled Core Web Vitals Core Web Vitals

The current set of core web vitals represent three aspects of the user experience: loading, interactivity, and visual stability, using the following metrics.

Largest Contentful Paint (LCP): measures loading performance. LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID): measures interactivity. Pages should have a FID of 100 milliseconds or less.

Cumulative Layout Shift (CLS): measures visual stability. Pages should maintain a CLS of 0.1. or less.

The Core Web Vitals can be measured with all of Google’s popular web development tools, like Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, Web Vitals Chrome extension and Chrome UX Report API.

Section titled Increasing page speed with headless CMS Increasing page speed with headless CMS

Now that we have established the importance of page speed it’s time to see how it can be achieved or improved using Storyblok.

First things first, any developer will tell you that just by using a headless CMS won’t make your site automatically faster. It’s the way you use it, specifically how you use the features of JAMstack.
JAMstack is a modern web development architecture based on three key components: JavaScript, APIs and Markup.
The differentiating factor between a JAMstack site and a website built on traditional website technologies is that JAMstack doesn’t rely on a server, it is pre-built and serverless. Static files are generated and then sent out over a CDN (content distribution network). Server-like functionalities are handled by third-party services, connected via APIs.

By using Storyblok and the right hosting service, you can take full advantage of the JAMstack architecture and improve the performance considerably.