Performance is King - Es kommt doch auf die Größe an!

Um ein positives Nutzererlebnis zu schaffen, sind die Ladezeiten und Reaktionsgeschwindigkeiten einer Website wichtig. Damit die Performance stimmt, kommt es auf viele Faktoren an und als Betreiber einer Webseite muss man Wege finden die Inhalte performant darzustellen.

70% der mobilen Seiten benötigen fast 7 Sekunden, bis der Inhalt im sichtbaren Bereich auf dem Bildschirm angezeigt wird.

Think with Google

Wie Sie Ihre Bilder in den Griff bekommen haben wir bereits in unserem vorherigen Post erläutert. Neben Bilder gibt es auf einer Webseite noch HTML, CSS und Script-Dateien. Diese müssen separat und einzeln geladen, interpretiert und ausgeführt werden.

Hier gibt es gleich mehrere Möglichkeiten den Browser zu entlasten. Im ersten Schritt ist es wichtig, Dateien zusammen zu fassen und so unnötige Anfragen an den Server zu vermeiden.

Im zweiten Schritt ist es wichtig, unnötige Zeichen wir Leerzeichen und Zeilenumbrüche aus den Dateien zu entfernen. Diese sind nur für den Programmierer von Belang aber für die spätere Website uninteressant und nur unnötiger Balast. Die Möglichkeit CSS und JS Dateien zu mergen und komprimiert auszuliefern bringen viele CMS-System wie Typo3 schon von Haus aus mit.

Priorisieren (Datenmenge reduzieren, die sofort benötigt wird)

Bei einem Request wird die HTML-Datei einer Seite vor allen anderen Dateien angefragt. Aus der HTML-Datei ergibt sich, in welcher Reihenfolge alle anderen Ressourcen einer Seite angefragt werden. Befindet sich in der HTML-Datei z. B. ein Bild über einem Video, wird das Bild als erstes angefragt.

Im Normalfall müssen erst alle CSS- und JavaScript-Dateien geladen werden, damit alle Inhalte im Frontend (auf dem Desktop, dem Tablet oder dem Smartphone) angezeigt werden können. Das bedeutet, dass der Nutzer warten muss, bis alle Dateien angefragt und übertragen wurden, bis ihm alle Inhalte einer Seite angezeigt werden. Diese Abfolge von Anfragen von allen Ressourcen an den Server, um die Seite aufzubauen (HTML, CSS, Grafiken, JS, Fonts usw.), nennt man Render-Pfad.

Spricht Google von Page Speed, geht es also nicht um die Gesamtzeit, bis alle Ressourcen geladen sind, sondern um die Zeit, bis der User etwas zu sehen bekommt.In einigen Fällen ist es daher sinnvoll, erst einmal nicht die komplette Webseite zu laden, sondern z. B. nur die Inhalte im sichtbaren Bereich, der ohne Scrollen erreicht werden kann („above the fold“).

Priorisiertes Laden

Ein wichtiges Konzept für schnelle Ladezeiten ist der kritische Render-Pfad. Der kritische Render-Pfad kann dazu führen, dass große Websites mit vielen Ressourcen deutlich schneller geladen werden können.

„Kritisch“ bedeutet in diesem Fall: absolut erforderlich für den sichtbaren Bereich einer Website. Der kritische Render-Pfad ist demzufolge die Abfolge von Anfragen der Ressourcen, die benötigt werden, um den sichtbaren Bereich darzustellen.

Diesem Prinzip folgend, sollten in der HTML-Datei die Einbindungen der Ressourcen eine neue, priorisierte Reihenfolge erhalten:

Dateien, die für das initiale Laden der Seite notwendig sind, sollten am Anfang der HTML-Datei stehen, z.B. CSS-Files.
Dateien, die für das initiale Laden nicht benötigt werden, sollten hingegen am Ende der HTML-Datei eingebunden werden. Dazu gehören z. B. JavaScript für Social Buttons, Analytics, Werbeeinbindung etc.

Asynchrones Laden

Eine noch bessere Priorisierung der zu ladenden Ressourcen einer Seite wird gewährleistet, wenn einige Ressourcen nur dann geladen werden, wenn sie auch wirklich benötigt werden, z. B. durch Lazy Load.

Hierzu gehören etwa große Bildergalerien, Audioplayer oder Videoplayer. Beim Scrollen, Hovern oder Klicken wird das jeweilige JavaScript getriggert, was erst dann die benötigten Ressourcen lädt. Bekannte Beispiele sind die „Infinity Scrolls“ von Pinterest oder der Facebook Timeline.