Mehr Performance für eure Website: 5 super einfache Tipps

Mehr Performance für eure Website: 5 super einfache TippsPerformance-Optimierung ist und bleibt mein Steckenpferd.

Egal ob es um WordPress, ein statisches CMS oder eine einfache HTML-Seite geht, alles kann entsprechend optimiert werden, um weniger Ressourcen zu verschwenden und bessere Ladezeiten zu erreichen.

Ich habe mir fünf Tipps für euch herausgesucht, die super einfach umzusetzen sind und händisch durchgeführt werden können.

5 super einfache Performance-Tipps

Viele solcher Optimierungen sind kompliziert umzusetzen oder haben mit dem eigenen Server zu tun. Die PHP-Version beispielsweise, das verwendete Theme innerhalb von WordPress, Plugins und vieles mehr.

Das hatte Peer euch vor kurzem schon gezeigt, als es darum ging herauszufinden, wie wichtig die Ladezeit-Optimierung heutzutage wirklich ist.

Bei mir geht es nun deutlich minimaler zur Sache. Die folgenden Performance-Tipps erfordern also etwas Grundverständnis, mehr ist aber nicht notwendig.

Kleine Stellschrauben, die im Detail aber für eine bessere Performance sorgen.

1. CSS-Datei optimieren

Wer einmal damit anfängt, hat jede Menge Freude an dieser Art der Optimierung. Gemeint ist, dass ihr eure Style.css händisch aufräumt. Entfernt alles, was nicht gebraucht wird. Versucht die Hex-Werte der Farben abzukürzen, indem ihr für Schwarz (#000000) beispielsweise die Kurzform #000 verwendet.

Macht euch immer wieder bewusst, dass jedes Zeichen was ihr hier einspart, weniger Umwege beim Rendern eurer Website bedeutet. Denn der Browser muss eure Style.css erst einmal interpretieren und je kleiner diese ist, desto schneller kann er dies.

Benutzt außerdem die Kurzschreibweisen der CSS-Befehle und gewöhnt euch diese an. Also nicht »Font-Size«, »Font-Weight« und Co einzeln auflisten und angeben, sondern immer die Kurzschreibweise »Font« verwenden, um Platz zu sparen. Folgende Kurzschreibweisen sind besonders wichtig.

font: 400 14px/24px Sans-Serif;

background: #000 url(bild.jpg) top center / 50px auto no-repeat fixed;

margin: 4px 2px; (Reihenfolge: Oben, rechts, unten, links. In diesem Fall nur zwei, weil die anderen kopiert werden.)

border: 1px solid #000;

Am Ende gibt es dann noch einen Tool-Tipp. CSSO kombiniert automatisch doppelte Einträge und minimiert somit eure CSS-Datei um ein vielfaches.

Wer also für verschiedene Klassen die gleichen Werte nutzt, kann mit dem Tool schnell und effektiv aufräumen, indem es diese zusammenfasst und neu kombiniert, um die kleinstmögliche CSS-Größe zu erreichen. Ich nutze das Tool seit vielen Jahren und kann es wirklich nur empfehlen.

2. Google Font Subset

Wer einen Font nur für bestimmte Schriftzüge nutzt oder nur in Großbuchstaben verwendet, ist gut damit beraten, alle anderen Zeichen aus dem Font herauszutrennen. Das verringert die Dateigröße enorm, erhöht die Performance und ist somit entsprechend empfehlenswert. Font Subset nennt sich dies, also ein Teil des Fonts in einem eigenen Satz aufzubereiten und zu verwenden.

Wusstet ihr, dass Google dies schon von Beginn an mitliefert? Dazu wird einfach ein Parameter an die URL angehängt, mitsamt den Zeichen, die ihr für euer Subset benötigt. In der URL wird die Schriftart übrigens mit + statt Leerzeichen angegeben, wenn dieses vorhanden ist. Dann die gewünschten Breiten eintragen (300,400,700…) und am Ende noch die Zeichen, die im Subset enthalten sein sollen.

https://fonts.googleapis.com/css?family=Droid+Serif:400,700&text=ABCDEFG...

Super einfach und hocheffektiv, da Fonts zum Teil Unmengen an Sonderzeichen besitzen oder Symbole mitbringen, die kein Mensch wirklich benötigt. Besonders effektiv ist dies natürlich, wenn ihr tatsächlich nur bestimmte Buchstaben braucht (bspw. wenn eure Überschriften alle Großbuchstaben verwenden oder das Logo nur aus zehn Buchstaben besteht).

Die Fonts lassen sich per URL direkt einbinden (Datenschutz beachten!) oder ihr ladet sie herunter, indem ihr die generierten URL’s im Browser aufruft. Es ist die wohl einfachste Art, einen optimierten Font zu erhalten. Wer mehr will, nutzt den Webfont Generator, der kann noch etwas mehr.

3. Logo als Base64 integrieren

Es kann sein, dass ein Logo als Base64 schneller geladen wird, als ein separates Bild. Zwar lädt dank HTTP/2 (sofern euer Hoster das unterstützt) sowieso alles nebeneinander, es kommt also nicht mehr zur altbekannten Blockierung, bis die Grafik geladen wurde, doch dennoch ist Base64 in vielen Fällen schneller und umgeht den zusätzlichen Aufruf.

Der Grund? Base64 wird direkt in den Code integriert. Das Format stammt noch aus alten E-Mail Zeiten, wo alles überall übertragbar sein musste. Statt dem Bild, erfolgt die Einbindung dann also über eine ASCII Zeichenfolge. Der Browser interpretiert daher den Code direkt und muss das Bild nicht zusätzlich von anderer Stelle aus laden, da es bereits im Code eurer Website hinterlegt ist.

Wichtig: Optimiert euer Logo bestmöglich, zum Beispiel mit TinyPNG und erzeugt erst dann den Base64 Code. So bleibt die Dateigröße so klein wie möglich. Umwandeln könnt ihr es mit einem Online-Tool. Ich nutze dafür gerne mal Base64-Image. Den Code (data:image/…) fügt ihr dort ein, wo sonst der Link zur Bilddatei gesetzt wird (<img src=data:image/…) also alles recht einfach.

Normalerweise ist der Base64-Code am Ende immer etwas größer als die Bilddatei. Deshalb eignet es sich auch nicht pauschal für alle Bilder, sondern wirklich nur für kleine Grafiken, Logos oder Icons. So ist keine zusätzliche Anfrage mehr nötig, was in vielen Fällen zu besseren Ladezeiten führt. Probiert es ruhig mal aus.

4. Weniger Dynamiken einsetzen

Ein Tipp, der mir sehr am Herzen liegt: Setzt weniger auf Dynamik und mehr auf Statik. Gerade bei WordPress neigen Nutzer dazu, mit Widgets allerlei dynamische Inhalte zu generieren. Weil es einfach gut aussieht, praktisch ist, es schlichtweg geht oder ähnliches. Verzichtet auf solche Spielereien oder seid euch zumindest darüber im Klaren, dass Dynamiken immer auch Serverlast verursachen.

Wer Top-Artikel anzeigt, muss diese auch regelmäßig aus der Datenbank auslesen, Caching hin oder her. Wer Abstimmungsfunktionen bereithält, muss auch daran denken, dass jede Stimme wiederum in die Datenbank eingetragen wird. Das ist im kleinen Maßstab kein Problem, macht aber gerade bei eher schwachen Hosting-Paketen oft den Unterschied.

Ihr müsst am Ende nicht vollkommen auf dynamische Inhalte verzichten, ihr solltet nur verstehen, dass solche Inhalte immer Leistung fressen. Bedenkt dies und verzichtet vielleicht auf die ein oder andere Funktion, die zwar toll aussieht, aber eben einfach unnötig ist, wenn ihr ehrlich seid. Denn was bei zehn Besuchern am Tag noch vollkommen egal ist, wird immer dann zum Performance-Problem, wenn plötzlich 1.000 Besucher auf einmal kommen.

5. HTTP/2 verändert die Optimierung

Wir alle kennen noch die Empfehlungen von früher, mittels Plugins die verschiedenen CSS-Dateien eines Blogs zu kombinieren. Aus drei verschiedenen CSS-Dateien, wird dann zum Beispiel eine einzige große Datei. Diese lädt einmalig und damit schneller als viele kleine, die weitere Ladevorgänge blockieren würden. Oder auch die sogenannten CSS Image Sprites, wo beispielsweise alle Icons in einem einzigen Bild kombiniert werden und dann via CSS-Befehl einzeln angezeigt werden können. Die Logik: Ein Bild lädt schneller als viele kleine Bilder.

Das war alles mal aktuell und richtig, ist mit HTTP/2 aber überflüssig. Mit HTTP/2 ist das parallele Laden von Inhalten kein Problem mehr und führt auch zu keinerlei Blockierung. Bedeutet: viele kleine Dateien sind plötzlich wieder effizienter als eine große, wie es bei HTTP/1.1 noch der Fall war.

Warum das so ist und wie es funktioniert, verdeutlicht der Test vom CDN-Anbieter Akamai. Während bei HTTP/1.1. alles nacheinander geladen wird, sich also gegenseitig blockiert, findet bei HTTP/2 ein gleichzeitiger Download der Inhalte statt. Das führt allgemein dazu, dass die Tipps von früher, möglichst alles zu kombinieren, nicht mehr gültig sind. Der größte Vorteil von HTTP/2 ist, dass genau das keine Rolle mehr spielt.

Noch ist HTTP/2 allerdings nicht bei jedem Hoster angekommen. Das ist zwar etwas peinlich, weil der neue Standard nun schon viele Jahre alt ist, aber es ist wie es ist. Achtet also darauf, bevor ihr entsprechende Tipps umsetzt. So oder so ist das aufwendige kombinieren von Scripten und Styles nicht mehr notwendig und die Plugins, die ebenfalls entsprechend Leistung fressen, können getrost deaktiviert werden.

Jeder kann etwas für die Performance tun

Am Ende lautet meine Message an euch: Jeder kann etwas tun! Also fangt an. Ladezeiten steigen schnell und Kleinigkeiten können oft den Unterschied machen. Eine schlanke CSS-Datei mag bei großen Seiten ein geringer Faktor sein, doch diese klein und sauber zu halten, sorgt für eine schnellere und bessere Darstellung im Browser.

Es geht dabei auch darum, einfache Grundsätze zu verinnerlichen. Kurzschreibweisen zu verwenden oder die dreistelligen Zahlenwerte, statt die langen. Dynamische Inhalte sind toll, aber sind sie wirklich notwendig? Bringen sie euren Nutzern tatsächlich einen Mehrwert oder sind sie am Ende doch nur eine Spielerei?

Performance-Optimierung verlangt immer ein Hinterfragen vorhandener Inhalte. Was wird wirklich benötigt, was macht die Website besser und was ist vollkommen fehl am Platz? Hinterfragt die technischen Aspekte eurer Website und verbessert so eure Ladezeiten. Im Grunde ist die Optimierung dann ganz einfach.

3 Gedanken zu „Mehr Performance für eure Website: 5 super einfache Tipps“

  1. Hi David,

    ich finde gut, dass du im letzten teil nochmal erwähnst, dass hinter allen Optimierungen auch ein Hintergrund stehen muss. Ich kenne viel zu viele Webseiten Betreiber, die sich anstatt auf das Wesentliche zu konzentrieren in sinnlosen PageSpeed Optimierungen verlieren.

    Antworten
    • Genau mein mein Reden. 100 Punkte bringen dir gar nichts, wenn du nicht nachdenkst. Es gibt gewisse Dinge, die Pagespeed empfiehlt, die beispielsweise manchmal bewusst ignoriert werden sollten oder im Einzelfall einfach richtig blöd sind. Pagespeed war und ist gut, um die Leute zum optimieren zu bringen. Es ist aber schlecht, weil jetzt alle nach Googles Regeln optimieren, ohne mal nachzudenken, ob das überhaupt Sinn ergibt oder ein anderer Ansatz für den konkreten Fall nicht cleverer wäre.

      Antworten

Schreibe einen Kommentar