Website Performance Optimierung

Mehr Performance = mehr Umsatz!

Langsame Websites und Online-Shops sind ätzend und daher Konversionsbarrieren. Mit schnellen Websites machst du deine Kunden und Suchmaschinen glücklich:-)

  • Bessere SEO: Schnelle Websites erzielen höhere Rankings.
  • Höhere Usability: Geringe Absprungraten & Ausstiege - auch mobile.
  • Mehr Bestellungen: Besucher werden nicht an der Conversion gehindert.
  • Bessere Rankings: Schon seit 2009 belohnen Suchmaschinen wie Google schnelle Websites.
  • Höhere User Experience (UX): Schnelle Websites machen deinen Kunden Spaß. Insbesondere Mobile!
  • Mehr Conversions: Schnellere Online-Shops erzielen signifikant mehr Conversions.

Zünde jetzt den Turbo und verschaffe dir einen Geschwindigkeitsvorsprung!

Was bringt eine bessere Performance?

Höhe Geschwindigkeit kurze Ladezeiten

Bessere Findbarkeit & SEO Mehr & bessere Rankings

Mehr Conversions geringere Absprungraten

Wettbewerbsvorteil& zufriedene Kunden

Executive Summary Performance-Optimierung nach oben

Das Internet 2017 ist längst erwachsen - und das mobile Web ist. Gerade unterwegs hat niemand Lust, auf langsame Webseiten zu warten. Wer Performance nicht ernst nimmt, verscherzt es sich nicht nur mit den Nutzern, sondern auch mit Suchmaschinen.

Nutzer sind empfindlich gegenüber der Website Performance

Zahlreiche Untersuchungen haben bestätigt: Nutzer sind extrem empfindlich gegenüber der Ladegeschwindigkeit. Sogar kleinste Änderungen in der Ladezeit beeinflussen Traffic, Bounce-Rate und Conversions spürbar. Heute müssen Unternehmen sicherstellen, dass ihre Websites wirklich schnell funktionieren - auf allen Geräten.

Die Auswirkungen der schlechten Leistung auf Kundenbindung und wiederkehrende Besucher sollten auch Besorgnis erregen. Eine Studie von Equation Research im Auftrag von Compuware fand etwas Ähnliches: 46% der mobilen Web-Nutzer hielten es für unwahrscheinlich, dass sie zu einer Website zurückkehren, bei der sie in der Vergangenheit Schwierigkeiten beim Zugriff hatten.

Schnelligkeit ist Rankingfaktor

Google verwendet Seitengeschwindigkeit (Page Speed) als Rankingsignal. Das bedeutet, dass schnellere Seiten leichter gefunden werden. Auf diese Weise belohnt Google eine bessere Nutzererfahrung mit einem höheren Ranking und verringert die Nutzerfreundlichkeit.

Je höher Ladezeit einer Website ist, desto mehr kostet auch der mobile Traffic. Denn die Datenpakete sind bei vielen Telkos selbst in fortgeschrittenen Märkten stark begrenzt. Wenn die Daten eines Benutzers aufgebraucht sind, wird die Geschwindigkeit auf Modem-Niveau gedrosselt. So dauert das Laden eine Ewigkeit.

Bei der Optimieren einer Website auf Schnelligkeit, minimieren wir die Zeit von der ersten Anforderung der Seite bis zum vollständigen Rendering im Browser. Der Technologie-Stack hinter dem Web ist groß und komplex, und Ineffizienzen können auf jeder Ebene auftreten.

Vorteile durch Optimierung

Mit schnellen Webseiten rankst du höher in den organischen Suchergebnissen (SEO), du erhälst mehr Conversions & Anfragen und machst letztendlich deine Kunden glücklich. Daneben bietet eine Performance und Pagespeed Optimierung weitere Vorteile, da dein Server effizienter genutzt und damit mehr gleichzeitige Anfragen bedienen kann.

Was ist Website Performance Optimierung und warum ist sie notwendig? nach oben

Der Begriff Website Performance Optimierung beschreibt alle Maßnahmen, die dazu dienen, die Ladezeit einer Website bzw. eines Online-Shops auf ein Minimum zu reduzieren und gleichzeitig dem Nutzer möglichst früh Inhalte im sichtbaren Bereich („above-the-fold“) zu präsentieren.

In den letzten Jahren hat sich das Internet und damit Websites stark weiterentwickelt. Websites bestehen oft aus sehr vielen Elementen wie Stylesheets (CSS Dateien), Script-Dateien (Java Script), hochauflösenden Bilder und manchmal auch Werbeeinblendungen bzw. Werbung. Bei jedem Seitenaufruf muss der Browser diese Daten vom Server laden - meist auch von unterschiedlichen Hosts. Da Webserver und CMS meist "out-of-the-Box" nicht für eine hohe Performanz konfiguriert sind, gerät das Laden - insbesondere mobile - zu einer wahren Herausforderung. Immer öfter sieht man daher sekundenlang nur eine weiße Fläche, bis sich langsam die Website aufbaut.

Dies führt bei den Nutzern oft zu Frustration, Unzufriedenheit und erhöht die Absprungrate. Je schneller eine Website ist, desto mehr Nutzeraktivität entsteht, die letztendlich in eine höhere Conversion Rate mündet. Und desto höher die Conversion Rate ist, umso höher ist auch der Umsatz. Gleichzeitig ist die Performance einer Website Ranking-Kriterium für Suchmaschinen und SEO sowie ein wichtiger Erfolgstreiber für die mobile Nutzung des Internets.

Im Hinblick auf die rasante Verbreitung von mobilen Geräten wie Smartphones und Tablets und immer noch vergleichsweise niedrige Übertragungsraten, wird eine Performance-Optimierung 2017 immer wichtiger. Denn wir wissen, dass Millisekunden über Conversions entscheiden. Wer will schon seine Kunden warten lassen?!

Wie kann ich die Performance meiner Website messen? nach oben

Für die Performance-Analyse stehen verschiedene und auch gute kostenfreie Tools & Werkzeuge zur Verfügung. Wir empfehlen, diese Werkzeuge schon bei der Entwicklung einzusetzen, da so frühzeitig Performance-Probleme erkannt werden können. Da die Software Hersteller unterschiedliche Schwerpunkte bei Ihrer Anwendung setzen, empfehlen wir immer einen Vergleich der Messungen mit mehreren unterschiedlichen Werkzeugen. So kommt man zu einem ausgewogenen Eindruck. Unsere bevorzugten Performancetools sind:

WebPageTest

Web Performance analysieren mit WebPageTest

WebPageTest ist ein Open Source Projekt mit dem Ziel, das Web schneller zu machen. Der kostenfreie Test bietet umfangreiche Diagonsemöglichkeiten und Empfehlungen für Verbesserungen.

GTmetrix

Web Performance messen mit gtmetrix

GTmetrix analysiert Websites mit den Regelsets von Google PageSpeed und Yahoo! YSlow. Ein Highlight stellt neben den detaillierten Handlungsempfehlungen ein historischer Vergleich mit vorangegangengen Messungen dar.

Google PageSpeed Insights

Google Page Speed Insights ist ein kostenfreies Tool von Google, das die Website nach Googles Best Practices analysiert und Vorschläge für die Optimierung erstellt.

Google Chrome Browser

Der Google Chrome Browser bietet mit den DevTools bereits von Hause aus einige gute Möglichkeiten, um die Performance von Websites zu messen und zu auditieren.

Yahoo YSlow

YSlow ist eine Browsererweiterung für Firefox oder Chrome, mit der das Performance-Regelset von Yahoo! geprüft werden kann.

Screaming Frog SEO Spider

Screaming Frog SEO Spider ist Desktop-Softare, die eine vollständige Untersuchung von Websites auf Basis von Onpage-Kriterien durchführen kann. Zudem wird die Ladzeit gemessen und in einer übersichtlichen Statistik präsentiert.

Welche Ressourcen sollten optimiert werden? nach oben

Die zu optimierenden Ressourcen lassen sich grob in vier Bereiche unterteilen: Browser (Client), Server (Webserver), CMS und Website-Ressourcen. Dabei sollte man die unterschiedlichen Seitentypen untersuchen, da meist unterschiedliche Templates zum Einsatz kommen:

  • Homepage: Die Startseite ist eine der wichtigsten Seiten, da sie meist viel Traffic hat.
  • Trampelpfade
  • Kategorie Seiten:
  • Produkt Seiten
  • Statische Seiten

Hohe Performance-Potenziale bieten insbesondere folgende Ressourcen:

  1. Grafiken & Fotos: Grafiken und Fotos zählen zu den wichtigsten Elementen auf Webseiten. Da sie überproportional zur Seitenladezeit einer Webseite beitragen, sind hier schnelle Verbesserungen der Ladezeit möglich.
  2. Dateiübertragung: Serverseitig lässt sich eine komprimierte Übertragung aller Dateien aktivieren. Dies spart beispielsweise bis zu 70% an Dateivolumen bei Text-Dateien wie HTML oder CSS JS Dateien ein.
  3. Browser-Caching: Dateien wie Bilder oder Stylesheets, die sich nicht häufig ändern, können durch den Browser des Nutzers temporär gespeichert werden. So müssen sie nicht bei jeder Abfrage neu übertragen werden und belasten nicht das Netzwerk bzw. die Internetverbindung.
  4. CMS Caching: Damit das CMS nicht bei jedem Seitenaufruf die Seite neu prozessieren muss, kann ein Cache-Management implementiert werden.
  5. Template-Optimierung: Hierzu zählen insbesondere die Optimierung von Stylesheets und Javascript-Dateien und die richtige Platzierung der Ressourcen im Quellcode.
  6. Content Delivery Network (CDN) nutzen: Ein CDN ist quasi eine Cloud-Erweiterung für deine Website. Es verfügt über Netzwerk von Hochleistung-Servern auf die ganze Welt und blitzschnell Ressourcen ausgeliefert. Und das Beste ist: Das ist nicht teuer!
  7. Above-The-Fold-Optimierung: Hier werden die CSS Styles extrahiert, die above-the-fold verwendet werden, und separat im HTML-Header eingebunden. So kann der Browser schnell die sichtbaren Inhalte rendern und die restlichen Styles werden nachgeladen.

6 einfache Tipps für eine schnellere Website nach oben

6 einfache Tipps für schnellere Websites

Möchtest du die Page Speed Optimierung selber durchführen? Mit folgenden sechs Tipps kannst du deine Website effizient auf Geschwindigkeit trimmen:

  1. Komprimierte Dateiübertragung aktivieren: In der Konfigurationsdatei des Webservers (Datei .htaccess beim Apache Webserver) lässt sich eine komprimierte Übertragung aktiveren. Dafür ist das Apache-Modul mod_deflate oder ggf. das ältere Modul mod_gzip erforderlich.
  2. Browser-Caching aktivieren: In der Konfigurationsdatei des Webservers lässt sich ebenfalls ein Ablaufdatum für die unterschiedlichen Ressourcen definieren. Hier ist das Apache-Module mod_expire erforderlich._
  3. Mod_PageSpeed aktiveren: Das Apache-Modul mod_pagespeed übernimmt viele Optimierungsmaßnahmen passend zur Laufzeit, und das ohne Konfigurationsaufwand. Jedoch gibt es nur wenige Hoster, die dieses Modul von Hause aus installiert haben. Einfach mal nachfragen.
  4. CMS Caching aktivieren: Content Management Systeme wie WordPress generieren jede Seite dynamisch, d.h. es sind zahlreiche Datenbank-Anfragen notwendig, bis eine Seite ausgeliefert werden kann. Mit einem Caching-Plugin werden statische Versionen (bspw. physische HTML-Dateien) generiert. Diese werden im Vergleich natürlich sehr fix ausgeliefert. Sobald der Redakteur Seiteninhalte verändert hat, wird eine neue statische Version generiert.
  5. Bilder optimieren: Um die Bilder machen sich Redakteure erfahrungsgemäß weniger Gedanken. So schlummert hier sehr viel Potenzial. Mit Tools wie tinyjpg.com oder imageOptin werden die Bilder quasi automatisch durch die Algorithmen stark verkleinert, ohne dass die Qualität der Bilder leidet - selbst bei hoher Pixelauflösung. Das spart Datenvolumen und somit erhöht es die Ladezeit ungemein. Insbesondere bei Webseiten, die viele Bilder nutzen.
  6. CDN anbinden: Ein Content Delivery Network (CDN) speichert statische Ressourcen wie Bilder (JPG, PNG, SVG, etc.), Stylesheets (CSS) oder Javascript-Dateien (JS) auf Hochleistungsservern in der Cloud. So wird der eigene Server entlastet und durch die parallele Verbindung werden die Daten schneller ausgeliefert. Die Kosten sind dabei sehr gering.

Häufige Fragen

Was sind denn typische Performance-Indikatoren? nach oben

Performance Optimierung KPI

Üblicherweise werden folgende Metriken für den ersten und für einen wiederholten Aufruf der getesten Webseite gemessen bzw. berechnet. Der wiederholte Aufruf wird direkt nach dem ersten Aufruf durchgeführt, ohne Cache und Cookies zu leeren.

Geladenes HTML-Dokument
Ladezeit Website (Load Time) Benötigte Zeit bis die Seite im Browser geladen insertBefore
Erster Byte (First Byte) Benötigte Zeit für den ersten Bit der Server-Antwort auf die gestellte Anfrage (Backend-Zeit)
Start Render Benötigte Zeit bis etwas auf dem Bildschirm erscheint (davor sieht der Benutzer eine weiße Seite)
Speed Index Durschnittliche Zeit (in Millisekunden), in der sichtbare Elemente der Seite dargestellt werden; repräsentiert, wie schnell eine Seite gerendert wird (niedriger ist besser)
DOM Elements Anzahl der DOM Elemente der getesten Seite
Geladenes HTML-Dokument inkl. Ressourcen
Ladezeit (Load Time) Zeit, um das Dokument inkl. verknüpfter Ressourcen zu laden.
Anfragen (Requests) Anzahl der Anfragen, die der Browser tätigen musste (Bilder, JavaScript, CSS, etc.), um das Dokument zu laden.
Datengröße (Bytes In / Page Size) Datengröße, die der Browser runterladen musste, um das Dokument zu laden.
Geladenes HTML-DOkument inkl. Ressourcen und JavaScript Ausführung
Ladezeit (Load Time) Zeit, um die gesamte Seite vollständig zu laden.
Anfragen (Requests) Anzahl der Anfragen, die der Browser tätigen musste (Bilder, JavaScript, CSS, etc.), um die gesamte Seite vollständig zu laden.
Datengröße (Bytes In / Page Size) Datengröße, die der Browser runterladen musste, um die gesamte Seite vollständig zu laden.
Zertifikate (Certificates) Datengröße der geladenen Zertifikate
Kosten (Cost) Rating für die Kosten des vollständigen Seitenaufrufes

Brauche ich einen schnelleren oder eigenen Server? nach oben

Nein, nicht unbedingt. Durch die Performance-Steigerung lassen sich nämlich die Ressourcen deines Webservers viel besser ausnutzen. So kannst du auch mit preiswerterem Webspace eine höhere Anzahl von Seitenbesuchern ohne lange Wartezeiten bedienen. Sollte die "Time to first Byte" jedoch zu lang sein, empfehlen wir ein Server-Upgrade.

Was ändert sich mit HTTP/2?

Mit der neuen Protokollversion HTTP/2 werden einige Optimierungsmaßnahmen wie das Zusammenfassen von Stylesheets (CSS) und Script-Dateien nicht mehr notwendig sein. Weitere Vorteile sind:

  • Priorisierung für Streams: Server und Client können Prioritäten für Streams festlegen, um wichtige Ressourcen (Stylesheets oder Skripte) schnell zu laden.
  • Server-Push: Ein Server übermittelt dem Client Daten, die bald benötigt werden. So ist keine extra Anfrage des Clients notwendig.
  • Kompressionsverfahren: Header werden nun komprimiert übertragen, so dass die Menge an Daten noch weiter reduziert werden kann.

HTTP/2 ist allerdings auf dem Webhosting-Markt noch nicht weit verbreitet. Jedoch ist auf vielen Content Delivery Networks HTTP/2 standardmäßig verfügbar.

Was kann ich nach der Optimierung tun, um die gute Performance zu behalten? nach oben

Viele Optimierungsmaßnahmen müssen nur einmalig durchgeführt werden. Folgende zwei Punkte riskieren die gute Webperformance:

  1. Neue Bilder optimieren: Eine gute Website braucht regelmäßig neue Bilder. Stelle sicher, dass die Bilder in ausreichender Auflösung runtergerechnet und entsprechend komprimiert werden. Nutzt Tools wie Photoshop, ImageOptin oder tinyjpg.com, um die Bilder nochmal kleiner zu rechnen.
  2. Neue Extensions prüfen: Jede Erweiterung, Extension oder jedes Plugin fügt meist eigene Style- und Skriptdateien zum Template hinzu. Installiert nur die Extensions, die ihr wirklich braucht und prüft anschließend die Performance. Nicht benötigte Extensions sollte deinstalliert bzw. gelöscht werden. Das verbessert auch die Sicherheit von Wordpress & Co.

Wie sieht ein typischer Optimierungsprozess aus? nach oben

Unser Optimierungsprozess besteht aus vier Schritten:

  1. Umfassende Performance-Analyse: Zunächst analysieren wir die aktuelle Geschwindigkeit und identifizieren wesentliche Optimierungspotenziale.
  2. Beratung zu Optimierungsmöglichkeiten: In einem persönlichen Gespräch stellen wir die Potenziale und entsprechende Maßnahmen vor. Unsere Kunden entscheiden dann, wer wann welche Optimierungsmaßnahmen durchführt.
  3. Umsetzung bzw. Begleitung der Optimierungsmaßnahmen: Nun folgt die Umsetzung der Maßnahmen durch die Beteiligten. Den Abschluss bildet ein finaler Performance-Check.
  4. Monitoring & Reporting: Mit speziellen Monitoring Tools überwachen wir die Performance und geben wertvolle Tipps und Hinweise zur weiteren Optierung bzw. Pflege.

Gibt es glaubwürdigen Statistiken & Zahlen? nach oben

Viele große Internet-Unternehmen haben den Zusammenhang von Ladezeit und Erfolg genauer untersucht. Die Zahlen sprechen für sich:

  1. Erhöht Amazon die Ladezeit um 0,1 Sekunden, gehen die Umsätze um 1% zurück (Quelle: Kohavi und Longbotham 2007):

    „Experiments at Amazon.com showed that every 100-ms increase in the page load time decreased sales by 1 percent, while similar work at Google revealed that a 500-ms increase in the searchresults display time reduced revenue by 20 percent.“
  2. Google stellt einen Rückgang der Suchanfragen um 0,2% bzw. 0.6% fest, wenn sich die Ladezeit um 0,1 bzw. 0,4 Sekunden erhöht (Quelle: Brutlag 2009)
:
    „Experiments demonstrate that increasing web search latency 100 to 400 ms reduces the daily number of searches per user by 0.2% to 0.6%.“
  3. Microsoft beobachtet bei seiner Suchmaschine (Bing) einen Rückgang im Werbeumsatz von 1,2% bzw. 4,3%, wenn sich die Ladezeit um 0,5 bzw. 2 Sekunden erhöht
(Quelle: Schurmann und Brutlag 2009)
:
    „'Speed matters' is not just lip service. Delays under half a second impact business metrics. The cost of delay increases over time and persists.“
  4. Bei Yahoo verringert sich die Zahl der Nutzer, die die Startseite komplett laden um 5-9%, wenn diese um 0,4 Sekunden langsamer lädt
(Quelle: Stefanov 2009):
    „400ms = 5-9% drop in full-page Traffic“

Weitere Informationen:

DIY - So optimierst du systematisch die Performance deiner Website!

Die Performance-Optimierung ist eigentlich nicht schwer. Jedoch solltest Du folgendes beachten:

  • Zugangsdaten: Du benötigst Zugangsdaten für FTP (oder SSH) und einen Admin-Zugang für dein CMS bzw. Shop.
  • Backup: Du hast ein vollständiges (Datenbank + Dateisystem) durchgeführt.
  • Entwicklungssystem: Du hast ein Entwicklungssystem auf einer identischen Server-Konfiguration aufgesetzt.
  • Software: Du hast ein FTP-Programm und Editor installiert.
  • Kenntnisse: Du benötigst grundlegende Kenntnisse von PHP, HTML, CSS, apache Webserver.
Haftungsausschluss:
Die Optimierung wird auf eigene Gefahr durchgeführt. Wir übernehmen keinerlei Gewähr für die Aktualität, Richtigkeit und Vollständigkeit der bereitgestellten Informationen auf unserer Website. Haftungsansprüche gegen uns, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen.

1. Ist-Situation analysieren

In einem ersten Schritt analysieren wir zunächst die Ist-Situation. Das ist wichtig, damit wir Optimierungspotenziale identifizieren können und einen Vergleich Vorher-Nachher durchführen können. Dafür nutzen wir Tools wie gtmetrics oder Webpagetest.org. Es hat sich bewährt, Screenshots von den Ergebnissen anzufertigen.

Mit folgendem Code kannst du dir alle relevanten Informationen über das System ausgeben lassen:

<?php
phpinfo();
?>

Interessant ist insbesondere, welche PHP-Version eingesetzt wird und welche Module installiert sind.

2. .htaccess-Datei optimieren

In der Konfigurationsdatei des Apache Webservers lässt sich so einiges an Geschwindigkeit herausholen. Denn Out-of-the-Box ist der Apache Webserver NICHT auf Website-Performance optimiert. Wenn Du die Code-Schnipsel auf deine Anforderungen anpasst und in die htaccess Deines Servers einfügst, solltest Du in den Tools schon einen Geschwindigkeitzuwachs bemerken.

a. Komprimierte Übertragung aktiveren

Für die Komprimierung der Datenübertragung ist das Modul mod_deflate verantwortlich. In Älteren Installationen wird häufig noch mod_gzip eingesetzt. Es ist hilfreich, zu überprüfen, welches Modul aktiv ist.

Einige Datei-Typen müssen in der Regel noch zusätzlich definiert werden, damit der Webserver sie kennt. Dies erledigst du mit dem Modul mod_mime.

So könnte die .htaccess-Datei für die Komprimierung aussehen: Code auf Github ansehen

b. Browser-Caching aktiveren

Um das Browser-Caching zu aktiveren, ist das Modul mod_expire notwendig. Hier können die Caching-Zeiten bspw. nach Dateityp konfiguriert werden. Hier wird ggf. auch die Definition von Mime-Typen (siehe oben) benötigt.

Code auf Github ansehen

Der Parameter max-age ist übrigens in Sekunden angegeben.

Bildoptimierung

Bei der Bildoptimierung können in kurzer Zeit hohe Pagespeed-Potenziale ausgeschöpft werden. Bei vielen gewachsenen Websites kann man beobachten, dass Bilder eine viel zu hohe Dateigröße besitzen. Das ist meistens auch kein Wunder. Auf der einen Seite verfügen Redaktionen nicht über das Wissen bzw. die Tools und auf der anderen Seite werden Standardtools zur (automatischen) Bildgrößenanpassung eingesetzt. Also, wie gehen wir vor?

Vorhandene Bilder

Zunächst verbinden wir uns mit dem Server (FTP oder SSH) und laden uns die Verzeichnisse auf den Computer, in denen die Bilder gespeichert sind. Mit Hilfe von ImageOptim werden nun alle Bilder auf einen Schlag komprimiert.

JPG und PNG: Während der Computer die Bilder bearbeitet, überprüfst Du qualitativ die Einbindung der Bilder. Mit Hilfe der Dev-Tools von Chrome (oder Firefox) kannst Du die ursprüngliche als auch die gerenderte Auflösung des Bildes ansehen. Ist das Pixelmaß weit aus höher als für Retina-Displays benötigst, so solltest Du die Auflösung des Bildes auf das benötigte Pixelmaß reduzieren. Nutze dann unsere empfohlenen Tools zur Bildkomprimierung. Meist können diese Tools noch mehr herausholen als Photoshop.

SVG-Grafiken: Auch für SVG-Grafiken lohnt es sich, auszuprobieren, welche Potenziale herausgeholt werden können. Insbesondere, wenn diese bspw. als Logo auf jeder Seite eingebaut sind.

CSS Sprites: Mit den CSS SPrites kannst du mehrere kleinere Bilder zu einer Datei zusammenfassen. Das geht sehr gut mit Social Media Icons, Pfeilen oder Grafiken für die Navigation. So sparst du viele Requests.

Hier findest Du die Tools zur Bildoptimierung:

  • ImageOptim: Das Tool ImageOptim gibt es für Mac als Standalone-Software oder als Webservice. Dabei kombiniert es die Werkzeuge MozJPEG, Pngcrush, pngquant, 7zip and Google Zopfli. Bei Bedarf ist es möglich, Metadaten zu entfernen oder verlustfreie Kompression einzusetzen. Imageoptim eignet sich für Entwickler oder Performance-Optimierierer, die große Mengen an Bildern komprimieren müssen.
  • Tinyjpg: Das Tool Tinyjpg existiert als Photoshop-Plugin oder Webservice (Wordpress-Plugin). Es eignet sich daher für Grafiker und Redakteure oder diejenigen, die mal eben ein Bild verkleinern müssen.
  • svgomg: Das Online-Tool svgomg ist speziell für die Verbesserung von SVG-Grafiken gedacht.
  • Guetzli von Google: Guetzli ist ein JPEG-Encoder von Google, der eine sehr gute Kompression bei hoher visueller Qualität erreicht. Typischerweise sind die Bilder 20-30% kleiner als Bilder der libjpeg-Bibliothek. Beachte, dass Guetzli nur sequentielle (nicht-progressive) JPGs erzeugt, weil sie eine schnelle Dekompression haben.
  • Cloudinary: Cloudinary ist eine Bild- und Video-Management Plattform in der Cloud. Es ist nicht nur möglich, die Bilder zu optimieren, sondern auch auf einen Content Delivery Network (CDN) zu hosten. Das Besondere ist die Möglichkeit, die Bilder dynamisch zu bearbeiten: Cropping, Resizing, Gesichtserkennung, Wassermarken und diverse Effekte.
  • Kraken: Kraken ist eine professionelle, robuste und schnelle Möglichkeit, Bilder zu optimieren und zu komprimieren.

Neue Bilder

Ok, wir haben nun die vorhandenen Bilder komprimiert. Aber wie kann man dann Bilder vom Start an klein halten?

  1. Benutze JPG für Fotos, die du oder andere mit einer Kamera erstellt habt.
  2. Verwende PNG für normale Grafiken.
  3. Nutze SVG für vektorbasierte Grafiken.
  4. Verwende weniger Bilder. ;-)

Verwende nun zusätzliche Strategien, um Bilder kleiner zu machen:

  • Reduziere die Pixelgröße: Ein normaler Monitor hat im Durchschnitt 1600 x 900 Pixel (Breite x Höhe), ein iPad 1024 x 768 Pixel, ein iPhone 6 hat 667 x 375 Pixel. Bei Displays mit höherer Pixeldichte wie Retina Displays nutze einfach das doppelte Pixelmaß. Also, für eine optimale Darstellung brauchen wir nicht mehr als 2016 x 1512 Pixel.
  • Nutze verlustbehaftete Kompression: Beim Abspeichern kannst du die Qualität auf etwa 60-80% einstellen. In den meisten Fällen solltest du keine Artefakte sehen.
  • Spezial-Tools verwenden: Nutze immer Spezial-Tools, um die Bildergröße zu verkleinern.
  • Nutze Lazy-Loading: Ein effektiver Weg, um Ladezeiten zu minimieren, ist, einem Gerät das passende Bild anzubieten. Welches Smartphone braucht stellt Bilder mit 2016 Pixel dar? Diese Methode nennt sich Lazy-Loading und verwendet üblicherweise Javascript-Bibliotheken wie Unveil dafür. Für ein schnelles Rendering des Layouts kannst du auch Platzhalter-Bilder verwenden, die die Endgröße des finalen Bildes haben. Das richtige Bild verknüpfst du im Attribut data-src, für das hochauflösende Bild verwendest du data-src-retina. Klar, das bedeutet einen höheren Aufwand, aber freut deine Benutzer.
  • Animierte Gifs: Wenn du animierte Gifs verwendest, kannst du sie optimieren, in dem du weniger Frames oder weniger Farben verwendest. Alternativ prüfe, ob eine Konvertierung zu einem Videoformat wie mp4 nicht besser wäre.

Ein extra Tipp: Von jetzt an solltest du die Einstellungen der Bilder auf realen Geräten in den richtigen Größen testen. Du wirst dann genau sehen, wie weit du bei der Komprimierung gehen kannst, ohne zu viel Qualität zu verlieren.

Javascript-Optimierung

Um eine Seite zu laden, muss der Browser den Inhalt aller script-Tags bzw. -dateien runterladen, parsen und ausführen, bevor der Browser die Seite rendern kann. Bei der Javascript-Optimierung geht es darum, die Datenmenge zu verringern als auch das Parsing zu optimieren.

  • Optimierung der Einbindung: Um das Parsing von Javascript zu verzögern, gibt es verschiedene Möglichkeiten. Die einfachste Möglichkeit ist, JavaScript erst dann zu laden, wenn es benötigt wird. Eine zweite Mögichkeit ist, die Scripte im Header mit dem async-Tag zu laden. Dies verhindert das Parsing, so lange der Browser mit wichtigeren Dingen wie der UI zu tun hat. Wird nur wenig Javascript-Code benötigt, sollte der Code inline eingebunden werden.
    Das Laden von Javascript-Dateien am Ende der Seite ist suboptimal, da der Browser den Ladeindikator anzeigt, bis alles geparst ist.
  • Minimierung bzw. Minify: Eine Minimierung der Javascript-Dateien kann die Dateigröße reduzieren und das Runterladen, Parsing und die Ausführungszeit beschleunigen.
  • Zusammenführen bzw. Merging: Beim alten Standard http/1 reduziert das Zusammenführen von Javascript-Dateien die benötigten http-Requests und damit auch die Ladezeit. Dies kann manuell erfolgen bzw. über Built-Prozesse (bspw. mit GULP) realisiert werden. Mit dem neuen http/2-Standard ist das Merging jedoch obsolet.
  • DNS-Prefetching einsetzen: Falls JavaScript-Ressourcen von anderen Domains eingebunden werden, so ist es sinnvoll, im HTML-Header die DNS im vorhinein aufzulösen. Dies kann man mit folgendem Markup bewerkstelligen: <link rel="dns-prefetch" href="//www.google-analytics.com">
  • Auswahl des Frameworks bzw. der Bestandteile: Wähle dein Framework auch im Hinblick auf Performance aus und lade nur die Bestandteile, die du auch wirklich benötigst.

Unser Tool für die Javascript-Optimierung ist neben Gulp der Onlinedienst jscompress.com. Dieser nutzt die Open Source Software UglifyJS2 für die Komprimierung und Minimierung. Typischerweise wird die Dateigröße um 30 bis 80% reduziert.

Technische Fehler beheben

Mit der rasanten Entwicklung von Websites haben sich auch die Anzahl der Fehler erhöht. Auch klein aussehende Fehler können auf drastische Art und Weise die Seitengeschwindigkeit beeinflussen und damit Besucher behindern, die Informationen zu bekommen, die sie wollten. Klar, dass solche Seitenfehler dann auch die Reputation von Marken beschädigen können.

Um solche Probleme zu identifizieren und korrigieren zu können, ist ein vollständiger Audit der Website notwendig - idealerweise vor dem Relaunch. Hierbei sollten folgende Fragen geklärt werden:

  1. Sind alle benötigten Ressourcen wie Bilder, CSS- und JS-Dateien korrekt und direkt verlinkt? Jeder Redirect (Code 30x) bzw. jede Fehlermeldung (4xx und 5xx) benötigt Zeit und kann das Rendering blockieren.
  2. Ist der Quellcode (nahezu) fehlerfrei? Prüfe mit Tools W3C-Validator und CSS-Validator und bewerte, ob die Probleme rendering-relevant sind.
  3. Werden Javascript-Probleme in der Browser-Console ausgeworfen?
  4. Werden wichtige Ressourcen blockiert - sei es durch robots.txt oder HTTP-Header?
  5. Wenn du strukturierte Daten einsetzt: Ist das Markup korrekt?

Und wie kannst du die Fehler identifizieren und Anomalien aufdecken? Nutze am Besten eine spezialisierte Spider-Software. Wir arbeiten gerne mit dem Screaming Frog SEO Spider (kostenlos bis 500 URLs) oder Onpage.org (kostenlos bis 100 URLs).

PHP optimieren

PHP ist eine der weit verbreitesten Open-Source-Skriptsprachen der Welt. Die beliebtesten Content Management Systeme wie Wordpress oder Typo3 und zahlreiche Shopsysteme wie Magento oder Shopware basieren auf dieser Sprache. PHP wurde bereits 1995 von Rasmus Lerdorf entwickelt und war ursprünglich zum persönlichen Gebrauch gedacht.

Die aktuelle PHP-Version ist zwar eine der schnellsten Skript-Sprachen. Eine optimale Performance erfordert jedoch mehr als die Fähigkeit, Code schnell auszuführen. Das beste Werkzeug für die Optimierung der PHP-Performance ist das Know How des Programmierers.

Performance und Geschwindigkeit sind nicht notwendigerweise Synonyme. Eine optimale Performance ist meist ein Kompromiss aus Geschwindigkeit, Genauigkeit und Skalierbarkeit. Auch wenn erfahrene Programmierer sich das Fine-Tuning von Code für das Ende eines Projektes aufheben, so ist es doch empfehlenswert, bereits während der Entwicklung Tests durchzuführen und mit Benchmarks zu vergleichen.

Was ist guter Code?

Schnelle und stabile PHP-Anwendungen erfordern das Schreiben von gutem Code. Mit folgenden Best Practices, wirst du bei der späteren Optimierung Zeit sparen:

  1. Nutze native PHP-Funktionen, wenn möglich.
  2. Verwende JSON an Stelle von XML. Das Parsing von JSON ist mit den nativen PHP-Funktionen sehr schnell.
  3. Nutze Datenbank-Caching mit Memcache, um Datenbankabfragen im RAM zu cachen.
  4. Nutze ByteCode-Caching mit OPcache, um Code vorzukompilieren.
  5. Entferne unnötige oder mehrfache Berechnungen.
  6. Wenn du wissen willst, ob ein Wert größer als 0 ist, verwende die Funktion isset() anstatt count(), strlen() und sizeof().
  7. Entferne überflüssige Klassen (classes).
  8. Deaktivere Debugging Benachrichtigungen im Live-System.
  9. Beende Datenbank-Verbindungen, um Speicher zu sparen.
  10. Begrenze bzw. verbinde deine Datenbank-Anfragen.
  11. Verwende die Str-Funktion (strstr ist 4-mal schneller als str_replace).
  12. Nutze einfache Anführungszeichen, wenn du nicht auf Variablen prüfen willst.
  13. Teste drei Gleichheitszeichen ( = = =) anstelle von zwei (= =)

Typische Engpässe, die die PHP-Performance beeinflussen

Zusätzlich zur Code-Optimierung solltest du folgende Bereiche prüfen, wenn du Performance-Probleme hast:

  1. Das Netzwerk: Hat das Netzwerk die notwendige Leistung, um die Daten zu transportieren?
  2. Die CPU: Verfügt der Server über genügend Prozessorleistung, um deinen PHP-Code auszuführen?
  3. (Shared) Memory: Verfügt dein System jederzeit über genügend Shared Memory?
  4. Das Dateisystem: Ist dein Dateisystem fragmentiert und nutzt du SSD-Festplatten, einen Datei-Cache oder ByteCode-Cache?
  5. Prozess-Management: Laufen auf deinem Server viele und nicht benötigte Prozesse?
  6. Andere Server/APIs: Antworten eingebundene Server in einer angemessenen Zeit?
  7. Die Datenbank: Verwendest du langsame Datenbankabfragen?

Aktuelle Technologien einsetzen & Server optimieren

Veraltete Technologien gefährden nicht nur die Sicherheit einer Website, sonden bremsen auch moderne Websites aus. Insbesondere alte PHP-Versionen führen zu langsameren Kompilationszeiten. Das heisst, die Erstellung des Quellcodes für den Browser benötigt mehr Rechenzeit. Bevor du jetzt vorschnell Updates bzw. Upgrades durchführst, teste die Kompatibilität deines neues Setup in einer Staging-Umgebung und frage ggf. deinen Hoster nach ihren Erfahrungen.

Hier sind mögliche Stellschrauben bei der Serveroptimierung:

  • Updates & Upgrades: Nutzt du die aktuellen Versionen von Serververwaltung wie Plesk, Webserver (Apache) und Datenbank (MySQL) sowie benötigter Software (Bildbearbeitungswerkzeuge, PHP, etc.)
  • Module: Nutzt du bereits http2 oder das Modul mod_pagespeed.
  • Proxyserver: Evt. erhälst du mehr Performance durch den Einsatz eines modernen Proxyserver (nginx)
  • Software ablösen: Kannst du Teile deines Stacks durch bessere oder schlankere Softare ablösen?
  • CDN: Nutzt du ein Content Delivery Network für statische Dateien?

Falls diese Optimierungen nicht ausreichen, prüfe, ob dir ein schnellerer Server bspw. mit moderne rCloud-Infrastruktur weiterhilft. Diese ist mittlerweile im günstigen Hosting-Bereich angekommen und kann ohne komplizierte Konfiguration wie normaler WEbspace verwendet werden. Hier hat man zusätlich den Vorteil, dass man Leistung auf Knopfdruck dazuschalten kann.

Ausblick

In den nächsten Wochen nehmen wir uns noch folgende Themen vor.

  • Critical Rendering Path
  • CSS-Optimierung
  • HTML-Optimierung
  • CMS-Caching (Static file Cache) und Performance Optimierung von Wordpress - die besten Plugins
  • CMS Tweaking (am Beispiel von Wordpress)
  • CDN anbinden
  • Software Upgrades und Updates
  • AMP-HTML

Fazit / Noch Fragen?

Wie sind deine Erfahrungen bei der Pagespeed Optimierung? Hast du noch Fragen, wie du den Pagespeed deiner Website oder deines Shops optimieren kannst? Dann schreib mir einfach eine Mail oder schreibt mir jetzt in den Kommentaren.