Introduction to Web Performance

Web performance is an ever-important subject in modern web. There are multiple case studies proving that storefront performance has a direct correlation with sales conversion. The bigger the sales volume the more impact it has. For example, back in 2006, Amazon found that every 100ms in added page load time cost them 1% in sales. While your Alokai application is built with the best practices in mind and delivers great speed out of the box, it's important to understand some of the basics of web performance so that as you build out your custom storefront, you can ensure that it remains fast your users have a great experience.

On the following pages you will find list of good practices that will help you optimize your website performance.

Performance in Your Alokai Application

Alokai Storefronts are built with performance in mind and implement best practices to ensure that your storefront is performant and delivers a great user experience.

Some of the ways that the Alokai ecosystem can help you build and maintain performant e-commerce storefronts are:

• Alokai Connect allows you to move logic to the server, shipping less code to the browser and improving performance.
• Alokai Storefront implements practices like lazy loading, code splitting, optimized fonts/images, and avoids layout shifts with static content
• Alokai Console allows you to monitor your storefront's performance and identify areas for improvement

Monitoring Performance

When building your storefront, you should be monitoring your application's performance as you develop new features and make changes to your application. This will help you identify any performance issues early on and allow you to make necessary optimizations before they become a problem.

There are many tools available for monitoring performance, and they can either capture lab-data - data collected from tests on your application - or field-data - data collected from real users visiting your live application.

Lighthouse

Lighthouse allows you to test for best SEO, performance, and accessibility practices. These tests run by simulating a user's experience with a specific CPU speed, network speed, and device type.

We recommend using tools like Lighthouse CI to run performance checks during your CI/CD pipeline.

While it's possible to run Lighthouse locally using Chrome DevTools, the results may differ depending on the device. In order for your performance metrics to have meaningful results over time, it's important to run them in a consistent environment.

In regards to performance, Lighthouse will give you a score for five different metrics:

1. First Contentful Paint (FCP) - the time it takes for the browser to paint the first text or image
2. Speed Index - how quickly the contents are visible to the user
3. Total Blocking Time (TBT) - the amount of time after the FCP that the page is blocked from receiving user input
4. Largest Contentful Paint (LCP) - when the largest contentful element is painted to the viewport
5. Cumulative Layout Shift (CLS) - the movement of visible elements on the page.

You should optimize Lighthouse metrics in projects that are not yet live. Despite it being a synthetic data it can give you a rough idea of how the real-user experience will look like.

See More:

• Lighthouse Docs
• Lighthouse Metrics

Core Web Vitals

Core Web Vitals uses user data to measure the performance of your website. By aggregating data from real browsers into the Chrome User Experience Report (CrUX) - you can get a real understanding of how your site is performing for real users. You can audit your application's to check the Core Web Vitals using https://pagespeed.web.dev/.

See More:

• Web Vitals
• Defining the Core Web Vitals Thresholds

You should optimize Core Web Vitals metrics in projects that are already live as it's the actual representation of the experience that your users has when browsing your website

Performance Auditing in Alokai Console

Alokai Console is the cloud hosting platform that helps e-commerce storefront developers streamline their workflow and maximize their development potential.

One of the key features of Alokai Console is Performance Auditing that allows you to keep track of your website performance.

Performance audits enable the discovery and improvement of the quality of a website or application by examining metrics that highlight the key areas of user experience. Audits can be compared which allows to continously monitor and audit the performance of websites which helps avoid bad performance after releasing into production or identify what impacted your site's performance.

For each instance, you can add a maximum of 3 URLs, each with a customizable name for easy identification. Each URL will be provide reports for the desktop and mobile versions of the website.

Alokai Performance Auditing uses Google PageSpeed Insights to provide performance insights into two sections; Real users experience and Lab data. The first one corresponds to Core Web Vitals and in general is gathered from real user devices, while the second one corresponds to Lighthouse and is gathered while auditing the page in an isolated environment. To better understand your website performance, it is recommended that you take both into consideration.

See More:

• Alokai Console