El cambio de diseño acumulativo (CLS) es una métrica importante relacionada con la estabilidad visual del sitio web. Más concretamente, esta métrica registra los cambios de diseño inesperados que experimentan los usuarios en su sitio web. Este documento le mostrará cómo mejorar la puntuación CLS si utiliza el logotipo SVG en su sitio web.
Cuando añada una imagen de logotipo en los formatos .png y .jpg a su sitio web, la altura del logotipo se añadirá automáticamente en función de la anchura del logotipo. Por el contrario, si carga una imagen SVG, WordPress solo establecerá la anchura del logotipo, pero no la altura.
Como resultado, es posible que el logotipo se reduzca, lo que puede provocar un desplazamiento inesperado del diseño en la sección de cabecera. La versión 3.6.0 de Astra Theme ha mejorado la forma en que se gestionan las imágenes SVG del logotipo, lo que evita desplazamientos inesperados. Por lo tanto, este cambio puede ayudar a mejorar la puntuación general de CLS.
¿Cómo lo mejoramos?
Para mejorar esto, hemos añadido un código JavaScript que calculará automáticamente la altura del logotipo SVG una vez importado a su sitio web. Después, la altura se calculará en función de la anchura del logotipo que establezca en el personalizador. Puede encontrar más detalles sobre esto en nuestro Artículo de blog.
Esta mejora del logotipo SVG se reflejará en una cabecera estándar y transparente. Este problema no se presentaba con el logotipo de cabecera adhesivo.
¿Cómo solucionarlo?
Para todos los sitios web nuevos, la mejora del logotipo SVG se aplicará automáticamente. Una vez que cargue el logotipo SVG y establezca la anchura del logotipo, la altura se calculará y guardará automáticamente. Por otro lado, si ya tiene un sitio web con un logotipo SVG, tendrá que realizar algunos cambios menores.
No hemos aplicado esta mejora a sitios web existentes para evitar posibles problemas que pudieran haber aparecido. En algunos casos, aplicar esta mejora automáticamente a logotipos ya en uso podría dar lugar a cambios no deseados.
Para aplicar esta mejora a su sitio web, siga estos pasos:
Primer paso - Vaya a Personalizador > Cabecera > widget "Identidad y logotipo del sitio";
Paso 2 - Actualizar/editar el valor de la anchura del logotipo
Paso 3 - Pulse el botón "Publicar" para guardar los cambios.
En función de la anchura que acaba de actualizar, la altura del logotipo se calculará automáticamente y se guardará en la configuración del personalizador. Esto aplicará mejoras al logotipo SVG utilizado en su sitio web.
