Mit Uptrends’ Speed Test Tool Website-Performance steigern

Wenn du jemals die Seiten-Performance mit unserem kostenlosen Website Speed Test Tool getestet hast, hast du eine Liste mit Optimierungen von Google Insights erhalten, die nach Implementierung die Website-Performance steigern und das Nutzererlebnis sowie die Konversionsraten verbessern.

Die Liste mit den Optimierungen mag einigen etwas überwältigend erscheinen. Wir sehen uns hier die häufigsten Empfehlungen von Google Insights an und geben einen kleinen Überblick, was die Empfehlung bedeutet und wie sie den Website-Besuchern nutzt.

Benchmarking für deine Seiten-Performance

Um den Erfolg deiner Maßnahmen messen zu können, musst du wissen, wie es gerade um deine Seite bestellt ist. Wenn du Uptrends (Business oder Enterprise) bereits nutzt, weißt du wahrscheinlich genau über die Performance deiner Seite Bescheid. Setzt du Uptrends noch nicht ein, kannst du unser kostenloses Website Speed Test Tool verwenden, um deine Website zu testen und die Performance-Metriken zur Optimierung nutzen.

Wir empfehlen eine der Optionen zum mobilen Ladezeitentest zu wählen: Was schnell auf einem Mobilgerät ist, ist superschnell auf einem Desktop. Notiere dir die Testparameter und den Checkpoint-Standort für spätere Bezugnahme.

Zu Beginn der Testergebnisse des kostenlosen Website Speed Test Tools findest du Daten über die Seitengröße, Objektarten und Anzahl der Objekte. Speichere diese Informationen zusammen mit den Daten zur Verbindung und den Antwortzeiten am Ende des Wasserfall-Diagramms.

Nun, da du weißt, was dein Ausgangspunkt ist, kannst du die Optimierungen vornehmen, um die Ladezeiten deiner Seite zu beschleunigen. Zu Beginn der Seite findest du einen Google Insights-Wert und eine Liste von Empfehlungen.

In diesem Artikel sprechen wir über diese Empfehlungen sowie einige andere Optimierungsmöglichkeiten, die eventuell für die Verbesserung der Website-Performance notwendig sind.

Schluss mit dem Quatsch: unnötige Downloads entfernen

Also gut, „Schluss mit dem Quatsch“ ist nicht wirklich, was Google Insight empfiehlt, denn Google beurteilt nicht die Nützlichkeit deiner Inhalte (zumindest nicht an dieser Stelle), aber einen objektiven Blick auf deine bestehenden Inhalte zu werfen, ist ein guter Anfang.

Nicht genutzte und unnötige Downloads entfernen
Einige Downloads werden nie von der Seite genutzt, die sie abfragt. Es passiert schnell, dass eine Abfrage im Header einer Seite nicht entfernt wird, sobald die Seite die Datei nicht länger benötigt. Vergessene Seitenelemente werden ein ernstzunehmendes Problem, wenn es sich um verwaiste Skriptdateien handelt. Skriptdateien kosten hinsichtlich der Seiten-Performance, nicht nur beim Abruf, sondern auch in der Verarbeitungszeit. JavaScript erfordert 60 % mehr Verarbeitungszeit als ein Bild derselben Größe. Tree Shaking, also wörtlich übersetzt Bäume rütteln, kann helfen, aufgeblähten Code aufgrund unnötigen Codes auf ein Minimum zu verringern.

Andere Seitenelemente beeinflussen Seitengröße und Performance eventuell weniger offensichtlich. Achte auf Seitenelemente, die wenig bis keine Nutzerinteraktion bewirken, wie etwa Bilderkarussells. Entferne nicht genutzte Elemente, um deiner Seite einen umgehenden Performance-Boost zu geben.

Durch die Mühle: textbasierte Ressourcen minimieren und komprimieren

Wusstest du, dass HTML-, CSS- und Skript-Dateien über eine Menge unnötigen Inhalt verfügen, den deine Nutzer nicht sehen und offen gesagt auch nicht brauchen? Nachdem Entwickler eine Website-Erstellung abgeschlossen haben, bleibt eine Menge in CSS-, Skript- und HTML-Dateien zurück, die der Browser und die Nutzer nicht benötigen. Entferne Folgendes, um die Dateigröße zu verringern:

• Entwickler-Anmerkungen: Anmerkungen spielen eine wichtige Rolle, um Code leichter zu verstehen, aber den normalen Nutzer interessiert das nicht und er sieht diese Kommentare weder, noch benötigt er sie.
• Überflüssiger Code: In deinen CSS-Dateien sind möglicherweise mehrere Deklarationen für denselben Inhalt präsent. Straffe diese, um die Dateigröße zu verringern.
• Freiraum und Zeichen für Zeilenumbruch: Freiraum und Zeilenumbruchzeichen dienen der Lesbarkeit von Code, aber der Browser braucht sie nicht. Der Browser liest den Code genauso ohne den zusätzlichen Freiraum.

Tools zur Kompression und Minimierung können die Dateigröße erheblich reduzieren. Minimierung findet vor dem Hochladen auf einen Webserver statt, während die Kompression dynamisch auf Grundlage der Browser-Möglichkeiten des Nutzers erfolgt.

Bilder und Grafiken optimieren

Ein Großteil eines Seiteninhalts besteht aus Bilddateien. Übliche Bilddateien wie JPEGs und PNGs wurden bereits komprimiert, aber das bedeutet nicht, dass die Dateien optimal sind. Bildoptimierung ist eine facettenreiche Angelegenheit.

Welchen Wert bietet das Bild?
Verwende Bilder und Grafiken nicht, weil sie einfach hübsch sind. Wenn sie nicht zum Inhalt beitragen, sollte man sie schlicht weglassen.

Hat das Bild angemessene Maße?
Ein Bild hoher Auflösung ist für die meisten Geräte eine Verschwendung von Bandbreite. Eine hohe Auflösung ist beim Drucken von Bildern erforderlich, aber für die Anzeige auf den meisten Bildschirmen reichen 72 bis 144 Pixel pro Zoll. Verwende zudem Bilder auf Basis der Bildschirmgröße, statt sie vom Browser neu berechnen zu lassen. Wenn ein Seitenaufruf von einem Smartphone eingeht, sende ein Bild, das bereits für die Größe eines Smartphone-Bildschirms angepasst wurde.

Das beste Format für Grafiken verwenden
Es gibt viele Möglichkeiten für die Optimierung visueller Inhalte:

JPEG: Ein komprimiertes Bildformat (verlustreich), das hauptsächlich für Fotografien genutzt wird. Aufgrund des Auflösungsverlustes bei der Kompression, sind JPEG-Bilder nicht für Bilder mit Text oder anderen scharfkantigen Grafikelementen geeignet.

PNG: Ein komprimiertes Bildformat (verlustfrei) für Fotos, aber besser geeignet für Grafiken, insbesondere wenn Transparenz genutzt werden soll.

GIF: Ein komprimiertes Bildformat, das maximal 256 Farben verwendet. Erzeugt kleine Grafikdateien, aber handhabt Farbverläufe nicht gut und bietet keine Transparenz. Animierte GIFs sind im Web ebenfalls beliebt, aber beeinträchtigen die Seiten-Performance aufgrund ihrer Größe. Das Konvertieren von GIF-Dateien in ein Video kann günstiger sein und denselben Look erzeugen.

SVG: Scalable Vector Graphics, die sich leicht entsprechend der Seite skalieren. SVG-Dateien werden meistens für Symbole und Logos verwendet.

Image Sprites: Ein einzelnes Bild mit mehreren Grafikelementen. Anhand eines CSS bestimmst du, welche der Teile des Bilds der Browser darstellt. Sprites sind perfekt für Symbole und andere kleine Seitenelemente, die ansonsten mehrere Anfragen erfordern würden.

CSS und HTML: Viele gern gesehene grafische Effekte wie Schatten und 3-D-Animationen können direkt auf der Seite ohne weitere Ressourcen erzeugt werden.

WebP: WebP ist eine verlustfreie oder verlustbehaftete Kompressionsmöglichkeit, die von Chrome und anderen Blink-basierten Browsern unterstützt wird und die Dateigrößen bis zu 25 % mehr als das PNG- oder JPEG-Format verringern kann.

Wenn du weißt, was die beste Methode für deine Bilder und Grafiken ist, solltest du sicherstellen, dass die Dateigröße so gering wie möglich ist. Wir verwenden TinyPNG, um unsere JPEGs und PNGs zu minimieren und die kleinsten Dateigrößen mit guter Qualität zu erhalten. Tools wie TinyPNG sind großartig für statische Inhalte, aber für eine dynamischere Lösung sind CDN-Anbieter besser. Die meisten CDNs bieten eine automatisierte Bildoptimierung.

Client-Hinweise nutzen und mit den besten Ressourcen antworten

Anfrage-Header verfügen über optionale Informationen, die die Nutzerumgebung und Verbindung beschreiben. Aufgrund der Werte in diesen Headern kannst du mit den besten Inhalten für die Gegebenheiten des Nutzers antworten.

Der Accept-Request-Header sagt dem Server, welche Bild- und Audio-Mediendateien er beispielsweise verarbeiten kann. Wenn der Accept-Header WebP akzeptiert, kannst du die Bildgrößen um etwa 25 % reduzieren. Die übrigen Client-Hinweise sind nicht automatisch.

Client-Hinweise nutzen
Ein Server meldet dem Client, dass er bestimmte Dinge über die Nutzerumgebung durch Senden eines Accept-CH-Headers gefolgt von einer kommagetrennten Variablenliste erfahren möchte. Diese Variablen handeln sich üblicherweise um Bildschirmgröße und Medienauflösung:

• Intrinsische Größe
• Intrinsische Größe,  nach Dichte korrigiert
• Extrinsische Größe
• Blickpunkt-Breite
• Pixelverhältnis des Geräts (Device pixel ratio, DPR)
• Breite
• Gerätespeicher

Mit diesen Client-Informationen kann der Browser Inhalte für die beste Performance formatieren, ohne die Bandbreite des Nutzers zu verschwenden.

Netzwerk-Hinweise
Netzwerk-Hinweise informieren den Server über die Verbindung. Anhand dieser Hinweise weiß der Server die Round Trip Time (RTT), die besagt, wie lange der Nutzer benötigt, um den Inhalt zu erhalten und zu verarbeiten. Weitere Infos sind:

Downlink: Megabits pro Sekunde für die Download-Geschwindigkeit

Effective connection type (ECT): Dies ist ein vergleichender Typ, nicht der tatsächliche Typ. Wenn es scheint, dass dein Downlink eher eine 3G-Verbindung ist als eine 4G-Geschwindigkeit, wird der Server sie als solche behandeln.

Save-Data: Hinweis, dass der Client weniger Daten erhalten möchte.

Die Berücksichtigung von Client-Hinweisen können sich sehr positiv auswirken, aber es wird auch schnell kompliziert. Jeremy Wagner behandelt die Grundlagen zusammen mit Fallbeispielen.

Einmal abrufen und fertig mit HTTP-Caching

Viele Seitenressourcen werden immer wieder genutzt, während Besucher durch deine Website klicken. Das wiederholte Abrufen dieser Dateien wirkt sich erheblich auf die Erfahrung deiner Nutzer auf der Website aus. Http-Caching minimiert die Anzahl der erforderlichen Round Trips, um die nächste Seite zu laden. Durch Festlegen des Höchstalters in der Cache-Steuerung und Angabe eines ETags oder Tokens, kann der Browser die Ressource aus dem Cache wiederverwenden, wenn es nicht abgelaufen ist. Wenn es abgelaufen ist, kann der Browser das Token zurücksenden, um herauszufinden, ob die Ressource sich geändert hat. Wenn sich nichts geändert hat, kann der Browser die Ressource aus dem Cache wiederverwenden. Setze das Höchstalter für sich nicht häufig ändernde Seitenressourcen so hoch wie möglich.

Anzahl der Anfragen mindern und Priorität setzen

Wichtige Inhalte solltest du zuerst laden lassen. Deine Priorität für jede Seite ist die Nutzerzufriedenheit, indem du dem Nutzer die von ihm gewünschten Inhalte so schnell wie möglich gibst. Wenn du versuchst, alles gleichzeitig zu laden, müssen deine Nutzer warten. Viele von ihnen wechseln die Website (40 % innerhalb der ersten drei Sekunden Wartezeit).

• Bündele CSS- und Skript-Dateien: Alle deine Dateien in einen einzelnen Download zusammenzufassen, sorgt für schnellere Ladezeiten, indem die Anzahl der Anfragen verringert wird. Achte darauf, das Rendering nicht zu blockieren, indem du wesentliche Dateien zuerst sendest.
• Entscheide, was wichtig ist und verwende Code Splitting, um das Wichtige sofort zu senden, und bündele den Rest, um es später zu laden.
• Verwende Medientypen und Medienanfragen, um nicht wichtiges CSS als nicht rendering-blockierend zu markieren.
• Verwende HTTP/2 Push, um wichtige Dateien mit dem HTML zu senden.
• Aktiviere HTML-Caching, um mehrfache Anfragen für dieselbe Datei zu vermeiden.
• Verwende Browser-Hinweise zum Vorladen und -verbindungsaufbau, um die Prioritäten des Browsers zu umgehen und Dateien vorzuladen, von denen du weißt, dass sie benötigt werden.

Rendering-blockierendes JavaScript und CSS in wichtigen Inhalten vermeiden

Wie lange deine Website-Besucher vor einer leeren Seite sitzen und auf das Laden warten, unterliegt vielen Faktoren, aber du kannst verhindern, dass sie die Website verlassen, indem du ihnen direkt etwas zur Interaktion bietest.

Der Browser muss die HTML-, JavaScript- und CSS-Dateien verarbeiten, bevor er das CSSOM und DOM erstellen kann. Bis der Browser die Dateien heruntergeladen und verarbeitet hat, sieht der Besucher nichts. Um die vom Besucher tatsächlichen und wahrgenommenen Wartezeiten zu verkürzen, sende nur das wichtige JavaScript und CSS. Sende Off-Screen-Code und nutzeraktionsbedingten Code asynchron, damit sich die Seite schneller aufbaut. Zu dem Zeitpunkt, zu dem der Nutzer durch die Seite scrollt und agiert, hat der Browser den Code heruntergeladen und verarbeitet. Lies mehr über rendering-blockierenden Code von Ilya Grigorik.

Ist das Resultat den Aufwand wert? Absolut!

Selbst die geringsten Gewinne bei Website- und Seiten-Performance können sich auf Nutzerzufriedenheit, Konversionsraten, Kundenbindung, Seiten-Ranking und Umsatz auswirken.

• 40 % der Nutzer verlassen eine Seite, wenn das Laden mehr als 3 Sekunden dauert
• Jede Sekunde kostet 7 % bei Konversionen
• Eine Verzögerung von einer Sekunde beim Laden einer Seite, die am Tag 100.000 US$ einnimmt, kann zu Verlusten von 25 Millionen US$ pro Jahr führen (Quelle).

Deine Einnahmen sind eng mit deiner Website-, Webanwendungs- und API-Performance verknüpft. Alle Mikrosekunden, die du bei den Ladezeiten einsparen kannst, können eine große Belohnung in Form von höheren Konversionsraten und wiederkehrenden Besuchern bedeuten.

Web-Performance kann unerwartet schlechter werden

Deine Website ist ein lebendes Wesen, das tägliche Pflege und Futter benötigt. Jede Code-Änderung, Inhaltsänderung, Netzwerkänderung und Architekturänderung birgt das Potenzial, die Performance deiner Website zu beeinflussen. Häufig handelt es sich nicht um eine positive Auswirkung und sie kann lange unbemerkt bleiben. Schütze deine Investition und automatisiere das Performance-Testen mit Uptrends‘ Full Page Check, Multi-step API oder Web Application Monitoring. Uptrends lässt es dich in dem Moment wissen, in dem die Performance unter deine Performance-Toleranzschwelle fällt.