Frisch notiert!
Die neusten Artikel aus unserem Blog.

Ladezeiten reduzieren, Geschwindigkeit erhöhen: 10 Tipps für schnellere Websites

von Gino Cremer / Zuletzt aktualisiert am 11/08/2016 / Netzwelt / Server & Technik / Wordpress / 25
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.


Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen.

Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde.

Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

25 Kommentare

  1. 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.

  2. Minding

    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

  3. 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….

  4. 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).

  5. August Weber

    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.

  6. 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?

  7. 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.

  8. 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.

Hinterlasse eine Antwort