In der heutigen digitalen Welt spielen Webanwendungen eine immer wichtigere Rolle. Ob es sich um Online-Shops, soziale Netzwerke oder Unternehmenswebsites handelt, die Performance einer Webanwendung ist entscheidend für den Erfolg. Niemand wartet gerne lange auf das Laden einer Seite oder auf die Ausführung einer Aktion. Aus diesem Grund ist es von großer Bedeutung, eine Performance Optimierung von Webanwendungen vorzunehmen. Hier meine Tipps.
HTTP-Anfragen reduzieren
Webseiten mit vielen externen Ressourcen wie CSS-Dateien, JavaScript-Dateien und Bildern können die Ladezeit erheblich verlangsamen. Eine Möglichkeit, dies zu optimieren, besteht darin, die Anzahl der HTTP-Anfragen zu reduzieren. Kombiniert mehrere CSS- oder JavaScript-Dateien in eine einzige Datei. Dadurch werden weniger Anfragen an den Server gesendet und die Seite lädt schneller.
Eine Webseite, die 3 CSS Dateien lädt:
<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">
<link rel="stylesheet" href="styles3.css">Eine Webseite die eine kombinierte CSS Datei lädt, die den Inhalt der 3 einzelnen CSS Dateien enthält:
<link rel="stylesheet" href="combined-styles.css">Die combined Version wird deutlich schneller laden. Das steigert die Besucherzufriedenheit und beim google-Ranking werden schnelle Webseiten auch bevorzugt.
- KI-gestützte Bilderkennung
- Sicherer Fernzugriff
Letzte Aktualisierung am 2024-12-09 / Affiliate Links / Bilder von der Amazon Product Advertising API
Caching verwenden
Caching ermöglicht es Webbrowsern, Ressourcen wie Bilder, CSS-Dateien und JavaScript-Dateien vorübergehend zu speichern, sodass sie nicht jedes Mal neu geladen werden müssen. Durch die Verwendung von Caching könnt ihr die Anzahl der HTTP-Anfragen reduzieren und die Ladezeit der Webanwendung erheblich verbessern.
Im beliebten Webserver nginx kann der Cache in der Konfigurationsdatei unter der location eingestellt werden:
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 30d;
add_header Cache-Control "public";
}Ab jetzt würden alle Dateien mit den aufgeführten Dateiendungen im Cache, also im Arbeitsspeicher, bereitgehalten werden und es würde beim Aufruf kein Zugriff auf die Festplatte erfolgen. Das ist deutlich schneller.
An dieser Stelle empfehle ich euch auch meinen Artikel zum Thema CouchDB absichern mit nginx
Dateien komprimieren
Durch die Komprimierung von CSS- und JavaScript-Dateien könnt ihr deren Dateigröße reduzieren und die Ladezeit der Webanwendung verringern. Nginx bietet eine integrierte Komprimierungsfunktion, die Gzip verwendet.
Fügt dazu den folgenden Code zur Konfigurationsdatei im Serverblock hinzu, um die Gzip-Komprimierung zu aktivieren:
gzip on;
gzip_types text/plain text/css application/javascript;benutzt wenig externe Scripts
Externe Skripte von Drittanbietern wie Analysetools, Social-Media-Plugins oder Werbenetzwerken können die Performance eurer Webanwendung beeinträchtigen. Reduziert die Anzahl solcher Skripte auf ein Minimum und prüft regelmäßig, ob sie wirklich benötigt werden. Jedes externe Skript muss heruntergeladen und ausgeführt werden, was die Ladezeit erhöht.
Müssen zum Beispiel alle diese externen Tools sein?
<script src="analytics.js"></script>
<script src="social-media.js"></script>
<script src="advertising.js"></script>Bilder optimieren
Bilder können einen erheblichen Anteil der Dateigröße einer Webseite ausmachen. Optimiert eure Bilder, um die Dateigröße zu reduzieren, ohne dabei die visuelle Qualität zu beeinträchtigen. Verwendet geeignete Bildformate wie JPEG für Fotos und PNG für Grafiken mit Transparenz. Komprimiert die Bilder und skaliert sie auf die tatsächlich angezeigte Größe.
Ein einfaches und kostenloses Tool dafür ist Paint.NET. Achtet aber darauf, die „normale“ Windows Version und nicht die „Microsoft-Store-Version“ herunterzuladen. Die Store-Version ist kostenpflichtig.
Benutzt ihr eine CMS-Software wie WordPress, könnt ihr auch ein Plugin die Arbeit erledigen lassen. Ich benutze z.B. Smush in der Free-Version, was völlig ausreicht. Smush findet ihr hier: https://wordpress.org/plugins/wp-smushit/
- Paul Fuchs(Autor)
Letzte Aktualisierung am 2024-12-09 / Affiliate Links / Bilder von der Amazon Product Advertising API
nutzt effiziente Datenbankabfragen
Effiziente Datenbankabfragen sind entscheidend für die Performance einer Webanwendung. Erstellt Indizes für häufig abgefragte Spalten und verhindert somit unnötige Datenbankzugriffe. Verwendet außerdem Caching-Techniken, um häufig verwendete Daten im Arbeitsspeicher zu halten und die Datenbankzugriffe zu reduzieren.
Verwendet möglichst keine like Abfragen. Diese benötigen viel Performance und sind langsam.
Habt ihr weitere Tipps für die Performance Optimierung von Webanwendungen? Schreibt es mir in den Kommentaren.