HTTP-Requests: So kannst du sie in WordPress minimieren!

Wer häufig mit Firefox-Addons wie YSlow oder Page Speed arbeitet findet oft die Nachricht (vor allem in Systemen wie WordPress), dass man die Anzahl der HTTP-Requests mindern soll. Da jeder Aufruf die Verbindung zum Server neu aufbaut, fallen hier immer wieder Latenzzeiten an, welche die Ladegeschwindigkeit beeinflussen.

Wie stellt man es nun in einem Blogsystem wie WordPress an, dass man die HTTP-Requests im Falle von css Dateien minimiert?

Im Grunde geht es darum, alle css-Stile in eine Datei zu verpacken. Nur ist das Problem, dass Module bzw. WordPress-Plugins immer gern eigene css Dateien laden. Wir müssen also hergehen und die Stile in unsere style.css packen und das Modul abhalten diese zu laden.

Wie das geht möchte ich an zwei Modulen zeigen. Das erste wird Add to An, da dieses Inline-CSS erstellt. Das zweite ist das Modul Digg Digg, welches eine CSS Datei in den Header schreibt.

Geniale Themes: MyThemeShop
MyThemeShop
Vorteile:
MyThemeShop Vorteile
  • Extrem schöne WordPress Themes
  • Bereits SEO-optimiert und flexibel einsetzbar
  • Einzelkauf oder Premium Abo möglich

Wir betrachten zunächst den Quellcode der ausgegebenen Seite und öffnen die CSS-Datei, welches im Header geöffnet wird. Im ersten Fall schauen wir uns erst einmal den Inline-Style von Add To an. Inline Styles können wir glücklicherweise direkt aus dem HTML-Code heraus und in unsere style.css kopieren. Damit der Code jetzt nicht doppelt (aus der css und dem inline Code) aufgerufen wird, müssen wir das Modul ein wenig anpassen.

Wichtig ist hier auch wieder, dass du bei jeder Datei die du veränderst vorher unbedingt eine Datensicherung machst um im Falle von Fehlern eine Rückversicherung zu haben. Im Falle von Add to Any führt unsere Arbeit uns zur gleichnamigen PHP-Datei. In dieser Datei suchen wir gezielt nach einer Ausgabe von CSS-Stilen und entfernen diese. Diese Zeilen finden wir bei Add To An ab Zeile 307 bis Zeile 345. Diese gilt es nun zu entfernen und die Datei wieder hochzuladen.

Im Grunde genommen bleibt also nur noch eine leere Funktion über, die folgendermaßen aussieht:

function A2A_SHARE_SAVE_button_css() {

}

Conversion-Plugins: Flytools
Flytools
Vorteile:
Flytools Vorteile
  • Ideal um Webinar- oder Mitglieds-seiten zu erstellen
  • Conversionstarke Buttons schnell & einfach erstellen

Was bringt das jetzt?

Der Vorteil hier liegt darin, dass im Quelltext vom Dokument weniger Text steht, wodurch die Suchmaschinen schneller zum eigentlichen Inhalt kommt und der Quelltext nicht künstlich aufgebläht wird. Einen richtigen Geschwindigkeitsvorteil gibt es hier zwar noch nicht, aber der Fokus liegt hier ganz klar darauf, dass der Quelltext etwas entschlackt wird und die css Stile da hin kommen, wo sie hingehören – in unserem Stylesheet.

Wie sieht das nun aus, wenn Module eine fertige css-Datei in den Header schreiben? Im Grunde genommen geht das genauso, nur dass der Ablauf ein klein wenig anders ist. Wir benötigen als erstes die CSS-Datei des jeweiligen Moduls. Im Falle von Digg Digg sieht man, dass die Datei folgenden Pfad besitzt:

/wp-content/plugins/digg-digg/diggdigg-style.css

Diese Datei öffnen wir in unserem Lieblings-Programm und fügen die Stile unserer style.css hinzu. Jetzt geht es wieder darum den Aufruf des Moduls so abzuändern, dass diese Datei nicht geladen wird. Ein Problem dass uns jetzt trifft ist, dass ein Modul wie Digg Digg mehrere Dateien einsetzt, deswegen starten wir zuerst mit der Hauptdatei. Diese heißt in 99 % der Fälle so wie das Modul – also schauen wir uns die digg-digg.php einmal an.

So sehen wir jetzt schon in Zeile 36 des Pudels Kern. Hier wird mittels echo-Befehl das Stylesheet ausgegeben. Wir könnten natürlich jetzt auch die beiden Zeilen in der Funktion löschen, aber wir können auch den Aufruf direkt wegnehmen, damit das erst gar nicht ausgeführt wird. Das bringt zwar keinen wirklich merkbaren Unterschied, aber der Ordnung halber machen wir das.

WP-Akademie
Nutzen:
WP-Akademie Inhalt
  • Ausbildung zum Internet-Unternehmer
  • Online Private-Coaching
  • Zertifizierung und Auszeichnung
WP-Akademie Button

So sehen wir in Zeile 45 dass in den Kopf die eben gesehene Funktion aufgerufen wird – kommentieren wir das also einmal aus. Wenn wir die Datei jetzt wieder hochladen und die Seite neu aufrufen sehen wir das unser Modul noch genauso funktioniert, aber einen HTTP-Aufruf weniger ausführt. Bei einem Modul macht das sicherlich keinen Sinn, aber Ihr wisst ja selber wie schnell sich Module in WordPress installieren lassen.

Das ganze hat natürlich auch einen kleinen Nachteil. Nach einem Update geht das ganze Spiel immer von vorne los. Man darf jedes Mal schauen ob noch alles so funktioniert wie das Modul es vorsieht – was das Design angeht. Da aber jeder neue Aufruf eine neue Latenzen mit sich zieht kann man da denk ich mal ein Auge zudrücken 😉

Projekteplattform: Freelancer
Freelancer
Kernbereiche:
Freelancer Aufgaben
  • Programmier-aufträge vergeben und finden
  • Kostenlose Joberstellung
  • 15 € Startguthaben geschenkt
Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne


Bis jetzt keine Bewertung
Loading...

Schreibe einen Kommentar

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

How-to-WordPress.de unterstützt dofollow und ist somit nofollow frei.