{"id":5011,"date":"2019-08-13T17:11:30","date_gmt":"2019-08-13T15:11:30","guid":{"rendered":"https:\/\/leap.de\/?p=5011"},"modified":"2023-11-16T15:27:26","modified_gmt":"2023-11-16T14:27:26","slug":"warum-dein-pagespeed-so-wichtig-ist-und-wie-du-ihn-optimierst","status":"publish","type":"post","link":"https:\/\/leap.de\/wissen\/warum-dein-pagespeed-so-wichtig-ist-und-wie-du-ihn-optimierst\/","title":{"rendered":"Warum dein PageSpeed so wichtig ist (und wie du ihn optimierst)"},"content":{"rendered":"\n
Auch die beste Website kann nicht ihr volles\u00a0Potenzial entfalten<\/strong>, wenn der Seitenaufbau zu lange dauert und die NutzerInnen entnervt abspringen. Nicht nur, dass du damit einen potenziellen Kunden und Kundinnen ver\u00e4rgerst und vielleicht sogar an die Konkurrenz verlierst. Nein,\u00a0zus\u00e4tzlich entsteht auch ein schlechtes Nutzersignal an Google, welches deine Platzierung in den Suchergebnissen nachhaltig negativ beeinflusst<\/a>\u00a0und dich wom\u00f6glich zuk\u00fcnftigen Traffic kostet. Schlie\u00dflich ist die\u00a0Ladezeit<\/strong>\u00a0seit Sommer 2018 nun auch ein\u00a0offiziell best\u00e4tigter Rankingfaktor<\/a>.<\/p>\n\n\n\n Bei der Internetnutzung haben in den vergangenen Jahren die\u00a0mobilen Endger\u00e4te<\/strong>\u00a0mehr und mehr an Bedeutung gewonnen \u2013 die mobilen Devices sind nun \u00fcber nahezu alle Bev\u00f6lkerungs- und Altersgruppen verteilt. Nicht ohne Grund verwendet Google seit M\u00e4rz 2018 den\u00a0Mobile-First-Index<\/strong>\u00a0und damit\u00a0die mobile Version einer Seite\u00a0<\/a>f\u00fcr die Rankingermittlung. Dies ist deutlich nachvollziehbar.\u00a0So ist der Anteil der mobilen Internetnutzer in Deutschland in den Jahren 2015 bis 2018 sukzessive von 54 Prozent auf 68 Prozent angestiegen.<\/a><\/p>\n\n\n\n Die Kehrseite der Medaille ist, dass wir trotz der nach wie vor steigenden Nachfrage vielerorts noch immer keine gute Internetverbindung auf den Smartphones haben. Gerade wer au\u00dferhalb der Ballungsr\u00e4ume lebt, wird davon mit Sicherheit ein Lied singen k\u00f6nnen.<\/p>\n\n\n Du bist mehr der visuelle Typ?<\/p>\n\n\n\n Weiter unten findest du eine Infografik, die dir diesen Artikel \u00fcbersichtlich zusammenfasst!<\/a><\/p>\n<\/div><\/div>\n\n<\/div>\n\n\n Die Geschwindigkeit<\/strong> einer Seite wirkt sich aber nicht nur als direkter Rankingfaktor auf deine Platzierung und deine Gesch\u00e4ft aus. Schlie\u00dflich f\u00fchrt eine gute Ladezeit zu einer besseren Nutzungserfahrung<\/strong> und beugt Abspr\u00fcngen vor. Sondern hinzu kommt, dass NutzerInnen, die mit einer schnell ladenden Seite zufrieden sind, in der Regel \u00f6fter zu Kunden bzw. Kundinnen werden, was sich wiederum positiv auf deine Conversions auswirkt und ein indirektes Rankingsignal liefert.<\/p>\n\n\n\n Klar ist: NutzerInnen sind meist eher ungeduldig<\/strong> und erwarten einen schnellen Seitenaufbau. So kann bereits eine l\u00e4ngere Ladezeit von einer Sekunde zu einer Verringerung der Conversionrate um bis zu 20 Prozent f\u00fchren!<\/a> Das bekannte Sprichwort \u201eZeit ist Geld\u201c passt in diesem Zusammenhang vorz\u00fcglich.<\/p>\n\n\n Kein Nutzer freut sich \u00fcber lange Wartezeiten auf Websites<\/p>\n\n<\/div>\n\n\n Und wenn du jetzt immer noch nicht von der Notwendigkeit einer sich schnell ladenden Website \u00fcberzeugt bist, geben wir dir gern ein weiteres Argument an die Hand: Die Ladezeit kann dir sogar Geld sparen.<\/strong> Wie das? Ganz einfach: Wenn du im Bereich Paid Advertising unterwegs bist, kennst du den Qualit\u00e4tsfaktor einer beworbenen Landingpage als Komponente f\u00fcr den Klickpreis. Einer der Faktoren, die mit in diese Metrik einflie\u00dfen, ist die Ladegeschwindigkeit. Bedeutet hier: Mit einer schnellen Seite verbesserst du deinen Qualit\u00e4tsfaktor und kannst deine Werbeausgaben senken.<\/p>\n\n\n\n Damit deine Seitenbesucher und -besucherinnen nicht auf das vom Desktop gewohnte Nutzungserlebnis verzichten m\u00fcssen und auch auf mobilen Endger\u00e4ten die gew\u00fcnschten Aktionen durchf\u00fchren k\u00f6nnen, darf der Funktionsumfang deiner Seite<\/strong> nat\u00fcrlich nicht unter der besseren Ladegeschwindigkeit leiden.<\/p>\n\n\n\n Welche M\u00f6glichkeiten<\/strong> gibt es nun f\u00fcr dich konkret, den UserInnen eine Seite zur Verf\u00fcgung zu stellen, die eine m\u00f6glichst kurze Ladezeit<\/strong> hat? Das Team von Think with Google hat hierzu eine Graphik ver\u00f6ffentlicht, die einige wichtige Hebel aufzeigt.<\/p>\n\n\n F\u00fcnf Schritte zu einer schnellen mobilen Website<\/p>\n\n<\/div>\n\n\n Selbstverst\u00e4ndlich treffen nicht alle obigen Faktoren f\u00fcr jedes Seitenangebot zu \u2013 ein paar generelle Ableitungen und Tipps<\/strong> m\u00f6chten wir dir an dieser Stelle dennoch geben. Eine kompakte \u00dcbersicht \u00fcber hilfreiche Tools, mit denen du deine Performance messen und Potenziale aufdecken kannst, liefern wir dir am Ende des Artikels.<\/p>\n\n\n\n Bevor du viel Geld in Tools investierst, solltest du zun\u00e4chst einmal deine Seite betrachten. Google liefert daf\u00fcr mit Test My Site<\/a> ein einfach zu bedienendes Tool, mit dem du dir schnell und einfach einen ersten \u00dcberblick verschaffen kannst.<\/p>\n\n\n Testergebnisse von Google Test My Site f\u00fcr growthup.de<\/p>\n\n<\/div>\n\n\n Nach dieser Zusammenfassung liefert dir das Tool in Form einer Slideshow ein paar Tipps, wie du deine Seitenperformance steigern<\/strong> kannst. Wie wir das in der Vergangenheit f\u00fcr unser Magazin erfolgreich umsetzen konnten, haben wir weiter unten f\u00fcr dich beschrieben. Die M\u00f6glichkeit, einen Vergleich mit bis zu vier WettbewerberInnen durchzuf\u00fchren und ein Rechner f\u00fcr die m\u00f6gliche Steigerung des Jahresumsatzes bei einer Verbesserung der Ladegeschwindigkeit runden das Angebot ab. Wer tiefer in die Analyse gehen m\u00f6chte, kommt am Google Chrome Addon Lighthouse<\/a> nicht vorbei. Wenn du einen anderen Browser verwendest oder keine zus\u00e4tzlichen Erweiterungen installieren m\u00f6chtest, bieten dir die PageSpeed Insights<\/a> die gleichen Daten.<\/p>\n\n\n Screenshot: PageSpeed Insights Analyse f\u00fcr growthup.de<\/p>\n\n\n\n <\/a><\/p>\n\n<\/div>\n\n\n Ebenfalls kostenfrei<\/strong> nutzbar sind die Chrome Developer Tools<\/a>, die du im Browser \u00fcber die Tastenkombination [Strg] + [Umschalt] + [i] oder per Rechtsklick und \u201eUntersuchen\u201c aufrufen kannst. Auch wenn es ein wenig \u00dcbung erfordert, bis du die wertvollen Informationen zielgerichtet findest, lohnt sich die Einarbeitung definitiv. Gerade wenn du bei Lighthouse oder PageSpeed Insights Probleme bei deinen Ladezeiten aufgedeckt hast, kannst du damit noch tiefer in die Analyse gehen. Besonders interessant ist hierbei der Tab \u201eNetwork\u201c<\/strong>, in dem du allerlei hilfreiche Informationen findest: Verwendete Protokolle, die Dateigr\u00f6\u00dfe von Bildern, CSS und JS, Schriften, die beim Anzeigen der Seite geladen werden m\u00fcssen, sind nur einige der angezeigten Daten.<\/p>\n\n\n Screenshot Chrome DevTools f\u00fcr growthup.de<\/p>\n\n\n\n <\/a><\/p>\n\n<\/div>\n\n\n Nachdem du oben die passenden Tools zur Identifizierung von Potenzialen<\/strong> auf deiner Seite kennengelernt hast, kommen wir nun zur Umsetzung.<\/p>\n\n\n\n Viele der h\u00e4ufigsten Fehler, die wir in unserer t\u00e4glichen Arbeit sehen, sind zumeist mit \u00fcberschaubarem Aufwand zu beheben und k\u00f6nnen dir betr\u00e4chtliche Vorteile gegen\u00fcber deinen KonkurrentInnen<\/strong> bringen.<\/p>\n\n\n\n Vor allem wenn deine Besucher und Besucherinnen regelm\u00e4\u00dfig auf deiner Seite sind oder dort viele Seiten aufrufen, spart Browser Caching ihnen wichtige Ressourcen. Auf im Cache gespeicherte Daten kann \u2013 solange diese nicht gel\u00f6scht wurden \u2013 immer wieder zugriffen werden, anstatt diese jedes Mal aufs Neue anzufordern.<\/p>\n\n\n\n Sofern du eine HTTPS-Seite hast, kannst du mit einem Wechsel auf einen HTTP\/2-f\u00e4higen Server deutliche Zeiteinsparungen von 500 bis 800 Millisekunden pro Seitenaufruf erreichen. Durch diese neue Technologie werden die angefragten Ressourcen entschieden schneller vom Server an den Endnutzer bzw. die Endnutzerin \u00fcbermittelt.<\/p>\n\n\n\n Je nach Besucheraufkommen und zu \u00fcbermittelnden Daten gibt es unterschiedliche Anforderungen, denen der von dir verwendete Server gerecht werden muss. Kommt es zu Engp\u00e4ssen, wirken sich diese negativ auf deine Seitenperformance aus.<\/p>\n\n\n\n Sobald viele Daten \u00fcbertragen werden m\u00fcssen, schl\u00e4gt sich das auch in der Ladezeit nieder. Die empfohlene Webseitengr\u00f6\u00dfe liegt bei 1.000 KB. Schaue daher kritisch, wo du bei der Darstellung deiner Seite Daten einsparen kannst, ohne das Nutzungserlebnis zu beeintr\u00e4chtigen.<\/p>\n\n\n\n Stelle sicher, dass der Google Bot beim Crawlen deiner Seite und nat\u00fcrlich auch der Nutzer bzw. die Nutzerin keine vermeidbaren Umwege in Kauf nehmen muss. Die Vermeidung unn\u00f6tiger Umwege kommt letztlich auch dir zugute.<\/p>\n\n\n\n Verringerst du die Dateigr\u00f6\u00dfe deiner Bilder, verbrauchen diese beim Laden weniger Zeit. Anbieter wie TinyJPG<\/a> sind leicht zu bedienen und \u00fcberdies auch kostenlos verf\u00fcgbar. Verwende dar\u00fcber hinaus ausschlie\u00dflich die Bildformate JPG und PNG.<\/p>\n\n\n Bilder k\u00f6nnen durch Tools wie dieses ganz einfach und kostenlos verkleinert werden<\/p>\n\n<\/div>\n\n\n Es reicht v\u00f6llig aus, wenn Bilder nicht direkt beim Abruf geladen werden,\u00a0sondern erst wenn sie im sichtbaren Bereich des Users auftauchen (Lazy Loading)<\/a>.\u00a0Beachte aber, dass der Google Bot nicht scrollt! Die Bilder im unteren Bereich der Seite k\u00f6nnen daher nicht im Bilderindex landen. Nicht immer sind aufwendige Headergrafiken das beste Mittel zum Erfolg.<\/p>\n\n\n\n Leerzeichen, Zeilenumbr\u00fcche und Kommentare der Entwickler im Quellcode erleichtern dem Menschen zwar das Lesen, f\u00fcr die Darstellung der Website haben sie aber keinen Nutzen. Daher solltest du hier aufr\u00e4umen, um die \u00fcbermittelte Datenmenge zu verringern. Gehe hier aber mit Bedacht vor, um keine gravierenden Komplikationen auf deiner Seite hervorzurufen.<\/p>\n\n\n\n Weiter oben haben wir schon die Developer Tools als n\u00fctzliches Werkzeug vorgestellt. Diese kannst du auch hervorragend nutzen, um zu sehen, wo unn\u00f6tige Codes laden und damit wertvolle Millisekunden verschenkt werden.\u00a0Wie du dein JavaScript auf Vordermann bringst, erf\u00e4hrst du au\u00dferdem hier.<\/a><\/p>\n\n\n Screenshot Chrome DevTools Ungenutzter JS- und CSS-Code f\u00fcr growthup.de<\/p>\n\n<\/div>\n\n\n Wir empfehlen dir, die installierten Plugins auf deiner Webseite kritisch zu pr\u00fcfen und deren Notwendigkeit zu hinterfragen. Nicht immer sind alle Erweiterungen, die du im Laufe der Zeit eingebunden hast, wirklich notwendig. Vor allem aber k\u00f6nnen sie deine Seite ausbremsen.<\/p>\n\n\n\n Der Vollst\u00e4ndigkeit halber: Auch Progressive Web Apps (PWA) und Accelerated Mobile Pages (AMP) sind eine M\u00f6glichkeit, um die PageSpeed zu steigern. Allerdings ist dies mit einigem Mehraufwand verbunden und nicht f\u00fcr jedes Projekt geeignet. Da wir dir in diesem Artikel aber zun\u00e4chst einmal ein paar Quick Wins aufzeigen wollten, gehen wir hier nicht weiter darauf ein.<\/p>\n\n\n\n Zum einen sind wir auf einen HTTP\/2<\/strong> f\u00e4higen Webserver umgestiegen. Bei HTTP\/2 handelt es sich um den Nachfolger von HTTP\/1.1<\/strong>, welcher deutlich schneller ist, da nicht mehr f\u00fcr jede einzelne Ressource ein eigener Handshake durchgef\u00fchrt werden muss. Somit werden pro angefragte Ressource ca. 50 \u2013 150 Millisekunden gespart. Die TCP-Connection bleibt in der Regel solange bestehen, bis alle Ressourcen vom Dokument \u00fcbermittelt wurden. Das untenstehende Bild stellt diesen Vorgang grafisch dar.<\/p>\n\n\nLangsame Websites dr\u00fccken die Conversionrate<\/h2><\/div>\n\n\n\n
Die wichtigsten Hebel f\u00fcr bessere Ladezeiten<\/h2><\/div>\n\n\n\n
Ohne Analyse keine Verbesserung<\/h2><\/div>\n\n\n\n
Zehn Tipps f\u00fcr bessere Ladezeiten mit wenig Aufwand<\/h2><\/div>\n\n\n\n
1. Aktiviertes Browser Caching<\/h3><\/div>\n\n\n\n
2. HTTP\/2 verwenden<\/h3><\/div>\n\n\n\n
3. Bestehendes Hosting passt nicht zu Trafficaufkommen<\/h3><\/div>\n\n\n\n
4. Gr\u00f6\u00dfe der Website verringern<\/h3><\/div>\n\n\n\n
5. Vermeide unn\u00f6tige Weiterleitungen<\/h3><\/div>\n\n\n\n
6. Bilder komprimieren und das richtige Bildformat verwenden<\/h3><\/div>\n\n\n\n
7. Ressourcen asynchron laden<\/h3><\/div>\n\n\n\n
8. HTML-Code optimieren<\/h3><\/div>\n\n\n\n
9. JavaScript- und CSS-Nutzung optimieren<\/h3><\/div>\n\n\n\n
10. Verwendete Plugins kritisch pr\u00fcfen<\/h3><\/div>\n\n\n\n
Praxisbeispiel zu HTTP\/2 & Lazy Loading \u2013 Das haben wir optimiert<\/h2><\/div>\n\n\n\n