Vektorgrafiken in Webflow

Neulich hatte ich ein LCP-Problem in Google Pagespeed, und ja, der Schuldige war ein SVG, und ich konnte es einfach nicht verstehen, ich habe eine Menge Dinge ausprobiert, nichts für ungut, die Page-Speed-Dokumentation ist manchmal einfach völlig nutzlos. Am Ende habe ich mich für ein WebP entschieden, aber ich schweife ab, die ganze Untersuchung hat mir ein SVG-Kaninchen geschickt, und ich dachte, nun, es wäre schöner, wenn ich nur einen Beitrag über das schreiben würde, was ich gelesen habe, da, naja, wir haben SVGs noch nie angesprochen, also ja, hier ist ein Beitrag über Vektorgrafiken und Webflow, glaube ich. (Zu Ihrer Information, es waren die physischen Abmessungen der SVG, die das Problem verursacht haben, aber das ist ein ganz anderes Google PageSpeed-Kaninchenloch.

Was sind Vektorbilder?

Vektorgrafiken werden durch Pfade definiert, die aus Punkten bestehen, die durch Linien und Kurven miteinander verbunden sind, um Polygone und andere Formen zu bilden. Im Wesentlichen handelt es sich um Formen, die auf einem kartesisches Flugzeug. Im Gegensatz zu Rastergrafiken, die auf Pixeln basieren, sind Vektorbilder ohne Qualitätsverlust auf jede Größe skalierbar. Dadurch eignen sie sich ideal für Logos, Symbole und andere Grafiken, bei denen Klarheit und Flexibilität unerlässlich sind. Was wiederum bedeutet, dass sie sich durch einfache Formen auszeichnen, aber flach ausfallen, wenn sie besonders komplex sein müssen.

Die Entwicklung der Vektorgrafiken

Vektorgrafiken stammen aus den Anfängen der Computergrafik, als Speicher und Effizienz im Vordergrund standen. Mit dem Aufkommen von Personal Computing rückten vektorbasierte Anwendungen wie Adobe Illustrator und CorelDRAW diese Grafiken in den Vordergrund des Designs und revolutionierten die Art und Weise, wie wir digitale Bilder erstellen und mit ihnen interagieren.

Die Einführung von SVG (Scalable Vector Graphics) in den späten 1990er Jahren war ein bedeutender Meilenstein, da SVGs XML-basierte Dateien sind, die mit jedem Texteditor erstellt und bearbeitet und mit CSS und JavaScript bearbeitet werden können.

Implementierung von SVGs in Webflow

Zurück zu dem, was für Webflow-Designer wichtiger ist: Wir können Vektoren auf zwei Arten einfach hinzufügen: Einbettungen, d. h. indem wir den Code direkt in Webflow in eine Einbettung einbetten oder sie als Bilder hinzufügen. Beide haben Vor- und Nachteile.

SVG-Code direkt einbetten

Das direkte Einbetten von SVG-Code in Ihren HTML-Code kann die Ladezeiten verlängern und HTTP-Anfragen reduzieren, was entscheidend für schnellere Seitenladegeschwindigkeiten ist. Dieser Ansatz ist besonders vorteilhaft für einfache Grafiken, die einen integralen Bestandteil des Designs der Website bilden, sodass sie nahtlos auf verschiedenen Geräten skaliert werden können.

Natürlich sind hier komplexere Vektoren ein Problem, die HTTP-Anfrage kann riesig werden. Dann gibt es noch andere Dinge zu beachten, wo befindet er sich im Dokument, wie oft wird der Vektor auf der Seite und der gesamten Site verwendet (ein SVG-Bild ist vielleicht besser für das Caching), gibt es Interaktionen, denn mit eingebetteten SVGs, Variablen und Webflow-Interaktionen kann man coole Dinge machen.

Externe SVG-Dateien verwenden

Externe SVG-Dateien sind für komplexe oder häufig aktualisierte Grafiken von Vorteil. Indem Sie auf externe Dateien verweisen, können Sie das Browser-Caching nutzen, um das Laden von Seiten bei nachfolgenden Besuchen zu beschleunigen. Diese Methode führt jedoch zu zusätzlichen HTTP-Anfragen, weshalb es wichtig ist, sie mit Bedacht einzusetzen.

Immer ein Catch 22, sowohl für externe SVGs als auch für Einbettungen, und nun ja, für die am besten optimierte Seite musst du dich nur beim Erstellen entscheiden, wobei du dich an deinem Design orientieren kannst.

SVGs und Webperformance

Auswirkung auf die Seitengeschwindigkeit

SVGs können die Webleistung erheblich beeinträchtigen. Aufgrund ihrer geringen Größe und Skalierbarkeit lassen sie sich im Vergleich zu Rasterbildern oft schneller laden. Die Integrationsmethode (eingebettet oder extern) spielt jedoch auch eine Rolle dabei, wie sich SVGs auf die Leistung auswirken.

Größter Inhaltsgehalt (LCP)

SVGs können den LCP verbessern, eine wichtige Kennzahl in den Core Web Vitals von Google. Indem Sie die Art und Weise optimieren, wie SVGs geladen werden (z. B. durch Priorisierung von Inhalten, die ohne Scrollen angezeigt werden), können Sie die wahrgenommene Leistung und das Nutzererlebnis verbessern.

Fortgeschrittene Optimierungstechniken

• SVG-Code minimieren: Verwenden Sie Tools wie SVGOMG um unnötige Daten in SVG-Dateien zu reduzieren und die Dateigrößen zu verringern. Ich kann das buchstäblich nicht genug betonen, benutze SVGOMG. Deine SVGs werden winzig und fügen den SVG-Code direkt in die Site ein und kopiere ihn erneut, also kopiere ich einfach jeden einzelnen SVG/Vektor in Figma als SVG und füge ihn direkt in SVGOMG ein und dann speichere ich entweder das SVG oder kopiere es erneut, wenn ich einbetten möchte. Die Seite war ein Augenöffner. Es ist ein einfacher Arbeitsablauf für einen kleinen Webflow Studio wie unseres, aber es gibt uns ein bisschen mehr Leistung, wenn alles zusammengerechnet wird.
• Effiziente Animation: Verwenden Sie beim Animieren von SVGs CSS-Animationen oder JavaScript sparsam, um hohe Rechenlasten zu vermeiden, die sich auf Leistungskennzahlen wie LCP auswirken können.
• HTTP/2 für externe Dateien: Nutzen Sie die Funktionen von HTTP/2 für ein schnelleres paralleles Laden von SVGs, um die anfänglichen Seitenladezeiten zu verbessern. (Cloudflare ist gut dafür)
• Komplexität: WebP könnte selbst bei 2-facher Transparenz eine bessere Alternative sein als extrem komplexe SVGs.

Nutzung von Webflow-Variablen für dynamische SVG-Animationen

Die Einführung von CSS-Variablen durch Webflow eröffnet dynamische Möglichkeiten für die Animation von SVGs, die direkt in Ihr HTML eingebettet sind. Mit dieser Methode können Sie Eigenschaften wie Farbe, Größe und Kontur dynamisch ändern, basierend auf Benutzerinteraktionen oder anderen in Webflow festgelegten Bedingungen.

Animieren von SVGs mit Webflow-Variablen:

• Farb- und Opazitätsänderungen: Definieren Sie CSS-Variablen für Farbe und verwenden Sie sie im SVG-Code. Passen Sie diese Variablen basierend auf der Scrollposition oder anderen Triggern in Webflow an, um ansprechende, interaktive Effekte zu erzielen.
• Größenanpassungen: Verwenden Sie CSS-Variablen, um die Breite, Höhe oder andere Abmessungen von SVG-Elementen dynamisch anzupassen. Dadurch können Elemente als Reaktion auf Benutzerinteraktionen wachsen oder schrumpfen.
• Komplexität und Leistung: CSS-Variablen bieten zwar leistungsstarke Möglichkeiten, SVGs zu animieren und anzupassen, aber denken Sie an die Komplexität der verwendeten SVGs. Komplexe SVGs mit vielen Pfaden und detaillierten Effekten können die Ladezeiten erheblich verlängern und die Leistung negativ beeinflussen.

Wann sollten SVGs eingebettet und nicht als externe Dateien verwendet werden

Eingebettete SVGs eignen sich am besten für:

• Kleine, einfache Icons und Grafiken, die davon profitieren, direkt im HTML oder CSS gestylt und bearbeitet zu werden.
• Designs, die eine dynamische Manipulation auf der Grundlage von Interaktionen oder Echtzeitbedingungen erfordern.

Externe SVG-Dateien werden bevorzugt für:

• Große, komplexe Grafiken, die auf mehreren Seiten einer Website verwendet werden und vom Browser-Caching profitieren.
• Grafiken, die nicht dynamisch bearbeitet werden müssen oder die nur selten aktualisiert werden.

Indem Sie diese Nuancen verstehen und die leistungsstarken Designfunktionen von Webflow nutzen, können Sie die Verwendung und Leistung von SVGs in Ihren Projekten optimieren und so eine schnelle, ansprechende und visuell ansprechende Website sicherstellen.

Also ja, nichts, was die Welt verändert, aber nützlich zu wissen und vielleicht gibt es dir einen kleinen Schub. Zu Ihrer Information Cloudflare ist hier eine gute Option, es kann ein SVG nicht optimieren, aber es kann es in der Nähe des Benutzers zwischenspeichern, also schau dir diesen anderen Beitrag von uns an.