Frontend performance guidelinesEdit on GitHub
This document describes general and Spryker-specific frontend performance guidelines.
General performance guidelines for frontend
- Cookie-free domain for assets: CSS, JS, Fonts, Images.
- Brotli encoding for textual assets: CSS, JS, SVG. Use gzip as a fallback.
- Expires and ETag response headers.
- Production build mode. To build production, run
npm run yves:productionand
npm run zed:production.
- Optimize images to reduce their size for network transfer. To optimize project images, run
npm run yves:images-optimization.
- Optimize fonts, use WOFF 2.0; if possible, with a fallback to WOFF 1.0.
- Remove unused characters from fonts.
- Use lazy loading for images.
- If users are very likely to follow a link, apply a pretender:
<link rel="prerender" href="">.
Spryker-specific performance guidelines for frontend
- Use the
lazyWebpack directive to register unnecessary components.
- Decrease the number of components on each page to as small as possible.
- Avoid using
querySelectorAllor at least do not use it in
- Detect and resolve
- Instead of aggregated objects like data, pass separate values into components.
- Move the aggregation logic to the PHP side.
- Avoid global data.
- If you access a property more than once, create a Twig variable using
For submitting the form