Langsame Webseiten sind echt nervig. Nicht nur, dass die Menschen immer ungeduldiger werden und die Seite wieder verlassen, bevor sie überhaupt geladen hat.
Auch Google will ab 2021 schnelle Webseiten bevorzugen. Das heißt, dass es auf jeden Fall zum Rankingfaktor wird.
Das war es zwar bis jetzt auch schon. Aber es wird noch krasser.
Aber wie kannst du deine Webseite schneller machen und 100 % bei Google PageSpeed Insights bekommen?
Ganz einfach: Befolge diese Anleitung. Ich selber gehe diese Reihenfolge bei allen meinen Webseiten durch und komme fast immer auf 100 %.
Nutze einen schnellen Hoster
Jedes Mal, wenn User eine Webseite aufruft, greift er auf den Server des Hosting-Anbieters zu. Denn dort liegen alle Daten, die geladen werden müssen.
Bei jedem Besuch wird also eine Anfrage an den Hoster gestellt. Einige Hoster benötigen aber mehr Zeit, um die Daten zu laden (TTFB). Dabei geht viel Ladezeit verloren.
Ich beispielsweise bin bei All-Inkl. Damals habe ich alles versucht, um meine Seite zu optimieren. Irgendwann fand ich heraus, dass es an dem Hoster liegen muss. Eine E-Mail an All-inkl löste das Problem schließlich. Sie haben meine Webseiten auf einen anderen Server umgezogen und waren meine Seiten superschnell.
Leider geht das nicht bei allen Hosting-Anbietern so einfach. manche sind und bleiben langsam. Hier sollte man sich wirklich überlegen, lieber 10 Euro im Jahr mehr zu zahlen und dafür immer eine schnelle Webseite zu haben.
Neben All-inkl gibt es auch weitere schnelle Hosting-Anbieter. Trotzdem kann ich All-inkl nur empfehlen.
Nutze ein schlankes Theme (SEO optimiert)
Schlanke Themes sind immer so optimiert, dass sie schnellstmöglich geladen werden. Es gibt viele sehr schnelle Webseiten, von denen die meisten ein schlankes Theme benutzen. Hier sind ein paar gute und schnell ladende Themes:
- GeneratePress
- GenesisFramework
- Basic (kostenlos)
Langsame Themes haben oft sehr viel Funktionen, von denen man meistens nur die wenigsten braucht. Alle unnötigen Funktionen können die Ladezeit in die Länge ziehen. Bevor man sich für Theme entscheidet, sollte man sich vorher gut überlegen, was das Theme alles können soll.
Eines der schnellsten Themes ist das Basic-Theme. Ich benutze es auf meiner Nischenseite malbuch-für-erwachsene.com. Mit dem PageSpeed-Tool kannst du ganz einfach testen, wie schnell die Seite ladet. Bei meiner Webseite sind ganze 96 von 100 Punkten. Ohne Header Bild komme ich sogar auf 100 Punkte.
Auf meiner Webseite bauenundsanieren.net dagegen benutze ich ein langsam ladendes Theme. Es lädt viele Skripte und kommt trotz Optimierung nur auf 83 %.
Ladezeit über htaccess verbessern
Über die htaccess kannst du die Ladezeit deiner Webseite erheblich verbessern. Dadurch kannst du Textdateien um bis zu 70 % verkleinern. Was man mit htaccess alles machen kann:
- GZip Komprimierung
- Expire headers
- Keep alive Deaktivierung
- ETags entfernen
Die genaue Erklärung zu den 4 genannten Punkten und wie du sie über htaccess optimieren kannst, erfährst du in dieser Anleitung: Ladezeit über htaccess verbessern.
Google Fonts in Webseite einbinden
Heute nutzen viele Seiten immer noch Google Fonts. Das heißt, dass die Schriftarten von Google bezogen werden.
Auch das kann die Ladezeit verschlechtern.
Google Fonts kann man auch direkt in die Webseite einbinden. Das kann man manuell, oder ganz einfach über ein Plugin machen. Das meiner Meinung nach beste Plugin dafür ist dieses hier:
Das OMGF Plugin hat aber noch weitere Vorteile: Hier kann man einstellen, dass die Schriftarten, die beim Aufruf einer Webseite zuerst sichtbar werden, vorgeladen werden. Dadurch wird die Ladezeit ebenfalls optimiert.
Du kannst aber auch einfach ein Theme benutzen, das keine Google Fonts benutzt. Ich benutze auf dieser Seite das Occasio Theme. Es nutzt keine Google Fonts.
jQuery deaktivieren
jQuery war lange Zeit ein Tool für Webentwickler. Allerdings kommen die meisten Seiten ganz ohne jQuery aus. Es kann hilfreich sein, jQuery zu deaktivieren. Und so machst du es:
- Besuche die Webseite remove jquery migrate wordpress.
- Kopiere dort den ersten Code. Dieser sollte so aussehen, wie auf dem Bild unten:
- Gehe in dein Child-Theme und füge den Code in deiner functions.php ganz unten hinzu. Speicher es ab.
- Teste die Geschwindigkeit deiner Webseite.
- Wenn sich nichts ändert, versuche den zweiten Code und teste erneut.
- Passiert wieder nichts, versuche es mit dem Plugin Remove jQuery Migrate.
- Passiert wieder nichts, mache alles rückgängig und lasse diesen Schritt ganz weg.
Entferne font awesome und dashicons
Du kennst sicherlich solche dashicons oder solche font awesome Symbole.
In vielen Fällen sind solche Icons überflüssig. Man kann sie also deaktivieren, wie ich es beispielsweise auf dieser Seite gemacht habe. Der Code dazu wird ebenfalls in deinem Child-Theme in der functions.php ganz unten hinzugefügt. Den Code findest du in dieser Anleitung:
Wie du font awesome und dashicons deaktivieren kannst.
Optimiere deine Bilder
Jedes geschossene Bild kann komprimiert werden. Dabei schrumpfen die Bilder um bis zu 75 %, ohne an Qualität zu verlieren.
Es gibt auch Plugins dafür. Du kannst deine Bilder aber auch über den imagecompressor online verkleinern. Unten siehst du ein Bild, welches ich um 72 % verkleinern konnte.
Tipp: Benenne das Bild gleich richtig, damit es in der Google Suche auch gefunden wird.
JPEG oder PNG?
JPEG-Bilder sind kleiner als PNG-Dateien. Benutze diese also, wenn möglich. Ein weiteres Bildformat ist das neuere WebP-Bildformat. Dadurch werden die Bilder noch kleiner und die Ladezeit noch schneller. Allerdings verlieren die Bilder hier deutlich an Qualität. Ich habe mich daher gegen das WebP-Bildformat entschieden und nutze nur JPEG-Dateien.
Die richtige Bildgröße
Zusätzlich sollte man ein Bild nie größer machen, als notwendig. Wenn dein Theme eine Bildgröße von 700 Pixel zulässt, dann sollten deine Bilder maximal 700 Pixel breit sein und nicht 800.
Bilder verzögert laden
Es gibt heute noch immer sehr viele Themes, die Bilder gleichzeitig laden. Dadurch wird die Seite sehr langsam. Um die Webseite schneller zu machen, kann man die Bilder nacheinander laden.
Dabei werden zuerst die sichtbaren Bilder geladen. Die anderen werden erst beim Scrollen nachgeladen.
Einige Themes bringen diese Funktion bereits mit. Ansonsten kann man dafür ein Lazy Load-Plugin verwenden.
WordPress optimieren mit Autoptimize
Autoptimize ist von allen Plugins mein Lieblings-Plugin, welches die Ladezeit der Seite verbessern kann.
Ich habe schon viele Plugins ausprobiert und finde das am besten.
Gerade Anfänger sollten es benutzen, weil sie damit kaum etwas falsch machen können.
Autoptimize verkleinert den Java-Script-Code, den CSS-Code und den HTML-Code der Webseite. dadurch wird die gesamte Webseite schneller gemacht.
Du kannst das Plugin für WordPress kostenlos herunterladen: Autoptimize.
Lösche unnötige Plugins
Plugins können deine Seite stark ausbremsen. Das trifft natürlich nicht auf alle Plugins zu.
Deshalb hier mein Tipp für dich: lösche alle unnötigen Plugins. Einige Plugins benötigt man tatsächlich nicht. Oft kann man das Plugin ersetzen oder es gegen ein anderes austauschen, welches schlanker programmiert ist.
Fakt ist nur: zu viele Plugins machen deine Seite langsamer und das sollte vermieden werden.
JavaScript asynchron laden
JavaScript-Dateien können ziemlich groß werden und benötigen viel Zeit, um vollständig geladen zu werden. Es kann helfen, diese Dateien erst dann zu laden, wenn andere Inhalte auf der Webseite bereits angezeigt werden. Dadurch kann die Ladezeit erheblich verkürzt werden.
Ich empfehle dafür das Async JavaScript-Plugin von Frank Goossens.
Nutze Critical CSS
Jeder Besucher einer Webseite sieht immer zuerst den sichtbaren Teil der Webseite. Das ist immer der Teil, der gerade auf den Bildschirm passt. Alle weiteren Inhalte werden erst beim Scrollen sichtbar.
Mit Critical CSS kann man einstellen, dass immer nur der Teil geladen wird, der gerade so auf den Bildschirm passt (asynchrones Laden). Dadurch wird immer nur ein kleiner Teil geladen und Webseite schnell wie eine Rakete.
Programmierer sind hier klar im Vorteil. Anfänger dagegen sollten sich vorerst auf ein Plugin verlassen, welches Critical CSS zulässt. Und so geht es:
- Installiere das Plugin Autoptimize.
- Besuche de Critical Path CSS Generator. Füge dort deine Domain ein und klicke auf kritischen Pfad erstellen.
- Kopiere den erstellten oberen Code.
- Gehe zu Autoptimize und aktiviere dort die Einstellung Render-blockierendes CSS entfernen.
- Füge den Code ein und speicher es ab.
Benötigst du Hilfe bei SEO? Mehr dazu findest du auf unserer Startseite: SEO Pforzheim.