Ladezeiten reduzieren, Geschwindigkeit erhöhen: 10 Tipps für schnellere Websites
Mittlerweile kann man in Googles Statistik-Tool "Google Analytics" auch einen Blick auf die Ladezeiten einer Website werfen. Geschwindigkeit und möglichst geringe Ladezeiten sind aus mehreren Gründen relevant und wichtig. Die Ladezeit einer Website ist das A und O, um den Besuchern Frust und Ärger zu ersparen. Eine schnell ladende Website ist zudem im Falle einer Shop-Anbindung ein Muss, um überhaupt Verkäufe generieren zu können. Das geht sogar so weit, dass die Ladezeit einer Website ein Ranking-Kriterium für Google darstellt. In diesem Blogbeitrag finden ambitionierte Webentwickler 10 Tipps zur Beschleunigung einer Website!
Tipp 1: Sauberen Code schreiben
Was in die Rubrik „gesunder Menschenverstand“ fallen sollte, ist gar nicht so alltäglich. Dabei ist ein sauber geschriebener Code die Basis für weitere Optimierungen. Hierbei empfiehlt es sich die W3C Validatoren für korrektes Markup zu nutzen. Selbst wenn man nicht manuell programmiert, auch ein CMS oder Tools wie Dremweaver können verdammt viel Müll produzieren. Vertrauen ist (nicht) gut, Kontrolle ist besser.
Tipp 2: CSS nutzen statt Grafiken
IE6 ist Geschichte, IE7 wird immer seltener und immer mehr Menschen setzen Gott sei Dank auf regelmäßig aktualisierte Browser. Somit ist der Weg geebnet, unnötig schwere Grafiken für Farbverläufe oder abgerundete Ecken durch entsprechende CSS-Eigenschaften zu ersetzen. Das spart Ladezeit und vereinfacht Korrekturen im Nachhinein. Natürlich kommt man um „Fallbacks“ nicht herum für User mit älteren Browsern.
- Lösung A: Man setzt CSS3 nur für „dekorative“ Elemente ein. Farbverläufe und abgerundete Ecken werden einfach nicht dargestellt für User mit älteren Browsern. Die Website ist dann vielleicht nicht so hübsch, aber genauso funktionsfähig und schnell.
- Lösung B: Usern mit älterem Browser werden Grafiken angeboten statt der CSS-Eigenschaften. Das erhöht extrem den Wartungsaufwand, garantiert aber dass sowohl Besucher mit modernen als auch mit älteren Browsern die „gleiche“ Website zu Gesicht bekommen.
Tipp 3: Reduzieren, Reduzieren und nochmals reduzieren
Jedes geladene Javascript verlangsamt die Ladezeit. Gerade CMS wie WordPress laden einen förmlich dazu ein, immer mehr tolle „Features“ einzubauen. Auf Kosten der Ladezeit. Manche Plugins sind sogar derart schlampig programmiert, dass manche Javascript-Dateien gleich mehrfach geladen werden. Der Tod einer performanten Website.
Meine Empfehlung: Bei jedem Plugin oder eingesetzten Code stets überlegen ob der Zusatznutzen gegeben ist in Anbetracht einer verlangsamten Website! Anders gefragt: Ist es den Besuchern egal, dass sie länger warten müssen, wegen DIESEM Feature?
Tipp 4: CSS- und Javascript-Dateien auslagern
Extern ausgelagerte Javascript Dateien können ihre Website ebenfalls beschleunigen. Wird eine Website geladen, müssen alle Dateien einzeln geöffnet, ausgelesen und verarbeitet werden. Nacheinander. Setzen Sie nun auf externe Dateien, können parallel weitere lokale Dateien geladen werden (doppelte Requests).
Ein Script, welches z.B. sehr gerne von extern eingebunden wird ist JQUERY:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Tipp 5: Tools nutzen (Yslow, Firebug) zur Ermittlung der „Übeltäter“
Dank zahlreicher Firefox-Erweiterungen wie YSLOW und FIREBUG, stehen Webentwicklern mächtige Tools zur Prüfung des eigenen Codes zur Verfügung. Mit YSLOW lässt sich ermitteln, welche Dateien wie lange zum laden brauchen, wie lange die Ladezeit der gesamten Website beträgt, usw. So sind Übeltäter schnell ausfindig gemacht.
Tipp 6: Asynchrones Javascript nutzen. Asynchron? Bitte was?
Puh, jetzt wird’s sehr technisch. Aber es lohnt sich. Soll z.B. Google Analytics auf der Seite zum Einsatz kommen, hat man die Wahl zwischen zwei verschiedenen „Tracking-Codes“, die in den Code integriert werden müssen: Ein „synchrones Tracking“ und ein „asynchrones“. Bitte was? Der Unterschied: Beim Laden einer Website muss ein „synchrones Javascript“ vollständig geladen sein, ehe es weitergeht und die nächste Datei geladen werden kann.
Konkret blockieren „synchrone Javascript“-Dateien den Ladevorgang einer Seite. Um dem entgegen zu wirken, gibt es „asynchrone“ Javascript-Dateien, die den Ladevorgang einer Seite NICHT behindern. Ergo: Nach Möglichkeit diese Variante einsetzen!
Tipp 7: Javascript im Footer der Website laden
Laden Sie Javascript-Dateien nach Möglichkeit ganz unten in der Website. Warum? Wenn Javascript-Dateien in den <head> der Website kommen, haben Ihre Besucher noch gar nichts zu Gesicht bekommen, bis die Javascript Dateien geladen sind (es sei denn Sie setzen auf asynchrones Javascript). Wird der Javascript-Code nun in den unteren Bereich der Website gesetzt, kann der Besucher die Website schonmal komplett sehen, während die Scripts im Hintergrund geladen werden. Das geht natürlich nicht mit allen Javascripts. Wird ein Script dringend benötigt, um Teile der Website anzeigen zu lassen, muss das jeweilige Script schon im Head geladen werden.
Tipp 8: WordPress, Drupal, Typo3: Entsprechende Plugins nutzen
Egal welches CMS Sie einsetzen, ein Caching Plugin erledigt verdammt viel Arbeit für Sie. Wir empfehlen generell ein Caching-Plugin einzusetzen. Für WordPress empfiehlt sich W3 Total Cache oder Cachify von Sergej Müller
Tipp 9: Zauberwort „Minify“: Code von Leerzeichen und Umbrüchen befreien
Um eine Website weiter zu beschleunigen, kann man ebenfalls HTML, CSS und Javascript von unnötigen Kommentaren, Leerzeichen und Zeilenumbrüchen befreien. Damit wird der gesamte Code schlanker und dessen Ladezeit reduziert sich, jedoch verschlechtert sich die Übersichtlichkeit (daran führt kein Weg vorbei). Diese Vorgehensweise nennt sich „Minify“ und kann entweder von Hand oder mit entsprechenden Online-Tools erledigt werden. Wer auf ein CMS wie WordPress setzt, kann auch Plugins wie W3 Total Cache einsetzen.
Tipp 10: Javascript Dateien kombinieren um Aufrufe zu reduzieren
Statt sieben Javascript Dateien einzeln aufrufen zu lassen, lassen sich diese auch in einer einzelnen verschmelzen. Dadurch muss nur noch eine einzige JS-Datei geladen werden. Diese ist zwar vom Gewicht schwerer, aber es handelt sich nur noch um einen Aufruf.
Super Artikel !!! Gefällt mir sehr… eine kurze Frage hätte ich noch an Sie und zwar in welche Datei sollte der Quellcode eingefügt werden ( JQEURY )
LG
JaQQ de – alex
Die Tipps haben mir geholfen, danke dafür.
Dazu möchte ich mal eine Frage in den Raum werfen.
Wenn ich meinen Javascript-Code in eine einzige Datei schreibe, muss der Browser Code-Teile mitladen die auf der Seite vielleicht gar nicht benötigt werden. Wäre es hier nicht besser, nur den Code auszugeben der für die jeweilige Seite auch wirklich gebraucht wird?
Anbei noch den Tipp: wenn man auf jQuery oder andere JSL setzt sollte man sich diese von google-api holen, die meisten Seiten nutzen diese API und sie ist daher schon im Cache.
Hi,
es ist schon lustig, wie der erste Punkt, welcher „in die Rubrik “gesunder Menschenverstand” fallen sollte“ hier anscheinend missachtet wird. :D
Sonst ist es ein sehr hilfreicher Artikel.
-Minding
Ich hoffe, dass ich nun durch diese Maßnahmen die Ladegeschwindigkeit meiner Website deutlich erhöhen konnte. Vielen dank für diesen super Artikel.
hallo sehr toller Bericht..ich bin auch grad dran meine Webseite zu optimieren..kannst du mir sagen wo ich den javacode finde ??
mfg fabi
Hallo Fabi, welchen Code meinst du genau?
Hallo war auf der suche nach dem javacode von der Homepage..hab ihn jetzt schon gefunden….alles wieder im grünen Bereich. mfg fabi
Tolle Ratschläge! Bei vielen WordPress Themes der oberen Klasse mit PageBuilder und Slider etc…. ist das tatsächlich ein Problem. Man möchte mit einer technisch aufwändigen Seite glänzen, aber die Ladezeiten sind dermaßen lang….
[…] Sollte deine Website langesamer laden, als die der Konkurrenz, solltest du die Ladezeiten verbessern. […]
Hallo Herr Cremer,
das hört sich sehr gut an, ich selbst kann das aber nicht für meinen SchwertShop umsetzen. Ich sende ihnen mal eine Email und hoffe wir arbeiten zusammen.
Gruß Silvio Overlach von SchwertShop.de
Danke für die Hinweise, denn an den Ladezeiten optimieren kann man kaum genug.
Nachdem ich erst ein Premium-Template für WordPress genutzt hatte, dachte ich das sei kein Problem. Da man ja recht viel Geld für ein professionelles Layout bezahlt hat. Leider ist ein Premium-Template kein Garant für sauberen Code und schnelle Ladezeiten.
Letztendlich bin ich auf ein kostenloses Template umgestiegen und übernehme notwendige Verbesserungen selbst von Hand.
VG
Katja
Hallo Katja. Leider hast du vollkommen Recht. Oftmals stellt man sogar fest, dass kostenpflichtige Themes deutlich unsauberer programmiert sind als so manche kostenlos erhältlichen. Die Unterschiede sind nur sehr schwer „von außen“ zu erkennen und man muss doch schon weit in die Materie eintauchen um entsprechend beurteilen zu können was taugt und was nicht. Als Faustregel kann man schonmal festhalten, dass ein Theme, welches gefühlt 1 Milliarde Slider-Varianten und hunderte Effekte bereithält, nicht zu den schnellsten seiner Art gehören wird. Zwar ist auch ein „Minimal-Theme“ nicht unbedingt per se auf Performance getrimmt, aber funktionsüberladene Themes sind leider sehr oft langsam und schwerfällig (bei aller Flexibilität).
Awww, da kringeln sich mir die Fußnägel, wenn ich so ein Käse lese.
Inwiefern?
Habe mich früher immer gewundert, wieso die meisten popeligen Seiten bei mir so lange zum Laden brauchen. Irgendwann habe ich bemerkt es liegt am JavaScript. Habe ich JavaScript per standard ausgeschaltet läuft alles wieder super schnell. Seiten die auf JavaScript angewiesen sind um zu funktinonieren (ca. 5%) haben Pech. Dann suche ich mir eine Alternative. Wenn es Amazon schaft ohne JavaScript zu funktionieren, dann können das die anderen Seiten hoffentlich auch.
Tolle Zusammenfassung, ein weiterer Tip ist einen dedizierten Server zu verwenden. Dadurch lassen sich einige Performance-Vorteile erzielen.
Hallo die Frage ist wie man mehrere Javascript Dateien zusammenlegt wenn man keine Ahnung von Javascript hat?
Liebe Grüße
Jasmin
Hallo Jasmin, für WordPress kann ich dir das Plugin Autoptimize empfehlen: https://de.wordpress.org/plugins/autoptimize/ – Das Plugin bündelt zuverlässig die verschiedenen JS- und CSS-Dateien automatisch nach Inbetriebnahme. Wer es lieber manuell mag kann via https://jscompress.com/ seine Javascript-Dateien auch händisch/manuell komprimieren und zusammenführen.
die Plugins für WordPress sind schon ganz gut. Aber ich suche nach einer Möglichkeit alles bei CDN zu hosten. Habe MaxCDN gehabt, ist mir auf Dauer aber zu teuer. Gibt es wie das Photo-Plugin beim JetPack eine Alternative, aber mit JS und CSS Files?
Ladezeiten sind sehr wichtig und sind wohl auch der Grund, warum die ganzen Gratisbaukästen, die nur am Anfang gratis sind, bei Google nicht oben sind.
Es gibt weltweit doch nicht eine einzige Webseite von Jimdo, Wix und Co, die bei einem wichtigen Schlüsselwort oder Suchstrang bei Google oben „ränkt“.
http://chamaeleonmedia.ch/gratis-webseite-jimdoo-die-teuerste-webseite/
Solange das „gratis“ auf Kosten der Ladezeiten geht, taugen die Gratis-Anbieter nichts.
Denn jeder Internetbesucher haßt doch laaaangsam laaaaadende Seiten.
Und zu WordPress: Es ist schade, daß es überhaupt Erweiterungen braucht, damit es schneller wird.
Datenbankfreie Systeme wie Getsimple-CMS, Bludit, CMSimple_XH, Mozilo und so weiter haben wir getestet und sie laden nicht nur bis zu 10x schneller als WordPress, sondern sind von Google auch immer extrem gut angenommen worden.
Und genau daher ist Geschwindigkeit ein wichtiger „Ränking“-Faktor bei den Suchmaschinen.
Hallo Remo, danke für deinen Beitrag – mit dem ich 100% einverstanden bin. Allerdings ist es auch schwierig Flat-File-CMS ohne Datenbank-Abhängigkeit mit Systemen wie WordPress zu vergleichen. Zumindest wenn es um reine Performance-Themen geht. Da können Systeme wie WordPress halt nicht punkten. Ein Caching-Plugin „lindert den Schmerz“ und nähert WordPress & Konsorten an diese Flat-File-Systeme wie Getsimple oder CMSimple_XH an…dennoch gewinnen diese Systeme auch dann in Sachen Performance. Dateien werden umgehend geladen ohne „zeitintensive“ .htaccess-Weiterleitungen (damit arbeiten in der Regel die Caching-Plugins). Womit ich aber auch zu 100% einverstanden bin: Es wäre schön, wenn das „ganz simple“ Ablegen von HTML-Dateien (sprich der klassische Page-Cache) direkt in WP implementiert werden könnte. Andere Systeme können das ebenfalls und Performance „on Board“ sollte auch kein Luxusgut sein. Aber hier scheiden sich womöglich die Geister. Wir haben bei unseren Kunden-Websites die Erfahrung gemacht, dass die Performance sehr hoch ist, wenn man seinen Hosting-Unterbau (auf Server-Ebene) beherrscht, die richtigen Caches einsetzt und überhaupt ein Maximum an Requests und Datenübertragung vermeidet.
Mit alten http Skripten auf der Website macht man zudem seine Website unnötig unsicher und man kann auch schnell am Ranking verlieren. Skripte würde ich so gut wie möglich weglassen.
Vielen Dank für die Tipps. Meine Webseite läuft nun ein wenig besser durch die Reduzierung der Javascripte. Jetzt muss ich nur noch am Feintuning arbeiten.
Vielen Dank für diese Aufstellung! Gefällt mir insgesamt sehr gut!
Allerdings denke ich, dass Verbesserungen, wie die Reduzierung von Umbrüchen, etc. kaum zu effektiv spürbaren Verbesserungen bei der Ladezeit führen werden. Das liegt wohl alles im Benchmark-Bereich. Heißt, man kann es messen, aber spüren wird man es kaum.
Wem es darauf ankommt, der kann auch noch seinen CSS-Code etwas umschreiben. So wird bspw. #FFF schneller geladen als #ffffff.
Super Artikel, ich kämpfe seit langem meine Site http://www.freund-foto.de die ich mit WordPress erstellt habe und sehr umfangreich ist zu optimieren. Mit einigen Plugins konnte ich die Ladezeit extrem verkürzen. Vielen Dank für die tollen Ideen. Beste Grüße Nick
Hallo,
hier könnt Ihr die Ladezeit Eurer Webseiten kostenlos von verschiedenen Standorten messen. Unterschiedliche Browser, Desktop und Mobile.
http://www.uptrends.de – Gratis Tools
Super Tipps! Danke !
Danke für die tollen Tipps!
Hallo,
vielen Dank für den sehr guten Text den du geschrieben hast! :) Habe den Beitrag letztens auf Google gefunden, aber gerne möchte ich dich auch fragen, ob deine Tipps immer noch im Jahr 2020 funktionieren? :) Selbst habe ich eine eigene Seite, die ich mehr optimieren möchte und bisschen kenne ich mich auch in diesem Bereich aus, aber man sollte sein Wissen immer erweitern.
Beispielsweise verwende und komprimiere ich CSS in meiner Seite sehr oft, die WP Seite selbst habe ich auch reduziert und finde, dass die Seite jetzt sehr gut läuft, was denkst du über meine Tipps? :)
Hallo, wie kann ich die Javascript Dateien kombinieren um die Aufrufe zu reduzieren?
LG
Thomas
Super blog, hat mir weitergeholfen. Danke dafür
Eine sehr hilfreiche Seite. kann ich nur weiterempfehlen.
Es grüßt Harald Adam aus Oberhausen
[…] weniger Ressourcen frisst als Javascript. Und wenn es sich nicht vermeiden lässt, so kann man den Javascript-Code auch auslagern, kombinieren oder im Footer […]
Ein Ratschlag für die etwas weniger versierten Webseitenbetreiber. Um eure Webseite schneller zu machen und damit etwas an Ranking zu gewinnen, könnt Ihr versuchen, alle unnötigen Bilder/Fotos (welche zudem zu den Hauptladeverzögerern zählen) zu entfernen bzw. die Bild/Foto-Größe anzupassen, in Form von Komprimierungen und auf die richtige Größe zuschneiden. Zudem kann man noch versuchen, etwaige unnötige Links zu entfernen. Links sind generell ein Problem, da Google beim Laden eurer Webseite auch die Links mit lädt.