--- description: Nicht zufrieden mit deiner Website-Performance? Hier ist eine Liste mit 6 Tipps, die jeder Seite zu einer besseren Page Speed verhelfen können. image: https://gdm-localsites-assets-gfprod.imgix.net/images/capterra/og_logo-e5a8c001ed0bd1bb922639230fcea71a.png?auto=format%2Cenhance%2Ccompress title: Probleme mit der Seitengeschwindigkeit? 6 Tipps für eine bessere Page Speed - Capterra --- # Probleme mit der Seitengeschwindigkeit? 6 Tipps für eine bessere Page Speed Canonical: https://www.capterra.com.de/blog/624/probleme-seitengeschwindigkeit-6-tipps-bessere-page-speed Veröffentlicht am 26.3.2019 | Geschrieben von Ines Bahr, Jennifer Bischoff. ![Probleme mit der Seitengeschwindigkeit? 6 Tipps für eine bessere Page Speed](https://images.ctfassets.net/63bmaubptoky/j6xjhcN1pP82sTv0RbQFKqZsg0JA66Bjq-SUvcyFITU/c91690ccff859234c0403a13f216f3c9/Page-Speed-verbessern-Tipps.png) > Niemand wartet gern. ----- ## Artikelinhalt 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.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 SpeedAlle 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 reduzierenDie 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 komprimierenFü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 verwendenJPEG-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.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 hochladenWas 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 DesktopsNoch lesbaren Text im Screenshot bzw. eine ausreichende Bildqualität, um den Großteil des Texts entziffern zu könnenDiese 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 (Quelle)2. Beispiel: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 WebseitenGeh 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 hostenNachdem 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 reduzierenReduziere 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 verbessernRä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 GeschwindigkeitsoptimierungAuch 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 notwendigDas 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. ## Über den Autor oder die Autorin ### Ines Bahr Ines Bahr ist Senior Content-Analystin mit fast zehn Jahren Erfahrung im Bereich Content-Marketing und Technologietrends auf dem deutschen Markt. ​​Ihre Forschung zeigt Markttrends auf, die es Unternehmen ermöglichen, innovativ zu sein und mit ihrer Konkurrenz Schritt zu halten. Sie ist Expertin darin, kleinen und mittleren Unternehmen dabei zu helfen, die richtige Software für ihre Bedürfnisse zu finden. Auf dem YouTube-Kanal von Capterra stellt sie Tool-Listen vor, die für deutsche Unternehmen wichtig sind. Ihre Schwerpunkte sind Personalwesen, Cybersicherheit und Digitalisierungsstrategien. Ihre Digitalisierungstipps basieren auf mehr als 30 Studien, die sie für den deutschen und andere Märkte auf der ganzen Welt durchgeführt hat. Ihre Softwareempfehlungen basieren auf der Analyse von Nutzerbewertungen auf Capterra (insgesamt mehr als 2 Millionen) und folgen einer präzisen Auswahlmethodik. Ines Forschungsarbeiten wurden in mehreren renommierten Publikationen veröffentlicht, darunter Spiegel, Heise, t3n, FAZ, Business Insider, Tagesspiegel, Focus, und Handelsblatt. Darüber hinaus hat sie als Speakerin an Veranstaltungen teilgenommen, Podcasts produziert und mehrere Interviews gegeben, beispielsweise für die Digital Bash-Veranstaltung und den Zielgruppengerecht-Podcast. ## Zugehörige Software - [GIMP (GNU Image Manipulation Program)](https://www.capterra.com.de/software/168960/gimp) — 4.4/5 (3493 reviews) - [Adobe Creative Cloud](https://www.capterra.com.de/software/48969/adobe-creative-cloud) — 4.7/5 (7329 reviews) ## Ähnliche Kategorien - [IT Asset Management Software](https://www.capterra.com.de/directory/30077/it-asset-management/software) - [IT-Management-Software](https://www.capterra.com.de/directory/10001/it-management/software) - [IT-Service-Software](https://www.capterra.com.de/directory/30672/it-service/software) - [Netzwerk Monitoring Tools](https://www.capterra.com.de/directory/30019/network-monitoring/software) - [Netzwerksicherheit Software](https://www.capterra.com.de/directory/30003/network-security/software) ## Ähnliche Artikel - [IT-Sicherheitskonzepte: Wie können KMU die IT-Sicherheit im Home-Office verbessern?](https://www.capterra.com.de/blog/1654/it-sicherheitskonzepte-im-home-office) - [Studie zum Home-Office: 59 % der Unternehmen weltweit arbeiten wegen COVID-19 remote](https://www.capterra.com.de/blog/1588/studie-home-office-weltweit) - [Studie zu Datenschutz und Informationssicherheit: Wie steht es um die IT-Sicherheit in KMU während der Krise](https://www.capterra.com.de/blog/2061/white-paper-zu-datenschutz-und-informationssicherheit) - [Passe deine Unternehmensstrategie an die Corona-Krise an mit unserer Checkliste der 10 Dinge für den Krisenfall](https://www.capterra.com.de/blog/1392/pandemieplan-checkliste-10-dinge-fur-den-krisenfall) - [Studie zur Softwareauswahl: 58 % bereuen einen aktuellen Softwarekauf](https://www.capterra.com.de/blog/4601/studie-softwareauswahl) ## Links - [Auf Capterra anzeigen](https://www.capterra.com.de/blog/624/probleme-seitengeschwindigkeit-6-tipps-bessere-page-speed) - [Blog](https://www.capterra.com.de/blog) - [Startseite](https://www.capterra.com.de/) ----- ## Strukturierte Daten