Performance

Homepage oft sehr langsam?

Performance Optimierung und Seitenaufbau beschleunigen

Die Verwendung von vielen Inhalten kann schnell zu langen Ladezeiten führen. Die HTML-Datei, das Favicon, mehrere CSS-Dateien, viele background-images im CSS, ein paar Webfonts und verschiedene JavaScript-Dateien können in Summe die Performance stark beeinflussen. Für einen schnellen Seitenaufbau ist nicht nur die Dateigröße entscheidend, sondern auch die Anzahl der gesamten Dateien. Durch viele einzelne Anfragen auf dem Server können lange Wartezeiten für die Verarbeitung entstehen. Eine Request-Reduzierung ist hierbei neben der Komprimierung ein sehr wichtiger Faktor.

Komprimierung
Die gzip-Komprimierung leistet einen wichtigen Beitrag zur Reduzierung der zu übermittelnden Datenmenge besonders bei HTML, CSS, SVG und JavaScript. Bei Bildern dagegen hat gzip nur geringfügige Auswirkungen auf die Dateigröße. Diese kann hier eher mit geeigneter Bildkomprimierung reduziert werden. Selbst verlustfreie Bildkompression kann die Dateigröße enorm verkleinern. Zusätzlich kann CSS mit einem CSS-Compressor oder JavaScript mit einem JavaScript-Compressor reduziert werden.

Request-Reduzierung
Mehrere CSS- oder JavaScript-Dateien können zu einer Datei zusammengefasst werden. Verschiedene background-images im CSS können je nach Layout zu einem Sprite zusammengefügt werden. Auch die Einbettung von Bildern, SVGs, Schriften ins CSS mit base64 führt zur Request-Reduzierung. Durch das Einbetten der Fonts ins CSS springt auch endlich der Text nicht mehr da die Schrift dann zeitgleich mit dem CSS geladen wird und nicht erst noch geladen werden muss.

Position der Einbindung von CSS und JavaScript
CSS muss immer vor dem JavaScript im head stehen. Um gute Performance zu erzielen sollte das JavaScript an letzter Stelle im body stehen.

<!DOCTYPE html>
<html lang="de">
<head>
        <title>Frontend Performance</title>
        <link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
        Frontend Performance
        <script src="/js/javascript.js"></script>
</body>
</html>

Optimierungsgedanke vor jedem Projekt verinnerlichen
Kann auf ein paar Webfonts verzichtet werden? Kann die Information auch einfacher mit weniger Grafik dargestellt werden? Können Grafiken vielleicht auch mit CSS beschrieben werden? Wie gestalte ich mein CSS damit Grafiken global verwendet werden können? Was muss global verwendet werden? Was nicht? Wie erstelle ich sinnvolle CSS-Module? Der Mobile First-Gedanke kann hierbei helfen - aber natürlich nicht immer.

Externe Abhängigkeiten
Will ich wirklich einige Dateien von fremden Servern in meine Seiten einbinden? Was ist mit Social Media? Kann ich das nachladen / Position der Einbindung?

Optimierungsgedanke auch aufs CMS / Web Hoster anwenden
Absprungrate bei langsamer Seite? Brauche ich wirklich Wordpress? Schnell genug? Auch noch mit allen wichtigen Plugins? Sicherheit? Reicht für meinen Kunden nicht auch ein file based CMS aus? Web Hoster schnell genug?

Impressum