vuestorefront / vue-storefront

Alokai is a Frontend as a Service solution that simplifies composable commerce. It connects all the technologies needed to build and deploy fast & scalable ecommerce frontends. It guides merchants to deliver exceptional customer experiences quickly and easily.
https://www.alokai.com
MIT License
10.51k stars 2.08k forks source link

docs: performance docs #7196

Closed mattmaribojoc closed 6 days ago

mattmaribojoc commented 1 week ago

๐Ÿ”— Linked issue

โ“ Type of change

๐Ÿ“š Description

Brings over some of the concepts that were available about performance in our v2 docs with updated information and specific examples. There will be follow up PRs on these topics to expand to more storefront-specific and in-depth information.

๐Ÿ“ Checklist

changeset-bot[bot] commented 1 week ago

โš ๏ธ No Changeset found

Latest commit: 86f31758db183675e5b73abf386b00af86b101c7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Baroshem commented 1 week ago

Hey @mattmaribojoc

I have written following docs content for Alokai Storefront and Alokai Console Perf Auditing. Let me know if it is ok, I can modify it if needed. I also have not added any images so I suppose this could be done by you :)

## How Alokai helps deliver performant websites?

One of the key values of Alokai is `Performance` and we threat it really seriously. Our products are designed with performance software quality in mind from the very beginning allowing you to ship performant websites and great User Experience to your customers. In this section, you will learn how `Alokai Storefront` and `Alokai Console` help you build and maintain performant e-commerce storefront.

### Performant Alokai Storefront out of the box

Alokai Storefront is by default configured to be performant out of the box. Thanks to that, you get blazingly fast e-commerce storefront that you can just customize to meet your business needs. If you would like to learn more about this, check out the Alokai Storefront docs [here](/storefront).

Alokai Storefront comes with several performance oriented features out of the box that help you ship performant e-commerce websites.

#### Connect Layer

Alokai Connect is an Express.js application that provides a single place for you to connect to the multiple services that you need to run your storefront. It acts as a layer between your frontend application and the various services that you need to connect to, such as a commerce backend, CMS, or payment gateway.

It comes with several advantages like:

* Connect multiple services using different technologies and libraries
* Create and extend integrations to add new capabilities or modify their behavior
* Control of the requests sent to the integration platform and responses sent back to the Nuxt.js application
* Securely store credentials on the server without exposing them to the end-users of your application
* Improve site performance by moving logic to the server abd shipping less code to the browser

Learn more [here](middleware)

#### Optimized assets

Alokai Storefront comes with plugins and modules that help you deliver optimized assets to your users. This means that you will be delivering optimized and performant images that are corretly fetched just when they are needed but also things like styles and other media.

Alokai Storefront delivers that by usings following concepts:

1. Lazy Loading
2. lazy Code Splitting
3. Correctly sized Images (with optimized image formats)
4. Optimized fonts
5. Static content to avoid layout shifts

Learn more [here](/storefront/performance)

#### Storefront UI components library

Storefront UI is the fastest way to build a composable storefront for ecommerce. It is an open-source frontend library that helps developers to build fast, accessible, and beautiful storefronts much quicker.

Learn more [here](https://docs.storefrontui.io/v2/)

#### Top frameworks

Alokai Storefront comes as either Nuxt or Next.js application. These frameworks are known from their performance out of the box. Alokai Storefront available in both versions allows you to select the most performant solution that will suit your business needs best.

Learn more [here](https://docs.alokai.com/storefront#acceleration)

### 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. With an intuitive, user-friendly interface and powerful administrative tools, **Alokai Console** makes managing e-commerce storefronts easier than ever before. If you would like to learn more about this, check out the Alokai Console docs [here](/console).

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

::: info
Audits are conducted automatically after each new deployment of the application for all configured URL's or can be scheduled manually.
:::

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.

For each instance, you can add a maximum of 3 URLs, each with a customizable name for easy identification. Setting up 3 URLs will result in 6 reports being generated when running an audit - for both desktop and mobile versions of the website.

Alokai Performance Auditing uses _Google PageSpeed Insights_ under the hood 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.