Probleme mit der Seitengeschwindigkeit? 6 Tipps für eine bessere Page Speed

Veröffentlicht am 26.3.2019 von Ines Bahr und Jennifer Bischoff

Niemand wartet gern.

Im Gegenteil: Die Menschen warten so ungerne, dass viele Unternehmen ihren Kund*innen Möglichkeiten bieten, jede Wartezeit zu vermeiden. Freizeitparks verkaufen spezielle Tickets, mit denen man an langen Schlangen vorbeigehen kann. Bei Fluggesellschaften kann man gegen Gebühr gleich zu Beginn des Boardings und vor allen anderen einsteigen. Mit Bestell-Apps kann man sich in seinem Lieblingsrestaurant selbst zu Stoßzeiten als Erstes bedienen lassen.

Auch bei deinem B2B-Unternehmen ist es im Grunde nicht anders: Auch online hassen Kund*innen es, warten zu müssen, bis eine Website geladen hat.

Mann wundert sich, wie er seine Page Speed verbessern kann

Wenn du keinen Weg findest, die Website-Performance zu verbessern, werden viele die Website verlassen, bevor sie aufgebaut ist. Bei mobilen Websites kommt noch hinzu, dass Nutzer*innen oft durch etwas von außen unterbrochen werden – und die Seitengeschwindigkeit wird noch wichtiger.

Bei der mobilen Page Speed scheint die magische Zahl bei höchstens drei Sekunden zu liegen.

So lange darf deine Seite zum Laden brauchen, bevor die meisten Leute sie verlassen. Für Unternehmen bedeutet das vor allem eines: Je mehr Leute deine mobile Website verlassen, desto weniger Konversionen und desto weniger Umsätze gibt es.

Du kannst dir selbst mit dem Impact Calculator von Google einen Eindruck davon verschaffen, wie sich die mobile Ladegeschwindigkeit auf deinen Umsatz auswirken kann.

Wie kannst du also die Geschwindigkeit deiner Website erhöhen? Mit den folgenden sechs Methoden kommst du spielend in den grünen Bereich.

6 Tipps für eine höhere Page Speed

Alle der folgenden Tipps sind sehr nützlich, um die Seitengeschwindigkeit zu verbessern (vor allem auf mobilen Websites). Angesichts der vielen verschiedenen Bildtypen legen wir aber den Schwerpunkt auf die Bildgrößen, denn kleinere Bilder sind der schnellste Weg, die Ladegeschwindigkeit zu erhöhen.

Wenn du schon genau weißt, wie du die Bildgröße verringern kannst oder gar keine Bilder auf deiner Website verwendest, kannst du diesen Tipp überspringen.

1. Die Bildgröße reduzieren

Die durchschnittliche mobile Webseite ist 2,2 MB groß – und 68 % davon sind Bilder. Das ist insofern ein Problem, als dass keine Website größer als 1 MB sein sollte.

 Bilder komprimieren

Für mobile Websites wird empfohlen, eine Gesamtgröße von weniger als 500 KB pro Seite anzustreben. Das lässt sich erreichen, indem du Bilder komprimierst und unnötige Metadaten aus Rastergrafiken entfernst.

Mit Tools wie dem Image Analysis Tool von Website Speed Test oder Page Weight imgIX kannst du die Bilder auf deiner Website überprüfen und dir Komprimierungsmöglichkeiten aufzeigen lassen.

Wenn du überlegst, die Bilder auf deinen Seiten zu verkleinern, solltest du dabei in einer bestimmten Reihenfolge vorgehen:

  • Hintergrundbilder: Dies ist ziemlich offensichtlich. Stell sicher, dass alle Hintergrundbilder einem Zweck dienen und nicht nur deine Website verlangsamen.
  • Screenshots: Lass dich nicht von begeisterten Produktteams dazu bringen, unkomprimierte Bilder hochzuladen: Eine hohe Bildqualität ist auch bei einer kleineren Bildgröße durchaus möglich.
  • Logos, Symbole und Brandings: Diese Bildtypen werden leicht übersehen, weil sie auf der Seite klein erscheinen. Wenn man nicht aufpasst, passiert es einem jedoch schnell, dass man diese Bilder in hoher Auflösung hochlädt.

Es gibt zahlreiche Tools, mit denen du Bilder komprimieren kannst, beispielsweise TinyPNG, Compressor.io, GIMP oder Photoshop. In Photoshop kannst du die Bildgröße über die Optionen „Für Web speichern“ oder „Exportieren als“ anpassen.

 Den richtigen Dateityp für Bilder verwenden

JPEG-Bilder sind prinzipiell besser für die Page Speed, da sie stärker komprimiert werden können. Nutze JPEGs, wann immer es möglich ist, vor allem bei Fotografien.

Bei Bildern mit wenigen Farben und klaren Linien ist der Qualitätsverlust bei der Komprimierung als JPEG jedoch möglicherweise zu groß. Für Software-Screenshots eignet sich üblicherweise ein PNG besser, aber teste unbedingt selbst, was von der Qualität und Seitengeschwindigkeit her für deinen konkreten Anwendungsfall am besten ist.

Rangfolge der Dateitypen für Page Speed

SVG-Dateien sind wiederum das beste Format für die Anzeige auf mehreren Geräten, da Auflösung und Skalierung bei ihnen keine Rolle spielen. Denk aber bei SVG-Bildern daran, dass der für sie genutzte Code nicht größer sein sollte als bei den anderen Optionen. In der Regel ist das SVG-Format zum Beispiel für Logos sehr gut geeignet.

 Bilder in der richtigen Dateigröße hochladen

Was die optimale Bildgröße ist, hängt von deiner Website ab. Den Empfehlungen von Shopify zufolge sollten Bilddateien auf E-Commerce-Websites beispielsweise höchstens 70 KB groß sein.

Capterra hat Dutzende Software-Websites analysiert, um dir Tipps für die optimale Größe von Screenshots von B2B-Software zu geben.

Dabei haben wir uns auf Screenshots von Desktop-Ansichten der Software konzentriert und sie nur dann einbezogen, wenn sie Folgendes boten:

  • Eine möglichst originalgetreue Ansicht der tatsächlichen Plattform, d. h, sie waren nicht „cartoonisiert“, durch grafische Formen vereinfacht o. Ä.
  • Möglichst eine unbeschnittene Gesamtansicht des Desktops
  • Noch lesbaren Text im Screenshot bzw. eine ausreichende Bildqualität, um den Großteil des Texts entziffern zu können

Diese Kriterien haben wir angelegt, weil sie eine Art Obergrenze für die Bildgröße darstellen. Bilder von Desktop-Versionen sind deutlich komplexer als mobile Screenshots von Software. Wenn der Text noch lesbar ist, bedeutet das, dass der Screenshot auf der Webseite ziemlich viel Platz einnimmt.

Die nachfolgenden Beispiele verdeutlichen diese Eigenschaften:

1. Beispiel:

Ein Screenshot der Tabellenkalkulations- und Datenbanksoftware Airtable

Ein Screenshot der Tabellenkalkulations- und Datenbanksoftware Airtable (Quelle)

2. Beispiel:

Ein Screenshot der CRM-Lösung Pipedrive

Ein Screenshot der CRM-Lösung Pipedrive (Quelle)

Die durchschnittliche Größe der analysierten Screenshots von B2B-Software betrug 211 KB und damit etwa die Hälfte des empfohlenen Maximums von 500 KB für die Größe der gesamten Webseite.

Außerdem haben wir dieselben Screenshots auf der mobilen Version der Website der Softwareunternehmen analysiert.

Schlechte Neuigkeiten für die mobile Ladezeit von B2B-Websites: Nur sehr viel weniger als die Hälfte dieser Websites bot andere Dateigrößen für ihre mobilen Seiten. Die meisten nutzten entweder dieselbe Datei wie für die Desktop-Website oder entfernten das Bild gleich ganz.

Bei denen, die eine kleinere Bildgröße auf der mobilen Website verwendeten, betrug die durchschnittliche Dateigröße 54,1 KB.

Denk dran, dass es viele Möglichkeiten gibt, Screenshots anzuzeigen: Führe Tests durch und finde so heraus, welche Bilder bei deinen Nutzer*innen am besten ankommen.

Du kannst dir auch überlegen, die Screenshots durch andere, kleinere Darstellungen zu ersetzen oder Cartoon-ähnliche Mock-ups zu erstellen. Alternativ kannst du Screenshots zuschneiden und Ausschnitte vergrößern, um auf bestimmte Funktionen hinzuweisen und gleichzeitig das Bild zu verkleinern.

Möglich sind auch Screenshots, bei denen bestimmte Elemente wie zum Beispiel Text nur verschwommen zu erkennen sind, um den Fokus darauf zu legen, wie die Software aussieht und funktioniert.

Achte aber darauf, dass du nicht die Chance verspielst, dich gegenüber potentiellen Kunden glaubwürdig zu präsentieren oder einen Wettbewerbsvorteil gegenüber Mitbewerbern einbüßt, die detailgenaue Screenshots in hoher Qualität anbieten.

Ein letzter Tipp zur Bildgröße: Versuch, Bilder möglichst in der Größe hochzuladen, in der sie auf der Website angezeigt werden. Wenn ein Bild sowieso nur in einer Größe von 280 Pixeln dargestellt werden soll, braucht man auch nicht mit Kanonen auf Spatzen schießen und es mit einer Breite von 1.500 Pixeln hochladen.

2. Reduziere das Angebot auf Webseiten

Geh deine Website sorgfältig durch und stell sicher, dass du deinen (potentiellen) Kund*innen nur die relevantesten Inhalte und die Bilder mit dem höchsten Mehrwert anzeigst.

Elemente oder Ressourcen wie beispielsweise Slideshows umfassen eine Menge Navigationsgrafiken und Optionen. Auch mehrere Screenshots einer Software auf einer Unterseite können zunächst nützlich wirken, aber schnell überwältigend werden.

Zu viele dieser Bilder verlängern die Ladezeit deiner Webseite und verringern die Wirkung der einzelnen Bilder, die ja eigentlich als „Schnappschüsse“ die Aufmerksamkeit auf sich ziehen oder einzelne Punkte illustrieren sollten.

Aber Vorsicht: Fang jetzt aber nicht an, an allen Ecken und Enden Inhalte zu entfernen. Sprich mit deinem Webmaster und den Produkt- und Marketingteams, bevor du mit dem Löschen beginnst.

3. Keine Videos auf der Website hosten

Nachdem wir so lange über Bilder geredet haben, denkst du bestimmt, dass du eine Menge Platz sparen kannst, wenn du Videos entfernst. Videos bieten deinen Nutzer*innen allerdings eine wertvolle Möglichkeit, mehr über deine Produkte zu erfahren und sollten deshalb nicht per se gestrichen werden.

Hoste deine Videos auf Drittanbieter-Websites wie YouTube, Wistia oder Vimeo, statt sie direkt auf deiner Website hochzuladen.

4. Schriften reduzieren

Reduziere die Anzahl der verschiedenen Schriftarten auf deiner Seite und denk über die Verwendung von Google Fonts oder Adobe Fonts nach.

Warum? Ganz einfach: Über die Google Fonts API bereitgestellte Schriften werden automatisch komprimiert. Sobald sie heruntergeladen wurden, werden sie im Browser zwischengespeichert und von jeder anderen Webseite wiederverwendet, die die Google Fonts-API nutzt.

5. Den Code der Website verbessern

Website Code mit guter Seitengeschwindigkeit

Räum den Code deiner Website auf, um die Ladegeschwindigkeit zu erhöhen (Quelle)

Es sollten nur Ressourcen als kritisch gekennzeichnet werden, die einen echten Mehrwert für deine Nutzer*innen bieten und damit unverzichtbar sind. Diese Ressourcen werden auf deiner Website hoffentlich bereits „above the fold“ angezeigt, also in dem Bereich, der ohne Scrollen auf den ersten Blick sichtbar ist. Für „below-the-fold“-Elemente und andere Bilder und Daten, die beim ersten Rendern der Seite nicht unbedingt nötig sind, kannst du auf „Lazy Loading“ setzen.

Außerdem kannst du den Code deiner Website optimieren, indem du HTML, JavaScript und CSS per Minifizierung komprimierst und so Informationen entfernst, die dein Browser nicht benötigt. Das betrifft beispielsweise Leerräume, Einrückungen und Kommentare. Hier bewegen wir uns jetzt schon in einem Bereich, der eher für Entwickler*innen relevant ist, aber rede ruhig mit deinem Webmaster darüber: Die Minifizierung kann den Code-Umfang immerhin um 10 bis 90 % reduzieren.

Prüfe abschließend all deine Tracking-Pixel und entferne alles, was nicht mehr benötigt wird. Sorge dafür, dass keins deiner Teams Tracking-Pixel hinzufügt, ohne über die Auswirkungen auf die Seitengeschwindigkeit nachzudenken (das betrifft vor allem die Marketing- und Produktteams). Außerdem ist es hilfreich, im Hinterkopf zu behalten, dass Zählpixel nicht unbedingt schon beim Öffnen der Seite abgerufen werden müssen, auch wenn manche Tools das empfehlen. Wo es sich anbietet, kannst du sie standardmäßig erst dann abrufen lassen, wenn sie DOM-ready sind oder das Fenster geladen ist.

Als Marketingprofis brauchen wir harte Daten, um Marketingbudgets weiterhin sinnvoll zuzuweisen und Elemente zur Lead-Generierung (z. B. CTAs) zu optimieren. Dabei sollten wir allerdings nicht übers Ziel hinausschießen. Bilder, Daten oder Code können – sinnvoll eingesetzt – die Lead-Generierung fördern, was den potentiellen Verlust von Leads durch längere Ladezeiten möglicherweise wieder ausgleicht.

6. Weitere Bereiche zur Geschwindigkeitsoptimierung

Auch in anderen Bereichen sind Verbesserungen möglich: Sorge beispielsweise für ein angemessenes Caching deiner Website-Ressourcen, je nachdem, wie häufig sie aktualisiert werden oder ob sie eher statisch sind, wie z. B. manche Bilder oder PDFs.

Auch mit dem richtigen Hosting-Service kannst du deine Server-Antwortzeit reduzieren.

Überlege außerdem, ein CDN zu nutzen, das deine Website auf globalen Servern zwischenspeichern kann. CDN ermöglichen es, Anfragen auf Servern zu bearbeiten, die geografisch näher an deinem Endnutzer sind und verbessern so Verfügbarkeit und Performance. Auf Crazy Egg wurden einige dieser Optionen noch deutlich ausführlicher dargelegt (Artikel auf Englisch).

Das Verbessern der Page Speed ist einfach – und notwendig

Das war jetzt eine ganze Menge Informationen, aber keine Sorge: Das Verbessern deiner Seitengeschwindigkeit muss keine Mammutaufgabe sein.

Auch wenn du möglicherweise anhand einiger dieser Vorschläge Änderungen an deiner bestehenden Website vornehmen musst, kannst du sie vor allem auch als Richtlinien verwenden, um Standards und Normen für die Zukunft zu entwickeln.

Diese Schritte sind außerdem unumgänglich, wenn du dich ordentlich auf künftige Google-Updates vorbereiten willst – oder einfach nur deine Lead-Zahlen erhöhen.

Beziehe bei diesem Prozess all deine Expert*innen aus den einzelnen Bereichen mit ein. Marketingprofis, Designer*innen oder Mitglieder des Produktteams können beispielsweise die Bilder auf deiner Website überprüfen, während ein Entwickler oder eine Entwicklerin den Code begutachtet und Führungsteams eine hierarchischere Struktur deiner Website festlegen (z. B. das Entfernen unnötiger Elemente „above the fold“ für eine höhere Seitengeschwindigkeit ohne Verzicht auf wichtige Ressourcen).

Hast du noch andere Fragen zum Thema Page Speed oder möchtest du erzählen, wie du selbst die Seitengeschwindigkeit in deinem Unternehmen verbessern konntest? Hinterlass gern einen Kommentar!

Du suchst nach E-Commerce-Software?? Wirf einen Blick auf Capterras umfassende Liste mit E-Commerce-Softwarelösungen.

 

Dieser Artikel kann auf Produkte, Programme oder Dienstleistungen verweisen, die in deiner Region nicht verfügbar sind oder die durch die Gesetze oder Vorschriften des Landes eingeschränkt sein können. Wir empfehlen, sich direkt an den Softwareanbieter zu wenden, um Informationen über die Produktverfügbarkeit und Rechtskonformität zu erhalten. Gender Hinweis: Aus Gründen der besseren Lesbarkeit wird bei Personenbezeichnungen und personenbezogenen Hauptwörtern auf dieser Website die männliche Form verwendet. Entsprechende Begriffe gelten im Sinne der Gleichbehandlung grundsätzlich für alle Geschlechter. Die verkürzte Sprachform hat nur redaktionelle Gründe und beinhaltet keine Wertung.

Über den Autor oder die Autorin

Senior Content Analyst für Capterra und GetApp. Spezialisiert auf Studien und Digitalisierungs-Tipps für KMU. Masterstudium in Medien und Kommunikation, lebt im sonnigen Barcelona.

Senior Content Analyst für Capterra und GetApp. Spezialisiert auf Studien und Digitalisierungs-Tipps für KMU. Masterstudium in Medien und Kommunikation, lebt im sonnigen Barcelona.