docs: performance docs #7196
docs: performance docs #7196
Conversation
|
There was a problem hiding this comment.
A lot of great work - solid start :)
I have added few comments / suggestion that you could add to make some things more readable imo but in general the content is good. Let me know if you have any questions. Can't wait for the next docs about Lighthouse, perceived performance, and also how you can audit everything with Console (I think it would be valuable to mention here the Perf Auditing in Console for 2way link between the console and the storefront :) )
| - Using modern image formats | ||
| - Reducing the web font size | ||
| - Using a CDN to reduce the request times | ||
|
|
There was a problem hiding this comment.
Maybe we could add here one more h3 about the lazy loading / defering requests for assets to the point there are needed? They also affect the LCP in terms of rendering time.
Like, if we have icons/images in the footer, if we add attribute loading="lazy" they will not block the rendering of the LCP element because they are below the fold.
|
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. |
🔗 Linked issue
❓ Type of change
📚 Description
Brings over some of the concepts that were available about performance in our
v2docs 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