OnPage-SEO: Technische Optimierung für eine leistungsfähigere Website

Die Geschwindigkeit bzw. Ladezeit einer Website spielt für Google neben einer Vielzahl an weiteren Faktoren eine große Rolle für die Beurteilung der Qualität der Seite und das Ranking in der Suchmaschine. Zudem wollen wir alle, dass die User, die unsere Website besuchen, auch auf der Website bleiben und anfragen bzw. kaufen - es soll zu einer Conversion kommen. Die wichtigsten Faktoren für eine gelungene, technische Suchmaschinenoptimierung und die dafür empfohlenen Tools, stellen wir euch in diesem Artikel vor.

Minifizieren von HTML, CSS und JavaScript

Beim Minifizieren geht es darum, den Code durch das Konvertieren in eine kompaktere Form und das Entfernen von nicht benötigten Zeichen zu komprimieren und so schlanker bereitzustellen. Daraus resultieren kleinere Files, die aufgrund der geringeren Dateigröße zur Minimierung der Anzahl der Requests und somit zur Optimierung der Ladezeit führen, weshalb es Suchmaschinen leichter haben, die gesamte Website schnell und effizient zu erfassen und der User in kürzerer Zeit zu den gewünschten Inhalten gelangt. Die Minifizierung wird in der Regel vom CMS direkt übernommen oder kann beispielsweise bei Wordpress mit Hilfe von W3 Total Cache oder WP-Rocket umgesetzt werden. Für die manuelle Minifizierung empfehlen wir HTMLMinifier (HTML), CSSNano (CSS) und UglifyJS (JavaScript). Mit der von Google neu eingeführten PageSpeed API lässt sich die Optimierung ebenfalls durchführen.

Pipelining von CSS und JavaScript

Meist in Kombination mit dem Minifizieren der einzelnen Dateien, wird auch das sogenannte Pipelining durchgeführt. Beim Pipelining werden die zuvor einzeln optimierten Dateien zu einer einzelnen Datei zusammengefasst um erneut die Anzahl der benötigten Requests und somit die Ladezeit zu reduzieren. Das Pipelining wird in der Regel von jedem modernen Content Management System (CMS) ab Werk oder durch die Installation von zusätzlichen Plugins durchgeführt. Sofern Wordpress als CMS genutzt wird, empfehlen wir für Websites W3 Total Cache oder WP-Rocket und für Online-Shops ausschließlich WP-Rocket.

Reduzieren der Requests

Eine Website besteht aus mehreren Dateien (HTML-Dateien, CSS, JS, Grafiken, Bilder, Videos, Schriften, Symbole, etc.), die beim Aufrufen der Seite geladen werden. Je mehr Dateien also zu laden sind, desto mehr Requests sind dazu notwendig, was sich wiederum negativ auf die Ladezeit der Website auswirkt. Das Ziel sollte daher immer sein, alle Inhalte so kompakt wie möglich zu halten und nichts zu laden, was nicht unbedingt geladen werden muss. Während Logos, Grafiken oder Icons als weboptimierte Inline-SVGs (Vektorgrafik) gespeichert werden können, gibt es die Möglichkeit Schriften oder Icon Fonts als Base64 enkodierte Streams zu übertragen. Bilder sollten optimal für das Web optimiert und können zudem auch per Lazy Loading nachgeladen werden. Auch Scripts können asynchron und somit in Hinblick auf Performance und Ladezeit effizient geladen werden.

Optimieren der Bilder und Videos

Nicht oder unzureichend optimierte Bilder sind eine der Hauptursachen für langsame Websites, da sie die Ladezeit und die gesamte User Experience enorm beeinflussen. Wir verwenden für die Optimierung von Grafiken und Bildern verschiedene Tools, in speziellen Fällen auch mehrere Tools in Folge, jedoch kann man davon ausgehen, dass man mit einem Tool wie ImageOptim bereits herausragende Ergebnisse erzielt, die sich sofort bemerkbar machen. Für die Optimierung von Videos nutzen wir HandBrake.

Caching

Es wird hierbei zwischen dem regulären Browser Caching, auch bekannt als Leverage Browser Caching, und dem erweiterten Caching, was durch das jeweilige CMS übernommen wird, unterschieden. Beim Browser Caching wird in der Regel in der .htaccess Datei via mod_expires definiert, wie lange der Browser die definierten Inhalte (HTML, CSS, JS, Grafiken, Bilder etc.) speichern soll. Wird der Browser Cache gelöscht, so werden die Inhalte beim erneuten Aufrufen der Website neu geladen. Beim erweiterten Caching, welches durch das jeweilige CMS direkt oder indirekt durch zusätzliche Plugins wie W3 Total Cache oder WP-Rocket übernommen wird, geht es darum, die gesamten statischen Inhalte der Website in einem eigenen Caching System abzulegen. Zudem können dynamisch generierte Inhalte mittels sogenannter Object Caching Module (Memcached oder Redis) oder Database Caching Module als statische Objekte abgelegt und beim nächsten Aufruf der Website wesentlich schneller angefordert werden, da einige Requests und Datenbankzugriffe wegfallen.

Lazy Loading

Lazy Loading ist eine in der Softwareentwicklung weit verbreitete und angewandte Technik, um Inhalte - meist geht es um Bilder und Videos - erst dann zu laden und anzuzeigen, wenn sie für den User sichtbar sind. Das bedeutet konkret bei einer Website, dass die Inhalte asynchron geladen werden, sobald sie sich im Sichtfeld (Viewport) des Browsers befinden. Somit müssen Bilder und Videos nicht vollständig beim Aufruf der Seite geladen werden, was die Ladezeit reduziert und die Performance erhöht. Lazy Loading kann via JavaScript oder mit dem bereits genannten Plugin WP-Rocket umgesetzt werden - wir empfehlen die JavaScript Variante, da man die Technik so besser kontrollieren und individualisieren kann

GZIP-Komprimierung

Alle modernen Browser unterstützen die Übertragung der zum Betrieb der Website oder Web App notwendigen Assets wie HTML, CSS und JavaScript Files sowie auch Grafiken und Bilder in komprimierter Form via gzip. Die Aktivierung von gzip erfolgt erneut über das Apache Modul mod_deflate und das Setzen der passenden Befehle in der .htaccess-Datei. Für nginx-Server gibt es eine eigene Konfiguration bzw. eigene Befehlssätze. Viele CMS unterstützen GZIP-Komprimierung von Haus aus, im sonstigen Falle, helfen bereits genannte Plugins wie WP-Rocket.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

gzip on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;

Skalierung der Bilder

Ein weiterer, äußerst wichtiger Punkt bei der technischen Optimierung der Website stellt die Skalierung der Bilder dar. Um unnötige Downloadzeiten zu vermeiden und Bandbreite zu sparen, sollten Bilder neben einer soliden Optimierung für das Web auch für die unterschiedlichen Geräte bzw. Auflösungen dementsprechend skaliert bereitgestellt werden. Das Umsetzen dieser Settings muss von Webentwicklern über Media Queries und srcsets in CSS durchgeführt werden.

Aktivieren von Keep-Alive

Ursprünglich wurde beim Aufruf einer Website für den Download jedes einzelnen, dazugehörigen Files bzw. für jeden Request eine eigene TCP-Verbindung aufgebaut, was direkt erkennen lässt, dass die Ladezeit der gesamten Website negativ beeinflusst wird. Um dieses Problem zu lösen, wurde das sogenannte Keep-Alive Flag eingeführt, welches es ermöglicht, alle Files mit Hilfe einer einzigen, persistenten TCP-Verbindung (daher auch bekannt als Persistent HTTP Connection) herunterzuladen. Aktiviert wird das Keep-Alive Flag in den Apache oder nginx Config Files, jedoch sollte es bereits von Grund auf aktiviert sein. Zusätzlich bietet sich bei Apache Servern, wie gehabt, die Möglichkeit, das Flag via dem Modul mod_headers in der .htaccess-Datei zu aktivieren.

Server und Hosting

Oftmals unterschätzt wird das Hosting bzw. der Server, auf dem die Website oder der Online-Shop gehostet wird. Natürlich gibt es am Markt mittlerweile bereits Anbieter, die relativ performante Shared Hosts anbieten, die insbesondere für Wordpress Seiten und Shops optimiert sind. Geht es jedoch darum, technische Optimierungen im Detail durchzuführen und Leistung im High-End Bereich zu garantieren, empfehlen wir den Einsatz eines vServers (Virtuelle Maschine mit zugesicherter Hardware) oder eines Dedicated Servers (Eigener, ungeteilter Server mit leistungsfähiger Hardware). Hier besteht, dadurch, dass man vollen Zugriff auf den Server hat, der große Vorteil, alle notwendigen Einstellungen bis ins kleinste Detail festlegen und optimieren zu können, was nahezu ungeahnte Optimierungsmöglichkeiten und letztendlich die optimale Performance bietet. Was die Serververwaltungssoftware anbelangt, schwören wir auf Plesk, mit dem sich viele Performanceoptimierungen realisieren lassen.

Man kann die Optimierung natürlich noch detaillierter betreiben und es gibt noch eine Vielzahl an weiteren Faktoren, die eingehalten werden müssen, um eine hochwertige und leistungsfähige Website, Web App oder eine E-Commerce Lösung bereitzustellen, jedoch stellen die hier erwähnten Maßnahmen die primär wichtigsten, initialen Optimierungsmaßnahmen dar, die auf keinen Fall fehlen dürfen und mit denen du ab sofort loslegen kannst. Willst du wissen, wie deine Website performt, dann führe einen ersten Check mit Hilfe des Tools GTmetrix durch. Benötigst du Unterstützung oder möchtest du dich lieber um dein Kerngeschäft kümmern und die Leistungsoptimierung an die Experten abgeben, dann schreib uns oder ruf uns direkt über die Kontaktseite an.