Verbessere die Leistung deiner Webseite mit diesen 5 effektiven Methoden zur Optimierung deines Page Speeds.
Falls du den letzten Beitrag von unserer Digitalagentur hier in Bielefeld gelesen hast, weißt du, wie krass sich PageSpeed auf deinen Umsatz auswirken kann.
Wenn nicht, kannst du ihn hier einfach nachlesen: Klick hier!
Vermutlich kribbelt es dir schon in den Fingern, deine Webseiten-Performance so schnell wie möglich zu verbessern. Mit dem Gedanken im Hinterkopf dachten wir, wir teilen mal fünf der gängigsten Wege, um deine PageSpeed zu verbessern. (Naja, 5+1 sogar, aber dazu kommen wir später..)
Legen wir also los!
1. Optimiere deine Bilder
Das wahrscheinlich häufigste „PageSpeed Problem", mit dem unsere Agentur zu kämpfen hat, sind große Bilddateien. Das ist auch das Erste, was wir uns anschauen, wenn Kunden sich über langsame Ladezeiten beschweren. Zum Glück ist das ein Problem, welches leicht zu beheben ist. Hier sind 5 Dinge, die dir dabei helfen können:
- Stelle sicher, dass deine Bilder die korrekte Größe haben. Hier ist ein sogenanntes „Image Size Cheat Sheet“, welches du benutzen kannst, damit du auf dem richtigen Weg bist.
- Wenn möglich, nutze next-gen Bilder Formate wie WebP. (WebP ist viel kleiner als andere Daten-Typen) Wenn WebP keine Möglichkeit ist, dann nutze lieber PNGs für Grafiken und JPGs für Fotos. Benutze keine GIFs, wenn du die nicht brauchst.
- Komprimiere deine Bilder, um die Dateigröße zu minimieren. Es gibt kostenlose Tools dafür wie tinypng oder mach es einfach direkt in der Bildbearbeitungs-Software, die dein Designer benutzt.
- Nutze „Lazy Loading“, damit Bilder geladen werden, während deine Nutzer die Seite runterscrollen.
- Nutze Image Sprites, um Bilder in einer Datei zu kombinieren. Das reduziert auch gleichzeitig die HTTP-Anfragen, die deine Webseite erstellt.. wo wir auch schon beim nächsten Punkt sind:
2. Reduziere die Anzahl an HTTP-Anfragen, die deine Webseite erstellt
Wenn du eine Webseite besuchst, dann sendet dein Browser HTTP-Anfragen an den Server der Webseite, um diese nach Informationen zu fragen.
Hier ist ein einfacher Weg, um darüber nachzudenken:
Eine HTTP-Anfrage klopft so gesehen an die Tür deines Servers und fragt nach den Informationen, damit die Seite korrekt angezeigt wird. Also Dinge wie Text, Bilder, Videos, Plug-Ins, JavaScript-Dateien etc.
Das Problem ist, dass dein Browser die Sachen nicht anzeigen kann, bis der Server alle Infos abgegeben hat. Falls etwas fehlt, muss der Browser noch einmal an die Tür klopfen und nachfragen. Das beeinflusst natürlich die Ladezeit für deine Webseite, was dann dazu führt, dass die Nutzer länger auf diese Infos warten müssen. Klingt nicht so geil, oder?
Du kannst also deine Webseite schneller machen, wenn du:
a) Die Anzahl der Anfragen deines Browsers reduzierst
b) Deinem Browser „schneller anklopfen" lässt
Wenn du sehen möchtest, wie viele „Klopfer“ dein Browser benötigt, kannst du das direkt in Chrome machen oder mit einem Tool wie GT Metrix.
In Chrome brauchst du nur mit Rechtsklick auf eine Seite gehen und dann auf „Inspect“ drücken. Das öffnet Chromes Toolkit für Entwickler. Da klickst du dann auf den Network-Tab. Dieser lädt die Seite einmal neu und zeigt dann an, wie viele Infos dein Browser benötigt, wiedergibt, wonach gefragt wird und wie lange die Antwortzeit beträgt.
Nur zur Info: Es gibt keine feste Regel, wie viele Anfragen deine Seite haben muss. Aber als guter Maßstab gilt: Die durchschnittliche Webseite hat ungefähr 70. Als Faustregel gilt: Versuche einfach unter deinen eigenen Wert zu kommen.
Sobald du weißt, was benötigt wird, kannst du daran arbeiten, deine PageSpeed zu verbessern. Wenn du dir nicht sicher bist, wie du das allein hinkriegst, dann ist es vielleicht besser, einen Entwickler ranzulassen, um deine HTTP-Anfragen zu verringern.
Du darfst natürlich gerne an unsere Tür klopfen, um diesen Service von uns zu beanspruchen. 😉
3. Minimiere dein JavaScript und HTML
JavaScript- oder HTML- Dateien zu minimieren ist ein guter Weg, um das Fett wegzutrimmen und die Page Speed zu verringern.
Fang an, indem du unnötige Zeilenumbrüche, Leerzeichen oder andere unwichtige Elemente im Code weglässt, die nichts mit der Benutzererfahrung zu tun haben.
Hier ist ein Beispiel:
@media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_4_4, .et_pb_gutters3.et_pb_row .et_pb_column_4_4 {
width: 100%;
}
@media (min-width: 981px)
.et_pb_gutters3 .et_pb_column, .et_pb_gutters3.et_pb_row .et_pb_column {
margin-right: 5.5%;
}
So sieht es dann nach der Minimierung aus:
@media (min-width:981px) .et_pb_gutters3 .et_pb_column_4_4,.et_pb_gutters3.et_pb_row .et_pb_column_4_4{width:100%}@media (min-width:981px) .et_pb_gutters3 .et_pb_column,.et_pb_gutters3.et_pb_row .et_pb_column{margin-right:5.5%}
Während die Originale Version einfacher für uns Menschen zu lesen ist, ist die minimierte Version schneller für einen Computer.
Dieser sauberere, minimierte Code hilft dabei, deine Webseite schneller zu machen.
Nun, um so einen sauberen Code zu bekommen, könntest du eine Armee von Entwicklern einstellen, die dann manuell durch das ganze CSS deiner Seite gehen und diesen aufräumen.
Oder.. du kannst eins der vielen Online-Tools benutzen, die genau für diesen Job designet wurden.
Das spart Zeit, nicht wahr? ⏰