7 Tipps, um Ihre Website noch heute zu beschleunigen
Jeder liebt eine coole kleine Ladeanimation, oder? Wenn dieser Divot jedoch länger als ein oder zwei Sekunden dauert, wird nur darauf hingewiesen, dass die Website langsam geladen wird. Und das ist ein Website-Killer.
Benutzer erwarten, dass Websites schnell und effizient geladen werden. Es ist Ihre Aufgabe, sicherzustellen, dass das Design nicht nur optisch ansprechend, sondern auch zu 100 Prozent funktional ist. Wenn sich Ihre Website etwas schleppt, können Sie sofort aufhören, sich Sorgen zu machen, da wir sieben Tipps haben, mit denen Sie Ihre Website mit kleinen Änderungen am Design beschleunigen können. (Stellen Sie sicher, dass Sie jede der in der Veröffentlichung vorgestellten Websites besuchen. Sie sehen großartig aus und werden blitzschnell geladen.)
Entdecken Sie Envato-Elemente
1. Achten Sie auf Animationen
Animation im Website-Design ist einer der „it“ -Trends des Jahres 2015. Lassen Sie sich nicht zurückhalten, indem Sie massive Dateien erstellen, die einfach nicht geladen werden. Beginnen Sie mit kleineren animierten Berührungen, wenn Sie mit dieser Art von Effekt arbeiten, und fahren Sie mit größeren Animationen fort, nachdem Sie ein gutes Gefühl dafür haben, wie sie funktionieren und mit Ihrem gesamten Website-Framework funktionieren.
Der Schlüssel zu Animationen ist nicht das Laden einer Reihe von Videodateien auf Ihre Website. Je kleiner die Animation ist, desto einfacher ist es, etwas mit einem winzigen Platzbedarf zu erstellen. Wo fängst du an?
Machen Sie etwas Einfaches und Lustiges, wie zum Beispiel einen animierten Schwebezustand. Das Ändern der Farbe oder das Erweitern einer Schaltfläche ist ein raffinierter Effekt, der Ihnen hilft, das CSS zu beherrschen und ein gutes Gefühl für grundlegende Animationen zu bekommen, bevor Sie zu größeren Elementen übergehen. Sie können auch AJAX- oder Parallaxen-Ladeanimationen in Betracht ziehen. Das Schöne an beiden Optionen ist, dass Sie Zeit zum Laden von Elementen haben, ohne dass der Benutzer dies bemerkt. Da Elemente beim Scrollen von Benutzern geladen werden, erhalten Sie einige wertvolle Sekunden, um alles vorzubereiten.
2. Bilder optimieren
Angesichts der Anzahl der HD- und Retina-Displays, die Benutzern zur Verfügung stehen, könnten Sie versucht sein, alle Ihre Bilder beim Erstellen Ihrer Website in voller Größe in hoher Auflösung zu laden. Fallen Sie nicht in diese Falle. Die meisten dieser Bilder sind wahrscheinlich viel zu groß, als dass Ihre Website sie effizient verarbeiten könnte.
Kennen Sie Ihre Dateitypen. Die gängigsten Dateiformate für Bilder im Web sind JPG, PNG, GIF und SVG.
- JPG: JPG-Dateien eignen sich am besten für Fotos und können von klein bis groß sein. Stellen Sie beim Speichern von JPG-Dateien für die Nutzung der Website sicher, dass Sie eine optimierte Datei speichern. (In Adobe Photoshop können Sie Bilder für das Web mithilfe der Exporteinstellungen unter Datei> Exportieren> Exportieren als optimieren.)
- PNG: Verwenden Sie dieses Dateiformat für Bilder, die Text enthalten, damit die Beschriftung gut wiedergegeben wird. Dies ist normalerweise eine eher kleine Datei.
- GIF: Das bevorzugte Dateiformat für kleinere animierte Elemente, z. B. das beliebte animierte Bild im Meme-Stil. Aber Vorsicht, dieses Dateiformat kann schwer werden, wenn Sie nicht vorsichtig sind.
- SVG: Wenn Sie ein Vektorbild für das Web benötigen, ist dies die beste Option. Es kann für alles verwendet werden, von Symbolen bis zu Logos.
3. Verwenden Sie nach Möglichkeit Code
Sie könnten versucht sein, eine Reihe von raffinierten Symbolen und Bildern für Ihre Website zu erstellen und jedes als einzelnes Element zu laden. Dies kann einige Probleme verursachen. Verwenden Sie stattdessen Code, um diese Elemente nach Möglichkeit aufzurufen.
Verwenden Sie CSS, um auch Hintergrundbilder zu laden. Dadurch wird Ihre Site gezwungen, alles andere vor dem Hintergrund zu laden, sodass Benutzer sofort andere Elemente und Texte auf der Site sehen können. W3Schools bietet ein großartiges und einfaches Tutorial dazu.
Es gibt viele Tools, von Font Awesome-Symbolen bis hin zu vielen anderen CSS- und JavaScript-Bibliotheken, mit denen Sie großartige Elemente mit lustigen Effekten erstellen können, die leichtgewichtig sind. (CSS Design Awards bietet eine besonders schöne Sammlung von 30 Schaltflächen und Formularelementen zum Ausprobieren.)
4. Halten Sie die Videos kurz
Ein weiteres trendiges Webdesign-Element ist die Verwendung von Vollbildvideos auf Ihrer Homepage. Dies kann eine weitere Ladezeitfalle sein. Sie werden zwischen Videoqualität, Videoinhalt und Geschwindigkeit gefangen sein und müssen irgendwo ein Opfer bringen.
Die besten Videos sind super kurz - nur ein paar Sekunden - und werden wiederholt, damit die Aktion nicht stoppt. Sie müssen auch keinen Sound oder andere Effekte einfügen.
Sie können ein paar andere Tricks ausprobieren, um die Dateigröße so gering wie möglich zu halten.
- Denken Sie an eine Farbüberlagerung oder Unschärfe bei einem Video mit niedrigerer Auflösung. Es kann immer noch ordentlich aussehen, benötigt aber nicht so viel Bandbreite.
- Stellen Sie sich ein Video vor, dessen Größe nicht dem Vollbild entspricht.
- Machen Sie Schluss mit der automatischen Wiedergabe, die Benutzer dazu verleiten kann, zu glauben, dass Ihre Website schneller geladen wird als sie ist.
- Bleib nicht bei langen Videos hängen. Wenn Sie mehrere Videoclips anzeigen möchten, ziehen Sie ein Video-Schiebereglerelement in Betracht oder ändern Sie Videos manuell nach einem Zeitplan, damit Benutzer bei jedem Besuch der Website etwas Neues sehen. (Egal wie gut Ihr Clip ist, nur wenige Benutzer sehen länger als ein paar Sekunden. Verzichten Sie also nicht auf die Ladezeit für längere Clips.)
5. Denken Sie über das Thema nach
Wenn Sie WordPress oder ein anderes Content-Management-System mit einem Thema verwenden, denken Sie daran, dass nicht alle Themen gleich aufgebaut sind. Während Sie mit einer Premium-Option wahrscheinlich mehr Glück haben werden - mit einigen davon können Sie nicht verwendete Elemente „ausschalten“ -, schauen Sie sich den Code genau an und erstellen Sie ihn, um sicherzustellen, dass dies nicht das ist, was Ihre Website blockiert.
6. Beobachten Sie Ihre Plugins
Haben Sie eine Menge Plugins oder Anwendungen von Drittanbietern, die an Ihre Site gebunden sind? Verwenden Sie sie alle aktiv? Stellen Sie sicher, dass nicht verwendete Plugins deaktiviert sind, um die Effizienz zu optimieren.
WordPress-Benutzer können den Plugin Performance Profiler nutzen, um zu sehen, welche Plugins aktiv sind und wie sie funktionieren. Dies kann Ihnen helfen, Probleme zu beheben und zu identifizieren und diese Plugins zu entfernen oder neu zu konfigurieren. (Ein häufiger Problembereich sind häufig Social-Sharing-Plugins.)
7. Komprimieren, Komprimieren, Komprimieren
Die einzelnen Komponenten Ihrer Website sollten nicht nur komprimiert werden, sondern Sie können auch die Website als Ganzes komprimieren, um sie schnell am Laufen zu halten. Zu den Elementen, die komprimiert werden können, gehören die CSS- und JavaScript-Dateien, Bilder und Videos (durch Größenänderung) sowie die Site, die mit einem Tool wie GZIP verwendet wird.
Minimierte Dateien sind der beste Weg, wenn es um Plugins und das Erstellen kleinerer Dateien geht. Sie möchten auch überprüfen, wie der Code auf der Site gestaltet ist. Für maximale Geschwindigkeit sollte das gesamte JavaScript in einer Datei und das gesamte CSS in einer anderen Datei enthalten sein. (Ein weiterer Hinweis: Wo Sie diesen Code platzieren, zählt ebenfalls. Verknüpfen Sie CSS oben auf der Seite und JavaScript unten, um auch die Geschwindigkeit Ihrer Website zu erhöhen.)
Fazit
Wird Ihre Website schnell genug geladen? Wenn nicht, ist es Zeit, es zu optimieren, um optimale Ladezeiten zu erreichen. (Wenn Sie überhaupt über diese Frage nachdenken müssen, dann ist Ihre Website wahrscheinlich nicht schnell genug.)
Websites müssen schnell sein, damit Benutzer sofort interagieren können. Je länger das Laden der Seite dauert, unabhängig vom Gerät, desto wahrscheinlicher ist es, dass Benutzer die Site vollständig verlassen. Nehmen Sie sich heute oder in dieser Woche ein paar Minuten Zeit und gehen Sie diese Liste durch, um sicherzustellen, dass Ihre Website eine optimale Leistung erbringt.
Bildquelle: Mohammed Al-Sultan .
