So steigern Sie die Leistung Ihrer Front-End-Anwendung

Frontend Performance von Dimitris Kiriakakis

Wenn das Laden Ihrer Website länger als 3 Sekunden dauert, verlieren Sie möglicherweise bereits fast die Hälfte Ihrer Besucher.

Ja, das ist eine Tatsache, die durch mehrere Forschungsstudien belegt wurde. Lange Ladezeiten können sich verheerend auf die Conversion-Raten Ihrer Anwendung auswirken. Auf der anderen Seite führt die Optimierung der Ladezeit zu spürbaren Verbesserungen der Kundenerfahrung, der Conversion-Raten, der Suchmaschinenoptimierung und letztendlich des Produkterfolgs.

Angenommen, Sie haben kürzlich eine Website oder eine Frontend-Anwendung mit einem modernen JS-Framework (Angular, React, VueJS usw.) erstellt. Wie können wir sicherstellen, dass die Leistung den Erfolg nicht beeinträchtigt?

Das wichtigste zuerst. Wir müssen irgendwie Daten sammeln. Wenn es darum geht, die Leistung einer Frontend-Anwendung zu messen, sind die Tools, denen ich am meisten vertraue, folgende:

  • Google Chrome's Lighthouse
  • Geschwindigkeitskurve

Mit beiden Tools können Sie alle wichtigen Leistungskennzahlen (Pagespeed-Index, Zeit bis zur Interaktion, First Contentful Paint usw.) nachverfolgen.

Lighthouse ist in den Entwicklertools von Chrome enthalten. Wenn Sie Ihre Website / Web-App analysieren, erhalten Sie nützliche Tipps, wie Sie sie verbessern können.

Der Leuchtturm von Chrome kann Ihnen einige wirklich hilfreiche Tipps geben

Mit Speedcurve haben Sie alle diese KPIs sowie die Möglichkeit, sie über einen längeren Zeitraum hinweg zu überwachen.

Nachdem wir nun in der Lage sind, unseren Erfolg zu messen, können wir die Teile unserer Website optimieren, die die größte Rolle spielen.

Bilder

Bilder sind ein wichtiger Bestandteil jeder Website. Im Durchschnitt machen Bilder mehr als 60% der Daten aus, die auf Webseiten geladen werden. Die Bildoptimierung ist meines Erachtens die wichtigste und vielleicht auch die am wenigsten hängende Komponente fast aller Websites.

1. Ändern Sie die Größe Ihrer Bilder und machen Sie sie reaktionsschnell.

Am wichtigsten ist es zu überprüfen, dass Sie keine höhere Auflösung verwenden als die, die Sie wirklich benötigen. Sie müssen also die Größe Ihrer Bilder ändern, um sie genau an die Anforderungen Ihres Layouts anzupassen.

Responsive Layouts benötigen responsive Bilder

Außerdem müssen Sie sicherstellen, dass Ihre Bilder genauso ansprechend sind wie Ihr Layout. Es gibt ein großartiges Tool, das ich in letzter Zeit verwendet habe und das Ihnen dabei helfen kann, alle verschiedenen Versionen der Bilder zu generieren, die Sie möglicherweise benötigen, und das auch den HTML5-Code generiert, der sie verwenden kann. Es heißt "Responsive Image Breakpoints Generator". Normalerweise ziehe ich es vor, 8–10 verschiedene Bilder zu erstellen.

Natürlich können Sie den generierten HTML5-Code in jeder Frontend-App oder Website verwenden. Wenn Sie sich für das Schlucken interessieren, können Sie diesen Vorgang mit dem Plug-in für das Schlucken automatisieren.

2. Stellen Sie sicher, dass sie faul geladen sind.

Lazy Loading bedeutet im Grunde, dass wir das Laden von Bildern, die nicht sofort benötigt werden, aufschieben. In der Regel kann jedes Bild, das für die Benutzer in ihrem aktuellen Ansichtsfenster nicht sichtbar ist, zu einem späteren Zeitpunkt geladen werden, wenn das Bild in das Ansichtsfenster eingeht oder gerade eingeht.

Unabhängig davon, welches Framework Sie verwenden, finden Sie ein Plug-in, mit dem Sie die Images verzögert laden können (z. B. v-lazy-image in VueJS). Sie können jedoch auch eine eigene Implementierung erstellen. Stellen Sie einfach sicher, dass Sie die moderne Methode verwenden, um zu erkennen, wann ein Element in das Ansichtsfenster des Browsers, die IntersesectionObserver-API, eintritt oder dieses verlässt.

Bonus: Verwenden Sie eine CDN für die Bildzustellung

Wenn Sie die Größe und Anzahl der Bilder, die auf Ihrer Website geladen werden, bereits optimiert haben und diese Bilder weltweit verfügbar sein werden, können Sie sie auch über ein Content Delivery Network (CDN) bereitstellen.

Mit wenigen Worten, ein CDN speichert Ihre Bilder in einem global verteilten Netzwerk von Servern. Wenn also ein Benutzer aus Australien ein Bild von Ihrer Website anfordert, anstatt dieses Bild von Ihrem Server in Europa abzurufen, wird es vom CDN von einem anderen bereitgestellt, der näher an diesem Benutzer in Australien liegt. Dies verkürzt die zum Laden des Bildes erforderliche Umlaufzeit.

CSS, JS und HTML

Alle modernen Frameworks optimieren Ihren Code während der Produktionserstellungszeit (Code-Splitting, Tree-Shaking, Minification usw.). Was können Sie zusätzlich tun?

1. Optimieren Sie das Haupt-HTML-Dokument

HTML ist das Rückgrat fast jeder Webanwendung. Wenn es darum geht, auf Ressourcen in Ihrem HTML-Dokument zu verweisen, sollten Sie einige bewährte Methoden befolgen. Es wird empfohlen:

  • Platzieren Sie CSS-Verweise oben in der Kopfzeile Ihres HTML-Dokuments, um ein progressives Rendering zu gewährleisten.
  • Platzieren Sie JavaScript-Attribute am unteren Rand Ihres HTML-Texts und bevorzugen Sie das asynchrone Laden von Skripten. Dadurch wird verhindert, dass