So verwenden Sie benutzerdefinierten Code in Webflow, ohne die Leistung zu beeinträchtigen

Während Webflow oft als No-Code-Plattform angepriesen wird, stößt jeder Webflow-Entwickler irgendwann an die Grenzen der Plattform. Ob es sich um eine benutzerdefinierte Animation, eine komplexe Funktionalität oder eine Integration von Drittanbietern handelt, manchmal kann Webflow alleine die Arbeit einfach nicht erledigen. In diesem Fall macht es Webflow glücklicherweise einfach, Ihre Website mit benutzerdefiniertem Code zu erweitern. Wenn benutzerdefinierter Code jedoch nicht korrekt implementiert wird, kann er die Gesamtleistung beeinträchtigen, Geschwindigkeitsprobleme verursachen oder einfach etwas völlig Unerwartetes kaputt machen.

In diesem Artikel erläutern wir, wie Sie benutzerdefinierten Code in Webflow mit dem implementieren Best Practices zur Aufrechterhaltung der Leistung Ihrer Website und erweitern Sie Ihre Webflow-Site von No-Code auf Low-Code.

‍

Was meinen wir mit „benutzerdefiniertem Code“ in Webflow?

Benutzerdefinierter Code in Webflow gibt es normalerweise in einer von drei Formen:

• HTML: Dies ist der Inhalt und die Struktur Ihrer Seite. Stellen Sie sich das als die Bausteine vor (Überschriften, Bilder, Schaltflächen, Linkblöcke)
• CSS: Steuert, wie alles aussieht. Farben, Schriftarten, Abstände und alle zusätzlichen Stile, die über das hinausgehen, was Sie mit dem Designer von Webflow tun können.
• Javascript: Dies erweitert Ihre Website um Funktionen, die über die Vermittlung der Botschaft hinausgehen. Dinge wie Formular-Kontrollkästchen, Animationen, Pop-ups oder das Herstellen einer Verbindung zu Tools von Drittanbietern.

‍

Webflow verwendet diese drei Programmiersprachen zwar bereits, um unsere Websites zu erstellen, aber wenn wir diesen zusätzlichen Schub benötigen, müssen wir möglicherweise Ausschnitte davon hinzufügen, um unsere Website zu erweitern. Aber jeder benutzerdefinierte Code belastet unsere Websites, daher müssen wir darauf achten, wie wir unsere Lösungen implementieren.

‍

So betten Sie benutzerdefinierten Code in Webflow ein

Es gibt verschiedene Möglichkeiten, Code zu Ihrer Website hinzuzufügen. Die Auswahl des richtigen ist der erste Schritt, um die Leistung aufrechtzuerhalten.

‍

1. Site-weiter Code

Für Skripte, die Sie überall haben möchten, wie Google Analytics oder ein Live-Chat-Widget:

• Gehe zu Projekteinstellungen → Benutzerdefinierter Code.
• Fügen Sie das Skript dem Kopf (für Code, der ausgeführt werden sollte, bevor die Seite angezeigt wird) oder davor </body> (für alles andere).

Profi-Tipp: wirf nicht alles hier ab. Wenn Sie nur etwas benötigen, das auf einer Seite ausgeführt werden muss, verlangsamen Sie nicht Ihre gesamte Website, indem Sie sie überall laden.

‍

2. Code auf Seitenebene

Für Skripte, die nur auf eine bestimmte Seite gehören:

• Öffne diese Seite Einstellungen.
• Fügen Sie Ihren Code in die Seite ein Kopf oder vor dem Körper Abschnitt.

Dies ist perfekt für Dinge wie benutzerdefinierte Schieberegler oder Formularskripte.

‍

3. Elemente einbetten

Stellen Sie sich das so vor, als würden Sie Code direkt in Ihr Layout einfügen, genau wie bei einem Div-Block. Ziehen Sie eine Einbetten aus dem Bedienfeld Hinzufügen und fügen Sie Ihr Snippet ein. Sie können auch Einbettungen zu Rich-Text-Elementen hinzufügen, sodass Sie mehr Kontrolle darüber haben, was in Ihren CMS-Sammlungen enthalten ist.

Das ist toll für Dinge wie HubSpot Formulareinbettungen, benutzerdefinierte Schaltflächen oder Iframes.

‍

4. CSS-Eigenschaften im Bedienfeld „Stil“

Webflow hat uns kürzlich die Möglichkeit gegeben, hinzuzufügen jede CSS-Eigenschaft direkt im Designer, auch solche, die in unserer Webflow Designer-Benutzeroberfläche nicht offiziell verfügbar sind. Scrollen Sie zum Ende des Style-Bedienfelds und Sie sehen ein Feld, in das Sie jede CSS-Eigenschaft und jeden CSS-Wert eingeben können.

Dies bedeutet, dass Sie sich bei einfachen Anpassungen weniger auf Einbettungen verlassen müssen. Sie können Ihr Design an einem Ort behalten und die Menge an benutzerdefiniertem Code reduzieren, der Ihre Seiten belastet. Änderungen werden sofort auf Ihrer Webflow-Arbeitsfläche angezeigt.

‍

Häufige Fallstricke, die die Leistung beeinträchtigen 

Hier sind die häufigsten Fehler, die Webflow-Websites verlangsamen und Probleme beim Hinzufügen von benutzerdefiniertem Code verursachen.‍

• ‍Laden von Skripten auf jeder Seite, wenn Sie sie nur auf einer benötigen
  Beispiel: Laden Sie auf jeder Seite ein benutzerdefiniertes interaktives Kartenskript, indem Sie den Code in den Seiteneinstellungen haben, wenn er nur auf Ihrer Kontaktseite benötigt wird.
  ‍
• ‍Riesige Bibliotheken für winzige Jobs einziehen
  Beispiel: Laden der gesamten jQuery-Bibliothek oder eines anderen umfangreichen Animationsframeworks, nur um eine Fade-up-Animation zu erzielen. Die integrierten Interaktionen von Webflows oder die neue GSAP-Animationsoberfläche können dies problemlos bewältigen, ohne dass Sie Ihrer Website weitere Bibliotheken hinzufügen müssen.
  ‍
• ‍Skripte an der falschen Stelle platzieren
  Beispiel: Skripte in der Kopf wird geladen, bevor die Seite gerendert werden kann, sodass sie die Seite blockieren und dafür sorgen können, dass sie sich langsam anfühlt. Wenn du einen benutzerdefinierten Slider hinzufügst, achte darauf, dass er in das Körper Abschnitt, sodass er erst geladen wird, wenn die Seite vollständig geladen ist.
  ‍
• ‍Den alten Code vergessen
  ‍Wenn es deine Website schon eine Weile gibt, lauert möglicherweise ein alter Code im Hintergrund, der nicht mehr benötigt wird. Überprüfe deine Website regelmäßig auf unbenutzten Code, der möglicherweise auf deinen Seiten geladen wird, und entferne alles, was nicht benötigt wird.
  ‍
• ‍Zu viele Einbettungen
  Das Hinzufügen vieler separater Einbettungselemente kann deine Website überladen und die Verwaltung erschweren, was später zu Problemen führen kann. Wenn du denselben Codeausschnitt an mehreren Stellen wiederverwendest, stelle sicher, dass du eine Komponente verwendest, damit du sie einmal aktualisieren und auf deiner gesamten Website anwenden kannst.

‍

Bewährte Methoden für leistungsfreundlichen benutzerdefinierten Code 

Nachdem wir die häufigsten Fehler behandelt haben, schauen wir uns an, wie benutzerdefinierter Code in Webflow richtig ausgeführt wird.

‍

Skripte korrekt laden

Nicht alle Skripte müssen gleichzeitig ausgeführt werden. Sie richtig zu laden, macht einen großen Unterschied in der Leistung.

Async verwenden wenn das Skript nicht vom Seiteninhalt abhängt (wie Google Analytics). Es wird im Hintergrund heruntergeladen und ausgeführt, sobald es fertig ist, ohne die Seite zu blockieren.

<script src="analytics.js" async></script>

Stellen Sie sich das so vor, als würden Sie Ihrem Browser sagen: „Schnapp dir das, während du die Seite lädst, und starte es, wann immer es fertig ist.“

‍

Verwenden Sie Aufschub wenn für das Script die Seite zuerst erstellt werden muss (wie Slider oder Akkordeons). Es wird auch im Hintergrund heruntergeladen, läuft aber erst, wenn der HTML-Code fertig ist.

<script src="slider.js" defer></script>

Stell es dir vor als: „Bereite das jetzt vor, aber lauf nicht, bis die Seite fertig ist.“

Seien Sie bei der Platzierung bewusst

Wir haben bereits besprochen, dass der Code, den Sie auf jeder Seite haben möchten, in die Projekteinstellungen gehört und seitenspezifischer Code in die Seiteneinstellungen oder auf jeder Seite gehört. Der Schlüssel liegt darin, ihn regelmäßig zu überprüfen und sicherzustellen, dass die Dinge immer noch am richtigen Ort sind, wenn deine Website wächst.

‍

Nennen Sie die Dinge klar

Verwenden Sie eindeutige Namen wie .bw-slider oder .js-map, damit Ihr Code nicht mit den integrierten Klassen von Webflow kollidiert.

‍

Testen Sie jedes Mal

Nachdem Sie benutzerdefinierten Code hinzugefügt haben, erstellen Sie einen kurzen Lighthouse-Bericht oder überprüfen Sie die Geschwindigkeit Ihrer Website. Es ist viel einfacher, Probleme sofort zu beheben, als sie Wochen später aufzuspüren.

‍

Leistungsoptimierung, die über den Code hinausgeht

Selbst mit allen Vorsichtsmaßnahmen beim Hinzufügen von benutzerdefiniertem Code zu Webflow können andere Teile Ihrer Website Ihre Leistung beeinträchtigen. Hier sind einige schnelle Tipps, um deine Geschwindigkeit zu erhöhen und deine Bandbreitenkosten niedrig zu halten.

‍

Aktiviere die Minimierung und das Caching von Webflow
In deinen Projekteinstellungen unter Publizieren, aktiviere „HTML, CSS und JavaScript minimieren“. Dadurch wird Webflow angewiesen, den ausgegebenen Code automatisch zu komprimieren, wodurch Ihre Seiten schneller geladen werden. Webflow kümmert sich auch um das Caching, sodass wiederkehrende Besucher nicht alles von Grund auf neu laden müssen.

‍

Komprimieren und optimieren Sie Ihre Bilder und MedienGroße Bild- und Videodateien sind eine der Hauptursachen für langsame Websites. Wählen Sie in Ihrem Asset-Menü in Webflow Designer alle Bilder aus und klicken Sie auf „In WebP- oder AVIF-Formate komprimieren“, um das Laden der Bilder zu optimieren. Versuche, Videos außerhalb deiner Website auf einer Plattform wie Vimeo zu hosten und sie einzubetten, um die Ladegeschwindigkeit der Seiten zu erhöhen. Aktiviere in den Webflow-Asset-Einstellungen verzögertes Laden Bilder und Videos außerhalb des Bildschirms werden also nur geladen, wenn der Benutzer zu ihnen scrollt.

‍

Laden Sie nur die Schriften, die Sie benötigen
Überprüfe, welche Schriftarten und Schriftstärken du tatsächlich auf deiner Website verwendest. Wenn du nur normale, fett und dünne Schriftstärken verwendest, deinstalliere alle anderen Schriftstärken, die möglicherweise im Hintergrund geladen werden. Dies wirkt sich nicht nur positiv auf die Leistung der Website aus, sondern ist auch eine bewährte Methode, um Ihr Designsystem in Ordnung zu halten, wenn mehrere Personen Ihre Website bearbeiten und Änderungen daran vornehmen.

‍

Überprüfe deine Website regelmäßig
Verwende Tools wie Lighthouse, PageSpeed Insights oder Silktide, um herauszufinden, was Probleme mit deiner Website verursacht. Tools wie diese geben dir eine Leistungsbewertung und heben bestimmte Probleme hervor, wie z. B. große Ressourcen, unbenutzter Code oder langsame Skripte, die du dann beheben kannst, um die Gesamtleistung deiner Website zu verbessern.

‍

Überwachungs- und Debugging-Tools

Wenn es darum geht, Ihrer Website benutzerdefinierten Code hinzuzufügen, können Sie ihn leider nicht einfach veröffentlichen und vergessen. Während bei Ihren normalen Webflow-Websites alle Updates und Probleme von Webflow erledigt werden, müssen Sie bei benutzerdefiniertem Code im Auge behalten, wie sich dieser im Laufe der Zeit auf Ihre Website auswirkt und ob Aktualisierungen vorgenommen werden müssen.

‍

Tools für Browser-Entwickler
Klicken Sie in Chrome (oder einem anderen modernen Browser) mit der rechten Maustaste auf Ihre Website und wählen Sie Inspizieren aus dem Dropdown. Zwei Tabs sind besonders nützlich:

• Registerkarte „Netzwerk“: zeigt dir jede Datei, die deine Seite lädt und wie lange es dauert. Halte Ausschau nach Skripten, die ungewöhnlich groß oder langsam sind.
• ‍Registerkarte „Konsole“: listet Fehler und Warnungen auf. Wenn dein Script nicht funktioniert oder etwas kaputt geht, wirst du hier oft Hinweise finden.

‍

Überwachen Sie Ihre Analysen
Tools wie Google Analytics können zeigen, ob Ihr neuer Code die Nutzererfahrung beeinträchtigt. Achten Sie auf:

• Absprungrate steigt plötzlich.
• Durchschnittliche Zeit auf einer Seite wird gelöscht, nachdem Sie einen neuen Code hinzugefügt haben. Beides können Signale dafür sein, dass Ihre Website langsamer geworden ist oder fehlerhaft ist.

‍

Fazit

Die Möglichkeit, benutzerdefinierten Code auf Ihrer Webflow-Website zu implementieren und effektiv zu verwalten, ist ein wichtiger Schritt auf Ihrem Weg als Webflow-Entwickler und eröffnet eine Welt voller Möglichkeiten, wenn es um die Funktionalität und Leistungssteigerung Ihrer Website geht. In diesem Artikel haben wir die besten Möglichkeiten zur Implementierung Ihres benutzerdefinierten Codes in Webflow behandelt, die größten Fallstricke, die es zu vermeiden gilt, und wie Sie möglicherweise auftretende Fehler erkennen können.

Sie möchten Ihrer Webflow-Website benutzerdefinierte Funktionen hinzufügen, ohne die Leistung zu beeinträchtigen?
‍Wenden Sie sich an Broworks für optimierte Codelösungen.