Advertisement
  1. Web Design
  2. Workflow
Webdesign

Best Practices für die Steigerung der Website-Leistung

by
Length:LongLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Es ist ein Kinderspiel: Gut funktionierende Websites genießen eine höhere Besucherbindung, -bindung und -konvertierung. Angesichts der Tatsache, wie unbeständig Nutzer sein können, und der Tatsache, dass mobile Geräte heutzutage sehr wichtig sind, war die Geschwindigkeit von Websites noch nie so wichtig! In diesem Artikel werde ich Möglichkeiten hervorheben, mit denen Sie die Leistung Ihrer eigenen Websites verbessern können.

Miniatur von Photodune.net


Steigerung der Website-Performance

Die Leistung von Websites und die damit verbundenen Auswirkungen wurden im Laufe der Jahre gut dokumentiert. Im Jahr 2007 berichtete Amazon, dass bei einer Zunahme der Ladezeit von Amazon.com die Verkäufe pro 100 ms um 1% zurückgingen. Google hat 2006 ähnliche Ergebnisse mit seinem Google Maps-Produkt gemeldet. Google stellte fest, dass der Traffic in der ersten Woche um 10% und in den folgenden drei Wochen um 25% anstieg, wenn die Seitengröße von 100 KB auf 80 KB reduziert wurde.

Es ist klar, dass die Überwachung der Leistung einer Website ein Muss ist und nicht als integraler Bestandteil Ihres Webdesign-Workflows ignoriert werden sollte.

Increase web speed performance infographic
Die obige Infografik von strangeloopnetworks.com zeigt den Effekt, den die Leistung einer Website auf die Nutzer haben kann.

Vielleicht verwendest du bereits einige der Techniken, die ich heute diskutiere, während du es vielleicht nicht tust. Obwohl Sie Techniken auf der Server-Seite verwenden können, um Websites zu beschleunigen, wird dieser Artikel sich auf Möglichkeiten konzentrieren, wie wir die Leistung vom Frontend erhöhen können. Lass uns hineinspringen..


Minimierung von HTTP-Anfragen

Einer der wichtigsten Aspekte beim Verbessern der Leistung einer Webseite ist die Minimierung der Anzahl von Rundreisen, die der Browser auf dem Server durchführen muss. Jede Datei, die Ihre Website enthält (z. B. CSS, JavaScript oder Bilder), muss in den Browser heruntergeladen werden. Indem Sie diese Anfragen minimieren, beschleunigen Sie die Seite erheblich. Wenn Sie separate CSS-Dateien für verschiedene Teile Ihrer Website einfügen, ist es hilfreich, alle CSS-Dateien in ein Stylesheet zu integrieren, ebenso für JavaScript oder andere Ressourcen.

Die Art und Weise, wie Sie Dateien in Ihre Website einbinden, kann auch drastische Auswirkungen haben. Zum Beispiel, wenn Sie Ihr CSS wie folgt einbinden:

dann sollten Sie diesen Ansatz überdenken und verwenden:

Auf diese Weise können Sie die CSS-Datei parallel mit anderen Ressourcen herunterladen, was zu schnelleren Ladezeiten der Seite führt.


Minimierung von HTML, CSS und JavaScript

Um den Code, den wir schreiben, zu verstehen, formatieren wir ihn oft auf eine Weise, die für uns leichter zu lesen ist, mit anderen Worten, es ist ein menschlich freundlicheres Format. Sehen Sie sich den folgenden Beispielcode an:

Im obigen Beispiel können wir deutlich sehen, dass wir ein Formular mit Label und Eingabeelement haben, umgeben von einem Div. Das obige Beispiel ist viel klarer als es zu lesen als:

Leider, obwohl es für uns leichter zu lesen ist, enthält die menschlichere Version eine Menge unnötiger Charaktere. Es ist im obigen Beispiel nicht zu verheerend. Wenn es sich jedoch um eine groß angelegte Site mit Tausenden und Abertausenden von Codezeilen handelt, würde es uns Leistung kosten.

Unnötige Zeichen können Leerzeichen, Kommentare und neue Zeilenzeichen enthalten. Diese Zeichen können entfernt werden, ohne die Leistung des Codes zu beeinträchtigen. Durch das Entfernen dieser Zeichen verringern wir die Dateigröße unseres Codes und somit die Menge der Daten, die in den Browser heruntergeladen werden müssen.

Sie können HTML, CSS und JavaScript minimieren. Wenn du das nicht machst, solltest du jetzt darüber nachdenken. Zum Glück für uns gibt es viele Online-Tools, die helfen können, unseren Code wie YUI-Kompressor zu minimieren und wiederherzustellen.


Bilder optimieren

Eines der leistungshungrigsten Assets, die der Browser herunterladen muss, sind Bilder, die dazu führen, dass einige Seiten sehr langsam sind. Versuchen Sie, wo immer möglich, CSS zu verwenden, um Grafiken anstelle von Bildern zu erzeugen. Dies kann für Elemente wie Schaltflächen großartig sein, aber in einigen Fällen ist CSS möglicherweise nicht in der Lage, das Design wiederherzustellen, wie im Fall eines Fotos oder eines detaillierten dekorativen Elements. Wenn dies der Fall ist, dann gibt es ein paar Tricks zu versuchen.

optimize images for the web
Indem Sie Bilder richtig formatieren und komprimieren, ohne ihr Aussehen oder ihre visuelle Qualität zu verlieren, können Sie Daten speichern, die heruntergeladen werden müssen, was zu schönen, optimierten Bildern für das Web führt.

Sprites

Wenn du schon lange kreativ bist, dann wirst du bestimmt schon Sprites benutzen. Wenn Sie gerade erst anfangen, dann hier ein kurzer Überblick über sie.

Zuvor habe ich Ihnen gesagt, dass der Schlüssel zur Beschleunigung von Websites darin besteht, die Anzahl der HTTP-Anfragen zu minimieren. Jedes Bild, das Sie auf Ihrer Website haben, erfordert eine HTTP-Anfrage an den Server. In der Regel können Browser nur ein paar gleichzeitige Anfragen (an dieselbe Domäne) gleichzeitig ausführen, weshalb Warteschlangen gebildet werden. Durch die Kombination mehrerer Bilder zu einem einzigen Bild können wir die Anzahl der Anfragen reduzieren.

Der Nachteil beim Erstellen von Sprites ist, dass sie ziemlich kompliziert für uns sein können und oft ziemlich fummelig sind. Auch hier gibt es eine ganze Reihe von Online-Sprite-Tools, mit denen Sprites erstellt werden können. Die einzige, die ich benutze (was mir in den letzten sechs Monaten eine Menge Zeit gespart hat), ist SpritePad. Mit SpritePad können Sie Ihre Bilder einfach per Drag & Drop ziehen und sofort als PNG Sprite + CSS Code zur Verfügung stellen. Gutes Zeug eh?!


Oben sehen Sie ein Beispiel für Sprite-Bilder, die auf den Websites von Facebook und Google verwendet werden.

Verlustfreie Komprimierung von Bildern

Wenn Sie zum Beispiel eine Art Fotoausstellung oder viele Fotos auf der von Ihnen entworfenen Seite haben, ist es vielleicht nicht praktisch oder praktisch, sie alle als Sprite zu verwenden. Hier müssen Sie Ihre Bilder komprimieren. Durch das korrekte Formatieren und Komprimieren von Bildern können wir viele Datenbytes speichern.

Wenn Sie Bilder mit Werkzeugen wie Fireworks oder Photoshop speichern, enthalten die resultierenden Dateien häufig zusätzliche Daten, einschließlich Farbdaten, die möglicherweise sogar im Bild nicht verwendet werden, und sogar Dinge wie Metadaten. Wenn Sie Bilder komprimieren, ohne das Aussehen oder die Bildqualität des Bildes zu verlieren, können Sie Daten speichern, die heruntergeladen werden müssen. Yahoos smush.it-Service ist unglaublich gut darin, diesen Job für Sie zu erledigen. Laden Sie einfach die Bilder hoch, die Sie "summieren" möchten, und sie werden sie für Sie verlustfrei komprimieren.

Daten-URIs

Eine andere Möglichkeit, die Anzahl der http-Anfragen zu reduzieren, die Bilder machen, ist die Verwendung als Daten-URL. Daten URIS kann als beschrieben werden

Kodieren Sie Bilder und Schriften in reine Datenstrings, die direkt in Ihre Markups und Stylesheets integriert werden können

Wir haben zu Beginn des Monats ein großartiges Tutorial mit den Was, Warum und Wie der Daten URIs im Web Design durchgeführt. Gehen Sie weiter, um mehr über dieses Thema zu lesen. Nur ein Hinweis, dass diese sollten mit Bedacht verwendet werden und manchmal ist es nicht vorteilhaft oder praktisch, diese Methode zu verwenden.

Serving skalierte Bilder

Bilder sollten möglichst in ihrer ursprünglichen Bildgröße angezeigt werden. Zum Beispiel sollten Sie Ihre Bilder nicht mit CSS skalieren, es sei denn, Sie liefern mehrere Instanzen desselben Bildes und dieses Bild entspricht mindestens einem Original. Andernfalls sollten Sie etwas wie Photoshop verwenden, um die Größe Ihres Bildes zu ändern. Dies führt zum Speichern von Bytes.

Natürlich berücksichtigt dies nicht flüssige Bilder (im Responsive Design), die durchaus größer sein können, als sie auf einem kleinen Bildschirm angezeigt werden.

Serve scaled images for the web

Stellen Sie sicher, dass Ihre Bilder in der richtigen Größe mit einem Werkzeug wie Photoshop statt CSS skaliert werden.

Sie können Details auch physisch entfernen.

dConstruct blurred images

Das oben gezeigte Beispiel stammt von der Website des dConstruct-Archivs. In einer auf seinem Blog besprochenen Optimierungstechnik verwischt Jeremy Keith die nicht wesentlichen Teile jedes Fotos. Dabei reduzierte er die benötigten Bilddaten und schnitt die Dateigröße fast in zwei Teile auf. Der Verlust im Detail ist vernachlässigbar im Verhältnis zu den gewonnenen Gewinnen.


Zwischenspeichern

40-60% der täglichen Besucher Ihrer Website kommen mit einem leeren Cache. Wenn Sie Ihre Seite für diese Besucher zum ersten Mal schnell machen, ist dies der Schlüssel zu einer besseren Nutzererfahrung.

Sowohl Webbrowser als auch Webserver ermöglichen Caching. Diese Caches speichern frühere Anfragen im Browser oder Server; Anfragen wie Bilder, Webseiten, CSS / JS-Dateien und andere Daten wie Cookies. Durch das Speichern dieser Antworten wird die Bandbreite reduziert und die Leistung einer Website verbessert.

Caching wird häufig am besten für selten geänderte Assets wie CSS- und JavaScript-Dateien verwendet. Sie können ein Ablaufdatum für den Zeitpunkt festlegen, zu dem sich ein Asset ändern sollte, und den Browser oder Server dazu auffordern, eine neue Kopie Ihrer Assets zu übernehmen. Lesen Sie mehr zu den Best Practices für die Nutzung von Caching bei Google Developers.


Das Parsen von Javascript verzögern

Damit eine Webseite dem Benutzer vollständig angezeigt werden kann, muss der Browser alle zugehörigen Dateien herunterladen. JavaScript-Dateien sollten nicht in den Kopf des HTML-Dokuments geladen werden, sondern in der Nähe des unteren Bereichs (obwohl dies nicht die Gesamtzahl der Bytes reduziert, die vom Browser heruntergeladen werden müssen), zeigt den Inhalt der Webseite vor dem JavaScript an ist voll geladen.

Wenn Sie es zum Kopf Ihres Dokuments hinzufügen, würde der Browser warten, bis das JavaScript vollständig geladen ist, bevor die Seite angezeigt wird. Ihre JavaScript-Dateien sollten vor dem abschließenden body-Tag enthalten sein.


Vermeiden Sie fehlerhafte Anfragen

Was ist eine schlechte Anfrage, die Sie vielleicht stellen könnten? Zum Beispiel würde ein defekter Link auf Ihrer Website mit einer ungültigen Anfrage gleichgesetzt. Eine ungültige Anforderung kann als eine beliebige klassifiziert werden, die zu einem Fehler 404/410 führen würde. jede Anfrage, die zu einer Sackgasse führt.

404 sadface - avoid bad requests

Ramiro Galans '404 Sadface' illustriert ein Beispiel einer schlechten Bitte.

Es ist unvermeidlich, dass Ihre Website manchmal geändert, verschoben oder aktualisiert wird. Diese Änderungen können dazu führen, dass alte Links nicht mehr zum richtigen Ziel führen. Obwohl diese Anforderungen keine Daten herunterladen, ist es immer noch eine verschwenderische Ressource, da der Browser die Anfrage überhaupt initiieren muss. Wenn Sie feststellen, dass Sie auf Ihrer Website "schlechte Anfragen" haben, sollten Sie versuchen, diese so schnell wie möglich zu beheben, indem Sie die Fehler beheben. Google Webmaster-Tools sind eine nützliche Ressource, um herauszufinden, ob Ihre Website fehlerhafte Links enthält.


Content Delivery-Netzwerke

Sobald Sie alle Änderungen an Ihrer Website vorgenommen haben, die ihnen die beste Chance geben, eine "schnelle Website" zu sein, ist es an der Zeit, sich den Server anzusehen, der sie hostet. Traditionell speichert ein Server eine Kopie Ihrer Site und liefert sie dann an den Ort, von dem aus der Benutzer sie anzeigt. Die Zeit, die der Benutzer benötigt, um die Site anzufordern, bis zu der Zeit, die der Server benötigt, um darauf zu reagieren, kann variieren, je nachdem, wo sich der Benutzer in der Welt im Vergleich zum Server befindet.

Content Delivery Networks funktionieren etwas anders. Anstatt nur eine Kopie Ihrer Website zu hosten, hosten sie mehrere Kopien auf verschiedenen Servern auf der ganzen Welt.

cdn
Bild mit freundlicher Genehmigung von Wikipedia

Wenn ein Benutzer eine Anfrage an diese Server sendet, wird er an den Server gesendet, der am nächsten zu seinem Standort liegt. Dies optimiert die Geschwindigkeit, mit der der Inhalt an den Endbenutzer geliefert wird. Dies ist definitiv ein Bonus, sollte aber nur verwendet werden, wenn Sie jede andere mögliche Methode genutzt haben.


Google Seitengeschwindigkeit

Google hat ein nettes kleines Tool, mit dem wir die Leistung vieler Faktoren überwachen können, die wir heute besprochen haben. Wenn Sie PageSpeed Insights noch nicht ausprobiert haben, sollten Sie es sich jetzt unbedingt ansehen. Darüber hinaus verfügen sie über eine Fülle von Dokumentationen und Beispielen, mit denen Sie die Leistung Ihrer Website überwachen und verbessern können. Google beschreibt es als:

PageSpeed Insights analysiert den Inhalt einer Webseite und generiert dann Vorschläge, um diese Seite schneller zu machen. Durch das Reduzieren der Seitenladezeiten können Absprungraten reduziert und die Conversion-Rate erhöht werden.


Fazit

Ich hoffe, dass Sie ein paar Dinge über die Optimierung der Geschwindigkeit von Websites gelernt haben und wie Sie einige der Methoden in Ihre eigenen Projekte implementieren können. Wenn Sie das, was wir besprochen haben, üben, werden Sie die Besucher dazu ermutigen, wiederzukommen, auf Ihrer Seite zu bleiben und dort ein lohnendes Surferlebnis zu genießen.

Die Quintessenz ist: Durch die Beschleunigung Ihrer Websites tragen Sie nicht nur zu einer besseren Benutzererfahrung für Ihre Benutzer bei, sondern auch zu einer besseren Benutzererfahrung für das Web!


Weiterführende Literatur

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.