docs(perf-3): web performance good practices #6628
Conversation
github-actions
bot
added
docs
|
|
|
💙 vsf-next-demo successfully deployed at |
| ::: tip HINTS | ||
| - Use tools like CSS Minification. | ||
| - To eliminate unused css use a tool like PurgeCSS, or CSS Minification. | ||
| - Vue Storefront uses PurgeCSS out of the box, you just need to setup it in config: |
There was a problem hiding this comment.
This is wrong as we use purgeCSS in VSF different way. Please check @vue-storefront/core to see how performance module works. I thought that you wanted to put here general notes for perf issues in web dev, not in VSF. So for that, please check that and adjust the nuxt.config.js accordingly
| <img loading=lazy> | ||
| ``` | ||
| or eg. nuxt-lazy-load library (depending on your needs and browser support). | ||
| - If you want to use lazy loading in Nuxt 3 go with this [lazy-load module](https://github.com/nuxt-modules/lazy-load). |
There was a problem hiding this comment.
Here as well, VSF is Nuxt 2 right now and will not probably be migrated to Nuxt 3 in 6 months at least. Maybe choose the current vue-lazyload module? It will work better for VSF
|
|
||
| ### Keep image size small and serve them in next gen formats ⚫⚫⚫ | ||
|
|
||
| You should always compress images, there is lot of lossless compression file types supported with all modern browsers (eg. webp). This is the most common performance bottleneck, where images are not compressed and weigh multiple times more than they could if compressed. |
There was a problem hiding this comment.
|
|
||
| ### Total page size shouldn't be too big ⚫⚫⚫ | ||
|
|
||
| Avoid having pages that have a transfer size more than 2 MB (desktop) and 1 MB (mobile) because it will hurt performance and will make the page expensive for the user if she/he pays for the bandwidth. |
There was a problem hiding this comment.
maybe recommend infinite scroll as alternative
There was a problem hiding this comment.
For now I'm not sure it's good option for perf, this needs to be checked, we will add it later if it helps.
There was a problem hiding this comment.
From some point of view this document might be also a guide for client / dev to give them alternative solutions for common problems (not everywhere applicable ofc, but it would be nice addition, imo), e.g. when need to show all products on one page (common requirement these days) and is unfamiliar with this concept, to say to him: "Hey, its still possible without requesting all your products in 1 shot and hurt performance".
Performance not always involve trade-offs.
|
We'll continue the work in this PR https://github.com/vuestorefront/vue-storefront/pull/6636/files |
Description
Related Issue
Motivation and Context
How Has This Been Tested?
Screenshots:
Types of changes
Checklist:
Changelog
Tests
Code standards
Docs