So machen Sie eine Webflow-Website Ninja-schnell

In der heutigen Zeit müssen wir Ihnen wahrscheinlich nicht sagen, dass das Erstellen einer schnellen Website ebenso notwendig wie ästhetisch ansprechend und funktional ist. Seien Sie ehrlich, wenn Sie warten müssen, bis eine Seite geladen ist, warten Sie überhaupt? Oder gehst du einfach zurück und suchst nach einer anderen Lösung? In diesem Blog finden Sie einige Tipps, wie Sie eine Webflow-Website schnell wie ein Kinderspiel machen können!

‍

Was ist eine Webflow-Website?

Sie haben vielleicht schon gesehen, wie wir Webflow erwähnt haben, eine SaaS-Anwendung, mit der Designer responsive Websites erstellen. Während die Designer das Tool verwenden, generiert Webflow automatisch HTML, CSS und JavaScript. Darüber hinaus verfügt es über ein CMS (Content Management System) und ist eine Hosting-Plattform.

Wir verwenden Webflow, um schnelle, zuverlässige und natürlich gut aussehende Websites zu erstellen. Dies sind einige der Tipps, die Sie ausprobieren sollten, wenn Sie mit der Erstellung Ihrer eigenen Webflow-Website beginnen.

‍

Minimieren, schneiden, komprimieren...

Diese Worte klingen vielleicht so, als würden wir Ihnen sagen, dass Sie eine minimalistische Website mit Bildern und Videos mit niedriger Auflösung erstellen sollen, aber hören Sie uns zu:

JPG/PNG zu WebP komprimieren

WebP ist ein von Google entwickeltes Bilddateiformat. Es ist als Ersatz für die Dateiformate JPEG, PNG und GIF vorgesehen. Laut eine Studie, Verlustfreie WebP-Bilder sind im Vergleich zu PNGs um 26% kleiner.

Mit anderen Worten, wenn Sie Ihre JPGs und PNGs auf WebP komprimieren, sparen Sie viel Platz, ohne das Aussehen von Bildern zu beeinträchtigen.

‍

‍

Verwenden Sie keine unnötig großen Bilder und Videos

Mit Webflow können Sie ein Video mit einer Größe von bis zu 30 MB hochladen. Sie sollten sich jedoch immer 2 Fragen stellen, bevor Sie ein Video oder ein großes Bild hochladen:

1. Kann ich das weiter komprimieren?
2. Brauche ich das auf meiner Website?

Wenn du zum Beispiel an ein Hintergrundvideo denkst, ist das eine gute Idee! Ein Hintergrundvideo kann Ihrer Website Leben einhauchen, aber denken Sie daran, dass es sich um ein Hintergrundvideo handelt. Es ist möglicherweise nicht wichtig, dass dieses Video hochauflösend oder zu lang ist.

‍

Importiere alle Grafiken als SVG

SVG ist die Abkürzung für Scalable Vector Graphic. Der Hauptunterschied zwischen einem Bild oder einem JPG und einem SVG besteht darin, dass SVG-Dateien unendlich skalierbar sind. Sie können ihre Größe beliebig vergrößern und verkleinern, ohne dass sie pixelig werden oder an Klarheit verlieren.

Also, ja, ein unendlich skalierbarer Vektor ist nützlich, aber wie hilft er der Geschwindigkeit Ihrer Website? Laut Forschung, ein SVG kann im Vergleich zu einem PNG um bis zu 60 bis 80% kleiner sein.

‍

Verwenden Sie WOFF- oder WOFF2-Schriftarten und laden Sie nur die Schriftfamilien hoch, die Sie verwenden

Das Web Open Font Format (WOFF) und sein Nachfolger WOFF2 bieten die beste Komprimierung, konzentrieren sich auf die beste Leistung für moderne Browser und ermöglichen es Ihnen, mit weniger Dateien in Ihrem Code umzugehen.

‍

„Lazy Load“

Seit 2020. Webflow hat neue Bilder verzögert geladen, was bedeutet, dass sie geladen werden, während du zu ihnen scrollst (oder wenn sie auf dem Bildschirm erscheinen), und nicht vorher. Warum? Wie bei allen vorherigen Tipps ist die Antwort dieselbe: Das spart Platz und macht die Website schneller.

Wenn Sie nicht möchten, dass Ihre Bilder verzögert geladen werden, können Sie zu einzelnen Bildern wechseln und dies rückgängig machen. Wir empfehlen Ihnen jedoch, diese Option aktiviert zu lassen.

‍

‍

Verkleinern Sie Ihren CSS- und JS-Code

Der Begriff „Minify“ beschreibt den Prozess des Entfernens unnötiger Zeichen im Code. Das können Leerzeichen, Zeilenumbrüche, Kommentare und Blocktrennzeichen sein, die für Menschen nützlich sind, Maschinen sie aber nicht wirklich benötigen.

Wenn Sie Ihren Code minimieren, verlieren Sie die Ladezeit für die Website, aber der minimierte Code ist später schwieriger zu lesen. Denken Sie also auch daran.

‍

Verwenden Sie nicht zu viel benutzerdefinierten Code

Sie können benutzerdefinierten Code in Webflow verwenden. Die unterstützten Formate sind HTML, CSS und JS. Es gibt jedoch einige Probleme, die mit der Verwendung von (zu viel) benutzerdefiniertem Code einhergehen. Sie können auf dem Link lesen Die vollständige Erklärung, warum Webflow Ihnen möglicherweise nicht helfen kann, wenn Sie Probleme mit Ihrem benutzerdefinierten Code haben.

Abgesehen davon, dass Sie Probleme mit Ihrem Code haben, können zu viele Ihre Website erheblich verlangsamen. Denken Sie genau wie bei Videos und großen Bildern darüber nach, was genau Sie benötigen und was möglicherweise nicht unbedingt erforderlich ist.

‍

Säubere alle unbenutzten Klassen und Interaktionen

Sie können einen Style-Manager in Webflow verwenden, um die Bereinigung durchzuführen.

Der Style-Manager zeigt eine vollständige Liste der Klassen, Kombinationsklassen und Tags an, die auf der Site erstellt oder bearbeitet wurden. Sie können nicht nur ungenutzte Klassen löschen, sondern auch umbenennen, eine Vorschau Ihrer Klassen- und Tag-Stile anzeigen und nach Klassen und Tags suchen.

Was Interaktionen angeht, kannst du die Schaltfläche „Ungenutzte Interaktionen bereinigen“ im Interaktionsbereich verwenden, die Interaktionen auswählen, die du entfernen möchtest, und dann auf „Löschen“ klicken.

Wenn Sie beide bereinigen, können Sie die Ladezeit Ihrer Website verlängern.

‍

Verwenden Sie die globale Klassenauslastung auf der gesamten Website

Eine globale Klasse bedeutet, dass sie im gesamten Projekt verwendet wird. Sie wendet Stile an, die im gesamten Projekt einheitlich bleiben. Auf diese Weise erstellen Sie weniger unnötige Klassen und sorgen dafür, dass Ihre Website schnell ist.

‍

Fazit

Sie haben unsere Liste mit Tipps gelesen, die Ihnen helfen können, Ihre Website Ninja—schnell zu machen. Möglicherweise können Sie nicht alle für Ihre Website anwenden, und das ist in Ordnung. Selbst wenn Sie einige davon anwenden, sind wir sicher, dass Sie eine Änderung feststellen werden.

Und nur für den Fall, dass Sie es als Liste haben möchten, hier ist, was wir im Blog behandelt haben:

• JPG/PNG zu WebP komprimieren
• Keine unnötig großen Bilder und Videos
• Importiere alle Grafiken als SVG
• Verwenden Sie WOFF- und WOFF2-Schriftarten
• Laden Sie nur die Schriftfamilien hoch, die Sie verwenden
• Entscheiden Sie sich für Lazy Load
• Minimiere deinen CSS- und JS-Code
• Verwenden Sie nicht zu viel benutzerdefinierten Code
• Bereinigen Sie ungenutzte Klassen und Interaktionen
• Verwenden Sie die globale Klassennutzung auf Ihrer gesamten Website

P.S. Wenn du daran interessiert bist, ein kleines Spiel zu spielen, sende uns einige deiner Vorher/Nachher-Bilder von der Geschwindigkeit deiner Website!