Home Tutorials Webentwicklung Von 0 auf 100 – HP-Speed wie ein Profi

Von 0 auf 100 – HP-Speed wie ein Profi

0
Titel HP Speed
  • 7Minuten

Nicht nur als Spieleentwickler kommt der Tag, an dem man eine eigene HP erstellen will – oder muss. CMS’ gibt es wie Sand am Meer. Rund ein Drittel der Webseiten werden mittlerweile mit WordPress gemacht, aber man kann natürlich auch selbst alles in HTML, JS, CSS und PHP schreiben. Ist die Webseite fertig, geht es an die Optimierungen.

Neben den Inhalten und einem modernen Layout kommt es auf drei Punkte besonders an.

  1. Geschwindigkeit
  2. Kompatibilität
  3. Suchmaschinenoptimierung

Kennern ist klar, dass die drei Punkte recht eng miteinander zusammen hängen. Eine sehr langsame Seite hat bei Suchmaschinen keinen sehr guten Rang, sofern die Inhalte eine starke Konkurrenz haben. Gleiches gilt für Kompatibilität, etwa zu Smartphones.

Nachfolgend möchte ich bewährte Webseiten vorstellen, welche bei der Optimierung helfen. Viele der nachfolgenden Tipps zielen auf WordPress ab, da dies mittlerweile das mit Abstand meist genutzte CMS ist. Einige der Tipps sind aber allgemein genug, um sie auf andere Wege anzuwenden.

Das Kernproblem der Optimierung

Im Prinzip lassen sich Webseiten sehr einfach optimieren. Wenn man sie von Hand macht, die Inhalte optimiert und ein paar Kleinigkeiten beachtet, hat man eine sehr optimierte, suchmaschinenfreundliche Webseite. Das Problem ist, dass solche Seiten bei Besuchern nur selten ein „Wow!” hervorrufen werden. Baut man aber viele Bilder, Animationen oder Videos ein, werden die Ladezeiten sehr hoch und die Tests strafen die Seiten dafür ab.

Arbeitet man mit WordPress oder Joomla, kommen weitere Probleme hinzu. Neue Inhalte (etwa Bilder, die von einer Redaktion hochgeladen werden) werden nicht mehr so optimiert, PlugIns kommen sich in die Quere und im schlimmsten Fall hat man die Balance zwischen „Wow-Faktor” und Geschwindigkeit geschafft, die Seite funktioniert aber nur noch in Google Chrome richtig. Schaltet man die Optimierungen aus (oder nur eine Option), ist die Seite kompatibel, aber so langsam wie ein Gepard in der Eiswüste. Kurz und gut: Man muss bei manchen Seiten ziemlich viel testen, bis man den optimalen Kompromiss gefunden hat.

Noch schlimmer ist es, wenn man selbst (und die Seitenbesucher) mit dem Kompromiss zufrieden ist, die Tests aber schlechte Werte anzeigen, weil irgendeine Form der Optimierung (wie CDN) nicht genutzt wurde. Ab dann beginnt man, nur noch für Maschinen zu optimieren und an diesem Punkt sollte man sein Handeln hinterfragen.

PageSpeed Insights

GoogleSpeedGoogle ist als Suchmaschine das Maß aller Dinge. Kein Wunder also, dass man die Google eigene Geschwindigkeitsmessung besonders wichtig nehmen sollte. PageSpeed Insights prüft die Webseite und gibt diverse Werte für Mobile und Desktop aus.

Die Informationen helfen dabei, sich zu orientieren, die Google-Tipps hingegen sind für Anfänger aber eher minder hilfreich. Der Klassiker ist „Nicht verwendete CSS entfernen”. Möchte man weitere Informationen erhalten, sagt Google,dass es für WordPress PlugIns gibt, die dabei helfen können. Vielen Dank!

Dennoch sind diese Messergebnisse wichtig und man sollte sie immer im Auge behalten, also auch durchführen, wenn man nichts optimiert hat. Durch neue PlugIns oder Updates können Probleme entstehen und sich die Messwerte verschlechtern, auch wenn man es selbst nicht bemerkt. Letzteres kann damit zusammen hängen, dass man als Admin einer Seite oft außerhalb vom Cache operiert. Deshalb muss man die Seite immer wieder als Gast mit verschiedenen Browsern und mobilen Geräten testen. Ein zweiter Umstand sind Schwellenwerte bei Messungen. 2,4 Sekunden kann als gut, 2,5 Sekunden als schlecht bewertet werden. Die 0,1 Sekunden merkt man als Mensch nicht, aber das Testergebnis wird wesentlich schlechter, worunter der Google-Rang leidet.

Wichtig zu wissen ist, dass PageSpeed Insight nach den tatsächlichen Ladezeiten geht und nicht so sehr nach dem Ausschöpfen der Optimierungsmöglichkeiten. So kann es sein, dass eine Seite bei Google sehr gut und bei anderen Tests sehr schlecht bewertet wird. Oder umgekehrt.

Tipp: Manchmal kommt es vor, dass der Test eine Fehlermeldung ausspuckt, die besagt, dass die Seite nicht funktioniert. Dies kann passieren, wenn der Cache nicht gelöscht wurde, der Cache noch nicht aufgebaut ist oder es tatsächlich einen massiven Fehler gibt. Ist der Cache gelöscht, reicht es, ein paar Sekunden zu warten um den Test zu wiederholen. Kommt der Fehler erneut, hast Du tatsächlich ein Problem.

GTmetrix

Neben dem Google-Test ist GTmetrix für Webentwickler auf der ganzen Welt ein wichtiges Tool. Es macht nicht nur Angaben über Geschwindigkeit sondern gibt auch Informationen darüber, was wie optimiert werden kann. Für GTmetrix muss man sich aber etwas Zeit nehmen, will man nicht nur ein paar Zahlen erhalten, um damit anzugeben.

Die Bewertung unterteilt sich in PageSpeed Score und YSlow Score. Auf den ersten Blick sieht man, wo man noch Hand anlegen kann. Außerdem gibt GTmetrix zu jedem Punkt noch weitere Informationen und Fachartikel. So erfährt man bspw. auch, wie man die .htaccess optimieren kann.

Tipp: Wenn es um gzip, Browser-Cache und andere Optimierungen geht, sollte man beim jeweiligen Webhoster nachschauen, was er empfiehlt und diese Codezeilen als erstes probieren. Da kann man sich zumindest ziemlich sicher sein, dass diese Zeilen auf die Servereinstellungen abgestimmt sind.

Die Waterfall Chart sind ebenfalls hilfreich, wenn es darum geht, langen Ladezeiten auf die Spur zu kommen. Oft hängen diese nicht mit großen Dateien sondern mit fehlenden Dateien zusammen. Ein häufig auftretender Fehler liegt am CDN, wenn im Netzwerk nach Dateien gesucht wird, die es nicht gibt. Schaltet man die Optimierung aus, wird dies von GTmetrix ebenso bestraft. Auch hier gilt es, den für sich besten Kompromiss zu finden.

Pergamon Test

Die deutschsprachige Seite des Website Checks ist ein zweischneidiges Schwert. Einerseits bietet es wichtige Informationen, die über Google und GTmetrix hinaus gehen, auf der anderen Seite sollte man nicht jede Kritik der Seite zu ernst nehmen.

Pergamon versucht nicht nur die Geschwindigkeit sondern auch andere Parameter zu prüfen. Einen großen Wert legt es hierbei auf Tags und Seitenstruktur. Dabei kann es in der Ausgabe zu Ungereimtheiten kommen. Beispielsweise, warum inline CSS als negativer Punkt unter Meta-Elemente aufgelistet wird. Außerdem ist der Checker von 2016 und die Bewertungskriterien nicht mehr ganz zeitgemäß.

Dennoch sollte man den Test nicht verschmähen. Gerade bei den Metas liefert es wichtige Hinweise, die nicht schaden können.

Tipp 1: Wer mit WordPress arbeitet, sollte auf jeden Fall das Template als Child abspeichern. So kann man „ungestraft” Änderungen vornehmen.

Tipp 2: Für das Expire-Meta fügt man folgende Zeilen im Header ein:

Somit hat man immer das Datum von nächster Woche dort stehen.

Tipp 3: Pergamon nervt wegen dem Robot-Tag, selbst wenn man ihn drin stehen hat. Die Zeile muss wie folgt aussehen:

Wichtig: Zwischen „index,” und „follow” darf kein Leerzeichen stehen, sonst straft einen Pergamon ab.

Tipp 4: Icons. Um alle Incons zu generieren, nutze ich den Favicon-Generator. Er generiert aus einem Bild alle wichtigen Icons, gibt sie als ZIP zurück und liefert gleich den Code zum einbauen. Einfacher geht es also nicht. Als Bild sollte man eine 512×512 große PNG liefern. Mit Pergamon kann man anschließend schnell testen, ob das Einbinden gelungen ist. Bei Problemen sollte man prüfen, ob die Pfade der Icons passen.

Die Kritik zu Seitenstruktur und Texte sollte man nur bedingt ernst nehmen. Bei modernen Aufbauten hat Pergamon ein Problem damit, überhaupt Text zu erkennen. Eine Suchmaschine sollte damit weniger Probleme haben.

Website Grader

Das ist ein Test für alle, die es schnell und unkompliziert mögen. Der Test unterteilt sich in Geschwindigkeit, Mobilität, SEO und Sicherheit, wobei alle Bereiche nur grob angerissen werden. Anders gesagt: Wenn man ruhig schlafen will, benutzt man nur diesen Test. Eine Wertung >80 hat man eigentlich immer und wenn nicht, sollte man sich ernsthaft Gedanken machen.

Ein Problem, welches immer wieder auftreten kann, hängt mit der Sitemap zusammen. Der Test findet sie nicht immer (ebenfalls wie Pergamon, da ist es aber reproduzierbar). Bei Problemen verweist die Seite zwar auf Fachartikel, diese sind aber eher der Marke „schauen Sie das mal an und machen sie was”. Also in etwa so hilfreich wie ein finnisches Wörterbuch in Südafrika.

Als grobe Orientierung ist die Seite aber allemal zu gebrauchen.

Nibbler

Der Härtetest ist auf jeden Fall Nibbler. Es testet Technik, Geschwindigkeit, Seiteninhalt und viele weitere Parameter um am Ende eine Zahl zwischen 1 und 10 auszuspucken. Popularitätswerte, soziale Medien und Aktualität der Seite spielen beim Test ebenfalls eine Rolle. Die Werte sind aber mit Vorsicht zu genießen.

Bei Bytegame.de erkennt er bspw. die Facebook und Twitter-Seite nicht, auch wenn sie mehrfach auf der HP verlinkt wird. Die 404 Seite findet er, auf anderen getesteten Seiten aber nicht, obwohl sie nachweislich eine besitzen. Nibbler ist aber ein Test, den man langfristig sehen sollte. Man kann immer wieder die Seite optimieren und vor allem bewerben. Nach Wochen und Monaten kann anschließend die Popularität geprüft werden. Wer auf den Test verzichten will, kann auch Google selbst als Maß für Popularität nehmen.

Gibt man bei Google: „seitenname.de” -site:”seitenname.de” ein, zeigt Google alle Seiten an, welche auf die eigene Seite verlinken. Ausgenommen die eigene Seite, natürlich. Diese Zahl ist mindestens so aussagekräftig wie der Nibbler-Test.

W3-Markup Validation Service

Sauberer Code schaden nie und dafür ist der Test von W3C optimal. Benutzt man aber ein fremdes Template und hat davon nicht viel Ahnung, ist der Test nicht gerade hilfreich. Und selbst wenn, muss man wissen, dass der Test sehr kleinlich ist. Es prüft nach dem aktuellen Standard was bedeutet, dass „veralteter” Code als Fehler angesehen wird, obwohl er natürlich in jedem Browser funktioniert. Grobe Fehler sollte man aber dennoch beheben, da es sein kann, dass die Seite in bestimmten Browsern nicht richtig funktioniert.

WordPress Optimierungen

Für WordPress gibt es unzählige PlugIns zur Optimierung. Wenn man eine Lösung für alles haben will, kostet sie nicht selten viel Geld. Man kann aber auch kostenlos einiges heraus holen. Folgende vier PlugIns kann ich empfehlen. Alle haben ihre Stärken und Schwächen, arbeiten aber meistens sehr vernünftig zusammen, auch mit „anspruchsvollen” PlugIns wie Elementor.

Die PlugIns habe ich nicht verlinkt. In WordPress sucht man i. d. R. über die interne PlugIn-Verwaltung. Also einfach die Namen kopieren und in WP in die PlugIn Suche einfügen. 😉

WP-Optimize

Es beschleunigt die Seite nur indirekt, räumt aber mit dem Sauhaufen auf, was zum Beispiel die Datenbank verkleinert. Etwa, wenn man hunderte von Revisionen gespeichert hat. Von den Cache-Optionen sollte man absehen, sofern die anderen erwähnten PlugIns zum Einsatz kommen. Die verrichten ihre Aufgabe i. d. R. wesentlich besser.

Autoptimize

Bringt schon einiges, vor allem wenn es um HTML, JS und CSS Optimierungen geht. Arbeitet auch sehr gut mit anderen PlugIns zusammen. Ich nutze es vor allem im Zusammenspiel mit dem nächsten PlugIn.

WP Fastest Cache

In Zusammenarbeit mit Autoptimize ist es eine Macht, selbst die kostenlose Version. Ob sich die 49 Dollar Aufpreis lohnen, hängt von den Messwerten ab, die man mit der Gratis-Version erreicht. Einige Prozent kann man schon heraus holen, außerdem bekommt man dazu noch eine ganz gute Bildoptimierung und die Möglichkeit CDN zu nutzen (mit allen oben beschriebenen Vor- und Nachteilen).

In Abstimmung mit Autoptimize muss man prüfen, ob es Probleme mit der Kompatibilität gibt. Probleme traten bei mir vor allem mit Elementor auf. Hier ist es wichtig, den oft zitierten Kompromiss zu finden. Nach jeder neuen Einstellung muss der Cache komplett geleert werden. Anschließend prüft man mit allen Browsern und PageSpeed. 

Tipp: Auf Seiten mit Interaktion, etwa eine Quiz, sollte man prüfen, ob mit Cache alles funktioniert. Wenn nicht, kann bei WP Fastest Cache die Seite als Ausnahme hinzufügen werden. Solche Seiten werden nicht gecachet. Das erhöht zwar die Ladezeit, dafür funktioniert es.

Adaptive Images for WordPress

Das ist eher eine spezielle Sache. Das Ausgangsproblem ist folgendes: Je nach Endgerät hat der User eine andere Auflösung als die Webseite bzw. worauf die Webseite optimiert wurde. Oft ist sie kleiner und somit die Bilder für das Endgerät zu groß. Das wird zwar vom Browser angepasst, aber die Daten müssen dennoch heruntergeladen werden.

Hier kommt Adaptive Images ins Spiel. Der Admin gibt verschiedene Auflösungen vor, für welche die Bilder optimiert werden sollen. Bytegame verwendet derzeit: 1500, 1382, 1220, 1200, 1024, 992, 960, 768, 576, 480, 414, 411, 375, 360 und 320.

Kommt ein Endgerät mit einer der Auflösungen, werden die Bilder auf der jeweiligen Seite serverseitig gescannt und ggf. angepasst. So entsteht mit der Zeit ein Cache mit den verschiedenen Auflösungen, was vor allem den Datentransfer entlastet. Erfolge stellen sich hier also eher mittelfristig ein. Je nach Server kann es am Anfang sogar etwas langsamer laufen, bis alle Kombinationen zwischen Bild(er) und Auflösungen durch sind.

Autor

Abonnieren
Benachrichtige mich bei

0 Comments
Inline Feedbacks
Alle Kommentare anzeigen
wpDiscuz
0
0
Ich würde mich über Ihre Meinung freuen, bitte kommentiere.x
Die mobile Version verlassen