Metrics and success: What clients are looking for

As a web development agency, chances are that most of the conversations you have with clients are centered on performance. Clients want to know how different tools, frameworks, and stacks affect numerous performance metrics — and it can be hard to keep up.

Whatever they're called, most metrics are interested in how fast your site loads, how well indexed it is, and the quality of experience it creates for users. Understanding the most important metrics that impact your clients' websites will help you answer your clients' questions with clarity and confidence. Here's what you need to know.

Lighthouse Performance Scores

Lighthouse performance scores measure your website's overall quality based on how much time the different elements in your website take to load. Your website's lighthouse performance score is based on six metrics:

1. First Contentful Paint measures how long it takes for the first text or image to appear on your webpage. It is also called perceived load speed and makes up 10% of your total web performance score.
2. Speed Index measures how much time it takes for your website's visible content — text and visual elements — to be displayed. It reflects your site's critical rendering path and accounts for 10% of your lighthouse performance score.
3. Largest Contentful Paint measures how much time it takes for large visual elements like images, text blocks, videos, and background details to load on your website. It makes up 25% of your website's performance score.
4. Time to Interactive measures the load responsiveness of your website. Load responsiveness refers to how long it takes for your website to become fully interactive — and respond to user input. TTI accounts for 10% of your lighthouse performance score.
5. Total Blocking Time measures how quickly your website responds to user input. It determines 30% of your website's performance score
6. Cumulative Layout Shift measures the visual stability of your site layout, content, and elements. It determines 15% of your lighthouse performance score.

Accessibility

Accessibility measures the extent to which your website's content and design cater to all types of users, especially users with disabilities. To get a high accessibility score, your website must align with the Web Content Accessibility Guidelines. These guidelines are based on four core principles (P.O.U.R):

1. Perceivable: Your website’s content must be presentable to users in ways they can perceive.
2. Operable: Your website must be compatible with a keyboard and/or mouse.
3. Understandable: Your website's content and layout must be easy to understand.
4. Robust: Your website should be available on multiple browsers and devices, including assistive technologies like screen readers and visual search engines. And the site’s quality and user experience should be consistent across these channels.

Search Engine Optimization

Search engine optimization is the process of improving your site’s visibility and ranking on search engines so you can drive more organic traffic. Organic traffic accounts for more than 50% of all website traffic.

There are four types of SEO:

1. On-page SEO is the process of optimizing your website's content. It covers areas like keyword research, image optimization, internal linking, and metadata optimization.
2. Off-page optimization focuses primarily on how to build your site's authority through quality backlinks. Backlinks are links from other websites to yours.
3. Technical SEO is the process of optimizing your website's structure so that search engines can crawl and index your web pages successfully.
4. Local SEO is the process of optimizing your website for geographical-based search engine ranking.

How Can Storyblok Improve Your Website's Performance Metrics?

There are several configurations you can implement in Storyblok to improve website performance metrics like accessibility and SEO.

What You Can Do in Storyblok to Improve Accessibility

To improve your site's accessibility, you can make the following changes to your website's content structure:

1. Remove all the HTML tags from content

Use the functionalities of the coding language you're using to build your website to strip any HTML tags from your content. Having HTML tags in your headless CMS will affect the content layout and delivery, making it more difficult to understand.

2. Configure headings for editors

Use Storyblok's Rich Text Editor to restrict the types of headings your editors can add to the content.

Headings should be used correctly because they determine the structural hierarchy of your content. Assistive technology depends on the content hierarchy to provide in-page navigation for users with disabilities.

3. Add accessible iFrames

An iFrame is an HTML element used for embedding content from an external platform into your website — for example, adding a YouTube video to your blog post.

An accessible iFrame has an alt text feature that houses the description of the iFrame’s content. You can implement this by creating a nestable component in Storyblok with two fields for the URL and title and adding the component to your rich text field.

4. Define asset attributes

In Storyblok's Visual Editor, you can define additional asset attributes like alt-tags, image captions and titles for your site's visual content. These asset attributes improve content accessibility for website visitors with visual impairment or cognitive disabilities.

What You Can Do in Storyblok to Improve SEO

Here are a few things you can do in Storyblok to optimize your website for search and boost its performance.

1. Create SEO-friendly URLs

You can make direct adjustments to the slugs of your website pages so they're better optimized for search. Storyblok also has an Advanced Path Plugin that enables you to create SEO-friendly URLs for content folders.

SEO-friendly URLs can improve your site’s visibility on search engines, leading to higher organic traffic.

2. Generate a sitemap

A sitemap is a list of the different pages of your website. Sitemaps are important for SEO because they make it easier for search engine crawlers to understand your website's structure and index pages faster.

You can send a GET request using Storyblok's Link API to access all your site's content and generate a sitemap.

3. Optimize images

Storyblok automatically generates optimized images for different channels and devices using its image service. This ensures that your visual content is displayed in the right size and format, improving page load speed and user experience.

How Does Storyblok Affect Your Lighthouse Performance Scores?

As a headless content management system, Storyblok isn't directly/solely responsible for the website's lighthouse performance scores. Lighthouse performance scores are determined by a combination of different factors, including your website's backend structure, frontend framework, and code.

To improve your lighthouse scores, you need to analyze your website to identify areas of weakness. Once you know what's missing, you can make the needed adjustments to your code, backend structure, and frontend framework to boost your website's lighthouse performance scores.

How to Measure Lighthouse Performance Scores

There are three major ways to measure your website’s lighthouse performance scores.

1. Run a web audit

You can run a full lighthouse audit with web.dev — a browser-based tool. To run an audit, enter your website's URL on web.dev, click “run audit,” and click “view report” once it is ready.

2. Use the Google PageSpeed Insights Tool

Enter your website’s URL in PageSpeed Insights, and you'll get an analysis report after a few seconds with your lighthouse performance metrics.

3. Use the Google Chrome Developer Tools

1. Open your website in Google Chrome (in incognito mode).
2. Right-click anywhere on the page and click “inspect” in the small drop-down menu.
3. Click on the lighthouse tab and generate the lighthouse audit report.

What Do These Performance Metrics Mean for Partners?

As a Storyblok Partner, you can continue to deliver value for your clients using our headless CMS. Even though Storyblok has no direct influence on website performance metrics, it has several features and supports numerous SEO and accessibility configurations that can help you set up your client's projects for success.
Storyblok also provides the best content-authoring experience. Our unique Visual Editor and component-based approach will give your clients 100% control over their sites’ content — making it easier for them to deliver customized experiences to their customers.