So entwerfen Sie eine Schnittstelle, die auf Geschwindigkeit ausgelegt ist
Ist Ihre Website langsam? Sei ehrlich. Könnte es schneller sein? Benutzer fordern Websites, die schnell geladen werden und weiterhin Inhalte ohne Verzögerung bereitstellen. Wenn Ihre Website bei der Erfüllung dieser Nachfrage am wenigsten ins Hintertreffen gerät, können Benutzer Ihre Website verlassen (und möglicherweise nie wieder zurückkehren).
Heute werden wir nach Möglichkeiten suchen, um sicherzustellen, dass Ihre Website-Oberfläche auf Geschwindigkeit ausgelegt ist, damit Sie sich nie wieder Gedanken über die Ladezeiten von Seiten machen müssen.
Entdecken Sie Envato-Elemente
Testen Sie Ihre Website
Bevor Sie bei "Meine Website ist auf keinen Fall langsam" anhalten, testen Sie es. Google hat ein großartiges Tool, mit dem jeder jede Website testen kann, indem er die URL eingibt.
Sie erhalten einen raffinierten Bericht, der Ihnen sagt, wie schnell sich Ihre Website bewegt und wo sie verbessert werden könnte. Es ist eine gute Idee, den Test regelmäßig durchzuführen, um sicherzustellen, dass alles reibungslos funktioniert. (Außerdem wird die Leistung auf Mobil- und Desktopgeräten beeinträchtigt und Verbesserungsvorschläge angeboten.)
Der Bericht enthält drei Empfehlungen - sollte behoben, behoben und bestanden werden - für die folgenden Punkte:
- Browser-Caching
- Bildoptimierung
- Serverantwort
- Skripte und CSS über der Falte
- Kompression
- Weiterleitungen
- Minimierung von CSS, HTML und JavaScript
- Priorisierung von sichtbaren Inhalten
Unnötige Plugins sichern
Halten Sie an Plugins oder Add-Ons fest, die Sie einfach nicht verwenden? Es ist Zeit, sie wegzuwerfen.
Sogar Elemente, die nicht verwendet werden, verringern die Geschwindigkeit Ihrer Website. (Dies gilt insbesondere dann, wenn Sie mit einem System wie WordPress arbeiten.)
Wechseln Sie in den Bereinigungsmodus und entfernen Sie alle nicht verwendeten Plugins. Sie sollten auch über verwendete Plugins nachdenken und sicherstellen, dass Sie sie tatsächlich verwenden oder dass sie zur allgemeinen Benutzererfahrung beitragen, wenn Sie keine bessere Option finden.
Neben der Anzahl der Plugins ist auch die Qualität ein Problem. Fügen Sie Ihrer Website kein altes Plugin hinzu. Versuchen Sie, Elemente zu finden, die einen tatsächlichen Wert liefern und eine hohe Bewertung haben. Alte, veraltete Elemente können Ihre Site auch nach unten ziehen.
Nur nach Bedarf teilen
Wie viele Schaltflächen zum Teilen von sozialen Medien haben Sie auf Ihrer Website, während wir über Plugins nachdenken? Jetzt antworte ehrlich: Wie viele brauchst du eigentlich?
Zu viele dieser Schaltflächen können für Benutzer verwirrend sein - wie viele werden sie tatsächlich auf mehreren Plattformen teilen - und die Geschwindigkeit und Ladezeit beeinträchtigen. (Dies gilt insbesondere für diejenigen, die herausfinden möchten, wie viele Likes oder Freigaben ein Beitrag bereits mit Abfragen hat, die in beide Richtungen ausgeführt werden.)
Wählen Sie ein oder zwei Netzwerke aus, in denen Sie aktiv sind und in denen Benutzer regelmäßig eine Verbindung zu Ihrer Website herstellen und diese Schaltflächen enthalten. Schluss mit dem Rest. Sie stören nur.
Seien Sie vorsichtig bei Bildüberladung
Videos, Illustrationen, Fotos und Animationen… oh mein Gott! All diese großartigen visuellen Elemente können die Ladezeiten verlängern. Wählen Sie mit Bedacht aus.
Bevor Sie Ihrem Website-Design ein visuelles Element hinzufügen, sollten Sie dessen Wert gegen andere Elemente abwägen. Bietet es etwas für Benutzer? Wenn ja, fahren Sie fort. Wenn nicht, warum verwenden Sie dieses Designelement?
Sie sollten alle Bilder entsprechend dem Web optimieren. Bilder sollten in der Regel nur so groß wie nötig sein. Gehen Sie nicht über Bord und laden Sie Fotos in voller Größe hoch. Es erfordert ein wenig Arbeit am Frontend, aber Sie werden froh sein, dass Sie es später getan haben (insbesondere, wenn Ihre Website weiter wächst).
Nutzen Sie auch andere Tricks. Versuchen Sie es mit Symbolschriftarten anstelle von bildbasierten Symbolen. Konvertieren Sie Elemente in SVG (skaliertes Vektorformat), wenn eine Symbolschrift nicht funktioniert. Verwenden Sie so viel HTML- und CSS-Magie wie möglich und blockieren Sie die Site nicht mit Elementen, die als Fotos geladen werden, wie Schaltflächen, Pfeile und andere Tools für die Benutzeroberfläche.
Mit Schrumpfwerkzeugen entlasten
Kleine Dateien sind der Schlüssel zur Höchstgeschwindigkeit. Das Gleichgewicht liegt in der Idee, dass Sie mit hochauflösenden Displays Inhalte in höchster Qualität teilen und präsentieren können. Hier kommen Schrumpfwerkzeuge ins Spiel.
Wenn Sie sich nicht sicher sind, ob Sie in der Lage sind, die Größe zu ändern und zu verkleinern, oder einfach nicht das gewünschte Ergebnis erzielen, versuchen Sie eine dieser Optionen, um Dateien auf die kleinsten verwendbaren Größen zu bringen.
- WP Smush verkleinert Bilder für WordPress-Benutzer
- Kraken komprimiert Bilder für alle Benutzer
- TinyPNG reduziert die Größe des gängigen Formats noch mehr
- Gzip-Paketdateien für eine optimale Komprimierung
- Minimieren Ihr CSS reduziert die Gesamtcodegröße und enthält eine API
- SpriteMe verwandelt Hintergrundbilder in ein CSS-Sprite, um HTTP-Anforderungen zu speichern
- CSS Compressor reduziert die gesamte Codegröße
Cache es einfach
Aktivieren Sie das Caching auf Ihrer Website.
Wenn Sie dies nicht tun, zahlen Ihre Benutzer den Preis. Es gibt immer noch ein paar Leute, die anders argumentieren könnten, aber der Wert für die Benutzer überwiegt diese Argumente. Ihre Website muss schnell sein.
Ein Cache erstellt eine temporäre Datei aus Seiten, sodass sich der Browser die Site "merkt", wenn ein Benutzer zurückkehrt. Es reduziert die Bandbreitennutzung, die Serverlast und die Verzögerungszeit (tatsächlich oder wahrgenommen). Die Benutzer werden es Ihnen danken, insbesondere wenn Sie auf umfangreichere Websites zugreifen.
Reinigen Sie es regelmäßig
So wie Sie Ihr Zuhause regelmäßig bereinigen müssen, müssen Sie Ihre Website-Datenbank, Links und Dateien bereinigen und pflegen.
Dies sind die Punkte auf Ihrer Website-Reinigungs-Checkliste:
- Optimieren Sie Ihre Datenbank. Im Laufe der Zeit kann Ihre Datenbank durch Überarbeitungen, nicht mehr verwendete Fotos und gespeicherte Daten verstopft werden. Sie müssen nicht alles behalten. Löschen Sie Elemente, die nicht mehr Teil Ihres Website-Plans sind.
- Keine Hotlink-Bilder. Es ist nur eine schlechte Idee, Bilder von der Website (und dem Server) eines anderen auf Ihre Website zu ziehen. Und es ist langsam. Das gleiche gilt für fast jede andere externe Dateianforderung. Verwenden Sie sie nur bei Bedarf.
- Links reparieren. Unterbrochene Links verlangsamen Ihre Site möglicherweise nicht, verlangsamen jedoch die Verbindung, die Benutzer von Ihrer Site zu anderen Orten herstellen, was ebenso schlecht sein kann. Gewöhnen Sie sich an, nach defekten Links zu suchen und diese zu korrigieren.
- Halten Sie alles auf dem Laufenden. Wenn Sie auf einer Plattform wie WordPress ausgeführt werden, nehmen Sie die Updates. Wenn Sie ein Thema oder Box-Elemente eines beliebigen Typs verwenden, gilt dies auch. Updates können Patches enthalten, die zur Geschwindigkeit beitragen und Ihre Website vor potenziellen Bedrohungen schützen. (Und nichts ist langsamer als eine Website, die gehackt oder mit Malware infiziert wurde.)
Fazit
Arbeiten Sie nun die obige Liste durch und kehren Sie zum Pagespeed Insights-Tool von Google zurück. Führen Sie es erneut aus. Merkst du einen Unterschied?
Nichts macht einen Benutzer glücklicher und kehrt eher zu Ihrer Website zurück als eine großartige und schnelle Erfahrung. Denken Sie in allen Phasen des visuellen Designs auch an das Design der Benutzeroberfläche, damit Ihre Website auf Geschwindigkeit ausgelegt ist.
