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 Inhalte ohne Verzögerung bereitstellen. Wenn Ihre Website bei der Erfüllung dieser Anforderung den geringsten Rückstand aufweist, können Benutzer Ihre Website verlassen (und kehren möglicherweise nie wieder zurück).

Heute werden wir nach Möglichkeiten suchen, um sicherzustellen, dass Ihre Website für Geschwindigkeit ausgelegt ist, sodass Sie sich nie wieder um das Laden der Seiten kümmern müssen.

Testen Sie Ihre Website

Bevor Sie aufhören, ist meine Website auf keinen Fall langsam. teste es aus. Google verfügt über ein hervorragendes Tool, mit dem jedermann jede Website durch Eingabe der URL testen kann.

Sie erhalten einen schnellen Bericht, in dem Sie wissen, wie schnell sich Ihre Website bewegt und wo sie verbessert werden kann. Es ist eine gute Idee, den Test regelmäßig auszuführen, um sicherzustellen, dass alles reibungslos funktioniert. (Außerdem wird die Leistung auf Mobil- und Desktopgeräten eingeschränkt und es werden Verbesserungsvorschläge gemacht.)

Der Bericht enthält drei Empfehlungen für die folgenden Punkte:

  • Browser-Caching
  • Bildoptimierung
  • Serverantwort
  • Skripte und CSS über der Falte
  • Kompression
  • Weiterleitungen
  • Reduzierung von CSS, HTML und JavaScript
  • Priorisierung sichtbarer Inhalte

Dump Unnötige Plugins

Halten Sie an Plugins oder Add-Ons fest, die Sie gerade nicht verwenden? Es ist Zeit, sie abzulegen.

Sogar Elemente, die nicht verwendet werden, ziehen die Geschwindigkeit von Ihrer Site weg. (Dies gilt insbesondere, wenn Sie ein System wie WordPress abarbeiten.)

Wechseln Sie in den Bereinigungsmodus und entfernen Sie alle nicht verwendeten Plugins. Sie sollten auch über die Verwendung von 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 Thema. Fügen Sie Ihrer Website kein altes Plugin hinzu. Versuchen Sie, Elemente zu finden, die einen tatsächlichen Wert liefern und hoch bewertet werden. Alte, veraltete Elemente können Ihre Site auch nach unten ziehen.

Teilen Sie nur nach Bedarf

Während wir über Plugins nachdenken, wie viele Social-Media-Sharing-Buttons haben Sie auf Ihrer Website? Nun antworte ehrlich: Wie viele brauchst du eigentlich?

Zu viele dieser Schaltflächen können für Benutzer verwirrend sein - wie viele werden eigentlich auf mehreren Plattformen gemeinsam genutzt - und die Geschwindigkeit und die Ladezeit verringern. (Dies gilt insbesondere für diejenigen, die herausfinden möchten, wie viele Likes oder Freigaben eines Posts bereits vorhanden sind, wenn Abfragen 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 mit Ihrer Website herstellen, und diese Schaltflächen einschließen. Geben Sie den Rest ab. Sie stehen nur im Weg.

Seien Sie vorsichtig bei der Bildüberladung

Videos, Illustrationen, Fotos und Animationen? Oh mein! Alle diese großartigen visuellen Elemente können die Ladezeiten verlängern. Wähle weise.

Bevor Sie ein visuelles Element zu Ihrem Website-Design hinzufügen, sollten Sie seinen Wert gegen andere Elemente abwägen. Bietet es etwas für Benutzer? Wenn ja, fahren Sie fort. Wenn nicht, warum verwenden Sie dieses Gestaltungselement?

Sie sollten alle Bilder entsprechend für das Web optimieren. Bilder sollten grundsätzlich nur so groß sein, wie sie benötigt werden. Gehen Sie nicht über Bord und laden Sie Fotos in voller Größe hoch. Es ist ein wenig Arbeit am Frontend, aber Sie werden froh sein, dass Sie es später gemacht haben (insbesondere, wenn Ihre Website weiter wächst).

Nutzen Sie auch andere Tricks. Versuchen Sie, Symbolzeichensätze anstelle von Bildsymbolen. Konvertieren Sie Elemente in SVG (skaliertes Vektorformat), wenn eine Symbolschriftart nicht funktioniert. Verwenden Sie so viel HTML und CSS? Sie können die Site mit Elementen, die als Fotos geladen werden, wie z. B. Schaltflächen, Pfeilen und anderen Tools der Benutzeroberfläche, aufhalten.

Nehmen Sie mit den Schrumpfwerkzeugen eine Last ab

Kleine Dateien sind der Schlüssel zur Höchstgeschwindigkeit. Die Balance liegt in der Idee, dass Sie mit hochauflösenden Displays Inhalte in bester Qualität teilen und präsentieren können. Hier kommen die schrumpfenden Werkzeuge ins Spiel.

Wenn Sie sich nicht sicher sind, ob Sie die Möglichkeit haben, die Größe zu verkleinern und zu verkleinern - oder Sie erhalten nicht das gewünschte Ergebnis - versuchen Sie es mit einer 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 allgemeinen Formats noch mehr
  • Gzip-Paketdateien für optimale Komprimierung
  • Minify Your 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 Gesamtcode-Größe

Einfach zwischenspeichern

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 Nutzer überwiegt diese Argumente. Ihre Website muss schnell sein.

Ein Cache erstellt eine temporäre Datei aus Seiten, damit sich der Browser "merkt". die Site, 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 regelmäßig Ihr Zuhause bereinigen müssen, müssen Sie Ihre Website-Datenbank, Links und Dateien bereinigen und verwalten.

Dies sind die Elemente auf Ihrer Website-Reinigungscheckliste:

  • Optimieren Sie Ihre Datenbank. Im Laufe der Zeit kann Ihre Datenbank mit Revisionen, nicht verwendeten Fotos und gespeicherten Daten verstopft sein. Du musst nicht alles behalten. Löschen Sie Elemente, die nicht mehr Bestandteil Ihres Websiteplans sind.
  • Bilder nicht hotlink Bilder von einer fremden Website (und einem Server) auf Ihre Website zu ziehen, ist nur eine schlechte Idee. Und es ist langsam. Gleiches gilt für fast jede andere externe Dateianforderung. Verwenden Sie sie nur bei Bedarf.
  • Links reparieren Unterbrochene Links verlangsamen Ihre Site zwar nicht, aber die Verbindung, die Benutzer von Ihrer Site zu anderen Orten herstellen, wird langsamer, was ebenso schlecht sein kann.Gewöhnen Sie sich daran, gebrochene Links zu überprüfen und zu korrigieren.
  • Halten Sie alles auf dem Laufenden. Wenn Sie auf einer Plattform wie WordPress laufen, nehmen Sie die Aktualisierungen. Wenn Sie ein Design oder geschachtelte Elemente eines beliebigen Typs verwenden, gilt das Gleiche. 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 mit Malware gehackt oder infiziert wurde.)

Fazit

Bearbeiten Sie nun die obige Liste und kehren Sie zum Google Pagespeed Insights-Tool zurück. Führen Sie es erneut aus. Merkst du einen Unterschied?

Nichts wird einen Benutzer glücklicher machen und eher zu Ihrer Website zurückkehren als eine großartige und schnelle Erfahrung. Denken Sie in allen Phasen des visuellen Designs daran, auch das Interface-Design zu berücksichtigen, damit Ihre Website für Geschwindigkeit sorgt.