Schnelle Ladezeiten von Websites sind nicht nur für die Zufriedenheit der Besucher wichtig. Auch Suchmaschinen, allen voran natürlich Google, haben in den letzten Jahren die Geschwindigkeit von Websites als Kriterium in ihre Ranking-Algorithmen eingebaut. Es lohnt sich also, die Dateigrößen von HTML-, CSS- und JavaScript-Ressourcen zu optimieren. WordPress-Plugins können euch dabei schnell und unkompliziert helfen.
Warum ist die Reduzierung von HTML, CSS und JavaScript eine gute Idee?
HTML, CSS und JavaScript sind die grundlegenden Bausteine von Websites. Daher wäre es wohl nicht abwegig, anzunehmen, dass diese auch von Haus aus in optimierter Form vom Server an den Browser übertragen werden. Leider ist das nicht der Fall, man kann und sollte hier also noch selbst Hand anlegen. Denn werden bei jedem Seitenaufruf unnötig große oder zu viele Ressourcen übertragen, dann kann das auch ein schneller Server nicht mehr wettmachen. Schließlich müssen die Dateien ja auch über eine oft langsame mobile Verbindung zum Besucher gelangen, auf die man als Webseitenbetreiber keinen Einfluss hat.
HTML-, CSS- und JavaScript-Ressourcen sind im Prinzip Textdateien, die sowohl vom fachkundigen Menschen als auch vom Browser gelesen werden können. Doch während es dem Browser vollkommen egal ist, wie der hinter der Funktion stehende Code aussieht, brauchen Website-Entwickler Quellcode, der auch vernünftig formatiert ist und im Optimalfall Kommentare enthält, die Entwicklerkollegen eine Hilfe beim Verständnis des Programms sein können.
Genau an dieser Stelle setzen sogenannte Minifizierer an. Sie löschen überflüssige Zeichen aus dem Quelltext, sodass nur noch das an den Browser übertragen wird, was dieser tatsächlich zum Arbeiten braucht. Und viele entsprechende Programme können nicht nur alles entfernen, was dem Browser nicht weiterhilft, sondern den Code sogar analysieren und dergestalt umschreiben, dass das Script noch das gleiche tut, dafür aber wesentlich weniger Code benötigt.
Diese Reduktion kann sich durchaus sehen lassen. So wirbt beispielsweise die Seite [url=https://jscompress.com/]JSCompress[/url] damit, die Größe von JavaScript-Dateien um bis zu 80% reduzieren zu können. Dazu verwendet es unter anderem die Bibliothek UglifyJS, die auch von vielen anderen Lösungen unter der Haube genutzt wird. Ein weitere populäre Minifizierungslösung für JavaScript ist der [url=https://developers.google.com/closure/compiler/]Closure Compiler[/url] von Google, der für seine besonders effizienten Optimierungsresultate bekannt, dafür aber etwas schwieriger in Projekte einzubinden ist.
Zusätzlich zur Optimierung einzelner JavaScript- und CSS-Dateien bieten einige Minifizierer auch an, mehrere dieser Dateien zu kombinieren, um so die Anzahl an Anfragen vom Browser zum Server zu verringern, was auch einen großen Einfluss auf die Geschwindigkeit einer Website haben kann. Das liegt daran, dass jede dieser Anfragen nicht nur die Dateien an sich herunterlädt, sondern auch einiges an Metadaten mitgeschickt wird, um die Kommunikation zwischen Server und Browser überhaupt erst möglich zu machen. Diesen “Overhead” kann man natürlich vermeiden, wenn man alle Ressourcen gleichen Typs zu einem Code-Bündel zusammenfasst.
Die Ladegeschwindigkeit von Websites und ihr Einfluss auf das Suchmaschinenranking
Bereits im Jahr 2010 hat der Suchmaschinengigant Google bekanntgegeben, dass die Geschwindigkeit einer Website einen Einfluss auf die Platzierung in seiner Suchmaschine hat. Dieser Schritt mag damals für einige überraschend gewesen sein, besonders im Hinblick auf die zu der Zeit stark zunehmende Anzahl an Smartphones war er jedoch zeitgemäß.
Wer mit 3G oder gar nur Edge als Verbindung auskommen muss, dem nützt der beste Inhalt nichts, wenn dieser so lange lädt, dass derjenige nach zwei Minuten vergeblichen Ladens entnervt aufgibt. Daher ist es für Suchmaschinen sinnvoll, den Benutzern nicht nur Websites mit guten Inhalten zu liefern, sondern auch diejenigen Seiten zu bevorzugen, die ihre guten Inhalte in annehmbarer Geschwindigkeit an den Mann oder die Frau bringen können.
Spätestens seit den “Speed Update” getauften Änderungen, die Google 2018 seiner Suchmaschine spendiert hat, ist die Geschwindigkeit ein entscheidendes Kriterium für das Ranking einer Website bei Google auch für mobile Websites geworden. Konkret gestaltet sich der Einfluss auf die Platzierung wohl so, dass die Geschwindigkeit ohnehin schon gut optimierter Websites keinen großen Einfluss hat. Eine schlecht optimierte und daher langsame Website wird aber abgestraft und rutscht in den Suchergebnissen weiter nach hinten. Man muss also nicht unbedingt die schnellste Website aller Zeiten haben, sollte hohe Ladezeiten jedoch tunlichst vermeiden, wenn man vorhat, seine Besucher über Google zu gewinnen.
Ladegeschwindigkeit und Usability
Doch nicht nur von Suchmaschinen wird man für eine lahme Website abgestraft. Auch auf das Verhalten der Besucher hat die Geschwindigkeit der Website einen entscheidenden Einfluss. Usability-Experten gehen davon aus, dass für User nach 12 bis 15 Sekunden schon der Geduldsfaden reißt und diese die Website gleich ganz schließen, also das Worst-Case-Szenario für jeden Websitebetreiber eintritt.
Während 12 Sekunden auf Desktop-Computern mit entsprechender Breitbandanbindung noch nach viel klingen mögen, sind sie bei schlechten Mobilfunkverbindungen erschreckend schnell erreicht. Laut Google stellt sich die Situation sogar noch kritischer dar: Rund 53% aller mobilen Websitebesucher, also mehr als die Hälfte der Smartphone- und Tablet-Surfer, verlassen eine Website bereits nach mehr als drei Sekunden Ladezeit!
Selbst wenn man vom Worst-Case-Szenario bei seiner Website noch weit entfernt ist, lässt sich sagen: Je schneller die Seite lädt, desto besser ist der gefühlte Eindruck, den die Website beim User hinterlässt. Laut [url=https://neilpatel.com/blog/speed-is-a-killer/]KISSmetrics bzw. Neil Patel[/url] erwarten 47% aller Besucher, dass eine Website in weniger als zwei Sekunden lädt. Und stolze 79% würden bei einem Online-Shop kein zweites Mal etwas bestellen, wenn sie mit der Performance der Seite unzufrieden sind.
Die Website-Geschwindigkeit messen
Wie bei allen Optimierungen gilt auch bei der Geschwindigkeit von Websites: Man kann nur das sinnvoll optimieren, was man auch gemessen hat. Ohne eine entsprechende Messung der Website-Geschwindigkeit lässt sich nämlich gar nicht sagen, ob es überhaupt sinnvoll ist, Zeit und Energie in die diverse Verbesserungen zu investieren. Falls die eigene Website ohnehin schon eine gute Geschwindigkeit aufweist, sollte man seine Zeit also vielleicht lieber in die Erstellung von gutem Content investieren.
Doch wie kann man die Website-Geschwindigkeit eigentlich messen, ohne sich nur auf seinen subjektiven Eindruck zu verlassen? Dafür gibt es im Internet einige Tools, die einem weiterhelfen.
Google PageSpeed Insights
Wem es bei der Verbesserung seiner Website-Geschwindigkeit vor allem auf das Ranking bei Google ankommt, den dürfte es freuen, dass der Suchmaschinenbetreiber ein eigenes Tool zum Messen der Website-Performance anbietet.
Die [url=https://developers.google.com/speed/pagespeed/insights/]Google PageSpeed Insights[/url] liefern einen Score von 0 bis 100. Ein Score von 0 bis 49 ist miserabel und wird mit roter Signalfarbe quittiert. Doch auch wer einen gelben Score von unter 90 hat, kann und sollte noch einiges an seiner Website verbessern. Ein grüner Wert von 90 bis 100 ist wünschenswert. Wenn eure Seite bereits jetzt schon einen Score von über 90 hat, dann gibt es höchstens noch einzelne kleinere Dinge zu verbessern, falls ihr gerade Zeit dafür erübrigen könnt.
Neben dem reinen Score zeigt das Tool von Google auch an, wie lange die einzelnen Ladeschritte gedauert haben. Das wird auch entsprechend mit Screenshots der Website verdeutlicht, die den Zustand der Website im Verlauf des Ladevorgangs aufzeichnen. Zu den aufgeführten Messwerten gehört beispielsweise die Zeit, bis erste Inhalte erscheinen, bis die Website interaktiv ist und bis alle Inhalte geladen wurden.
Unter den Details des Scores zeigen die PageSpeed-Insights eine Liste von bestandenen oder nicht bestandenen Prüfungskriterien an. Jedes Kriterium wird durch einen kurzen Text erläutert und kann durch einen Klick auf weiterführende Links eingehender studiert werden. Übrigens bietet das Tool neben einem Desktop-Test auch einen Test für mobile Websites an.
Pingdom
Ähnlich wie bei den PageSpeed Insights von Google liefert auch [url=https://tools.pingdom.com]Pingdom[/url] eine ganze Liste an Anregungen, was man an seiner Website noch verbessern kann. Darüber hinaus schlüsselt es den Ladevorgang noch genauer auf und zeigt beispielsweise auch an, wie viel von der Ladezeit jeder Ressource für die Domain-Abfrage oder für das Warten auf die Antwort des Servers angefallen ist.
GTmetrix
Ein weiteres Tool zum Testen der Geschwindigkeit ist [url=https://gtmetrix.com/]GTmetrix[/url]. Es kombiniert die Ergebnisse von PageSpeed und YSlow und zeigt, woran genau es jeweils hapert. Was das Tool von den Alternativen abhebt, ist, dass es auch ein automatisches Monitoring eurer Website-Geschwindigkeit anbietet, wenn ihr euch dort registriert. Dann könnt ihr euch auch Alerts per E-Mail schicken lassen, falls die Geschwindigkeit der Website plötzlich einbrechen sollte.
WordPress-Plugins zur Reduzierung von JavaScript, CSS und HTML
WordPress kann einem zum Glück dank Plugins den größten Teil der Arbeit abnehmen. Es gibt hier nicht nur Plugins, die die Reduzierung von HTML, CSS und JavaScript übernehmen, sondern auch welche, die noch diverse andere Optimierungen an dem CMS vornehmen. Im Folgenden werden kurz zwei empfehlenswerte Plugins näher beleuchtet, die ihr euch unbedingt einmal anschauen solltet, wenn ihr die Geschwindigkeit eurer WordPress-Seite verbessern wollt.
Autoptimize
[url=https://de.wordpress.org/plugins/autoptimize/]Autoptimize[/url] ist ein sehr beliebtes Plugin, das die Reduzierung von HTML, CSS und JavaScript per Knopfdruck ermöglicht. Zusätzlich bietet es die Möglichkeit, Bilder automatisch zu optimieren und diese erst zu laden, wenn sie benötigt werden.
Das Plugin ist kostenlos und kann direkt über die Plugin-Seite des WordPress-Backends installiert werden. Geht nach der Installation zu den Einstellungen des Plugins, um die einzelnen Optimierungen zu aktivieren.
Wichtig: Vergesst nach dem Setzen von Optionen nicht, auf den Speicherbutton ganz am Ende der Einstellungsseite von Optimize zu klicken.
Für JavaScript:
Setzt einen Haken bei “Optimize JavaScript Code”. Danach könnt ihr dann auswählen, was zusätzlich zur reinen Minifizierung noch mit eurem JavaScript passieren soll. Die Option “Aggregate JS Files” sorgt dafür, dass JavaScript-Dateien gebündelt und erst ganz am Ende der Seite geladen werden. Das ist deswegen sinnvoll, weil das Einlesen der JavaScript-Dateien das Rendering der Seite verzögert. Wenn die Dateien erst am Ende geladen werden, wird zuerst der ganze Inhalt geladen und angezeigt, bevor euer JavaScript ausgeführt wird.
Die übrigen JavaScript-Optionen kann man in der Regel so lassen, wie sie sind. Falls ihr auf eurer Seite zusätzliche JavaScript-Bibliotheken benutzt, die nicht minifiziert werden dürfen, könnt ihr sie in das Feld “Exclude Scripts from Autoptimize” eintragen. Standardmäßig ist das bei jQuery der Fall, weil viele andere Plugins darauf angewiesen sind, dass dieses in seiner Originalform vorhanden ist.
Für CSS:
Einen Haken bei “Optimize CSS Code” in den Plugin-Einstellungen setzen, und schon wirkt Autoptimize seine Magie bei euren Stylesheets. Ähnlich wie bei JavaScript gibt es eine Einstellung “Aggregate CSS Files”. Diese führt dazu, dass alle Stylesheets gebündelt im Kopfbereich eurer Seite geladen werden. Da das CSS für die Darstellung der Seite essentiell ist, ist es anders als bei JavaScript fast immer sinnvoll, diese Option zu aktivieren.
Enthält euer Theme mehrere kleine Bilder im CSS, dann ist eventuell die Option “Generate data: URIs for images” für euch interessant. Wenn die Option aktiviert ist, werden Bilder, die im CSS verlinkt sind, in sogenannte Daten-URIs verwandelt und direkt in das CSS geschrieben. Dadurch reduziert sich die Anzahl an Serveranfragen, was der Ladegeschwindigkeit zugute kommen kann.
Seit kurzem hat sich für Seiten mit sehr großen CSS-Dateien eine weitere Optimierung eingebürgert, die auch Autoptimize als Option “Inline and Defer CSS” anbietet. Die Idee dahinter ist, dass nur das CSS bereits zu Anfang der Seite geladen wird, das auch tatsächlich für den am Anfang sichtbaren Content zuständig ist. Aktiviert man diese Option, dann versucht Autoptimize, eure Stylesheets so zu optimieren, dass all das CSS, was für das erste Laden der Seite nicht zwingend erforderlich ist, asynchron nachgeladen wird.
Eine weitere Optimierungsmöglichkeit ist “Inline all CSS”. Wenn man diese Option aktiviert, schreibt Autoptimize den Inhalt der CSS-Dateien direkt in den Kopf der Seite, um noch weniger Serveranfragen zu verursachen. Das ist aber nur dann sinvoll, wenn man eine Seite betreibt, die nur sehr wenig Seitenaufrufe pro Besuch hat, z.B. bei Landing-Pages. Für alle anderen Seiten ist das eher nicht empfehlenswert.
Für HTML:
Zum Optimieren eures HTML-Codes müsst ihr in den Autoptimize-Einstellungen lediglich einen Haken bei “Optimize HTML Code” setzen. Dann werden überflüssige Zeichen wie Zeilenumbrüche und nicht sichtbare Leerzeichen entfernt. Außerdem gibt es hier noch die Option “Keep HTML comments”. Wenn man diese Option auswählt, lässt Autoptimize Kommentare im HTML-Code so stehen wie sie sind. Das kann zum Beispiel sinnvoll sein, wenn man Plugins hat, die Debug-Informationen als Kommentar in den Code schreiben. In den meisten Fällen braucht man die Kommentare jedoch nicht, man kann den Haken hier also getrost weglassen.
Weitere Optimierungen:
Neben Optimierungen für HTML, CSS und JavaScript bietet Autoptimize auch einige darüber hinausgehende Verbesserungen an. Für Bilder gibt es in den Einstellungen beispielsweise einen eigenen Tab. Hier kann man mit einem Haken bei “Lazy-load images” das Plugin dazu anweisen, alle nicht sofort sichtbaren Bilder erst dann zu laden, wenn der User auf der Seite entsprechend weit gescrollt hat. Gerade bei Websites, die viele Bilder im Content haben, ist das sicher sinnvoll.
Zusätzlich kann Autoptimize auch die Bildgröße optimieren, wenn man einen Haken bei “Optimize Images” setzt. Dabei muss man allerdings beachten, dass hierfür der externe Service ShortPixel zum Einsatz kommt. Das bedeutet, dass ihr diesen bei Aktivieren der Option ShortPixel auch in eurer Datenschutzerklärung aufführen müsst.
Weitere Optimierungsmöglichkeiten verbergen sich auf dem Tab “Extra”. Hier kann man unter anderem das Laden von Fonts verändern. Viele Themes laden Fonts direkt von Google-Servern, da die meisten populären Fonts auf mehreren Websites zum Einsatz kommen und man sich so zunutze machen kann, dass diese Fonts eventuell schon im Browsercache vorhanden sind, weil der Besucher vorher auf einer anderen Seite mit dem gleichen Font unterwegs war. Gerade bei weniger beliebten Fonts kann das aber auch langsamer sein, als die Fonts direkt vom eigenen Server zu laden. Deswegen bietet Autoptimize die Option an, das Laden der Google-Fonts zu Optimieren oder gleich ganz abzuschalten. Wenn man dieses Feature ganz abschaltet, muss man jedoch damit rechnen, dass das Theme der Seite plötzlich andere Fonts benutzt.
Eine weitere für viele Websites relevante Option ist “Remove emojis”. WordPress lädt leider automatisch CSS und JavaScript für die Unterstützung der Anzeige von Emojis. Falls man in seinem Content keine Emojis benutzt und auch keinen Kommentarbereich anbietet, kann man hier ruhig einen Haken setzen und noch ein paar Bytes mehr auf jeder Seite einsparen.
Fast Velocity Minify
Genau wie Autoptimize ist [url=https://wordpress.org/plugins/fast-velocity-minify/]Fast Velocity Minify[/url] ein kostenloses Plugin, das man direkt über die Plugin-Seite des WordPress-Backends installieren kann. In den Einstellungen des Plugins lassen sich diverse Optionen aktivieren oder Deaktivieren, um die Optimierungen auf die eigenen Bedürfnisse anzupassen.
Für HTML:
Genau wie bei Autoptimize kann man unter “HTML Options” auswählen, ob HTML-Kommentare entfernt werden sollen. Zusätzlich bietet Fast Velocity Minify jedoch auch die Option “Cleanup Header” an. Wird hier ein Haken gesetzt, dann entfernt das Plugin diverse “optionale” Einträge aus dem HTML-Kopf. Diese Option ist aber manchmal mit Vorsicht zu genießen, denn davon können auch Dinge betroffen sein, die für den Komfort der Nutzer oder das Ranking in Suchmaschinen von Vorteil sein können.
Für CSS:
In den CSS-Optionen des Plugins kann man nicht nur das Minifizieren des CSS-Codes an- oder abschalten, sondern auch Einstellungen zur Reihenfolge der CSS-Dateien vornehmen, was eventuell einen Einfluss darauf haben kann, wie viele CSS-Dateien am Ende tatsächlich ausgeliefert werden. Zwei weitere Optionen erlauben das Einbetten des CSS-Codes direkt im Kopf bzw. am Ende der Seite. Eine Möglichkeit für verzögertes Laden nicht sofort sichtbarer CSS-Regeln hat das Plugin nicht. Dafür bietet es jedoch die Option, pauschal allen CSS-Code zu entfernen, der nur für die Darstellung beim Ausdrucken der Seite gedacht ist. Falls man nicht erwartet, dass die User die Seiten auch ausdrucken, kann ein Haken bei dieser Option sinnvoll sein.
Für JavaScript:
Für eure JavaScript-Dateien bietet Fast Velocity Minify die Möglichkeit, euren Code ausdrücklich nicht zu minifizieren, sondern die einzelnen Dateien nur zu bündeln. Sofern man durch die Minifizierung keine Fehler bekommt, sollte man sie jedoch zulassen, da sie zu einer nicht unerheblichen Verkleinerung des JavaScript-Codes führt. Ähnlich wie bei Autoptimize gibt es auch bei Fast Velocity Minify diverse Möglichkeiten, Einfluss darauf zu nehmen, wann und auf welche Weise JavaScript geladen wird. So lässt sich das verzögerte beziehungsweise asynchrone Laden von JavaScript aktivieren und auch für Spezialfälle wie jQuery oder Einträge auf einer Blacklist wieder deaktivieren. Die Blacklist findet sich übrigens auf dem Tab “Pro”.
Weitere Optionen:
Auch Fast Velocity Minify bietet Optionen zum Optimieren von Google Fonts. Neben dem kompletten Deaktivieren von Google Fonts kann man hier auch einstellen, ob die Fonts zu einer einzigen Anfrage zusammengefasst werden sollen und ob asynchrones Laden gewünscht ist. Auch das automatische Einbetten von Emojis durch WordPress lässt sich bei dem Plugin an- oder abschalten.
Zusätzlich zu den von Autoptimize bekannten Optimierungsmöglichkeiten für Fonts bietet Fast Velocity Minify auch ein paar Einstellungen speziell für Font Awesome an. Font Awesome ist ein Font, der statt Text Icons anzeigt, wodurch weniger Serveranfragen generiert werden, als wenn man die entsprechenden Icons als Bilder einbinden würde. Wer Font Awesome benutzt, kann hier einstellen, ob das dafür nötige CSS zusammengefügt und eingebettet werden soll, oder ob man es lieber asynchron laden möchte.
Fazit
Wie ihr hoffentlich anhand dieses Artikels sehen konntet, ist es gar nicht so schwer, eure Website-Geschwindigkeit durch das Reduzieren der Größe von eurem HTML-, CSS- und JavaScript-Code zu erhöhen. Falls eure WordPress-Website also zu langsam läuft, könnt ihr mit den hier vorgestellten Plugins nicht viel falsch machen. Nicht unerwähnt bleiben soll an dieser Stelle aber auch, dass es noch weitere Maßnahmen zur Optimierung der Geschwindigkeit eurer Website gibt, die hier nicht behandelt wurden. Dazu zählt unter anderem das Caching von Inhalten, die Kompression von Ressourcen oder die Verwendung neuer Standards wie HTTP/2.
Quellen:
https://jscompress.com/
https://cognitiveseo.com/blog/22865/page-speed-seo/
https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
https://www.searchenginejournal.com/google-speed-update-is-rolling-out-now-for-all-users/260293/
https://www.sitepoint.com/website-usability-page-speed-birds-feather/
https://www.nngroup.com/articles/response-times-3-important-limits/
https://neilpatel.com/blog/loading-time/