Wie Sie Ihre Website Tilda beschleunigen können

Dem Laden von Webseiten wird im Internet besondere Aufmerksamkeit geschenkt. Deshalb ist die Arbeit an der Ladegeschwindigkeit von Webseiten für uns zur Routine geworden. Wir setzen neue Technologien ein und optimieren technische Abläufe. Einige der Aktualisierungen sind für die Nutzer sichtbar, andere nicht. Es ist ein kontinuierlicher Prozess, und wir sind schon jetzt stolz auf die Fortschritte, die wir gemacht haben.

In diesem Artikel geben wir Ihnen eine kurze Checkliste an die Hand, wie Sie die Ladegeschwindigkeit Ihrer Website mit den vorhandenen Tools von Tilda und durch Änderung der Einstellungen erhöhen können. Wir gehen jeden Punkt im Detail durch, so dass Sie die Einstellungen Ihrer Website selbst anpassen können, um sie noch schneller laden zu lassen.

Bevor wir die einzelnen Punkte aufschlüsseln, wollen wir sehen, wie Sie die Ladegeschwindigkeit der Seite beurteilen können.

Viele Nutzer von Tilda überprüfen die Ladegeschwindigkeit ihrer Websites mit PageSpeed Insights von Google. Dieser Dienst simuliert das Laden von Websites auf Mobilgeräten und Desktops und weist ihnen eine Effizienzbewertung zu.

Es handelt sich um ein herkömmliches technisches Tool, das nicht immer die tatsächliche Ladegeschwindigkeit widerspiegelt. Unserer Erfahrung nach sind die Daten, die Chrome sammelt und im Entwickler-Panel anzeigt, viel besser als die, die durch die PageSpeed Insights-Simulation gewonnen werden. Deshalb empfehlen wir, sich nicht ausschließlich auf PSI zu verlassen, sondern es als ergänzendes oder indirektes Analysetool zu betrachten.

Die Überwachung der tatsächlichen Ladegeschwindigkeit der Website ist eine bessere Option. Sie können dies in den Entwicklertools in Chrome tun: Öffnen Sie die Konsole (Option + Strg + I / Alt + Cmd + I) und gehen Sie zur Symbolleiste "Gerät umschalten" → Registerkarte "Netzwerk" → laden Sie die Seite neu, die Sie auswerten möchten. Die wichtigsten Parameter sind DOMContentLoaded, das die Zeit angibt, die zum Laden der Seitenstruktur benötigt wird, und Load, das die Zeit angibt, die zum Laden der Seite mit allen Tabellen und Stilen benötigt wird.

Auch diese Methode ist nicht perfekt - die schnelle 3G-Simulation der Symbolleiste simuliert das Laden der Website auf mobilen Geräten nicht eindeutig und korrekt, sodass Sie die Ladegeschwindigkeit auf tatsächlichen Geräten überprüfen und anhand der Daten Schlussfolgerungen ziehen müssen.

Tilda verfügt über eine große Anzahl von Optimierungen, die das Laden von Seiten beschleunigen. Einfache Websites ohne Code oder Skripte von Drittanbietern werden schnell geladen. Sie können sich selbst davon überzeugen: Wählen Sie eine Vorlage vonTilda und prüfen Sie die Ladegeschwindigkeit der Seite mit PageSpeed Insights.

Testen wir es an einer echten Website: Wir haben eine der Vorlagen aus der Tilda Vorlagenbibliothek ausgewählt und mit dieser Vorlage eine Website für die Stylistin Annie erstellt. Schätzen wir ihre Ladegeschwindigkeit mit PageSpeed Insights.

Natürlich hängt die Ladegeschwindigkeit von der Komplexität der Website ab, vom Vorhandensein bestimmter Blöcke und davon, ob wir Widgets, Zähler, Statistiken und andere Add-ons von Drittanbietern eingebunden haben, die das Laden der Website verlangsamen können.

Wir haben diesen Artikel geschrieben, damit Sie das Problem verstehen und lernen, die Einstellungen zu identifizieren, die Ihnen helfen, eine schnell ladende Website zu erstellen. Sie müssen jedoch eine wichtige Entscheidung treffen: Die Anwendung aller Tipps aus der Checkliste wirkt sich nicht nur auf die Ladegeschwindigkeit der Website aus, sondern auch auf ihr Design.

Lazy Load ermöglicht es, dass die Bilder nach und nach geladen werden, wenn der Betrachter auf der Seite nach unten scrollt, und nicht alle auf einmal. Diese Einstellung ist standardmäßig aktiviert und wirkt sich direkt auf die Leistung der Website aus.

Wir sehen oft, dass Designer, die benutzerdefinierte Websites erstellen, Lazy Load aus irgendeinem Grund deaktivieren - dies ist nicht zu empfehlen, da es die Website verlangsamt.

Stellen Sie sicher, dass Lazy Load für Ihre Website aktiviert ist. Gehen Sie dazu zu Website-Einstellungen → Mehr und stellen Sie sicher, dass das Kontrollkästchen "Lazy Load für Bilder deaktivieren" nicht markiert ist. Vergewissern Sie sich auch, dass die Funktion in den Einstellungen für Bilder und Formen unter Zero Block nicht deaktiviert ist.

Lazy Load und manuelle Bildoptimierung sind die beiden wichtigsten Dinge, die Sie optimieren können. Bilder sind das schwerste Element auf der Website, daher hängen 70 % der Ladegeschwindigkeit der Seite von ihnen ab.

Tilda verfügt über eine exklusive Funktion - AdaptiveImage Loading. Dabei handelt es sich um eine spezielle Bildverarbeitungstechnologie, die Bilder je nach Gerät des Nutzers auf die Größe des Containers auf der Website skaliert. Außerdem werden die Bilder in das WebP-Format der nächsten Generation konvertiert, das die Bilder ohne Qualitätsverlust komprimiert, so dass die Website schneller geladen wird. Die Konvertierung erfolgt automatisch, ohne dass zusätzliche Maßnahmen ergriffen werden müssen.

In bestimmten Fällen ist die automatische Optimierung "on the fly" nicht mit der manuellen Bildkomprimierung zu vergleichen. Wenn die Ladegeschwindigkeit der Seite für Sie entscheidend ist, empfehlen wir die Optimierung von Bildern mit TinyPNG, einem kostenlosen Online-Dienst, der eine verlustfreie Datenkomprimierungstechnologie verwendet, um Bilder ohne sichtbare Qualitätsverluste zu komprimieren.

Eine andere Lösung besteht darin, unterschiedliche Blöcke für die Desktop- und die mobile Version der Website hinzuzufügen und Bilder in unterschiedlichen Größen und Gewichten hochzuladen. Das können Sie zum Beispiel für die Titelseite Ihrer Website tun.

Der Algorithmus auf Tilda funktioniert folgendermaßen: Wenn die Seite geladen wird, wird das Bild "on the fly" optimiert, und wenn das optimierte Bild weniger Platz benötigt als das Originalbild, wird es automatisch angezeigt. Dies kann passieren, wenn der Cache aufgewärmt wird und das System noch Verkehrsstatistiken sammelt, um die Bilder in der erforderlichen Auflösung vorzubereiten. Eine manuelle Optimierung kann hier nicht schaden und in einigen Fällen sogar dazu beitragen, die Bilder zu optimieren und die Ladegeschwindigkeit der Seite zu erhöhen.

Diese Kategorie von Optimierungen steht an zweiter Stelle in Bezug auf Gewicht und Bedeutung. Systemschriftarten wie Arial oder Georgia sind auf jedem Computer verfügbar. Darüber hinaus gibt es Plug-in-Schriftarten wie Ubuntu und Roboto.

Wenn Sie Ihre Website so schnell wie möglich machen wollen, empfehlen wir Ihnen, keine benutzerdefinierten Schriftarten zu verwenden, sondern stattdessen eine der Systemschriftarten auszuwählen. Auf diese Weise können Sie 100-400 KB einsparen, was für das Laden der Seite sehr wichtig ist.

Wenn Sie ein Branding oder eine Corporate Identity verwenden müssen, können Sie unsere neue Funktion nutzen - Instant Content Rendering. Mit dieser Einstellung können Sie Inhalte auf der Website unabhängig davon anzeigen lassen, ob Ihre Markenschriftart geladen wurde oder nicht. Auf der Website wird zunächst die Systemschriftart angezeigt, und nach einigen Sekunden, wenn die Schriftart geladen ist, wird der Text erneut gerendert, diesmal in Ihrer Markenschriftart.

Diese Funktion ist nicht standardmäßig aktiviert. Wenn Ihnen die Ladegeschwindigkeit wichtiger ist als der reibungslose Ladevorgang oder der visuelle Aspekt, sollten Sie diese Funktion in den Website-Einstellungen → Schriftarten und Farben → Erweitert aktivieren.

Prüfen Sie, ob Sie Skripte oder Code von Drittanbietern, wie z. B. Chats oder einen Zähler, angeschlossen haben. Auf Tilda können Sie diese über den Block T123 einbinden. Prüfen Sie daher, ob Sie diesen Block auf der Seite oder in der Kopfzeile Ihrer Website haben.

Nach unseren Beobachtungen ist in 95 % der Fälle der der Website hinzugefügte Code nicht für die Ladestrategie optimiert und kann die Darstellung der Seite stark verlangsamen. Deshalb empfehlen wir Ihnen, Skripte von Drittanbietern zu vermeiden oder sie mit der richtigen Verbindung zu verwenden.

Wenn Sie auf den Code von Drittanbietern nicht verzichten können, sollten Sie das Laden und die Initialisierung des Skripts verzögern. Die ersten Sekunden des Seitenaufbaus sind sehr wichtig, daher wäre es am besten, wenn nichts Unnötiges geladen würde. Nehmen wir zum Beispiel an, Sie fügen ein Intercom-Widget hinzu. In diesem Fall sollten Sie das Skript 3 Sekunden, nachdem der Hauptinhalt gerendert wurde (die Ereignisse "DOMContentLoaded" oder "document ready"), verbinden und initialisieren. Dieser Schritt verhindert, dass der Hauptladefluss blockiert wird, so dass die Seite schneller gerendert werden kann.

Auf Tilda zum Beispiel werden die Zähler standardmäßig mit einer Verzögerung von 2 Sekunden geladen. Mehr dazu erfahren Sie im nächsten Abschnitt.

Die verzögerte Zählerinitialisierung ist eine neue Funktion, die seit kurzem für alle Benutzer von Tilda verfügbar ist. Damit der Zähler auf der Seite eine Verbindung herstellen kann, muss der Browser ein Skript laden, den Code analysieren und ihn ausführen. Google Analytics-Dateien sind recht umfangreich und verlangsamen die Anzeigegeschwindigkeit der Seite, wenn sie alle auf einmal geladen werden. Aus diesem Grund werden die Zähler standardmäßig 2 Sekunden nach dem Laden der Seite verbunden.

Sie können sicherstellen, dass diese Einstellung in den Website-Einstellungen → Analytics nicht deaktiviert ist.

Der Punkt scheint offensichtlich, aber er funktioniert: Je weniger Informationen auf der Seite, desto schneller wird sie geladen. Betrachten Sie Ihre Website mit einem kritischen Auge: Ist es wirklich notwendig, alle Informationen und Bilder auf der Seite zu haben, oder können sie gekürzt werden? Wenn Sie z. B. eine sehr lange Seite haben (mehr als 20 Bildschirme), sollten Sie einen Teil des Inhalts auf eine andere Seite verschieben, um die Ladegeschwindigkeit zu erhöhen. Dies ist etwas, das Sie direkt beeinflussen und anpassen können.

Manchmal platzieren Nutzer ein großes Titelbild auf dem ersten Bildschirm und vier kleinere Bilder im nächsten Block. In diesem Fall muss der Browser fünf Bilder herunterladen, anstatt eines. Dies behindert den Datenverkehr, vor allem im mobilen Internet, weshalb wir nicht empfehlen, zu viele Bilder oben auf der Seite zu platzieren.

Stellen Sie sicher, dass Ihre Website nicht exportiert oder über eine API synchronisiert wird - mit anderen Worten, stellen Sie sicher, dass sich Ihre Website auf den Servern von Tilda befindet. Falls sie exportiert wird, stellen Sie sicher, dass Ihr Webserver optimal konfiguriert ist.

Tilda hat eine hochwertige interne Infrastruktur aufgebaut, die wir ständig verbessern und weiterentwickeln. Wir haben uns um viele Dinge gekümmert: zuverlässige und schnelle Server, CDN zur Beschleunigung der Bildauslieferung, Schutz vor DDoS-Angriffen und verschiedene andere technische Optimierungen, die darauf abzielen, die Ladegeschwindigkeit der Websites von Tilda zu maximieren.

Was das Hosting von Drittanbietern betrifft, so können wir weder den Umfang noch die Qualität der Arbeit der Systemadministratoren kontrollieren. Dennoch können wir einige Tipps geben, was Sie tun können, damit Ihre Website schneller lädt, wenn Sie sie exportiert haben:
- Schließen Sie ein CDN an und zeigen Sie Bilder über ein verteiltes Content Delivery Network an.
- Schalten Sie die CSS/JS/HTML-Caching-Header in den Webserver-Einstellungen ein, damit der Browser sie nicht jedes Mal herunterlädt, sondern aus dem Cache holt.
- Aktivieren Sie die Gzip- oder Brotli-Komprimierung für CSS-, JS- und HTML-Dateien.
- Aktivieren Sie in den Einstellungen die Komprimierung der Textdateien: CSS, JS, HTML.
- Fügen Sie den JS-Skripten von Drittanbietern ein "async"-Attribut hinzu, damit ihr Laden das Laden der Seite nicht verlangsamt.
- Fügen Sie Widgets von Drittanbietern nur bei Bedarf hinzu und sorgen Sie für eine Verzögerung bei der Initialisierung von 2-3 Sekunden, damit der Seiteninhalt genügend Zeit zum Rendern hat.

Tilda Websites werden standardmäßig ziemlich schnell geladen. Wenn Sie Ihre Website noch schneller machen wollen, nutzen Sie unsere Empfehlungen aus der Checkliste. Sie werden Ihnen helfen, eine ultraschnelle Website zu erstellen, aber Sie werden ein paar Kompromisse in Bezug auf Design und Optik eingehen müssen. Diese Entscheidungen und Prioritäten überlassen wir immer dem Nutzer.

Wir unsererseits arbeiten ständig an der Optimierung der Plattform und der Implementierung neuer Lösungen, die Ihre Website noch schneller machen.