Die Geschwindigkeit der Website: Wie optimiere ich diese?

So verbesserst du die Ladezeit deiner Website schnell und effektiv

 

Goldmann & PraetoriusDer Podcast zum Beitrag:

Dieser Beitrag ist eine Zusammenfassung aus dem Podcast Goldmann & Praetorius.  
André Goldmann und Michael Praetorius helfen dir beim Aufbau deines Online-Business und geben dir Praxistipps für unterwegs. Den Podcast kannst du kostenlos bei iTunes und Spotify abonnieren.

 

 

 

 

 

Geschwindigkeit der Website: Was ist überhaupt schnell? 

Grundsätzlich kann man sagen, alles unter einer Sekunde ist optimal wenn es um Websites geht. Die Seite muss nämlich schnell da sein. Warum das so ist, kennst Du sicherlich von dir selbst: Wenn Du beispielsweise auf einer Website etwas nachschauen willst, die Seite aber extrem langsam lädt, vergeht dir die Lust, dich noch weiter auf der Seite umzuschauen. Genau das willst Du aber verhindern, wenn Du mit Deiner Seite ein erfolgreiches Online-Business betreiben möchtest. Daher sollte im Idealfall sofort nach dem Klick das Wichtigste zu sehen sein. Denn wie heißt es so schön: Für den ersten Eindruck gibt es keine zweite Chance.

Was kann man machen, um langsame Websites schnell zu kriegen?

Schon einige Jahre spielt das Thema Geschwindigkeit beim Google Ranking eine Rolle. Heute reicht es allerdings nicht mehr aus, Bilder kleiner zu machen. Was nun aber nicht bedeutet, dass Du das überhaupt nicht machen solltest. Im Gegenteil,. auch Komprimieren von Bildern und das richtige Datei-Format sind wichtige Stellschrauben, die sich positiv auf die Performance Deiner Seite auswirken. Ob nun ein Bildformat wie beispielsweise 

  • GIF
  • PNG
  • JPEG

das richtige für Deine Seite ist, hängt von verschiedenen Kriterien und Einstellungen ab. Am besten, Du probierst aus, welches Format sich für Deine Website und die gewünschten Funktionen am besten eignet.

Warum ist meine Website langsam?

Wenn Deine Seite (zu) langsam läuft, solltest Du testen, ob Du den richtigen Server hast. Also ob der Server auf das Content Management System (CMS) ausgelegt ist oder die Seite auf einem 0815-Server läuft, den Du dir bei einem beliebigen Anbieter wie beispielsweise GoDaddy, HostEurope oder anderen gemietet hast? Denn schon an dieser Stelle gibt es erste Probleme, wenn der Server nicht optimal auf Dein System ausgelegt ist.

Wie finde ich den richtigen Anbieter?

Folgende Fragen solltest Du dir stellen, um den richtigen Provider zu finden

Was läuft auf dem Server? Kleines CMS wie WordPress oder Drupal oder größere Infrastruktur?

Bin ich alleine auf dem Server oder teile ich ihn mir mit anderen?

Übrigens: Es gibt Hoster, die sich auf bestimmte CMS wie WordPress oder Drupal spezialisiert haben: Raidboxes in Europa oder der amerikanischen Anbieter Flywheel. Diese Anbieter machen nur und ausschließlich WordPress. Die komplette Infrastruktur und alle Komponenten, die auf dem Server sind, sind genau so konfiguriert, dass WordPress die besten Voraussetzungen hat und perfekt laufen kann. 

Welchen Server benötige ich für den Start mit meiner Webseite?

Auch hier stellt sich also wieder die Frage, ob Du auf einem eigenen Server, einem dedicated Server oder gar einer Server Farm bist. Ein eigener Server wird sich für den Start mit Deiner eigenen Website wohl noch nicht richtig lohnen. Erst ab einer beachtlichen Anzahl an Besuchern (mehrere tausend pro Tag) oder wenn Du komplexe Softwareanforderungen hast, lohnt sich das. 

Daher ist es meist ein gutes Vorgehen, klein anzufangen und Dich Schritt für Schritt  nach vorne zu arbeiten. Bei den meisten Hostern kannst Du zum Beispiel auf einem Shared Server starten und – sollte der Bedarf da sein – nach einiger Zeit auf einen eigenen Server wechseln. Schau Dir am besten vorab die Optionen an, ob der Provider, den Du ins Auge gefasst hast, das auch zulässt. 

Ab einer gewissen Größe und wenn du beispielsweise eine In-house-IT hast, wirst Du vermutlich selbst am Server etwas herum schrauben wollen und auch müssen. Auch das sollte Dein Provider anbieten. 

Page Speed: Drei Instanzen, die beim Server relevant sind

Es gibt drei wichtige Stellschrauben, an denen Du drehen kannst, um die Geschwindigkeit zu optimieren:

 

  • Webserver 
  • Fileserver
  • Datenbankserver

Der Webserver: Was muss er können?

Eine ganz einfache Basic-Website ist in der Regel gar nicht groß dynamisch. Meist handelt es sich dabei um eine einfache html-Website, auf die ein paar Bilder geladen werden. Mit anderen Worten: Solch kleine Websites brauchen nur einen Webserver, der schnell genug ist, statische Seiten zu laden. 

Früher hat man dann ganz einfach mit einem Redaktionssystem statische Seiten ausgespielt. Das hat den großen Vorteil, dass dadurch die Seite nicht überladen wird und so viel schneller ist. Denn Du lädst nicht alles aus der Datenbank. Heute ist das nicht unbedingt mehr zeitgemäß, kann sich aber trotzdem noch für einige Seiten (und vor allem für den Start) anbieten. Denn die Datenbank kann ganz schnell ziemlich groß werden. Das gilt auch für Redaktionssysteme wie WordPress, die in kurzer Zeit fette Datenbanken aufbauen – und dann dauert die Datenbankabfrage richtig lang.

Übrigens: Wenn Du bei einer Frontpage viele Daten abfragen lässt, die Du zunächst gar nicht brauchst, hat auch das eine Auswirkung auf die Ladezeit. 

Der Fileserver: Wie kann ich den Dateiserver perfekt nutzen?

Eine schnelle Seite hängt auch mit dem richtigen Fileserver zusammen, was nicht zuletzt auch einen Einfluss auf die Nutzerfreundlichkeit hat.

1. Tipp: Was braucht die Webseite?

Unter Umständen werden Daten geladen, die für den Moment nicht gebraucht werden und deshalb die Geschwindigkeit negativ beeinflussen. Um herauszufinden, welche das sein könnten, frag Dich folgendes: 

  • Welche Daten braucht die Website, die gerade geladen wird?
  • Welchen Bereich hat der User geöffnet?
  • Welche Minimalabfragen sind überhaupt notwendig?
  • Das geht richtig gut für Header und Footer. Diese Dateien kannst Du meist sehr gut und schnell entschlacken. Denn häufig muss gar nicht die gesamte Historie der Seite in die Dateien geladen werden. Oft kann man für Landingpages auch einfach unterschiedliche Instanzen aufbauen, um das Debakel der langen Ladezeiten zu beheben. 

2. Tipp: Wo liegt der Fileserver?

Der Fileserver muss nicht dort liegen, wo sich der Webserver befindet. Heute gibt es Cloud-Dienste wie Dropbox, an die Du Daten auslagern kannst. Es muss nicht alles auf dem gleichen Server liegen. Die Kombination verschiedener Server kann durchaus sinnvoll sein.

Server und DSGVO

Bei nicht DSGVO-konformen Servern ist Vorsicht geboten. Unter Umständen könntest Du hier Probleme mit dem Datenschutz bekommen. Allerdings gibt es einen Ausweg: Eine Art Tunneling: Die Daten werden dabei in den Webserver hinein gestreamt und damit vom Redaktionssystem angefragt und nicht vom User. 

Beispiel: Fontawesome. Das Toolkit wird gerne genutzt, weil es ein großes Set an vielen verschiedenen Icons enthält. Auch für WordPress oder Drupal gibt es spezielle Plug-Ins, die Dir das Kit laden können. Der Nachteil: Damit lädst Du das Icon-Set immer in Echtzeit vom Anbieter herunter. Im gleichen Schritt übermittelst Du damit aber auch die IP-Adresse – und die ist personenbezogen. 

Allerdings lässt sich auch dieses Problem lösen: 

Was muss ich bei Elementen anderer Server beachten?

Elemente nachladen: Wenn Elemente von einem anderem Server kommen, besteht die Gefahr, dass die eigene Webseite dadurch langsam wird. Nämlich dann, wenn der Aufbau Deiner Website darauf wartet, bis die entsprechenden Elemente da sind. Werden diese Element aber nachgeladen, kannst Du das Problem umgehen. Denn so kann der Aufbau der Seite schon abgeschlossen werden, bevor Du die Elemente des anderen Servers hast. Die Technik kann man aber auch auf dem eigenen Server anwenden. Das lässt sich gut mit Bildern und Videos machen. So ist das Grundgerüst schon fertig, während die einzelnen Elemente nachgeladen werden. 

Elemente nicht im Frontend laden: Statt im Frontend zu laden, solltest Du nach einem intelligenten Caching im Redaktionssystem suchen, das die Elemente bei Bedarf bereithält und damit auf die Infrastruktur im Backend zurückgreift. Das geht zum Beispiel über ein Skript, das die Inhalte auf den lokalen Webspace des Betreibers der Website lädt. Der Nutzer, dem Icons von Fontawesome angezeigt werden, bekommt genau die herunterladen. Allerdings macht er das nicht selbst, sondern das wird für ihn erledigt, so dass er die Icons von dem Server des Betreibers der Website bekommt und nicht von Fontawesome. Das schützt auch davor, dass die Website langsam geladen wird. Denn die Icons sind bereits da, so muss nicht auf den Server gewartet werden, der vielleicht gerade so viele Anfragen hat, dass er nicht hinterher kommt. 

Datenbankserver: Was gibt es dort zu optimieren?

Zunächst einmal solltest Du die Anzahl an Anfragen (sog. queries) an den Datenbankserver in Echtzeit reduzieren. Am besten, Du lässt Anfragen in Echtzeit sogar ganz bleiben und nutzt stattdessen Caching und lieferst direkt html aus. So bekommt der Nutzer nur eine halbdynamische Webseite ausgespielt, die in einem Cache erzeugt wurde. Das ist gerade bei Websites mit einem hohen Traffic interessant. Also beispielsweise für Soziale Netzwerke, die API Calls haben. 

Was ist ein API Call? API ist ein Akronym für application programming interface; auf Deutsch Anwendungsprogrammierschnittstelle und bedeutet, dass zwei (oder mehr ) Anwendungen miteinander kommunizieren können. Deine Anfrage wird durch den Call an den Provider weitergeleitet und bearbeitet, so dass Du eine Antwort darauf erhältst.

Bei Facebook ist beispielsweise jedes Objekt ein iFrame (auch Inline Frames genannt). Damit lassen sich bestimmte Applikationen oder externe Dokumente visuell in eine Website integrieren. Die Last wird so auf verschiedene Stellen verteilt und genau das wirkt sich positiv auf die Geschwindigkeit der Website aus. Bei kleineren und eher überschaubaren Projekten muss das natürlich nicht zwingend gemacht werden. Grundsätzlich ist ein gutes Datenbank-Caching aber eine Überlegung wert. 

Was kann ich neben dem Datenbank-Cacheing tun?

Daneben kannst Du auch die Anzahl der Tabellen und Querverküpfungen reduzieren, sonst wächst die Datenbank unverhältnismäßig schnell an. 

Tipp: Es muss nicht alles in einer Datenbank sein. Viele Dinge lassen sich auch als kleine Applikation auslagern, um die Hauptdatenbank nicht zu belasten.

Bestimmte Dinge solltest Du ohnehin vom CMS lösen. Nehmen wir an, Du veranstaltest ein Gewinnspiel, bei dem Du natürlich auch die Daten Deiner Nutzer bekommst. Dabei solltest Du dir von vornherein Gedanken dazu machen, ob Du das Gewinnspiel nicht lieber auslagern solltest. Denn irgendwann brauchst Du die Daten vielleicht nicht mehr – sie belasten aber noch deine Datenbank und damit Deine Ladezeiten. Im Nachgang ist es aber ungleich schwieriger, diese Daten aus der Datenbank herauszulösen. Wenn Du das aber gleich zu Beginn machst, bleibt die Datenbank von diesen Daten „verschont“ und Du spart dir zusätzliche Arbeit im Nachhinein. 

Zusammenfassung: Die Tipps für eine schnelle Website

Daten von anderen Servern laden: Dabei solltest Du die Daten cachen, im Redaktionssystem abfragen und nachladen. Damit  – sollte es zu Problemen beim angefragten Server kommen  – Deine Seite nicht langsam wird. 

Elemente aus der Datenbank cachen: Wenn das klappt, solltest Du dich für diese Option entscheiden und im besten Fall statische Websites ausliefern. Nicht alles muss hochdynamisch sein.

Applikationen auslagern: Applikationen, die nicht zum Core-System (also zu den Dingen, die man ständig braucht) gehören, können als kleine Applikationen in Extra-Websites ausgelagert werden. Diese Websites können im nächsten Schritt in die große Website integriert werden. 

Wie setze ich die Tipps um?

Wenn Du dich nun fragst, wie Du die Tipps in die Tat umsetzen kannst, kann ich Dich beruhigen. Auch das geht ganz einfach:

  • Daten auslagern: Klappt ganz gut mit Cloud-Diensten.
  • Datenbank auslagern: Bei Provider nachfragen. Meist ist es in diesem Fall sinnvoll, ein umfangreicheres Paket bei Deinem Provider zu buchen. Damit kannst Du sogar meist mehr als eine Datenbank auslagern. 
  • Elemente nachladen: Dazu gibt es spezielle Skripte, die Dir das erlauben. 
  • Page Speed: Server spielt auch eine Rolle

Beim Thema Geschwindigkeit der Website nie vergessen: Der Server muss immer auf das CMS abgestimmt sein. Beispiel: Jede dritte Website im Netz wird mit WordPress betrieben. Und genau für diese Websites gibt es Anbieter, die sich genau darauf spezialisiert haben. Der Umzug von einem Apache Server, den viele Anbieter nutzen, zu einem Host wie  Raidboxes mit einem nginx-Server kann dabei bis zu einer Sekunde Ladeersparnis beim Nutzer bringen – und das ist schon eine ganz Menge. 

Wer nun kein WordPress verwendet und auch nicht verwenden will, kann sich in Deutschland beispielsweise Timme Hosting ansehen. Auch die nutzen nginx-Server, die meist bessere Ladenzeiten versprechen. Hier hast Du freie Wahl in Bezug auf das CMS. Denn jedes Redaktionssystem lässt sich hier verwenden. 

Richtigen Provider finden: Support nicht vergessen

In der Servicewüste Deutschland hat man diesen Punkt vielleicht gar nicht auf dem Zettel. Tatsächlich solltest Du daran aber immer denken: Gute Beratung ist immens wichtig, wenn Deine Website optimal laufen soll. Frag Dich daher auch, wo der Support am besten ist und welcher Provider Mitarbeiter hat, die Dir tatsächlich weiterhelfen können – und Dir nicht nur irgendein vorgefertigtes Paket anbieten wollen. 

Denn: Web-Hoster verdienen am Ende mit der Skalierung. Was bedeutet, dass er eine beträchtliche Masse anbieten muss, damit es sich rechnet. Wenn Du beispielsweise vier Euro pro Monat bei Deinem Provider zahlst, teilst Du dir den Rechner mit mehreren hundert anderen Kunden. Dabei kannst Du natürlich Glück haben, wenn die anderen Kunden nur kleine Seiten haben. Wenn aber ein echtes Schwergewicht mit Dir auf den gleichen Server ist, wird das einen Einfluss auf die Geschwindigkeit Deiner Website haben. 

Ladegeschwindigkeit: Wie groß müssen Websites sein? 

Bei der Größe der Seite kannst Du natürlich auch ansetzen. Soll die Seite eher zu den längeren gehören, so wie die Seite von SPIEGEL Online, bei der man sehr lang scrollen kann? Oder reicht eine kurze Seite, bei der der Nutzer nur einen kurzen Teaser-Text sieht und die nur so groß ist, wie der Desktop? 

Darauf gibt es keine pauschale Antwort. Denn es hängt schlussendlich von Deiner Intention ab. Also davon, was Du mit der Seite erreichen willst und was Dein User erwartet. Daher musst Du ausprobieren, welche der beiden Optionen für Dich passt. Wenn Du wissen möchtest, wie das geht, schau in meinen Artikel zur perfekten Landingpage.

Tipp: Was wiegt die Website? 

Das Gewicht der Seite wird gerne vergessen, hat aber auch einen Einfluss darauf, wie schnell die Seite da ist. Bei 3,5 MB braucht man mit 3G unterwegs ewig, bis die Inhalte aufgebaut sind. Auch daher bietet sich eine Reduktion der Speichermedien, also der Dinge, die geladen werden müssen, mehr als an. Denn – Du ahnst es schon – das wirkt sich positiv auf die Ladegeschwindigkeit aus. Kontrollier daher auch Schriftarten, die Du dir heruntergeladen hast. Die können, wenn Du Pech hast, nämlich ebenfalls viel Platz beanspruchen.