WebApp: Ein sinnvoller Schritt für Ladezeitenoptimierung?
Derzeit schreibe ich eine Webapp, im Rahmen eines "Portfolio"-Projekts und Hobbys mit der Schwerpunktsetzung, dass das Projekt auf Vanilla-JavaScript, HTML und CSS bei der Umsetzung baut und weil mir auffiel, dass die Ladezeiten optimiert werden könnten, stell ich diese Frage.
Persönlich sehe ich mich vom Stand her als fortgeschritten was diese Sprachen angehet an, nehme jedoch, da ich mir nicht zu 100% sicher bin, jeden Rat und derartiges an - vielleicht hat der ein oder andere noch coole Vorschläge wie man das kann.
Ich bedanke mich für die Antworten im Voraus.
3 Antworten
Da gibt es viele Ansatzpunkte:
- Ressourcencaching
- Ressourcenbundling (CSS und JS jeweils bündeln und minifizieren/uglifyen, Redundanzen entfernen)
- HTML minifizieren
- Ressourcenkompression (Stichwort: GZIP)
- Imagesets verwenden
- Next-Gen-Bildformate wie WebP oder AVIF einsetzen
- Font Swapping nutzen
- Lazy-Loading für speicherlastige Ressourcen (wie Bilder)
- Statt einer extra Font für Icons SVG nutzen
- Generell Code optimieren
Nicht jeder dieser Punkte muss unbedingt zu großen, positiven Performancesprüngen führen. Es ist also auch etwas, was getestet werden muss.
Weitere Tipps kannst du dir via PageSpeed Insights einholen, wobei auch die Tipps aus dieser Analyse eine individuelle Prüfung benötigen. Nicht alles ist sinnvoll oder leicht umsetzbar.
Hi EGNUTV,
du kannst durch einige Dinge die Ladezeit optimieren. Und zwar kannst du für alle mögliche Dateien Preloads machen. Verwende wenige CSS-Dateien und wenige Javascript-Dateien. Versuche auf Frameworks wie jQuery zu verzichten und nutze lieber JavaScript-Libraries bei Bedarf. Nutze moderne Bildformate wie webp. Passe deine Bilder an um Ladezeiten zu optimieren. Verwende keine CSS-Frameworks wie Bootstrap und Tailwind. Diese führen zu zuviel Code-Overload, was die Perfomance beim rendern verlangsamt. Zudem bringen auch die eingebunden zusätzlichen JS und CSS-Dateien auch ordentlich Codeoverload mit sich.
Am Besten nutzt du bei den Bibliotheken von Vanilla oder auch jQuery immer die Dateien, die schon ein "min" im Dateinamen haben.
Diese sind bereits optimiert und "minified". HTML würde ich, genau wie CSS so lassen, da diese Dateien meist nicht so groß sind/werden.
Bei einer WebApp ist natürlich auch noch die Einstellung des Webservers wichtig, denn der bestimmt noch das Caching der Dateien - dies sollte 30 Tage (bei Javascript, CSS und Bildern) betragen.