Nutzen
Nutzererfahrung und Google-Ranking durch hohe Seitengeschwindigkeit verbessern.
Ansatz
Die Seitengeschwindigkeit beeinflusst nicht nur die Nutzererfahrung, sondern spätestens seit einem Update des Google Suchalgorithmus 2020 die Auffindbarkeit der Seite. Die Seitengeschwindigkeit wird hauptsächlich von drei Parametern beeinflusst:
- Die Güte des Codes, der der Website zugrunde liegt
- Das Hosting, also wie gut die Verknüpfung zwischen Website-Code und Servern ist sowie die Geschwindigkeit der Server selbst.
- Weitere Faktoren wie Bilder, Ladeeinstellungen und Parameter
Maßnahmen w7
Technische Maßnahmen:
- Kein aufgeblähter Code. Webflow ist ein Code-Editor, der reinen HTML-/JS-Code auswirft. Der Code von Webflow ist extrem sauber und gut optimiert
- Wenige Add-Ons: Webflow bietet keine Plugins, die Hunderte von Codezeilen zu einer Website hinzufügen. Es gibt keine langen CSS-Stylesheets oder Rendering-blockierendes JavaScript, um das man sich sorgen müsste. Wenn Sie einen Geschwindigkeitstest auf einer leeren Webflow-Webseite durchführen, erhalten Sie jedes Mal ein Ergebnis von 100 %. Das ist bemerkenswert, denn selbst leere Seiten auf konkurrierenden Plattformen erreichen kaum mehr als 85 %.
- Geschwindigkeitsoptimiertes Hosting.
Weitere Maßnahmen:
- Selektives Laden auf dem Handy gegenüber dem Desktop verwenden: Da mobile Websites in der Regel langsamer sind als Desktop-Websites, ist es eine gute Idee, bestimmte Skripte nur auf der Desktop-Version Ihrer Website zu laden. Google stuft Sie auch auf der Grundlage der mobilen Version Ihrer Website ein.
- Bilder optimieren: Komprimieren Sie alle Bilder mit der Bildkomprimierungsplattform Ihrer Wahl (wir bevorzugen Image Compressor für PNG und JPGs). Kleinere Bildgrößen sind für die Leistung der Website hervorragend, da sie schneller geladen werden als größere Bilder. Achten Sie aber auf die Bildqualität - Sie wollen die Größe nicht so stark reduzieren, dass Ihre Bilder körnig wirken.
- Bilder komprimieren: Darüber hinaus können Sie Ihre Bilder auch in WebP konvertieren - ein kleineres und kompakteres Bilddateiformat, mit dem Sie qualitativ hochwertige Bilder bereitstellen können. Mit dem Webflow-Konvertierungstool können Sie sogar alle in Webflow vorhandenen Bilder direkt in WebP konvertieren.
- Lazy Loading: Beim Lazy Loading werden Bilder erst dann auf Ihre Website geladen, wenn ein Betrachter zu ihnen scrollt, und nicht sofort. Wie der Hack, den ich zuvor mit Skriptverzögerungen besprochen habe, ermöglicht dies ein schnelleres Laden Ihrer Website, ohne die Benutzeroberfläche oder das Benutzererlebnis zu beeinträchtigen. Einer der Vorteile von Lazy Loading besteht darin, dass Sie Ihre Bilder für Retina-Displays optimieren können, was größere Bilder ermöglicht, ohne die Geschwindigkeit der Website zu beeinträchtigen.
- Reduzierte Schriftarten: Wir vermeiden das Laden verschiedener Schriftarten. Jede Schriftart und jedes Gewicht ist eine weitere Serveranfrage, die unweigerlich alles andere verlangsamt.
- Keine Preloads: Das Vorladen ist eine Anweisung an Ihren Browser, eine andere Seite zu laden, bevor der Benutzer sie anklickt. Wenn beispielsweise 90 % Ihrer Besucher von Ihrer Homepage auf Ihre Produktseite gehen, können Sie diese vorladen, damit sie sofort geladen wird. Dies wirkt sich auf die Geschwindigkeit der Website aus, da zwei Seiten geladen werden müssen: die Seite, auf der Sie sich gerade befinden, und die nächste Seite. Wenn Sie derzeit das Vorladen verwenden, sollten Sie es für eine maximale Leistung deaktivieren.
Nützliche Links
Einen Artikel mit ähnlichen, aber ausführlicher beschriebenen Tips von Webflow finden Sie hier ↗.