Performance Optimierung der Webseite

Probleme bei der Website-Performance sind nicht nur auf die Website selbst zurückzuführen, sondern können auch am Hoster liegen. So ist es z.B. vom Traffic und vom Umfang der Website abhängig, für welche Server-Variante Ihr Euch entscheiden solltet. Während eine Shared-Hosting-Lösung für kleine Webseiten ausreichen mag, ist für einen Shop, mit vielen tausenden Besuchern, ein eigener Webserver oft die optimale Lösung. Spart also beim Hosting nicht an der falschen Stelle – die Einsparungen können sich als sehr teuer erweisen, wenn die Website durch eine falsche Hosting-Entscheidung und daraus folgender schlechter Performance weder beim Nutzer noch bei der Suchmaschine Anklang findet. Wir beraten Sie hier gerne, welche Hostinglösung für Ihre Anforderungen optimal ist.

Bei Bildern sind für die Website Performance folgende Werte relevant:

• die Bildgröße

• das Dateiformat

• die Dateigröße

Bilder mit einer hohen Pixelanzahl bzw. mit hoher Dateigröße machen sich vor allem bei einer langsamen Internetverbindung bemerkbar. Im schlimmsten Fall zieht sich das über mehrere Minuten, falls viele große Bilder auf der Seite vorhanden sind und die komplette Anzeige der Website hinauszögern. Um sowohl bei den Besuchern Eurer Seite als auch bei den Suchmaschinen einen positiven Eindruck zu hinterlassen, solltet Ihr immer einen guten Kompromiss zwischen einer kleinen Bild-/Dateigröße und einer ansprechenden Bildqualität finden.

Im Detail bedeutet das für die Bild-Performance-Werte:

Die beiden häufigsten für Webseiten genutzten Bildformate sind jpg und png. Bei der Einbindung von Fotos solltet Ihr immer das jpg-Format nutzen, da hier die Farben optimal abgebildet werden und da die Dateien wesentlich kleiner sind als im png-Format bzw. sich stärker als im png-Format komprimieren lassen.

Bilder im png-Format lassen sich zwar auch komprimieren, da die Verkleinerung jedoch hauptsächlich durch die Verringerung der Farben realisiert wird, sind die komprimierten Bilder immer noch recht groß und wirken im Gegensatz zu jpg-Bildern schnell unnatürlich. Sehr gut geeignet ist png jedoch für Logos mit scharfen, klaren Motivabgrenzungen und wenigen Farben. Auch bei Illustrationen oder Diagrammen sollten Sie sich für das Format entscheiden, da hier eine geringe Bildgröße und optimale Bildqualität wesentlich besser vereinbar ist als beim jpg-Format.

Überlegt Euch genau, wie groß das Bild auf der Webseite erscheinen soll und bedenkt dabei, dass ein PC-Monitor die Webseiteninhalte auf einer Breite von ca. 1000 Pixeln anzeigt. Fotos, die mit einer Digitalkamera aufgenommen wurden, sind in der Regel viel zu groß für die Website. Reduzieren Sie Bilder daher, wenn möglich, auf höchstens 640 x 400 Pixel, je kleiner, desto besser (sofern es dadurch keine optischen Beeinträchtigungen gibt).

Denkt zudem daran, die Bildgröße bereits vor dem Hochladen zu verkleinern und nicht beim Einbau in den Webseiteninhalt (also lediglich als verkleinerte Anzeige des Originalbildes). Das wäre keine Entlastung für die Ladezeit.

Die Dateigröße bei Bildern, die im Contentbereich eingebunden werden, sollte maximal 200 KB betragen. Es gibt mittlerweile sehr viele Bildkomprimierungsprogramme, welche trotz starker Komprimierung kaum Beeinträchtigungen an der Bildqualität zeigen, selbst als Freeware-Version.

Für Windows-Rechner ist z.B. der Caesium Image Compressor oder PNGGauntlet empfehlenswert, für Mac das Programm ImageOptim. Auch online lassen sich Bilder verkleinern, z.B. mit tinyjpg.com oder optimizilla.com.

Jede Ressource der Website ist mit einer separaten HTTP-Anfrage an den Webserver verknüpft. Je mehr Ressourcen (z.B. JavaScript-Dateien, CSS-Dateien oder Bilder) vorhanden sind, desto länger dauert es, bis die Website vollständig vom Browser dargestellt wird. Ziel ist es also, die Anzahl der Anfragen so gering wie möglich zu halten.

Möglichkeiten zur Performance-Optimierung bei den HTTP-Zugriffen:

1. Ein Blick in den Quelltext kann schon einige „Kürzungsmöglichkeiten“ aufzeigen. Prüft, welche Dateien wirklich wichtig für Eure Seite oder welche eigentlich überflüssig sind.

2. Dateien zusammenfassen: Werden CSS- oder JS-Dateien einzeln geladen, ist für jede Datei natürlich auch eine Anfrage nötig. Fasst daher möglichst alle CSS- und JS-Dateien jeweils zusammen. Achtet zudem darauf, die CSS-Dateien in den head-Bereich und die JS-Dateien in den footer-Bereich einzufügen, da JavaScript in der Regel nicht für die korrekte Anzeige benötigt wird und dem Nutzer auch ohne das Laden der Dateien schon den größten Teil der Seite angezeigt wird.

Zusammenfassungen sind auch mittels CSS-Sprites möglich:

CSS-Sprites sorgen dafür, dass mehrere Bilder mit nur einer Anfrage geladen werden können. Dabei wird ein Bild erzeugt, in dem die zusammengefassten Bilder enthalten sind sowie Informationen für den Browser, wo die jeweiligen „Teilbilder“ anzuordnen sind.

Das Kürzen einer Kommentarzeile oder einer Leerzeile oder die Nutzung einer Abkürzung mag für sich allein genommen keine große Komprimierung bewirken. Wenn Ihr jedoch alle Dateien hinsichtlich dieser vieler kleinen „Aufblähungen“ des Codes komprimiert, ergibt das eine enorme Einsparung an Ressourcen. Es gibt zahlreiche Tools, welche derartige Verdichtungen automatisiert übernehmen, z.B. Clean CSS, CSS Optimizer oder UglifyJS v2.

Weitere Einsparmöglichkeiten gibt es, wenn Ihr die Dateien komprimiert an den Browser übermittelt, was z.B. mit gzip-Komprimierung möglich ist. Die gzip Komprimierung muss vom Server angeboten werden. Bei webgo ist diese Funktion auf allen Servern installiert und kann mittels .htaccess Datei aktiviert und konfiguriert werden. Unser Support unterstützt Euch hierbei auch gerne.

Wie bereits unter dem Punkt „HTTP-Zugriffe“ angemerkt, verlängert sich die Ladezeit mit jeder angefragten Datei. Problematisch ist das vor allem bei JavaScript-Dateien. Sie bieten sozusagen ein hohes „Konflikt-Potential“, sei es durch doppelte Skripte, Blockaden bei der Seitendarstellung oder APIs. Auch wenn JavaScript ein fester Bestandteil einer modernen, dynamischen Website ist (allein schon durch die Einbindung von Social-Media-Icons), solltet Ihr immer im Hinterkopf behalten, dass die Skripte auch einen hohen Anteil an einer negativen Website-Performance haben können.

Einige Beispiele für Performance-Probleme durch JavaScript:

Doppelte Dateien: Doppelte JS-Skripten kommen relativ häufig, z.B. im Zuge der Einbindung neuer Plugins.

Blockade anderer Dateien: JavaScript blockiert parallele Downloads, behindert das progressive Rendering der Dateien, die nach dem JS-Code eingebunden sind und verzögert damit die Seitendarstellung. Die nachfolgenden Inhalte werden erst nach dem kompletten Herunterladen, Parsen und Rendern der JS-Dateien weiter verarbeitet. Besonders problematisch ist das bei Seiten mit vielen externen Werbescripten.

APIs: Web APIs sind ein fester Bestandteil vieler Websites, immerhin ermöglichen sie, Dienste von anderen Websites in das eigene Angebot zu integrieren und damit das Nutzererlebnis zu verbessern. Bekannte Beispiele sind die Facebook-API zum Anzeigen der Fananzahl oder die Einbindung von Google Maps für die Standort-Darstellung. Web APIs wirken sich aber auch negativ auf die Performance aus, da die Darstellung immer mit einer Antwort der Website verknüpft ist, von der die Dienste ursprünglich stammen.

 Überlegt Euch daher beim Einsatz von JavaScript immer, ob der Code ihren Besuchern einen Zusatznutzen bietet und ob der Code wirklich eine langsamer ladende Website rechtfertigt.

Caching ermöglicht einen wesentlich schnelleren Zugriff auf bereits geladene Dateien. Werden also die Dateien beim Webserver, Browser, bei der Datenbank oder der Webanwendung gespeichert, so müssen nicht jedes Mal bei einer Abfrage die Original-Dateien angefordert werden. Die Dateien stehen dank Cache sofort zur Verfügung.

Das Caching durch die Datenbank und den Webserver wird in der Regel schon durch den Webhoster realisiert, d.h., hier läuft die Speicherung automatisch. Ihr müsst Euch daher bei Ihrer Website lediglich um die Cache-Optimierung für den Browser und die Webanwendung kümmern.

Für WordPress ist im Bereich der Cache-Optimierung das Plugin W3 Total Cache zu empfehlen. Damit werden mehrere Möglichkeiten zur Performance-Optimierung abgedeckt. Achtet aber darauf, nur ein Cache Plugin zu nutzen, um Komplikationen durch Überschneidungen der Plugins zu verhindern. Genauere Hinweise zur Nutzung von W3 Total Cache sowie zur Konfiguration des Plugins findet Ihr unter W3 Total Cache konfigurieren .

Die Performance Optimierung der Website ist wie viele andere Optimierungsmaßnahmen kein einmaliges „Projekt“, sondern ein stetiger Prozess. Inwieweit Performance-Verbesserungen notwendig sind, könnt Ihr mit zahlreichen kostenlosen Tools testen. Sie funktionieren alle ähnlich, nämlich indem Ihr die gewünschte URL eingibt und die Analyse per Klick startet. Unterschiede ergeben sich lediglich bei der Ergebnis-Darstellung bzw. beim Umfang der Ergebnisse.

Zu den bekanntesten Performance Tools zählt sicherlich PageSpeed Insights von Google:

Mit PageSpeed Insights könnt Ihr die Mobile- und Desktop-Performance testen. Statt wie andere Tools jedoch eine konkrete Ladezeit anzugeben, überprüft Insights verschiedene Faktoren, die sich darauf auswirken. Daraus errechnet das Tool einen Gesamtwert zwischen 0 und 100 für Eure Website. Je höher der Wert, desto besser. Neben der reinen Feststellung von Performance-Problemen, liefert PageSpeed Insights auch Tipps, wie Ihr diese Probleme beseitigen könnt.

Ein weiteres Tool zur Performance-Messung ist webpagetest.org:

Das Tool ist wesentlich umfangreicher als PageSpeed Insights. Es erfordert aufgrund der Masse an Analysedaten eine etwas längere Einarbeitung – allein schon deshalb, weil es zahlreiche verschiedene Voreinstellungen gibt. Der Vorteil des Tools: Es zeigt an, welche Auswirkungen die Optimierungsmaßnahmen der Performance haben. So könnt Ihr gut erkennen, wo ein besonders hohes Verbesserungspotenzial besteht.