Jeder liebt eine coole kleine Lade-Animation, richtig? Wenn dieses 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, dafür zu sorgen, dass das Design nicht nur optisch ansprechend ist, sondern auch zu 100 Prozent funktional ist. Wenn Ihre Website etwas schleppt, können Sie jetzt aufhören, sich Sorgen zu machen, denn wir haben sieben Tipps, mit denen Sie Ihre Website mit kleinen Änderungen am Design beschleunigen können. (Besuchen Sie unbedingt jede der im Beitrag gezeigten Websites; sie sehen großartig aus und laden sich blitzschnell auf.)
1. Passen Sie auf Animationen auf
Animation im Website-Design ist eines der? Trends von 2015. Lassen Sie sich nicht durch die Erstellung riesiger Dateien, die einfach nicht geladen werden, zurück. 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 mit Ihrem allgemeinen Website-Framework arbeiten.
Der Schlüssel zu Animationen besteht nicht darin, eine Reihe von Videodateien auf Ihre Website zu laden. Je kleiner die Animation, desto einfacher ist es, mit einem kleinen Fußabdruck etwas zu erstellen. Also wo fängst du an?
Machen Sie etwas einfaches und lustiges, z. B. einen animierten Hover-Status. Das Ändern der Farbe oder das Erweitern einer Schaltfläche ist ein geschickter Effekt, mit dem Sie das CSS beherrschen und ein Gefühl für grundlegende Animationen erhalten, bevor Sie sich auf größere Elemente konzentrieren. Sie können auch AJAX- oder Parallax-Lade-Animationen in Betracht ziehen. Das Schöne an diesen beiden Optionen ist, dass Sie Zeit haben, Elemente zu laden, ohne dass der Benutzer dies überhaupt bemerkt. Da Elemente beim Scrollen geladen werden, gewinnen Sie ein paar Sekunden, um alles vorzubereiten.
2. Bilder optimieren
Mit der Anzahl der HD- und Retina-Displays, die den Benutzern zur Verfügung stehen, könnten Sie beim Erstellen Ihrer Website versucht sein, alle Bilder in voller Größe und mit hoher Auflösung zu laden. Fallen Sie nicht in diese Falle. Die meisten dieser Bilder sind wahrscheinlich zu groß, um von Ihrer Website effizient bearbeitet zu werden.
Kennen Sie Ihre Dateitypen. Die am häufigsten verwendeten Dateiformate für Bilder im Web sind JPG, PNG, GIF und SVG.
- JPG: JPG-Dateien eignen sich am besten für Fotos. Sie können winzig bis groß sein. Achten Sie beim Speichern von JPG-Dateien für die Website-Nutzung darauf, eine optimierte Datei zu 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 dargestellt wird. Dies ist normalerweise eine eher kleine Datei.
- GIF: Das bevorzugte Dateiformat für kleinere animierte Elemente, z. B. das allseits beliebte animierte Bild im Meme-Stil. Aber Achtung, dieses Dateiformat kann schwer werden, wenn Sie nicht aufpassen.
- 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 den Code
Sie könnten in Versuchung geraten, ein paar nette Symbole und Bilder für Ihre Website zu erstellen und diese als einzelnes Element zu laden. Dies kann zu Problemen führen. Verwenden Sie stattdessen Code, um diese Elemente nach Möglichkeit aufzurufen.
Verwenden Sie CSS auch zum Laden von Hintergrundbildern. Dies wird? Kraft? Ihre Website lädt alle anderen Elemente vor dem Hintergrund, sodass Benutzer sofort andere Elemente und Text auf der Website sehen können. W3Schools bietet eine großartige und einfache Anleitung, um dies zu tun.
Es gibt zahlreiche Werkzeuge, z. B. von Font Awesome-Symbolen bis hin zu anderen CSS- und JavaScript-Bibliotheken, mit denen Sie großartige Elemente mit unterhaltsamen Effekten erstellen können. (CSS Design Awards bietet eine besonders schöne Sammlung von 30 Schaltflächen und Formularelementen zum Ausprobieren.)
4. Videos kurz halten
Ein weiteres trendiges Webdesign-Element ist die Verwendung von Vollbildvideos auf Ihrer Homepage. Dies kann eine andere Ladezeitfalle sein. Sie befinden sich zwischen Videoqualität, Videoinhalt und Geschwindigkeit und müssen irgendwo ein Opfer bringen.
Die besten Videos sind super kurz - nur ein paar Sekunden - und in einer Schleife, damit die Action nicht aufhört. Sie müssen auch keinen Sound oder andere Effekte hinzufü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.
- Betrachten Sie ein Video, das nicht die Größe eines Vollbildschirms hat.
- Geben Sie das Autoplay auf, das kann? Benutzer denken, 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 einen Video-Schieberegler in Betracht. Sie können Videos nach einem Zeitplan erstellen oder manuell ändern, sodass Benutzer bei jedem Besuch der Website etwas Neues sehen. (Unabhängig davon, wie gut Ihr Clip ist, sehen nur wenige Benutzer mehr als ein paar Sekunden lang. Deshalb müssen Sie die Ladezeit nicht für längere Clips opfern.)
5. Über das Thema nachdenken
Wenn Sie WordPress oder ein anderes Content-Management-System mit einem Design verwenden, denken Sie daran, dass nicht alle Designs gleich aufgebaut sind. Während Sie mit einer Premium-Option wahrscheinlich mehr Glück haben werden - bei einigen davon lassen Sie sich ausschalten. Bei ungenutzten Elementen sollten Sie sich den Code genau ansehen und erstellen, um sicherzustellen, dass dies nicht die Sache ist, die Ihre Website zum Erliegen bringt.
6. Beobachten Sie Ihre Plugins
Haben Sie eine Menge Plug-Ins oder Anwendungen von Drittanbietern an Ihre Site gebunden? Benutzt du sie alle aktiv? Deaktivieren Sie nicht verwendete Plugins, 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. Auf diese Weise können Sie Probleme beheben und Probleme erkennen sowie diese Plugins entfernen oder neu konfigurieren. (Ein häufiges Problem 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 gesamte Site komprimieren, um einen reibungslosen Betrieb zu gewährleisten. Zu den Elementen, die komprimiert werden können, gehören die CSS- und JavaScript-Dateien, Bilder und Videos (durch Ändern der Größe) sowie die Site, wenn sie ein Tool wie GZIP verwenden.
Minimierte Dateien sind die beste Route, wenn es um Plugins und das Erstellen kleinerer Dateien geht. Sie möchten auch prüfen, wie der Code innerhalb der Site entworfen wird. Für maximale Geschwindigkeit sollte das gesamte JavaScript in einer Datei enthalten sein und das gesamte CSS sollte in einer anderen Datei enthalten sein. (Noch eine Anmerkung: Wo Sie diesen Code platzieren, zählt auch. Verknüpfen Sie CSS mit dem oberen Rand der Seite und JavaScript mit dem unteren Rand, um die Geschwindigkeit Ihrer Website zu erhöhen.)
Fazit
Wird Ihre Website schnell genug geladen? Ist dies nicht der Fall, ist es an der Zeit, die optimalen Ladezeiten einzuhalten. (Wenn Sie überhaupt über diese Frage nachdenken müssen, 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 unabhängig vom Gerät dauert, desto wahrscheinlicher ist es, dass Benutzer die Website vollständig aufgeben. Nehmen Sie sich also heute oder in dieser Woche einige Minuten Zeit und gehen Sie diese Liste durch, um sicherzustellen, dass Ihre Website optimal funktioniert.
Bildquelle: Mohammed Al-Sultan.