HTML Optimierungen - Tipps für schnellere Ladezeiten

Mit den folgenden Tipps und Best Practices kannst du das Laden Deiner Website deutlich optimieren! Dazu gehören Optimierungen im HTML Code, in den CSS-Dateien als auch JavaScript-Dateien, diese stellen allesamt Client-Side Optimierungen dar. Reduziere die Daten, damit weniger Bandbreite in Anspruch genommen wird und die Seite schneller geladen wird. Optimiere die Seite für die verschiedensten Geräte - allen voran für Mobilgeräte.

Schnelle Ladezeiten, warum dies sehr wichtig für den Erfolg ist:

Schnelle Ladezeiten sind in vielerlei Hinsichtig wichtig für den Erfolg einer Website. So ist es kein Geheimnis mehr, dass die Ladezeit beim Google Such-Algorithmus mitberücksichtigt wird. Das bedeutet: je schneller die Seite geladen wird, desto besser wird sie auch in den Suchergebnissen gerankt. Aber auch die Nutzerfahrung wird dadurch verbessert. So haben Studien bei Amazon ergeben, dass pro 100 ms längerer Ladezeit der Verkauf um bis zu 1 % zurückgeht. Diese Erkenntnis muss man sich einmal auf der Zunge zergehen lassen. Um den Usern daher die bestmögliche Nutzererfahrung zu ermöglichen, sind OnPage-Optimierungen unabdingbar und mehr oder weniger ein Muss.

Hier nun die wichtigsten Optimierungs-Tipps:  

• HTTP Requests einsparen
  
  Achte darauf, dass so wenig HTTP Requests (Anfragen) wie möglich an den Server gesendet werden. Jeder einzelne Request verursacht einen Overhead und verlangsamt das Laden Deiner Website.
• Content Delivery Network (CDN)
  
  Größere Websites sollten ein Content Delivery Network (CDN) einsetzen.
• Img Attribute
  
  Setze width and height Attribute in img tags. Das führt dazu, dass der Platz für das Bild vom Browser richtig eingenommen wird, obwohl das Bild noch gar nicht geladen wurde. 
• Expires Headers
  
  Nutze die Möglichkeit von "Expires Headers" und verwende diese Option wenn möglich für all Deine statischen Dateien, wie Bilder, Stylesheets, Scripts, Flash, PDF etc. Der Grund dafür ist einfach: Ein Datum in der Zukunft im "Expires Header" führt dazu, dass Deine statischen Inhalte im Browser gecachet werden.
  
  Ein typischer Expires Header wäre zB
  Wed, 1 Jan 2025 00:00:00 GMT
  
  Wird die Seite nochmals besucht, wird der Browser keine erneuten Anfragen an den Server schicken, dies führt zu einer deutlich schnelleren Ladezeit. Beim ersten Besuch der Seite hilft das natürlich nicht, denn da müssen alle statischen Inhalte das erste Mal geladen werden. Wenn der Browser Cache gelöscht wird, hilft der Expires Header genauso wenig.
  
  Ein kleiner Nachteil ist, dass man statische Dateien umbenennen muss, wenn sich diese ändern, weil ja per Definition die User die gecachten Dateien nicht neu laden, wenn der Expires Header gesetzt ist.
• Komprimiere Dateien mit GZIP
  
  Seit der HTTP/1.1 Spezifikation gibt es den "Accept-Encoding" Header, mit dem man angeben kann, ob der Content in der HTTP Anfrage komprimiert werden soll. GZIP ist dabei die am meisten verwendete Komprimierungsart, auch deshalb weil GZIP sehr effektiv ist, bis zu 70 % Einsparungspotential ist hierbei möglich. Durch die Komprimierung kann der Inhalt deutlich schneller geladen werden, was wiederum zu einer besseren Nutzererfahrung führt. Obendrein wird Bandbreite gespart, was wiederum Geld für die Firma spart, die die Website hostet. Ein Win-Win Effekt für alle.
  
  Der einzige Nachteil der Komprimierung ist der, dass einige Browser damit nicht richtig umgehen können.
  
  PDF und Bilder eignen sich jedoch nicht zur Komprimierung, das kann nämlich letztendlich dazuführen, dass die Datei durch die Komprimierung sogar noch größer wird, als die Originalgröße.
• CSS on Top
  
  Die CSS Dateireferenz soll immer am Beginn (Header) angegeben werden. Du kennst sicher das Statement "Content is King". Das gilt auch für CSS. CSS ist "King of presentation". CSS ermöglicht Dir nicht nur das Styling Deiner Seite, sondern stellt auch die Möglichkeit dar um zu entscheiden, welche Inhalte angezeigt werden sollen und welche nicht.
• JavaScript on Top
  
  Auch JavaScript gehört am Anfang einer Seite deklariert.
• Entferne nicht benötigte CSS Angaben (Klassen)
  
  Nicht benötige Angaben verbrauchen unnötig Bandbreite beim Downloaden der CSS-Datei.
• Minimiere JavaScript und CSS Dateien
  
  "Minifying" bedeutet, dass man alle nonfunctional Zeichen (Whitespaces) entfernt, wie zB Zeilenumbrüche. Dadurch wird die Datei kleiner und kann schneller geladen werden. Dafür gibt es viele Online-Tools, wie zB.: JavaScript Minifier, CSS Minifier oder HTML Minifier
• Rendering
  
  Achte darauf, dass der Browser Elemente nicht immer neu rendern muss
• Resource Dateien
  
  Kombiniere Resource Dateien
• Große Dateien zusammenfügen
  
  Es ist besser wenige große Dateien zu laden, als viele kleine. Jeder einzelne Request verursacht einen Overhead beim Erzeugen einer neuen Anfrage an den Server. Große Dateien sind durch das Breitbandinternet kein Problem mehr. Die Message lautet daher, viele Dateien wie CSS Dateien zu einer großen Datei zu kombinieren, das gleiche gilt für JavaScript Dateien.
• Verwende Image Sprites
  
  Image Sprites sind Einzelbilder, die zu einem großen Bild kombiniert werden. Das große Bild wird viel schneller geladen, als die vielen kleinen. Am Client / Browser werden mithilfe von css Klassen, die Einzelbilder aus dem großen Bild wieder extrahiert.
• Layout ohne Table tags
  
  Verwende "Table" tags nur für tabellarischen Inhalt
  
  Früher wurden "Table" tags gerne für das Layout der Seite verwendet. Das ist heutzutage jedoch ein absolutes NO-Go.
• Responsive Design
  
  Mithilfe von Responsive Design ist es möglich mithilfe von CSS-Angaben (CSS Media Queries) die Seite unterschiedlich dazustellen, je nach Größe des Devices. Als Entwickler muss man daher nicht unterschiedliche Layout-Seiten implementieren.
  
  Beispiel:
  
  body{width: 960 px;}
  
  @media only screen and (min-width: 768 px) and (max-width: 991 px
  {
     body{width: 700 px;}
  }
  
  In diesem Beispiel wird die width-Angabe des default body von 960 pixels auf 700 pixels reduziert, sofern die Device-Breite zwischen 768 und 991 pixels liegt.

Fazit:

Die hier dargestellen Optimierungen sollten zum größtenteils umgesetzt werden. Ganz wichtig sind die Ladezeiten zu verkürzen, als auch Wert auf Responsive Design zu legen. Nur Websites, die auch für Mobilgeräte optimiert sind, haben in Zukunft eine Chance bei Google ganz weit oben zu ranken.

Weißt du noch weitere Optimierungsmaßnahmen, die hier nicht erwähnt wurden? In den Kommentaren kannst Du sie uns mitteilen.