Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

A quality user experience is essential for the success of a site in the long run. Web Vitals help to measure the quality of a site's page experience.
Moreover, as search engines continue to prioritize web performance on mobile over other devices, starting with the shift from HTTP to HTTPS (helping to prevent people from making purchases on unsecured websites) and then ranking pages with priorities given to mobile-first design, Google has made it clear that it means business in providing the best experience for users. By rewarding fast-loading sites, Google is laying out the roadmap for successful online businesses and websites.
This article will take a deep dive into Core Web Vitals and how we can measure them with the necessary tools and enhance them to improve how our pages are ranked on Google. 


## What are Web Vitals?

These are specific conditions used by Google for scoring a site's "page experience". In short, it is Google's way of rating a page's overall User Experience (UX). Google disclosed web vitals to educate developers on measuring sites based on User Experience (UX). Google identified three performance metrics as "Core web Vitals" and four others not categorized as "core".

Web vitals can be classified into **Core Web Vitals** and **other Web Vitals.** 
The Core Web Vitals are:
- ‌Largest Contentful Page (LCP)
- ‌First Input Delay (FID)
- ‌Cumulative Layout Shift (CLS)
The other Web Vitals are:
- ‌Mobile Friendly
- ‌Safe Browsing.
- ‌HTTPS
- ‌No Intrusive Interstitials 


## Why Web Vitals

Optimizing Web Vitals helps improve the site experience for users, which also increases conversation and engagement rates. 
Google added Core Web Vitals to its organic ranking algorithm as a ranking signal. Optimizing Web Vitals improves your site's SEO performance, thereby leading to better keyword ranking.

## Introducing Core Web Vitals

The core web vitals are three benchmarks used to quantify a visitor's experience in loading and using a page. These benchmarks rate how fast a page gets rendered in the browser, how fast the browser responds to inputs, and how stable the content loads in the browser. Google will rank these three metrics alongside Mobile Friendliness, Safe Browsing, HTTPS, and Intrusive Interstitials into a signal Google calls the "Page Experience Signal".

**Largest Contentful Paint (LCP)**

Largest Contentful Paint measures the time it takes a website to render the largest content on the browser and the time it takes to get ready for interaction. 
Google states that this metric considers only the content on the viewport, which means only the content that appears on the screen without scrolling. The metric also considers the loading time of images, texts, video thumbnails - strictly relevant to the users and should not exceed 2.5 seconds for most webpages. 

**First Input Delay (FID)**

First Input Delay is used to measure the time it takes a webpage to respond to the first interaction from a user. i.e when the browser’s main thread has become idle enough to respond to user events such as clicks on a link, taps on a button etc. 
It is important to note that FID is only concerned with the time it takes for a browser to recognize finite user interactions like clicks and taps, i.e other interactions like zooming and scrolling across a webpage can’t be reliably measured using FID as a metric, as they often do not run on the browsers main thread.  It is also important to bear it in mind that FID only measures the time it takes for browsers to recognize the events and is not concerned with the time it takes to process them. 
To obtain a good FID score, it’s advised to keep its duration below 100 milliseconds.

**Cumulative Layout Shift (CLS)**

It is common that you visit a page for example, and accidentally press on an ad or anchor that takes you to a page other than what you intended because you had meant to click an entirely different button or link whose position had shifted due to intrusion by another element on the page that caused your intended element to shift positions abruptly. This *unexpected* motion on the page is referred to as a layout shift. 
Cumulative Layout Shift is a measurement of visual stability in a webpage evaluated by tallying all layout shifts not prompted by user interaction.   
Despite the significance attributed to the User Experience, it's startling that many websites do not ensure their layouts are stable and add intrusive ads and banners that harm users' experience. 
A low CLS score (below 0.1) signifies the page is doing fine for most websites. 


## Tools To Measure Core Web Vitals in your Strapi App

Google has many tools for web developers that assist in measuring the performances of the Core Web Vitals. These tools enable us to diagnose and fix any issue that the users may experience in a Strapi backend powered web-app.


- **Lighthouse** 

You can make use of lighthouse to test your webpages against the core web vitals, view suggested improvements and make improvements where necessary. 
The Experience section and footer in the chrome DevTools performance panel can go deep and debug against precise Core Web Vitals.

![Result from running a lighthouse audit on github.com](https://paper-attachments.dropbox.com/s_62B4B025134A7DC363C4B5F83541872F10C79FD3B5C2864A3D69EE08C69D6167_1634027383706_Light+house+Audit.png)


**PageSpeed Insights** is a tool used to compare lab and field Core Web Vitals' Performance.

**Chrome User Experience Report API** is another tool to check how your origin and URL have performed against Core Web Vitals over 28 days.

**Using Search Console**

![Search Console](https://paper-attachments.dropbox.com/s_62B4B025134A7DC363C4B5F83541872F10C79FD3B5C2864A3D69EE08C69D6167_1634027625672_Search+Console.png)


You can also make use of the dedicated core web vitals report section from [Google Search Console](https://search.google.com/search-console/about) to analyze your web-pages troubleshoot errors, and validate the fixes applied.

**Web Vitals Browser Extension**

![A screenshot of a report on github.com using the Web vitals chrome extension](https://paper-attachments.dropbox.com/s_62B4B025134A7DC363C4B5F83541872F10C79FD3B5C2864A3D69EE08C69D6167_1634027917839_Web+vital+chrome+extension.png)


The [Web Vitals Browser Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) available on the chrome webstore is another handy tool to test your page’s performance against the core web vitals and is especially handy if you want to test your changes in real-time and without having to leave your current browser tab.

## How to enhance Core Web Vitals


- **Set up page caching** 

Setting up page caching reduces the load on your server by saving the contents of the webpage locally, such that the next time the user opens the webpage, there’s no need for server to load the page entirely from scratch and so, page-load time is extremely fast. When building Strapi powered web apps, strapi provides a handy tool the [strapi-middleware-cache](https://strapi.io/blog/caching-in-strapi-strapi-middleware-cache) which gives you a choice to either cache data on your application's memory or with Redis, a third-party database.


- **Preload important resources to speed up load time:**

 [Preloading resources](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) is useful when you have essential scripts or styles you want the browser to start loading early in the page’s lifecycle.   
 For example, a typical stylesheet is registered in your html following the syntax below

```
     <link rel="stylesheet" href="styles/main.css">
```

 However, if you’d like to preload this css file for example, you can swap the `stylesheet` value for the `rel` attribute and let the browser know the resource in question is a stylesheet by providing the link tag with an `as` attribute carrying value of 'style`. 

```
    <link rel="preload" href="style.css" as="style">  
    <link rel="stylesheet" href="style.css"> 
```

 You can use this knowledge to request critical resources ahead of time and speed up the overall loading process in your web-page thereby reducing the time it takes for your largest contentful paint to be registered.


- **Optimize your images:** 

Most times, the Last Contentful Paint in a webpage is an image as they’re naturally the heaviest files to be loaded as a result, it’s important that images used in a webpage should be compressed, uploaded to fast storage platform using [strapi upload providers](https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#using-a-provider) and presented in the right format.


- **Improve server response time**

A fast server response time is also significant as it directly improves page-load metrics and improves UX. To achieve a fast server response time, choose a good web host along with a reliable CDN to serve media files.


- **Apply caution with injected content** 

Dynamically injecting content above existing content will cause a layout shift which is terrible for SEO and should be avoided as much as possible when you can. 


- **Add fixed dimensions to ads, embeds, images, and iframes.** 

Loading embeds, images, and iframes without fixed dimensions can also cause layout shifts.  
A way to avoid this is by ensuring the sizes of embeds, images, and iframes are defined when in use. You should also make sure to reserve a space for each ad as you may need to refine the layout for each advert when they’re being loaded.


- **Use [preconnect for](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect) crucial resources.** 

When building webpages that require resources from external urls, it is often handy to notify the browser that the user is likely to need resources from the target resource's origin. 
Adding a `preconnect`  value to the `rel` attribute in a link tag helps the browser improve the user’s experience by making a connection to the origin (which in most times is usually a CDN) beforehand.   


```
    <link rel="preconnect" href="https://examplecdn.com">
```

Doing this, will ensure that essential third-party connections are created early using reconnect which in-turn helps resolve the "Preload key requests" and "Preconnect to required origins" recommendations you may encounter when performing a core-web vital audit.


- **Use server-level compression:** 

Compression on the server-side can be achieved using Gzip or Brotli. These tools help reduce the response time and size of your webpage by compressing the data sent to the user thereby improving its overall LCP score.  Luckily, as a strapi user, [server-side compression with gzip](https://strapi.gitee.io/documentation/3.0.0-alpha.x/advanced/middlewares.html#middlewares) is enabled out of the box for at strapi’s core and as a result, you have one less pain point to worry about.


- **Implement transition animations**

When building sites that involve a good amount of animation, you should make use of transform animations instead of directly animating elements of properties that trigger layout changes.


- **Optimize your codebase**

For better core web vital results, you should avoid using too much CSS and JavaScript in your webpages.  Removing unused CSS and JavaScript using a tool like PurgeCSS will help reduce the overall size of your stylesheets thereby lessening the time it takes for the browser to register your page’s LCP.

**Remove render-blocking resources**

![A screenshot from a demo test](https://paper-attachments.dropbox.com/s_62B4B025134A7DC363C4B5F83541872F10C79FD3B5C2864A3D69EE08C69D6167_1634028638731_render+blocking+resources.png)


[Render-blocking resources](https://web.dev/render-blocking-resources/) include imported stylesheets and scripts  that block or delay the browser from rendering page content to the screen in due time thereby increasing the time the first input delay.  
A good way to fix the delay associated with render-blocking resources is by adding the [defer or async](https://flaviocopes.com/javascript-async-defer/) attributes to scripts or styles that are not immediately needed in loading critical components in your webpage. 

```
    <script src="/src/scripts/deferablescript.js" defer></script>
```

## The role of a CMS in achieving goals of the Core Web Vitals

Undoubtedly, websites today often need to provide users with the most engaging, personalized and thoughtful digital experience; there is an even greater demand for them to be as secure, fast, and non-intrusive as possible, with the type of CMS in use bears a significant amount of that responsibility.

When building a website using a Content Management System, it's essential to evaluate the CMS your business relies on as far as the core web vitals are concerned.

As we all know, traditional CMS's come with certain advantages such as faster development times and ready to use themes; they are also known to abstract many customization options available. This less control over how the UI is presented traditional CMS's offer may limit the developer's flexibility to respond to requirements and changes recommended by core web vital audits.  
Using headless CMS like Strapi helps provide a work-around against this limitation as you are given complete control of how your app is presented to users and search engines. The total control a headless CMS provides, in turn, gives you more flexibility to tweak your website's layout and overall user experience as necessary. 


## Conclusion

Providing users with an improved user experience by paying attention to the Core Web Vitals will make your website stand out and attract positive rankings from search engines. 
The goals of the core web vitals explain why it's not enough to have good content, attractive products, and a sophisticated design alone. 
Quickness in page loading is favorable to the user and ensures that search engines rank the content well. Take these steps while working on your next project, and see how amazingly well it turns out!



medium_Snipcart Strapi-9.png

small_Snipcart Strapi-9.png

thumbnail_Snipcart Strapi-9.png

Snipcart Strapi-9.png

Strapi Developer intro to Core Web Vitals

David Adeneye is a Software Engineer and a Technical Writer passionate about making the web accessible for everyone.


If you have ever tried to build a web app with Jamstack or you're new to the Jamstack ecosystem, In this article, we will take a look at some of the benefits of building with Jamstack alongside some of its unique features you should often use in your projects.

A lot has been previously written about Jamstack and its benefit on the Strapi blog, so we will briefly examine what Jamstack is before looking into the features. 

# Table of Contents:
- What is Jamstack?
- Strapi and the Jamstack
- The benefit of using Jamstack
- Top Features of Jamstack

# What is Jamstack

According to the Jamstack community website Jamstack.org, the Jamstack can be defined as a modern way to build websites and apps that deliver better performance with a standard architecture based on prebuilt Markup, JavaScript, and reusable APIs. 

The Jamstack acronym stands for Javascript, APIs, and Markup stack. 

## JavaScript

JavaScript in the Jamstack is a programming language used to develop all client-facing functionalities such as handling forms, performing API requests and response calls, etc. It is mostly used on the client-side, and examples are frontend frameworks like Angular, React, and Vue. e.t.c.

## APIs

On the server-side, all database action and server-side functions are implemented with an API made available over HTTPS on the client-side. You can use an API-based headless CMS like Strapi to manage your content and present it to the client-side with an API.

## Markup

Static site generators such as Gatsby, Next, Hugo, etc., are used to bundle and prebuild markup before deployment.

With this approach, markup incorporate javascript and is prebuilt into static assets, served to clients from a CDN, and relies on reusable APIs for its functionalities. This approach is designed to make the web faster, more secure, easier to scale, and most importantly, increase productivity.

# Strapi and the Jamstack

Let say you're building a website or app with any of the static-site generators such as Gatsby, Next, etc., and you need to edit and maintain the content of your websites. You probably might want to use a headless CMS. That is where Strapi comes in among the many other headless CMS in the market today.

Strapi is a leading open-source headless CMS based on NodeJS used to build fast and easily manageable APIs. It enables you to seamlessly create and manage a content-rich experience exposed to any digital product, device, and service. 

It free developers a lot of time while giving them the freedom to use their favorite development tools and frameworks. Strapi enables you to make flexible API structures easily with a beautiful user interface. 

Strapi integrates smoothly with most static site generators. It enables developers to create digital content that extends through plugins. Strapi is a good choice for frontend developers who understand JavaScript.

## The benefit of using Jamstack

### Scalability

Jamstack sites are cached in a content delivery network compared to traditional websites that deal with heavy traffic loads by adding logic to cache popular views and resources. Because files are served through CDN, the CDN prioritizes higher traffic when there is so much request in your app. It enables built-in redundancy and incredible load capacity.

### Security

Because Jamstack sites are served directly from a CDN and without a backend, you don't need to worry about server-side vulnerabilities because no code is run on the server to build pages, making it difficult to inject or attack your site. 

### Performance

The loading speeds of a page have a tremendous impact on user experience and conversion. With this in consideration, sites built with JamStack detach the need to generate page views on a server by generating pages ahead of time in a build.

Since CDN serves the pages, optimal high performance is possible without introducing expensive or complex infrastructure.

### Cost Reduction

Building with the Jamstack approach drastically reduces software costs of the infrastructure and is easily maintainable. You don't need a team of experts to develop sites with the Jamstack, making it cheaper to scale, build and maintain.

### Portability

Since sites built with Jamstack are pre-generated, it implies you can host your sites on several varieties of hosting services with a more remarkable ability to move them to any preferred host. Therefore any hosting solution should be able to serve a Jamstack site. This is a goodbye to infrastructure lock-in.

### Better Developer Experience

Developing with Jamstack is simpler and easier to understand; the development process and maintenance are straightforward. You can build Jamstack sites with a wide variety of tools like Strapi. 

They do not depend on sole technologies or little-known frameworks. Instead, they build on vastly accessible tools and conventions, making it easier to find talented developers with the skillset to build with Jamstack. 

Coupled with the numerous options of CMS for site generation removes the need to maintain a separate stack for content and marketing.

## Features of Jamstack

### Automatic Builds with webhook

Because markups are prebuilt in Jamstack, any content changes won't go live until you run another build. That's is where webhooks with Strapi come in. 

For instance, if you are building a website and using Strapi as your content management system and Netlify as your CDN, how do you automate this process when a new page is updated and notify Netlify that a new page has been published. You can create a webhook in Strapi to automatically deploy a modification on Netlify.

### Atomic Deploys 

As your web project gets more complex, new changes might require redeploying many files. Uploading these files can lead to an inconsistent state as the process ends. 

Atomic deployment implies that changes don't go live until all modified files are uploaded. You can prevent this by a system that allows you to implement "atomic deploy." This medium ensures your site is always consistent with your visitors.

### Instant cache invalidation

Compared to the traditional approach of building sites, one of the most important reasons for building modern sites the Jamstack way is that site can be hosted exclusively on a CDN(Content Delivery Network). 

With instant cache invalidation from CDN services, it instantly goes live and pushes the changes to a global CDN when a build is uploaded. 

It implies that you view your site instantly without timelessly waiting for changes when you update your website. This technique gives you a highly cached site that makes your site load ultra fast and immediately considers your updated changes. 

Additionally, when choosing a CDN, try to make sure your CDN can handle instant cache purges.

### Putting Everything on Git

Probably one of my favorite features when I started building the Jamstack site. Putting your site on Git provider enables a seamless level of collaboration and shipping for you and your team. 

Anyone can git clone and install any needed dependencies with a standard procedure like npm install and instantly run the entire project locally without cloning any databases or any complex installation. This feature simplifies the staging and testing workflows while also reduces contributor friction.

### Automating with Build Plugin

If you are building a project and you find yourself repeating the same thing on every project. You can automate the process by creating a plugin and reuse it whenever you need it. Let say you're building a modern JamStack project with a headless CMS like Strapi and with Netlify as your CDN. 

Strapi has a unique plugin design pattern that enables you to create plugins injected into your project. At the same time, Netlify takes care of the build processes and provides you with necessary build events. 

### Branch Deploy

Branch deployment was another impressive feature I value in JamStack development. I could remember working on a JamStack project built using Strapi with other teams. 

We needed to create a different environment because everyone was working on another task. The branch deploys feature came in handy to create separate branches on our project repository for various tasks. Branch deploys are an inevitable feature that will come in handy while working with the JamStack.

## Conclusion

I hope you enjoyed reading through this article. Hopefully, it has introduced you to the benefit of using Jamstack and some of the remarkable features of Jamstack to explore in your next project. 



The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 