WordPress – HTTP Requests verringern

Wordpress - HTTP Requests verringernDas Internet ist eine Art umgekehrte Autobahn: Sie bekommen einen Strafzettel wenn Sie zu langsam sind und Bonuspunkte für zu schnelles Fahren. Egal, ob Sie eine Firmenwebsite betreiben, einen Onlineshop, oder “nur” ein Blogger sind, Ihre WordPress Internetseite muss schnell sein. Sicher haben Sie schon einmal was von dem Zauberwort WordPress-Caching gehört, aber es gibt noch viel mehr.

Wenn ich mir WordPress Internetseiten in Bezug auf ihre Ladezeiten ansehe fällt mir eine Sache auf. Beim Aufruf einer einzelnen Seite werden viele Dateien geladen, vor allem aber viel zu viel externe Dateien. Dabei ist die Verringern der HTTP Requests ein Hebel, an dem man mit etwas KnowHow schnell ansetzen kann und mit dem man in kurzer Zeit bereits deutliche Verbesserungen bei den Ladezeiten seiner WordPress Internetseite erreicht.

Weniger Dateien laden = weniger HTTP Requests = schnellere WordPress Website

Grade eine Reduzierung der Dateien, die benötigt werden um eine WordPress Internetseite vollständig zu laden, bringt eine deutliche Verbesserung der Ladezeiten. In Hinblick auf mobile Benutzer ist ganz klar, das schnell ladende Websites eine bessere Usability haben und genau das ist heute ein wesentlicher Ranking-Faktor in den Suchergebnissen bei Google. Wenn irgend möglich, sollten Sie die Anzahl der HTTP Requests also reduzieren.

3 Ansätze zur Reduzierung der HTTP Requests:

  1. Reduzieren Sie die Anzahl der JavaScript-Dateien
  2. Reduzieren Sie die Anzahl der CSS-Dateien
  3. Reduzieren Sie die Anzahl der Bilder

Glücklicherweise gibt es verschiedene manuelle Massnahmen oder auch Plugins mit denen sich die Punkte 1 und 2 recht gut lösen lassen. Aber zunächst möchte ich Ihnen eine kurze Einführung in das Thema “Browser-Pipelining” geben.

Browser-Pipelining und warum eine Reduzierung der HTTP Requests hilft

Schematische Darstellung Browser Pipelining

Angenommen Ihre Website besteht aus 1 HTML-Datei, 3 CSS-Dateien, 5 JavaScript-Dateien und 10 Bildern. Das ist durchaus ein angemessener Wert, dennoch müssen 19 Dateien geladen werden.

Früher musste ein Browser diese Dateien eine nach der anderen laden. Internetseiten wurden so übertragen, dass der Browser zuerst einen Teil der Internetseite beim Server des Anbieters anforderte, diesen erhielt, dann den nächsten Teil anforderte, diesen dann auch erhielt. Und so wurde mit jedem weiteren Teil der Seite verfahren. Damit wartete der Browser die meiste Zeit auf die Datenübertragung.

Bei modernen Browsern besteht die Möglichkeit, eine Option einzuschalten die sich Pipelining nennt. Damit ist eine Technik gemeint, mit der der Browser mehrere Anforderungen gleichzeitig sendet, ohne auf die Antwort des Anbieter-Servers zu warten. Immer vorausgesetzt dass die zu ladende Internetseite auch die Technik des Pipelining unterstützen. Ist das alles gegeben werden gleichzeitig 4-8 Dateien geladen, was man dann als “Pipeline” bezeichnet. Wenn wir jetzt einmal von einem Maximum von 8 Anforderungen (was ziemlich hoch ist) auf der gleichen Domäne und zur gleichen Zeit ausgehen, wäre es immer noch erforderlich alle 19 Dateien in 3 Chargen zu laden.

Speziell für CSS-Dateien und JavaScript-Dateien, die in dem Abschnitt “above the fold” Ihrer Website geladen werden, ist aber genau das ein Problem: Der Browser kann die Seite nicht rendern, ehe er alle Dateien, die das Rendering blockieren geladen hat. Um das zu verhindern müssen wir 2 Dinge tun:

1. Wir verschieben Dateien, die ein Rendern verhindern aus dem Header Abschnitt in den Body Bereich. Wenn möglich sogar in den Footer. Beispielsweise wird ein JavaScript, das eine kleinere Funktion im Footer hat, später geladen. So wird verhindert das der Browser zum Rendern auf das Laden dieses JavaScripts warten muss. Das verbessert zwar nicht die reale Ladezeit der vollständigen Seite, aber die Seite wird optisch schneller aufbaut. So verbessert sich die vom Benutzer wahrgenommene Ladezeit.

2. Wir kombinieren Dateien und reduzieren so die reale Gesamtzahl der HTTP Requests. Denn grundsätzlich gilt – Eine Reduzierung der Anzahl der zu ladenden Dateien die tatsächliche Ladezeit zu verbessern: es macht Ihre Website schneller. Aber wie macht man das?

Reduzierung der HTTP Requests – Zahl der Javascript & CSS Dateien verringern

http Aufrufe verringern

Wenn Sie bisher noch kein Cache-Plugin für WordPress einsetzen, installieren Sie das kostenlose WordPress Plugin W3 Total Cache. Aktivieren Sie das Plugin und befolgen Sie dabei die Anweisungen des Plugins.

Anschliessend klicken Sie dann im Menü auf “Performance” und dort auf  “Minify”. Aktivieren Sie zunächst das “Minify”.  Scrollen Sie dann ein wenig nach unten. Dort finden Sie  Abschnitte “JavaScript” und direkt darunter, “Cascading Style Sheets”. Aktivieren Sie beide Optionen. Zusätzlich können Sie JS und CSS Dateien explizit minimieren oder auch vom minimieren ausschliessen.

Wenn Sie all Ihre CSS und JS-Datei hinzugefügt haben, wird W3TC diese Dateien zu jeweils einer Datei kombinieren. Praktisch werden Kommentare, unnötige Leerzeilen und andere nicht benötigte Sachen entfernt. So werden beispielsweise 5 JavaScript-Dateien zu 1 JavaScript-Datei kombiniert. Sie sparen effektiv 4 HTTP Requests. Analog dazu passiert das auch mit den CSS-Dateien. Wie Sie sehen, es ist nicht so schwer. Also kein Grund es nicht zu tun.

Anmerkung: Falls Sie bereits ein anderes WordPress Cache-Plugin verwenden suchen Sie nach einem Plugin mit der Bezeichnung Minify und installieren dieses. Bitte nie 2 Cache-Plugins gleichzeitig verwenden!

Reduzierung der HTTP Requests – Verringerung der Bilder

Wenn Sie ein grafisch aufwendiges WordPress-Theme einsetzen, werden dort vermutlich sehr viele Bilder, teilweise auch grosse Hintergrundbilder verwendet. Auch bei dem Theme das ich für Frank Hamm Webdesign einsetze war das so. Eine technische Optimierung der Bilder hat kein befriedigendes Ergebnis gebracht. Meine Lösung – Ich habe auf den optisch ansprechenden Slider und die große Hintergrundgrafik im Body komplett verzichtet. Auch die maximale Breite der Website habe ich auf 1200 Pixel Breite limitiert. So konnten die Grafiken auch kleiner ausgeführt werden.

Weniger Bilder laden = weniger Dateien = Reduzierung der HTTP Requests = schnellere WordPress Website

Es macht Sinn mal in Ruhe zu überlegen, welche Bilder notwendig sind und auf welche man verzichten kann. Denn egal mit welchen technischen Kniffen wir Bilder optimieren, den meisten Gewinn bei den Ladezeiten, bringen die Bilder die überhaupt nicht übertragen werden müssen.

CSS spriting – Zusammenführen von Bildern

Eine weitere Möglichkeit die Anzahl der Bilder zu reduzieren ist das kombinieren von mehreren Bildern zu einem Einzigen. Diese Technik nennt sich “CSS spriting”. Diese Technik im Detail zu erklären würde sicher den Rahmen dieses Artikel sprengen. Wenn Sie sich aber dennoch einlesen wollen, empfehle ich einen sehr guten englischsprachigen Artikel auf A List Apart. Zusammenfassung des Artikels: Es werden alle Bilder in einem Bild kombiniert und dann über entsprechende CSS Anweisungen jeweils der Bereich angesteuert der gebraucht wird.

Bilder “above the fold”

Ein anderer Ansatz die Ladezeiten zu verbessern ist die Bilder erst zu laden wenn diese im sichtbaren Bereich der Website sind. Webdesigner reden hier von Begriffen wie “above the fold” oder “ausserhalb des Viewport”. Realisieren lässt sich so etwas zum Beispiel mit einem jQuery Plugin namens Lazy Load. Dieses Plugin lädt Bilder die in den Sichtbereich kommen automatisch nach wenn die Besucher nach unten scrollen. Ob man diese Technik mag oder nicht ist wie so vieles Ansichtssache.

WordPress – Anzahl HTTP Requests verringern – Fazit:

Wie Sie sehen sind manche Massnahmen zur Reduzierung der HTTP-Requests recht einfach umzusetzen. Es gibt also keinen Grund sich nicht darum zu kümmern. Just do it, machen Sie Ihre Website schneller und Ihre Besucher glücklicher!


 

Frank Hamm Webdesign

Kontaktbutton - Frank Hamm WebdesignFrank Hamm ist selbstständiger Webdesigner aus 56459 Mähren im Westerwald. Sie haben Fragen oder brauchen weitere Informationen? Dann sollten wir uns Kennenlernen! Hinterlassen Sie einen entsprechenden Kommentar, rufen Sie mich an, senden mir hier eine E-Mail oder benutzen sie das Kontaktformular. Nennen Sie mir darin bitte auch eine Telefonnummer unter der ich Sie erreichen kann.

Büro: 06435 – 908875 oder Mobil: 0177 – 8208866 oder Mail: frankhamm@frank-hamm.de

3 Replies to “WordPress – HTTP Requests verringern”

  1. Danke für den Tipp mit dem Plugin. Dadurch konnte ich die Ladezeiten von 1,47 sek auf 0,08 sek drücken. Zumindest, wenn man den Angaben von seobility.net folgt.

  2. Hallo

    Für mich als Webdesigner und Betreiber einer Webagentur im schönen Berner Oberland gibt es nichts wichtigeres, als guten Content und natürlich eine schnelle Webseite. Darum Danke für diesen Beitrag!

    Grüsse
    Silvester

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Solve : *
20 − 17 =


*