WordPress: Autoptimize Plugin richtig konfigurieren

WordPress: Autoptimize Plugin richtig konfigurieren

Autoptimize ist ein WordPress Plugin, mit dem du deinen HTML, CSS und JavaScript Code verkleinern und kombinieren kannst, damit deine Seite schneller lädt.

Wenn du durch deine Google Suche auf diese Seite gestoßen bist, dann empfehle ich dir als Erstes das W3 Total Cache Tutorial zu lesen und danach wieder zu diesem Tutorial zurückzukommen.

WordPress Themes, Plugins und auch der Core benutzen HTML, CSS und JavaScript. Häufig erstellt jedes Plugin separate Dateien für diese Codes und lädt diese einzeln. Wenn du schonmal ein PageSpeed Tool, wie Google PageSpeeds, GTMetrix oder Pingdom benutzt hast, dann ist dir vielleicht ein Feld aufgefallen, dass dir sagt, dass du zuviele externe CSS und JavaScript Files hast. Die Empfehlung dabei ist immer diese Dateien zu kombinieren und zu verkleinern.

Genau dazu benutzen wir das Plugin Autoptimize. Dieses Tutorial ist in zwei Teile aufgeteilt: Eine 30-Sekunden Basis Version und eine fortgeschrittene Version, in der ich erkläre, wie du das Problem von render blocking CSS und JavaScript beheben kannst.

Du kannst mit diesen Begriffen nichts anfangen? Kurz gesagt, sind das Maßnahmen, die Google Webmastern empfiehlt, wie sie ihre Seite optimieren können, damit sie von Google mehr gemocht werden.

Wir alle wollen von Google gemocht werden, also lohnt es sich durchaus, diese Optimierungen zu ergreifen.

Auch wenn du keine Erfahrungen hast, sollte dich dieses Tutorial in die Lage versetzen, diese Optimierungen zu ergreifen. Wenn etwas nicht funktioniert, dann hinterlasse einen Kommentar und ich werde versuchen dir weiterzuhelfen.

30 SEKUNDEN KONFIGURATION - SCRIPTS KOMBINIEREN UND VERKLEINERN

Zuerst musst du das Autoptimize Plugin auf deiner WordPress Seite installieren. Danach navigierst du zu den Einstellungen des Plugins und aktivierst du die Optionen JavaScript-Code und CSS-Code optimieren. Optional kannst du noch die Adresse deines CDN angeben, falls du ein solches Netzwerk benutzt.

autoptimize-einstellungen-1

Das ist alles und diese Einstellungen machen deine Webseite bereits ein wenig schneller. Wenn du es dir zutraust, dann solltest du dich an den fortgeschrittenen Einstellungen für Autoptimize versuchen, die die Ladezeiten deiner Webseite erheblich steigern.

FORTGESCHRITTENE ANLEITUNG

ABOVE THE FOLD CSS

Eine nicht optimierte Seite lädt den gesamten CSS Code, bevor sie die Webseite dem Besucher zeigt. Das kann viel Zeit kosten. Google empfiehlt deshalb nur den sichtbaren Teil des CSS Codes laden zu lassen. Also nur den Code, der die Darstellungen des Inhalts beeinflusst, den du in deinem Browser angezeigt bekommst, wenn du nicht nach unten scrollst.

Diese Optimierung kann die Ladezeiten dramatisch verringern und dich bei Google etwas beliebter machen. Keine Angst. Das alles klingt am Anfang komplizierter als es ist. Am Ende ist es eigentlich fast nur Copy und Paste Arbeit. Folge den Screenshots und du solltest keine Probleme haben, Autoptimize richtig einzurichten.

Als Erstes musst du in den Autoptimize Einstellungen den gesamten CSS Code im Head Bereich inlinen. Wir machen, dass damit wir im nächsten Schritt den gesamten Quellcode kopieren können, um den Teil deines CSS Codes zu identifizieren, den wir brauchen.

autoptimize-einstellungen-css-inline

Speichere deine Einstellungen und leere deinen Cache. Falls du noch ein anderes Caching Plugin, wie W3 Total Cache benutzt, dann leere auch diesen Cache.

autoptimize-einstellungen-cache-leeren

Öffne deine Start-URL, lass dir den Quelltext anzeigen und kopiere ihn.

autoptimize-einstellungen-css-quelltext-anzeigen
autoptimize-einstellungen-quelltext-kopieren

Öffne den Critical Path Generator, trage deine Webseiten URL ein und füge deinen Quelltext ein.

ACHTUNG: Wenn du einen sehr großen Quellcode hast, dann kann es sein, dass der Critical Path Generator dir sagt, dass er zu lang ist. Dann musst du ihn in mehrere Teile unterteilen. Danach fügst du ihn nacheinander in den Generator ein und kopierst dir den Critical Path CSS in ein Textdokument.

autoptimize-einstellungen-critical-path-css
autoptimize-einstellungen-critical-path-css-1

Gehe jetzt zurück in deine Autoptimize Einstellungen, deaktiviere Gesamten CSS-Code Inline einfügen?, aktiviere Inline und Defer CSS? und füge das Critical Path CSS.

autoptimize-einstellungen-critical-path-css-einfuegen

Speichere deine Einstellungen und leere alle Caches. Lade jetzt deine Seite und kontrolliere, ob es zu Darstellungsfehlern kommt.

EXKLUSIVER ZUGANG

ZU ANLEITUNGEN, FALLSTUDIEN UND BEST-PRACTICES
(KOSTENLOS)

DEFER JAVASCRIPT / ASYNCHRON LADEN

Jetzt kümmern wir uns deinen Javascript Code und die Google Empfehlungen, dass man auch diesen deferren bzw. asynchron laden soll. Das heißt, dass es auch hier wichtig ist, dass nur Code geladen wird, den man für die Erste Darstellung deiner Seite braucht und nicht den gesamtem.

Autoptimize hat diese Funktion nicht eingebaut, aber das Plugin Async JavaScript erweitert Autoptimize um diese Funktion. Lade es dir herunten und installiere es auf deiner WordPress Seite.

Aktiviere zuerst folgende Einstellungen in Autoptimize:

autopimize-einstellungen-javascript

Öffne danach die Einstellungen des Async Javascript Plugins, aktiviere es und wähle als Methode Async.

async-javascript-plugin-einstellungen

Danach kümmern wir uns den jQuery Handler. jQuery ist die JavaScript Bibliothek deiner Webseite. Diese asynchron zu laden, führt in 99% aller Fälle zu Darstellungsfehlern. Hier solltest du die Methode Defer wählen.

async-javascript-jquery

Aktiviere jetzt den Autoptimize Support und wähle auch hier die Methode Defer. Speicher danach deine Einstellungen, leere alle Caches und schau dir deine Webseite an.

async-javascript-plugin-einstellungen-autopimize-support

Ich hoffe, dass sie Einwandfrei geladen wird. Falls das nicht der Fall ist, dann hast du wahrscheinlich deinen Cache nicht geleert. Mach das zur Sicherheit noch einmal. Falls es immer noch nicht funktioniert, dann musst du Skripte ausschließen, die zu Fehlern führen.

DEBUG / FEHLERSUCHE

Lade dir dazu das Debug Plugin herunter. Öffne die Einstellungen und aktiviere folgende Optionen.

async-javascript-debug

Öffne danach deine Startseite und danach deine JavaScript Konsole.

debug-javascript-console

Auf der rechten Seite bekommst du jetzt die JavaScript Konsole angezeigt. Wenn da irgendwas Rot leuchtet, dann funktioniert etwas nicht. Notiere dir den Namen des Übeltäters (z.B.: min.js).

async-javascript-debug-1

Gehe danach wieder in die Async JavaScript Einstellungen und trage das Skript im Feld Exlcude Scripts ein. Speichere deine Einstellungen, leere deine Caches und schau dir deine Seite wieder an.

async-javascript-debug-2

Ich hoffe ich konnte dir ein wenig weiterhelfen und die Ladezeiten deiner Seite mit Autoptimize etwas verbessern. Falls du Fragen oder Kommentare hast, dann hinterlasse einen Kommentar. Wenn du ein Problem hast, dann lade am besten einen Screenshot hoch, damit ich weiß, wo das Problem liegen könnte.