Erkenntnisse aus den React- und Vue-Frameworks zur Seitengeschwindigkeit

In unserem ständigen Streben nach Seitengeschwindigkeit kommen wir oft wieder an denselben Punkt zurück. Trotz der Bemühungen von Produkt-, Marketing- und Wachstumsteams, die technischen Teams zu motivieren, werden Aufgaben, die die Site-Leistung verbessern könnten, oft aufgrund der Notwendigkeit einer Umgestaltung verschoben, und selbst wenn sie erledigt sind, führen sie nicht immer zu vollständigen Ergebnissen. In diesem Zyklus ist es von Vorteil, einige aufschlussreiche Perspektiven zum Erreichen echter Leistung zu berücksichtigen. Welche Lehren können wir beispielsweise aus der Geschwindigkeit von React.js und Vue.js oder ihren SSR-Erweiterungen (Server-Side-Rendering) wie Next.js und Nuxt.js im Vergleich zu anderen Plattformen ziehen? Ist es nicht an der Zeit, die MBs der jQuery- und CSS-Dateien zu optimieren? Wann werden große Unternehmen aufwachen, die ihre Web-Leistung schlecht informierten Front-End-Entwicklern opfern? Lassen Sie uns diese Fragen nacheinander angehen.

Warum sind auf Next.js und Nuxt.js basierende Websites schnell?

Die Plattformen Next und Nuxt, SEO-freundliche Strukturen auf Basis von React und Vue, zeichnen sich durch ihre Geschwindigkeitsleistung aus. Aber warum sind diese Plattformen so schnell?

React.js und Vue.js sind komponentenbasierte Frameworks, die jede Seite in Unterkomponenten aufteilen, wie unten gezeigt.

Um dies zu verdeutlichen, nehmen wir ein Beispiel aus der Praxis: eine E-Commerce-Listing-Seite. Man kann sich diese Listing-Seite so vorstellen, dass sie die folgenden Unterkomponenten hat:

• Kopfzeile
• Auflistung
  • Informationen zum Listing-Eintrag
    • Seitentitel
    • Brotkrümel
    • Produktanzahl
  • Filter
    • Kategoriefilter
    • Preisfilter
    • ...
  • Sortierung
  • Produktkarten
    • Produktfoto
  • Produktdetails
    • Produktname
    • Produktpreis
      • Durchgestrichener Preis
      • Verkaufspreis
    • Diskontsatz
    • Kampagneninformationen
  • Paginierung
  • Kategorieinhalt
• Fußzeile

Beim Erstellen einer komponentenbasierten Anwendung mit Nuxt.js wird jede dieser Komponenten separat codiert und in die Masterseite eingebunden. Betrachten wir beispielsweise eine Datei mit dem Namen ProductPhoto.js. Welche Funktionen auch immer für Produktfotos benötigt werden (Karussell, responsive Bildanzeige usw.), der JS-Code wird innerhalb dieser Komponente geschrieben. Ebenso werden nur die von dieser Komponente verwendeten CSS-Dateien darin eingebunden. Das bedeutet, dass bei Verwendung der Komponente nur die von der jeweiligen Komponente benötigten Dateien ausgeführt werden.

Wie wird dieser Prozess derzeit auf den meisten Webplattformen gehandhabt?

Eine script.js-Datei enthält Code für alles von der Mitgliedschaft über Filter und Warenkorbseiten bis hin zum Menü, der auf allen Seiten ausgeführt wird. Das Ergebnis? 

Websites mit einem 3 MB JS-Datei und 1.5 MB CSS Datei. Das Hauptproblem sind nicht nur die Dateigrößen, sondern auch die Tatsache, dass man von der CPU eines durchschnittlichen Android-Mobilgeräts nicht erwarten kann, Tausende von Codezeilen innerhalb von Millisekunden auszuführen. Indem Sie nur den Code ausführen, den Sie benötigen, können Sie die Leistung steigern.

Wie lassen sich renderblockierende Ressourcen eliminieren?

Heute verwenden 32 % der 1 Million Top-Websites die Font Awesome-Schriftbibliothek, die durchschnittlich etwa 250 KB groß ist. Da asynchrones Laden aufgrund des Flick-Effekts nicht zu empfehlen ist, sollten Sie sich einmal überlegen, wie viele Schriftarten auf dem ersten Bildschirm einer Seite sichtbar sind, wenn diese auf einem Mobilgerät oder Desktop geöffnet wird. Eine kurze Studie auf 50 verschiedenen Plattformen ergab, dass durchschnittlich 3.4 Symbole verwendet werden (am häufigsten: Einkaufswagen, Benutzer, Menü, Benachrichtigung). Um also nur vier Symbole problemlos zu laden, laden wir die gesamte Bibliothek.

Und wie schaffen das fortgeschrittene JS-Frameworks? Sie importieren lediglich das SVG-Format der in der jeweiligen Komponente verwendeten Icons, sodass das Laden ganzer Schrift- oder CSS-Bibliotheken entfällt.

Was sagen uns die Verwendung von Bootstrap im Vergleich zu React JS?

Die Bootstrap JS-Bibliothek hat einen Marktanteil von 26 % auf allen Websites weltweit, während die Nutzung von React bei etwa 4 % liegt. Bootstrap ist beliebt für seine Flexibilität und Benutzerfreundlichkeit, die eine schnelle Entwicklung ermöglicht. Diese Flexibilität hat jedoch ihren Preis: Allgemeine JS-Funktionen, umfassende Codeabdeckung und Funktionen für Features, die Sie möglicherweise nie verwenden, sind in Ihrem Projekt enthalten.

Stellen wir uns also die Frage: Was bedeutet eine Steigerung der Nutzung um mehr als 100 % gegenüber Top 10,000 bis Top 1,000 Websites zeigen? Es zeigt, dass die Besten Details zu ihrem Vorteil nutzen, um noch besser zu werden.

Zusammenfassend: Anstatt unsere Websites mit Technologien wie Weiter, Nuxt, Angular, React, Vueusw. sollten wir verstehen, was diese Technologien in Bezug auf die Geschwindigkeit richtig machen, und diese Best Practices auf unsere Webanwendungen anwenden.