Hola, como estan? Quería saber que recomendaciones me pueden dar para mejorar el rendimiento del sitio en los distintos dispositivos? ya active las recomendaciones que vienen en vtex.
Hello, how are you? I would like to know what recommendations you can give me to improve the performance of the site on different devices? I have already activated the recommendations that come in vtex.
Hi @aguseze99! How are you?
Most performance problems are linked to the size of the images, gifs or videos or content that will be loaded by the device. In most cases these will be images, so make sure the image file size is at least equal to what is rendered on screen.
For example, if you have a 3000 pixel image on a 1200 pixel screen, you are unnecessarily loading a 3000 pixel image and only using size 1200.
In this case you can reduce the actual file size or configure the size directly in the image block if you are working with VTEX IO. In addition, it is recommended that you upload images with a webp or PNG extension, so that they are of higher quality and have the smallest size possible while maintaining quality.
If you are using VTEX IO, another tip is to use the __fold__ block to not fully load a page unless the user performs a scroll action to see the remaining content. Link for reference: Lazy Loading Components
If this information helped you, please mark it as an answer to support others in the community.
1 Like
Olá, @aguseze99
Hola,
1 - Recomiendo leer algunos artículos de VTEX:
2 - Analiza la carga de imágenes, especialmente el primer pliegue. Comprueba que las imágenes tienen las dimensiones correctas, que tienen el peso adecuado y que las imágenes del primer pliegue se cargan “eager”.
3 - Analizar la carga de fuentes. Las fuentes son un recurso prioritario, por lo que es necesario optimizarlas. Comprueba si estás utilizando el formato woff2, si la fuente tiene el peso adecuado, etc.
4 - Elimina CSS y JavaScript que no estén en uso o estén duplicados. Intente refactorizar el código para obtener un mejor rendimiento.
5 - Analiza las sugerencias de LightHouse e intenta aplicar los cambios sugeridos.
La quinta etapa puede generar aún más posibilidades de soluciones de rendimiento.
Abrazos,