Graphismes vectoriels dans Webflow

L'autre jour, j'ai eu un problème de LCP dans Google Pagespeed, et oui, le coupable était un SVG, et je n'arrivais tout simplement pas à comprendre, j'ai essayé une tonne de choses, sans vouloir vous offenser, la documentation sur la vitesse de page est parfois complètement inutile et inutile. Au final, j'ai choisi un WebP, mais je m'éloigne, toute l'enquête m'a fait découvrir un lapin SVG entier, et je me suis dit, eh bien, ce serait mieux si j'écrivais un article sur ce que je lis, puisque, eh bien, nous n'avons jamais abordé les SVG, donc oui, voici un article sur les graphiques vectoriels, et Webflow, je suppose. (Pour info, ce sont les dimensions physiques du SVG qui étaient à l'origine du problème, mais c'est un tout autre terrier de Google PageSpeed.

Que sont les images vectorielles ?

Les graphiques vectoriels sont définis par des tracés, composés de points reliés par des lignes et des courbes pour former des polygones et d'autres formes. Essentiellement, les formes définies sur un plan cartésien. Contrairement aux graphiques matriciels, qui reposent sur des pixels, les images vectorielles sont adaptables à n'importe quelle taille sans perte de qualité. Ils sont donc idéaux pour les logos, les icônes et autres éléments graphiques où la clarté et la flexibilité sont essentielles. Ce qui signifie qu'ils excellent dans les formes simples, mais tombent à plat lorsqu'elles doivent être très complexes.

L'évolution des graphiques vectoriels

Les graphiques vectoriels remontent aux débuts de l'infographie, lorsque le stockage et l'efficacité étaient primordiaux. Avec l'avènement de l'informatique personnelle, des applications vectorielles telles qu'Adobe Illustrator et CorelDRAW ont placé ces graphiques au premier plan du design, révolutionnant ainsi la façon dont nous créons des images numériques et interagissons avec celles-ci.

L'introduction du SVG (Scalable Vector Graphics) à la fin des années 1990 a marqué une étape importante, car les SVG sont des fichiers XML qui peuvent être créés et édités avec n'importe quel éditeur de texte et manipulés avec CSS et JavaScript.

Implémentation de SVG dans Webflow

Pour en revenir à ce qui est le plus important pour nous, les concepteurs de Webflow, nous pouvons facilement ajouter des vecteurs de deux manières principales : intégrer le code directement dans Webflow dans une intégration, ou les ajouter sous forme d'images. Ils présentent tous deux des avantages et des inconvénients.

Intégrer directement du code SVG

L'intégration directe de code SVG dans votre code HTML peut améliorer les temps de chargement et réduire les requêtes HTTP, ce qui est essentiel pour accélérer le chargement des pages. Cette approche est particulièrement utile pour les graphiques simples qui font partie intégrante de la conception du site Web, leur permettant de s'adapter parfaitement à différents appareils.

Naturellement, les vecteurs plus complexes sont un problème ici, la requête HTTP peut devenir énorme. Ensuite, il y a d'autres éléments à prendre en compte, où se situe-t-il dans le document, combien de fois le vecteur est-il utilisé sur la page et sur le site dans son ensemble (une image SVG peut être préférable pour la mise en cache), y a-t-il des interactions, car vous pouvez faire des choses intéressantes avec les SVG intégrés, les variables et les interactions Webflow.

Utilisation de fichiers SVG externes

Les fichiers SVG externes sont utiles pour les graphiques complexes ou fréquemment mis à jour. En référençant des fichiers externes, vous pouvez tirer parti de la mise en cache du navigateur pour accélérer le chargement des pages lors des visites suivantes. Cependant, cette méthode introduit des requêtes HTTP supplémentaires, il est donc essentiel de l'utiliser judicieusement.

Il y a toujours un hic, tant pour les SVG externes que pour les intégrations, et bien, pour le site le plus optimisé, il vous suffit de décider au fur et à mesure de la création, en utilisant votre conception comme guide.

SVG et performances Web

Impact sur la vitesse des pages

Les fichiers SVG peuvent affecter de manière significative les performances Web. En raison de leur petite taille et de leur évolutivité, elles sont souvent plus rapides à charger que les images matricielles. Cependant, la méthode d'intégration (intégrée ou externe) joue également un rôle dans l'impact des SVG sur les performances.

Largest Contentful Paint (LCP)

Les SVG peuvent améliorer le LCP, une métrique essentielle des Core Web Vitals de Google. En optimisant la façon dont les SVG sont chargés (par exemple, en donnant la priorité au contenu situé au-dessus de la ligne de flottaison), vous pouvez améliorer les performances perçues et l'expérience utilisateur.

Techniques d'optimisation avancées

• Minimiser le code SVG : utilisez des outils tels que SVGOMG pour réduire les données inutiles dans les fichiers SVG, en diminuant la taille des fichiers. Je ne saurais trop insister là-dessus, utilisez SVGOMG. Vos SVG vont devenir minuscules et coller le code SVG directement dans le site, puis le copier à nouveau. Je copie donc chaque svg/vecteur de Figma au format SVG et je le colle directement dans SVGOMG, puis j'enregistre le SVG ou je le copie à nouveau si je veux l'intégrer. Le site m'a ouvert les yeux. Il s'agit d'un flux de travail simple pour une petite Webflow Studio comme le nôtre, mais cela nous donne un tout petit plus de performance quand tout est additionné.
• Animation efficace : lorsque vous animez des SVG, utilisez les animations CSS ou JavaScript avec parcimonie pour éviter de lourdes charges de calcul qui peuvent avoir un impact sur les indicateurs de performance tels que le LCP.
• HTTP/2 pour les fichiers externes : utilisez les fonctionnalités de HTTP/2 pour accélérer le chargement parallèle des fichiers SVG afin d'améliorer les temps de chargement initiaux des pages. (Cloudflare est bon pour ça)
• Complexité : WebP pourrait être une meilleure alternative, même à 2X avec transparence que les SVG extrêmement complexes.

Exploitation des variables Webflow pour une animation SVG dynamique

L'introduction des variables CSS par Webflow ouvre des possibilités dynamiques pour animer des SVG directement intégrés dans votre code HTML. Cette méthode vous permet de modifier des propriétés telles que la couleur, la taille et le contour de manière dynamique, en fonction des interactions de l'utilisateur ou d'autres conditions définies dans Webflow.

Animation de SVG à l'aide de variables Webflow :

• Changements de couleur et d'opacité : définissez des variables CSS pour la couleur et utilisez-les dans le code SVG. Ajustez ces variables en fonction de la position de défilement ou d'autres déclencheurs dans Webflow pour créer des effets interactifs attrayants.
• Ajustements de taille : utilisez des variables CSS pour ajuster dynamiquement la largeur, la hauteur ou d'autres dimensions des éléments SVG. Cela peut entraîner une augmentation ou une réduction des éléments en réponse aux interactions des utilisateurs.
• Complexité et performances : bien que les variables CSS offrent de puissants moyens d'animer et d'ajuster les SVG, soyez conscient de la complexité des SVG utilisés. Les fichiers SVG complexes comportant de nombreux chemins et des effets détaillés peuvent augmenter considérablement les temps de chargement et affecter négativement les performances.

Quand intégrer des fichiers SVG ou les utiliser comme fichiers externes

Les fichiers SVG intégrés sont les meilleurs pour :

• De petites icônes et des graphiques simples qui ont tout intérêt à être stylisés et manipulés directement dans le HTML ou le CSS.
• Conceptions nécessitant une manipulation dynamique basée sur des interactions ou des conditions en temps réel.

Les fichiers SVG externes sont préférés pour :

• Graphismes volumineux et complexes utilisés sur plusieurs pages d'un site, bénéficiant de la mise en cache du navigateur.
• Graphismes qui n'ont pas besoin d'être manipulés dynamiquement ou ceux qui sont rarement mis à jour.

En comprenant ces nuances et en tirant parti des puissantes capacités de conception de Webflow, vous pouvez optimiser l'utilisation et les performances des SVG dans vos projets, garantissant ainsi un site Web rapide, attrayant et visuellement attrayant.

Donc oui, ce n'est pas quelque chose qui change le monde, mais c'est utile à savoir et ça pourrait juste vous donner un petit coup de pouce. Pour info, Cloudflare est une bonne option ici, il ne peut pas optimiser un SVG, mais il peut le mettre en cache à proximité de l'utilisateur, donc consultez notre autre article.