In diesem Beitrag sehen wir uns an, wie Vue, React und Angular im Hinblick auf die Leistung verglichen werden und was getan werden kann, um eCommerce-SPAs zu optimieren, die auf diesen Frontend-Frameworks ausgeführt werden, um ein optimales Benutzererlebnis zu erzielen.
Wie vergleichen sich Angular, React und Vue im Hinblick auf die Leistung
Der Betrieb einer schnellen Website führt durch ein besseres SEO-Ranking, mehr Besucher, längere Sessions und somit zu mehr Umsatz zu einem Wachstum. Viele E-Commerce-Führungskräfte, die die Rolle von Geschwindigkeit verstehen, haben sich bereits auf eine kopflose Commerce-Architektur umgestellt, die die Einführung moderner Frontends wie fortschrittlicher Web-Apps und SPAs ermöglicht. Leichte SPA-Frontends gewinnen an Beliebtheit, da sie eine sichere Möglichkeit darstellen, verschiedene Leistungsprobleme moderner eCommerce-Plattformen zu lösen, sodass Betreiber blitzschnelle Ladenfronten bereitstellen können.
Nun, das ist die Theorie. Um diese hohen Ansprüche zu überprüfen, haben wir eine kleine interne Leistungsanalyse durchgeführt. Zu diesem Zweck haben wir fast 2.000 beliebte E-Commerce-Websites getestet, die auf den führenden Frontend-Frameworks ausgeführt werden, und ihre Leistung anhand von Lighthouse 6-Scores bewertet. Die Ergebnisse waren überraschend – der durchschnittliche Lighthouse-Score für die getesteten SPA-Frontends betrug nur 24, mit einem Median von 19 (von 100)! So niedrig es klingt, lag dies nach wie vor 26 % über dem Durchschnittswert der 500 führenden Internet-Einzelhändler in den USA nach Umsatz.
Die Vue.js-Websites waren am schnellsten, mit einem Durchschnittswert von 27 und einem Median von 20. Bei den Websites von Angular betrug der Durchschnitt 23, ihre Leistungsbewertungen waren jedoch mit einem Median von nur 18 verstreut. React-Websites waren mit einem durchschnittlichen Lighthouse-Score von 22 und einem Median von 18 am langsamsten getestet. Dies war überraschend, zumal das Framework von einigen der größten Spieler genutzt wird, darunter Websites wie PayPal, Grammarly und Vimeo, um nur einige zu nennen.
Die Schlussfolgerung des Tests war ziemlich klar: Obwohl SPAs schneller sind als herkömmliche Websites, gibt es noch Raum für Verbesserungen. Darüber hinaus verfolgen Google Crux und andere Messwerkzeuge die Seitenübergänge von Single-Page-Anwendungen (SPAs) nicht, sie werden falsch als viel langsamer dargestellt als sie sind und ihre Punktewerte bestrafen. Wir schreiben mehr über dieses Thema in einem anderen Beitrag auf dem Blog.
Die Auswirkungen von Startzeit und Laufzeitleistung auf die Ergebnisse von Lighthouse
Die Leistung von Apps wird durch zwei Kennzahlen definiert: Startzeit und Laufzeitleistung. Die Größe des Code-Bundles beeinflusst in erster Linie den ersten, d. h. den App-Code und den Framework-Code zusammen. Die Laufzeitleistung hängt von den spezifischen Optimierungsfunktionen des Frameworks und der Art und Weise ab, wie DOM-Manipulation und -Aktualisierung verarbeitet werden.
Bündelgröße
Alle drei Frameworks verfügen über ähnlich große, minimale Codepakete. Obwohl sich die Paketgröße des Frameworks auf die Startzeit auswirkt, sollte die Metrik beim Vergleich der Leistung von Angular, React und Vue nicht im Mittelpunkt stehen.
Genauer gesagt ist die Winkelbündelgröße nur geringfügig größer als die Bündelgrößen Vue und React, wobei Vue Bündel etwas kleiner sind als React Bündel. Es ist auch erwähnenswert, dass das Angular-Entwicklungsteam die Größe seiner (Quell-)Code-Pakete kontinuierlich optimiert.
Die ungefähren Zahlen finden Sie in der Tabelle unten.
TTI- und LCP-Messwerte von Lighthouse
Lighthouse ist ein großartiges Testwerkzeug, das wertvolle Einblicke in die Geschwindigkeit liefert. Es identifiziert mögliche Leistungsprobleme und hilft, die verschiedenen Aspekte einer Website zu optimieren. Ein Lighthouse-Score wird auf der Grundlage eines gewichteten Durchschnitts mehrerer Metriken berechnet (hier finden Sie eine vollständige Zusammenfassung). Dennoch sind die größten Contentful Paint (LCP), Time To Interactive (TTI) und Cumulative Layout Shift (CLS) aus der Sicht des Benutzers sehr wahrscheinlich die wichtigsten. TTI und LCP sind direkt mit wahrgenommener Lastgeschwindigkeit verbunden. TTI ist eine gute Darstellung der Auswirkungen der Paketgröße eines Frameworks auf die Geschwindigkeit des SPA, da das Paket vollständig bewertet werden muss, bevor ein Benutzer mit der App interagieren kann. Websites mit einem langen TTI zeigen beim Laden verschiedene Teile der Website an, erlauben den Benutzern jedoch nicht, mit der Website zu interagieren, was letztendlich zu Frustration führen kann. Die LCP-Metrik hingegen misst, wie lange es dauert, bis das größte Element des Seiteninhalts auf dem Bildschirm wiedergegeben wird.Echte Browserdaten von Lighthouse im Vergleich zu Crux
Es ist erwähnenswert, dass synthetische Geschwindigkeitsmessgeräte (wie Lighthouse) nicht die ganze Geschichte erzählen. Bei der Geschwindigkeit der Website geht es mehr darum, wie sich die Website „anfühlt“, wenn die Nutzer sie durchsuchen. Eine Lighthouse Performance-Punktzahl ist ein guter Bezugspunkt, aber sie ist etwas willkürlich und schwer mit einem realen Erlebnis zu korrelieren. Beispielsweise ist es schwer zu übersetzen, wie viel besser eine Leistungsbewertung von 60 im Hinblick auf die Benutzererfahrung wäre, verglichen mit einer Bewertung von 50. Synthetische Tests neigen auch dazu, ältere Geräte und Verbindungen zu simulieren (z. B. Lighthouse simuliert 3G-Verbindungen), während sich die meisten mobilen Nutzer in schnellen LTE- oder sogar 5G-Netzen befinden. Eine Website, die auf einem bestimmten Framework ausgeführt wird, kann sich schneller „anfühlen“, verliert aber an andere Standorte hinsichtlich ihrer Rohleistung und umgekehrt. Dies ist hauptsächlich auf bestimmte Tricks (z. B. Lazy Loading) zurückzuführen, die jedes Framework verwendet, um zu verbessern, wie schnell sich die Website für die Nutzer anfühlt. In den nächsten Abschnitten sehen wir uns die Möglichkeiten an, die die einzelnen Frameworks zur Verbesserung der Website-Performance bieten.Winkel
Angle erweitert den HTML-Code um neue Tags und Attribute und interpretiert die Attribute, um Datenbindung durchzuführen. Aufgrund ihrer umfangreichen Funktionen kann die funktionierende Anwendung im Vergleich zu Vue oder React viel größer sein (ca. 500 KB), was sich leicht auf die Leistung auswirken kann.
Angle’s MVC Abstraktion (Quelle)
Hier finden Sie eine kurze Zusammenfassung der wichtigsten Vorteile von Angular.
- Codegenerierung. Angular generiert hochoptimierten Code für virtuelle JavaScript-Maschinen und bietet so die Vorteile von handgeschriebenem Code. HTML-Vorlagen in Kombination mit JavaScript öffnen die Tür für unmögliche Optimierungen in anderen Frameworks, z. B. React.
- Code-Splitting. Dank Component Router können Angular-Apps schnell geladen werden und ermöglichen eine automatische Codeaufteilung. Auf diese Weise laden Benutzer den Code, der für die Wiedergabe der angeforderten Ansicht erforderlich ist.
- Reales DOM. Angle verwendet echtes DOM. Daher eignet es sich am besten für einseitige Anwendungen, bei denen Inhalte nur von Zeit zu Zeit aktualisiert werden, nicht für häufig geänderte Inhalte, wie z. B. die meisten E-Commerce-Websites. Das virtuelle DOM kann viel schneller bearbeitet werden, da nichts auf dem Bildschirm gezeichnet wird.
Reagieren
React wurde von Facebook entwickelt und ist eines der beliebtesten Open-Source-Frameworks für mobile Anwendungen. Es bietet keine große Auswahl an Bibliotheken, daher ist seine Größe deutlich kleiner als die von Angular.
Mit Daten aus einer Richtung ermöglicht React eine bessere Kontrolle über das Projekt. Beim Entwurf einer App können React-Entwickler untergeordnete Komponenten in übergeordneten Komponenten höherer Ordnung verschachteln.
React bietet einige interessante Funktionen, darunter:
- Virtuelles DOM: Knoten werden nur nach Bedarf neu gerendert. React vergleicht die neuen Daten mit dem ursprünglichen DOM und aktualisiert die Ansicht automatisch. Dadurch wird die Leistung von Anwendungen aller Größen verbessert, die regelmäßig aktualisiert werden müssen.
- Einseitige Datenbindung: React verwendet einseitige Datenbindung mit der Anwendungsarchitektur von Flux Controls. ReactJS hilft beim Aktualisieren der Ansicht für den Benutzer, und Flux steuert den Anwendungs-Workflow. Das virtuelle DOM bietet Vorteile, da es die neuen Daten mit dem ursprünglichen DOM vergleicht und die Ansicht automatisch aktualisiert.
- Unterstützung für Bündelung und Baumschütteln: Minimiert die Ressourcenbelastung des Endbenutzers.
- Serverseitiges Rendering (SSR)-Unterstützung: Bietet Geschwindigkeitssteigerungen bei bestimmten Implementierungen.
In größerem Umfang als Angular und Vue verwendet React bestimmte Techniken, die den Endbenutzern die Seite schneller „anfühlen“. Beispiel: Das Framework priorisiert Benutzereingaben gegenüber der Wiedergabe von Inhalten auf der Seite.
Vue
Vue ist mit nur 30 KB (gzipped) schnell und sehr klein, was zu schnelleren ersten Ladevorgängen führt. Dies macht es zum kleinsten aller drei Frameworks und beschleunigt die Performance von Websites, die auf Vue ausgeführt werden.
Vue bietet:
- Serverseitiges Rendering (SSR)
- Baumschütteln
- Bündelung
- Virtuelles DOM: Änderungen innerhalb eines Projekts wirken sich nicht richtig auf das DOM aus. Das Ändern des realen DOM ist eine ressourcenintensive Aufgabe, daher werden Aktualisierungen zuerst auf das virtuelle DOM angewendet.
In diesem ausführlichen Benchmark-Bericht können Sie Startzeiten, Speicherzuweisung und Dauer bestimmter Vorgänge in den führenden JavaScript-Frameworks und -Bibliotheken vergleichen. Im Vergleich zu React ist Vue etwas besser in Bezug auf Speicherzuweisung und Startzeiten, obwohl React in Bezug auf die Laufzeit etwas schneller ist.
Angular und Vue verwenden HTML-Vorlagen in Kombination mit JavaScript. Dies gibt ihnen zusätzlichen Spielraum für die Optimierung, die React nicht bietet. Beispielsweise verfolgt Vue Abhängigkeiten, um unnötige Renderings von untergeordneten Komponenten zu verhindern.
VUE vs. React vs. Angular SPA Optimierung
Wir wissen, dass Benchmarks und Leistungsbewertungen nicht die ganze Geschichte erzählen. Die Geschwindigkeit der Website kann je nach Anwendungsgröße und Optimierungsbemühungen variieren. Im Folgenden finden Sie einige Ideen zur Optimierung von Vue, React und Angular SPAs im Hinblick auf Geschwindigkeit.
1. Serverseitiges Rendering (SSR)
Insgesamt gibt es vier Hauptvorteile der Verwendung von SSR mit SPA-Standorten:
- Mit SSR können Sie schnell eine SPA-Vorlage laden und dem Benutzer Inhalte anzeigen (obwohl der Benutzer möglicherweise nicht sofort mit ihr interagieren kann). Ohne SSR würden Benutzer auf einen leeren Bildschirm blicken und darauf warten, dass der Inhalt im Browser geladen und gerendert wird.
- SSR reduziert die Belastung des Endbenutzers.
- Da Google SPA-Inhalte jetzt richtig durchsuchen kann, ist das serverseitige Rendering für SEO möglicherweise nicht mehr so wichtig wie früher. Der Vorteil der Verwendung von SSR ist jedoch, dass viele andere Suchmaschinen JavaScript noch immer nicht verstehen und JavaScript-schwere Seiten nicht richtig crawlen können.
- Soziale Netzwerke können Inhalte, die von Client-gerendeten SPA-Sites geteilt wurden, oft nicht richtig anzeigen. Facebook Scraper verwendet beispielsweise nur die vom Server festgelegten Metatags und funktioniert nicht mit clientseitig gerenderten Metatags. Um besser kontrollieren zu können, wie Ihre SPA-Website aussieht, wenn sie über Open Graph freigegeben wird, ist SSR ein muss.
- AMP beschleunigt die ersten Ladevorgänge auf mobilen Geräten, erlaubt Ihnen jedoch nicht, JavaScript zu verwenden. Es ist unmöglich, AMP aus React auf dem Client zu rendern, sondern muss auf dem Server erfolgen. Doch selbst mit SSR gibt es viele Möglichkeiten, eine React App in eine gültige AMP-App zu verwandeln. Glücklicherweise können einige Frontend-Frameworks, wie React Storefront, alles für Sie erledigen.
SSR eignet sich am besten für statische Websites, aber E-Commerce-SPA-Websites können weiterhin gecacht werden – mit der richtigen Infrastruktur. Mit Layer0 wird der Inhalt auf der Fly-Server-Seite gerendert und dann an der Edge mit unserem CDN-AS-JavaScript zwischengespeichert. Auf diese Weise können große datenbankgestützte Websites, wie z. B. eCommerce-SPAs mit Tausenden, wenn nicht Millionen von Seiten, Personalisierung, Inventar in Echtzeit und mehr, Benutzer von der Landung bis zur Kasse mit Seitenladezeiten in weniger als einer Sekunde begeistern.
Der CDN-AS-JavaScript-Servicearbeiter (Layer0 Workers) ruft dynamische Daten intelligent von der Edge ab, bevor der Besucher auf einen Link tippt und streamt sie in den Browser, je nachdem, worauf er höchstwahrscheinlich tippen wird.
Layer0-Netzwerk- und Überwachungstools stellen sicher, dass dynamische Daten mindestens 95 % der Zeit zwischengespeichert werden und schützen Ihre Datenbank vor zusätzlichen Anforderungen, die durch das Prefetching erstellt werden. Auf diese Weise können Sie Seiten innerhalb von weniger als einer Sekunde laden und Ihren Besuchern ein nahtloses Erlebnis von der Landung bis zur Kasse bieten.
Layer0 Netzwerk- und Überwachungstools
Hinsichtlich der SSR-Funktionen und der detaillierten Dokumentation ist Vue React überlegen, da Bibliotheken von Drittanbietern (z. B. Next.js) zum Rendern der Seiten serverseitig erforderlich sind.
2. AMPERE
AMP schafft bessere, schnellere Erlebnisse im mobilen Web, indem HTML vereinfacht und strenge Einschränkungen für CSS und JavaScript durchgesetzt werden. Diese Seiten werden dann zwischengespeichert und auf dem Google-Server vorgerendert, wodurch der Übergang zu Ihrer App nahezu sofort erfolgt.
Der Nachteil ist, dass es sich von der Art unterscheidet, wie Sie eine PWA/SPA schreiben und bedeutet, dass die App vollständig neu geschrieben wird, es sei denn, Sie verwenden ein dediziertes Framework mit integrierter AMP-Unterstützung, wie React Storefront.
AMP-Seiten haben eine Seitenlast von 500 ms im Median für Traffic aus dem Google SERP. Diese Geschwindigkeiten sind möglich, da Google-Server AMP-Inhalte vorab in den Browser eines Nutzers abholen und vorab auf den Link zur AMP-Seite klicken. Die durchschnittliche E-Commerce-Website erhält einen großen Teil ihres Traffics von Google-Suche (sowohl organisch als auch kostenpflichtig), so dass diese Gewinne enorme Auswirkungen haben können.
Websites, die AMP verwenden, sehen auch geringere Absprungraten, da Benutzer, die normalerweise abspringen, während sie auf das Laden einer Seite warten, jetzt blitzschnell reagieren.
3. Code-Aufteilung
Ihre einseitige Anwendung wächst mit der Zeit, wenn Sie weitere Funktionen hinzufügen. Aber wir wissen, dass jede Anwendung einige Funktionen hat, die kaum verwendet werden und unnötig verlangsamen. Sie sollten Code-Splitting implementieren, um Ihre App so schnell wie möglich zu halten.
Bei der Codeaufteilung werden separate Bundles für jede Komponente der obersten Ebene in Ihrer App erstellt. Im Falle eines eCommerce-SPA gibt es separate Pakete für die Homepage, Produktangebote und Produktbeschreibungen. Wenn ein Benutzer über einen Link zu einem bestimmten Produkt zu Ihrer App gelangt, muss der Browser den Code für alle vorherigen Seiten nicht herunterladen und ausführen, wodurch die TTI- und FID-Zeiten verkürzt werden.
Mit der Codeaufteilung kann die App andere Seitenkomponenten im Hintergrund „lazy-load“ und verwenden, wenn der Benutzer sich entscheidet, in ihnen zu navigieren. Dadurch wird Bandbreite gespart und die erste Eingabeverzögerung oder FID verringert (Hinweis: FID wird oft nach Zeit an interaktive oder TTI-Metriken angenähert). Dadurch wird die Geschwindigkeit Ihrer Website und das Suchmaschinenranking verbessert.
4. Lazy Loading
VUE, React und Angular unterstützen Lazy Loading, was in Kombination mit SSR zu erheblichen Geschwindigkeitsverbesserungen führen kann.
Lazy Loading stellt bei der Implementierung von SSR eine Herausforderung dar. Der Server muss wissen, welche Komponenten verwendet wurden, um den ausgehenden HTML-Code wiederzugeben und den Code für diese Komponenten neben dem HTML-Code zu senden. Andernfalls muss die App im Browser eingehängt und zwei Renderzyklen ausgeführt werden, bevor sie interaktiv sein kann. Dadurch wird FID (und TTI) erhöht, was zu Flash- oder Jank-Effekten führen kann.
Lazy Loading und SSR sind verbunden. Die Bibliothek, die Sie für das Lazy Loading (z. B. React Loadable) auswählen, wirkt sich auf die Generierung des endgültigen HTML aus, das in der Antwort zurückgesendet wird. Um die Bundles zu erfassen, die geladen werden müssen, um die HTML zu hydrieren, die auf dem Server gerendert wurde, müssen Sie <loadable.capture hinzufügen></loadable.capture> in Ihren SSR-Code eingeben und dann die getBundles-Funktion von React Loadable verwenden, um herauszufinden, welches <Skript verwendet wird></Script->Tags müssen dem Dokumentkörper hinzugefügt werden.
Da Lazy Load Client-Hinweise noch nicht global von allen Browsern unterstützt werden, gibt es einige Problemumgehungen, um Lazy Loading nahtlos zu implementieren.
Lösung 1
Anstatt die Bilder serverseitig zu rendern, können Sie sie clientseitig ausfüllen lassen, wenn die App bereitgestellt wird.
Lösung 2
Verwenden Sie für Bilder „unterhalb der Falz“ nur „Lazy Loading“ (Lazy Load), d. h., die Bilder, die Sie kennen, werden nach dem Laden nicht sofort sichtbar. Dies ist schwierig, da sich die Falzlinie je nach Gerät und Anzeigegröße des Benutzers nach oben und unten bewegen kann. Einige Heuristiken helfen jedoch. Auf einer E-Commerce-Kategorieseite können Sie beispielsweise das langsame Laden der ersten Produktbilder deaktivieren (diese werden wahrscheinlich „über dem Falz“ angezeigt). Und für Artikel, von denen Sie wissen, dass sie durchgängig über der Falte liegen (z. B. Kopfzeilen, Firmenlogos, Warenkorbsymbole), sollten Sie Lazy Load ohnehin nicht aktivieren und können sie immer serverseitig rendern.
Lösung 3
Wenn Sie den Benutzer-Agent ermitteln, können Sie eine geeignete Version der SSR-gerendeten Seite bereitstellen. Die Erkennung von Benutzeragenten wird im Allgemeinen nicht für die Implementierung progressiver Verbesserungen empfohlen, aber dies ist eine vorübergehende Problemumgehung, während Browser Client-Hinweise aufholen und implementieren.
Diese Lösung erfordert, dass Sie Ihre Cache-Schlüssel entsprechend normalisieren, da Sie andernfalls den Cache erheblich fragmentieren könnten.
5. Modernes CDN
Die Optimierung Ihres SPA für Geschwindigkeit und die Verwendung eines guten CDN-Systems wird Ihre Website verbessern, aber es reicht nicht aus, um Geschwindigkeiten von weniger als einer Sekunde zu erreichen. Das liegt daran, dass die meisten herkömmlichen CDNs nur im Zwischenspeichern statischer Dateien gut sind, aber insgesamt sind sie nicht so gut mit JSON/HTML/SSR-Daten zurechtgekommen – wohingegen genau das ist, woraus eCommerce SPA-Websites bestehen. Um diese Websites schneller zu gestalten, müssen mehrere Webtechnologien effizient und unisono arbeiten. Im Gegensatz zu anderen CDNs funktioniert das Layer0-anwendungsfähige CDN gut mit eCommerce-SPAs. Es optimiert die Cache-Trefferquoten auf unerreichte Ebenen und bringt Intelligenz an die Peripherie. Dies hilft Geschäftsinhabern, Trends und Optimierungsmöglichkeiten zu entschlüsseln, indem ähnliche Seiten als solche kategorisiert werden (z. B. PDP, PLP und Cart), anstatt nur eine endlose Liste von URLs anzuzeigen. So können Sie Maßnahmen ergreifen und Unterschiede bei den Ladezeiten der Website erkennen.
Am wichtigsten ist jedoch, dass CDN-as-JavaScript fortschrittliche Prefetching-Techniken verwendet, um gecachte Daten von der Edge in die Browser der Benutzer zu streamen, bevor sie auf etwas tippen. So bleiben Websites 5 Sekunden vor dem Tippen der Käufer, sodass sie die Nutzer sofort mit einem Surferlebnis begeistern können.
6. Mobile Werkzeuge
Angular eignet sich hervorragend für die Entwicklung mobiler Apps. Mit dem Framework können Sie eine Webanwendung erstellen, die auf jedem Gerät ausgeführt wird, oder native iOS- und Android-Apps entwickeln, indem Sie Angular mit NativeScrip kombinieren. Auf diese Weise können Sie Winkelkonzepte wie Datenbindung, Abhängigkeitsinjektion, Services und Routing wiederverwenden.
React Native gilt als König der plattformübergreifenden Entwicklung. Es ermöglicht Entwicklern, bis zu 99 % des JavaScript-Codes zwischen Android und iOS mit reaktionsähnlichen Komponenten wiederzuverwenden. Das bedeutet, dass Entwickler 100 % native Widgets erstellen können, die ihren eigenen Stil steuern. Das Framework verarbeitet die Ansichtsebene als reine Statusausgabe, wodurch es einfach ist, begleitende Apps für iOS/Android mit nativem Aussehen und Leistung zu erstellen.
Obwohl Vue React hinterherhinkt, bietet es dennoch mehrere wertvolle Lösungen für die mobile Entwicklung. Mit NativeScript können Sie beispielsweise Vue-Anwendungen schreiben und in native iOS-/Android-Apps kompilieren.
Dann kommt Vue Native. Das Framework kombiniert die Vorteile von Vue- und RN-Ökosystemen, deklaratives Rendering, bidirektionale Bindung und eine Reihe von grundlegenden Komponenten für die Erstellung einer plattformübergreifenden nativen App.
Spas sind schneller, haben aber immer noch Geschwindigkeitsprobleme
Der ursprüngliche Reiz einer einseitigen Anwendung besteht darin, dass nachfolgende Seiten während der Navigation nicht neu geladen werden, was zu einem schnelleren, reibungslosen Browsererlebnis führt. Moderne SPA-Frontends sind jedoch nur ein Teil der Lösung für die Standortgeschwindigkeit, und einige Probleme müssen noch gelöst werden:
- Synthetische Geschwindigkeits-Benchmarks und Tests erzählen nicht unbedingt die ganze Geschichte. Die Geschwindigkeit dieser Frameworks kann je nach Anwendungsgröße und Optimierungsbemühungen variieren.
- Während verschiedene hochmoderne Frontend-Technologien, einschließlich fortschrittlicher Web-Apps, SPAs und AMP, die Kundenerfahrung erheblich verbessern können, ist die Geschwindigkeit der Website ein Problem, das voll ausfallen kann. Sie umfasst Browser, Edge und Server. Deshalb ist eine Komplettlösung erforderlich, um Websites, SPA und mehrseitige Anwendungen zu beschleunigen.
- All diese Technologien können die Geschwindigkeit verbessern, funktionieren aber am besten, wenn sie gemeinsam eingesetzt werden. Das Zusammenwirken all dieser Technologien ist eine komplexe Aufgabe, die die internen Teams möglicherweise nicht bewältigen können (z. B. muss eine Node.js-Ebene erstellt werden).
Layer0: Das Web sofort und einfach machen
Layer0 ist eine Komplettlösung für die schnelle und einfachere Entwicklung von E-Commerce-Websites. Es kombiniert fortschrittliche Optimierungstechniken zur Beschleunigung großer datenbankgestützter Websites, wie z. B. eCommerce-SPAs, mit leistungsstarken Tools, die Entwicklern jeden Tag die Woche zur Verfügung stellen, indem sie den Code in den Mittelpunkt ihrer Workflows stellen. Layer0 bringt JAMstack im Wesentlichen auf großen E-Commerce-Websites.
Sofort: Durch die Kombination moderner Frontends mit einem CDN-as-JavaScript mit einer Cache-Trefferquote von 95 % für dynamische Inhalte an der Peripherie und einem Node.js-Backend-for-Frontend unterstützt Layer0 komplexe Websites bei der Optimierung der Geschwindigkeit im gesamten Stack. Es ist die einzige Plattform, die für große E-Commerce-Websites mediane LCP-Zeiten (Content Paint) von weniger als der zweiten Hälfte garantiert.
Einfach: Layer0 (jetzt Edgio) ist Ihre All-in-One-Plattform zum entwickeln, Bereitstellen, Vorschauen, Experimentieren, Überwachen und Ausführen des Frontends, mit dem Sie:
- Verwenden Sie JAMstack für eCommerce sowohl vor als auch nach Just-in-Time-Rendering
- Ermöglichen Sie eine latenzfreie Netzwerkverbindung durch Vorabruf von Daten aus Ihren Produktkatalog-APIs
- Konfigurieren Sie Edge nativ in Ihrer App (CDN-AS-JavaScript)
- Kantenregeln lokal und im Vorfeld ausführen
- Erstellen Sie Vorschau-URLs aus GitHub, GitLab oder Bitbucket mit jedem neuen Zweig und Push
- Führen Sie Splits an der Peripherie für leistungsstarke A/B-Tests, kanarische Bereitstellungen und Personalisierung aus
- Serverloses JavaScript, das viel einfacher und zuverlässiger ist als AWS Lambda
Schlussfolgerung
Eine schnellere Website zu betreiben, ist nicht nur ein schickes Spielchen. Am Ende des Tages versuchen Sie nicht nur, Ihre Benutzer zu begeistern, sondern auch, die größte Suchmaschine der Welt zu befriedigen. Da das Ranking von Google bald zum Teil von der Seitengeschwindigkeit bestimmt wird, kann es nicht leicht genommen werden. Eine schnelle Website bedeutet, dass Ihre SEO-Rangliste und -Conversions gesteigert werden, was wiederum zu mehr Umsatz führt.
Über die Leistung der einzelnen Frameworks kann zwar viel gesagt werden, aber es gibt drei Punkte, die man beachten sollte:
- Die Unterschiede in der tatsächlichen Framework-Leistung sind möglicherweise winzig. Die Leistung von SPA-Websites hängt von so vielen Variablen ab, dass es unmöglich ist, diese Frameworks nebeneinander auf sinnvolle Weise zu vergleichen.
- Egal, ob Sie Angular, Vue oder React verwenden, es gibt immer noch viel Raum für Verbesserungen.
Um SPAs schneller zu machen, ist eine Kombination fortschrittlicher Webtechnologien erforderlich, die gemeinsam funktionieren. Ihre internen Teams können diese möglicherweise nicht effizient implementieren. Glücklicherweise haben einige zukunftsorientierte Anbieter, einschließlich Layer0, die schwere Arbeit für Sie erledigt.
Layer0 kombiniert serverseitiges Rendering mit erweitertem Prefetching und Pre-Caching an der Peripherie. Da dynamische Daten mindestens 95 % der Zeit gecacht werden, ist Ihre Datenbank vor den zusätzlichen Anforderungen geschützt, die durch Prefetching erstellt werden. Layer0 CDN-AS-JavaScript Service Worker ruft Ihre dynamischen Seiten intelligent ab, bevor Ihr Besucher auf einen Link tippt. Auf diese Weise können Sie Seiten in nur einer Sekunde laden und Ihren Besuchern eine nahtlose Erfahrung von der Landung bis zur Kasse bieten.
