Gráficos vectoriales en Webflow

Así que el otro día tuve un problema de LCP en Google Pagespeed, y sí, el culpable era un SVG, y no podía entenderlo, probé un montón de cosas, sin ánimo de ofender, la documentación sobre la velocidad de la página a veces es completamente inútil e inútil. Al final me decanté por un WebP, pero estoy divagando, toda la investigación me llevó a perder el SVG, y pensé: bueno, sería mejor si escribiera un post sobre lo que he leído, ya que, bueno, nunca hemos tocado los SVG, así que sí, aquí hay un post sobre gráficos vectoriales y Webflow, supongo. (Para tu información, eran las dimensiones físicas del SVG las que estaban causando el problema, pero esa es otra madriguera de Google PageSpeed.

¿Qué son las imágenes vectoriales?

Los gráficos vectoriales se definen mediante trazados, que consisten en puntos conectados por líneas y curvas para formar polígonos y otras formas. Esencialmente, las formas definidas en un plano cartesiano. A diferencia de los gráficos rasterizados, que se basan en píxeles, las imágenes vectoriales son escalables a cualquier tamaño sin pérdida de calidad. Esto las hace ideales para logotipos, iconos y otros gráficos en los que la claridad y la flexibilidad son esenciales. Esto, a su vez, significa que sobresalen en formas simples, pero fracasan cuando necesitan ser supercomplejas.

La evolución de los gráficos vectoriales

Los gráficos vectoriales se remontan a los primeros días de los gráficos por computadora, cuando el almacenamiento y la eficiencia eran primordiales. Con la llegada de la informática personal, las aplicaciones basadas en vectores, como Adobe Illustrator y CorelDRAW, llevaron estos gráficos a la vanguardia del diseño y revolucionaron la forma en que creamos imágenes digitales e interactuamos con ellas.

La introducción de SVG (gráficos vectoriales escalables) a finales de la década de 1990 marcó un hito importante, ya que los SVG son archivos basados en XML que pueden crearse y editarse con cualquier editor de texto y manipularse con CSS y JavaScript.

Implementación de SVG en Webflow

Por lo tanto, volviendo a lo que es más importante para los diseñadores de Webflow, podemos agregar vectores fácilmente de dos maneras principales, incrustando, es decir, incrustando el código directamente en Webflow en una incrustación o agregándolos como imágenes. Ambos tienen ventajas y desventajas.

Incrustar código SVG directamente

La incrustación directa del código SVG en el HTML puede mejorar los tiempos de carga y reducir las solicitudes HTTP, algo crucial para lograr velocidades de carga de página más rápidas. Este enfoque es particularmente beneficioso para los gráficos simples que forman una parte integral del diseño del sitio web, ya que les permiten escalar sin problemas en diferentes dispositivos.

Naturalmente, los vectores más complejos son un problema aquí, la solicitud HTTP puede llegar a ser enorme. Además, hay que tener en cuenta otros aspectos: dónde se encuentra en el documento, cuántas veces se utiliza el vector en la página y en el sitio en su conjunto (una imagen SVG podría ser mejor para guardarla en caché), si hay interacciones, porque se pueden hacer cosas interesantes con los SVG incrustados, las variables y las interacciones de Webflow.

Uso de archivos SVG externos

Los archivos SVG externos son útiles para gráficos complejos o que se actualizan con frecuencia. Al hacer referencia a archivos externos, puedes aprovechar el almacenamiento en caché del navegador para acelerar la carga de las páginas en visitas posteriores. Sin embargo, este método introduce solicitudes HTTP adicionales, por lo que es crucial usarlo con prudencia.

Siempre es un callejón sin salida, tanto para SVG externos como para incrustaciones, y bueno, para el sitio más optimizado, solo tienes que decidir a medida que lo construyes, utilizando tu diseño como guía.

SVG y rendimiento web

Impacto en la velocidad de la página

Los SVG pueden afectar significativamente al rendimiento de la web. Debido a su pequeño tamaño y escalabilidad, suelen cargarse más rápido en comparación con las imágenes rasterizadas. Sin embargo, el método de integración (integrado o externo) también influye en la forma en que los SVG afectan al rendimiento.

La pintura más grande y llena de contenido (LCP)

Los SVG pueden mejorar el LCP, una métrica fundamental en los principales datos web de Google. Si optimizas el modo en que se cargan los archivos SVG (por ejemplo, priorizando el contenido de la mitad superior de la página), puedes mejorar el rendimiento percibido y la experiencia de usuario.

Técnicas avanzadas de optimización

• Minimiza el código SVG: usa herramientas como SVG MG para reducir los datos innecesarios en los archivos SVG, disminuyendo el tamaño de los archivos. Literalmente, no puedo enfatizar esto lo suficiente, usa SVGOMG. Tus SVG se volverán minúsculos y pegarás el código SVG directamente en el sitio y lo copiaré de nuevo, así que simplemente copio todos los svg/vectores de Figma como SVG y los pego directamente en SVGOMG y luego guardo el SVG o lo vuelvo a copiar si voy a incrustarlo. El sitio me ha abierto los ojos. Es un flujo de trabajo simple para una pequeña Estudio Webflow como el nuestro, pero nos da un poquito de rendimiento extra cuando todo se suma.
• Animación eficiente: al animar archivos SVG, utilice animaciones CSS o JavaScript con moderación para evitar cargas computacionales pesadas que pueden afectar a las métricas de rendimiento, como el LCP.
• HTTP/2 para archivos externos: utilice las capacidades de HTTP/2 para una carga paralela más rápida de archivos SVG a fin de mejorar los tiempos de carga de la página inicial. (Cloudflare es bueno para esto)
• Complejidad: WebP podría ser una mejor alternativa, incluso con el doble de transparencia que los SVG extremadamente complejos.

Aprovechamiento de las variables de flujo web para la animación SVG dinámica

La introducción de variables CSS por parte de Webflow abre posibilidades dinámicas para animar archivos SVG directamente incrustados en tu HTML. Este método te permite cambiar propiedades como el color, el tamaño y el trazo de forma dinámica, en función de las interacciones del usuario u otras condiciones establecidas en Webflow.

Animación de SVG con variables de flujo web:

• Cambios de color y opacidad: defina variables CSS para el color y utilícelas en el código SVG. Ajusta estas variables en función de la posición de desplazamiento u otros factores desencadenantes en Webflow para crear efectos atractivos e interactivos.
• Ajustes de tamaño: utilice variables CSS para ajustar el ancho, la altura u otras dimensiones de los elementos SVG de forma dinámica. Esto puede hacer que los elementos aumenten o disminuyan en respuesta a las interacciones de los usuarios.
• Complejidad y rendimiento: si bien las variables CSS ofrecen formas poderosas de animar y ajustar los SVG, tenga en cuenta la complejidad de los SVG utilizados. Los SVG complejos con muchas rutas y efectos detallados pueden aumentar significativamente los tiempos de carga y afectar negativamente al rendimiento.

Cuándo incrustar archivos SVG en lugar de usarlos como archivos externos

Los SVG incrustados son los mejores para:

• Iconos y gráficos pequeños y sencillos que se benefician de ser diseñados y manipulados directamente dentro del HTML o CSS.
• Diseños que requieren una manipulación dinámica basada en la interacción o en condiciones de tiempo real.

Se prefieren los archivos SVG externos para:

• Gráficos grandes y complejos que se utilizan en varias páginas de un sitio y se benefician del almacenamiento en caché del navegador.
• Gráficos que no necesitan manipularse dinámicamente o que se actualizan con poca frecuencia.

Al comprender estos matices y aprovechar las potentes capacidades de diseño de Webflow, puedes optimizar el uso y el rendimiento de los SVG en tus proyectos, garantizando un sitio web rápido, atractivo y visualmente atractivo.

Así que sí, no son cosas que cambien el mundo, pero es útil conocerlas y podrían darte un pequeño impulso. Para tu información, Cloudflare es una buena opción, no puede optimizar un SVG, pero puede almacenarlo en caché cerca del usuario, así que echa un vistazo a este otro post nuestro.