Wenn sich ein Shop langsam anfühlt, geben wir meist zuerst schweren Bildern oder einem überladenen Theme die Schuld. Doch eine Sache übersehen die wenigsten: wie eine Menü-App die Ladegeschwindigkeit beeinflusst. Das Menü sitzt ganz oben auf der Seite und gehört damit zu den ersten Dingen, die der Browser verarbeiten muss. Eine Navigations-App, die nicht sorgfältig gebaut ist, kann den gesamten Shop ausbremsen.
Dieser Artikel hat zwei Teile. Der erste behandelt die Mechanik: warum eine Menü-App die Dinge verlangsamt. Der zweite behandelt die Warnzeichen, damit du deinen eigenen Shop prüfen kannst, statt zu raten.
Warum eine Menü-App die Shop-Geschwindigkeit beeinflusst
Auf den ersten Blick ist eine Menü-App nur eine Handvoll Buttons. Doch im Hintergrund lädt sie meist JavaScript, Schriften, Icons und Bilder nach. Jedes davon hat seinen Preis bei der Geschwindigkeit. Hier sind die vier häufigsten Ursachen.
Schweres JavaScript, das laufen muss, bevor das Menü erscheint
Viele Menü-Apps bauen ihre Oberfläche mit JavaScript auf. Wenn eine Kundin die Seite öffnet, muss der Browser die Datei herunterladen, parsen und dann ausführen — erst danach erscheint das Menü.
Je schwerer das JavaScript, desto länger dauert dieser Schritt. Auf einem leistungsstarken Computer bemerkst du ihn kaum. Aber die meisten Käufer kaufen auf ihrem Handy, und Mittelklasse-Smartphones verarbeiten JavaScript deutlich langsamer. Eine Datei von ein paar hundert KB ist auf einem Desktop im Nu da, auf einem günstigen Android-Handy kann sie aber eine ganze Sekunde brauchen.
Für einen Shop ist diese eine Sekunde Zeit, in der die Kundin auf einen leeren Bildschirm starrt, ohne ein Menü zum Antippen.
Render-Blocking: Die App hält die ganze Seite auf, während sie auf das Menü wartet
Dieser Punkt wird oft übersehen. Laut Googles Dokumentation ist JavaScript standardmäßig parser-blockierend: Während der Browser die Seite aufbaut und auf ein Script-Tag stößt, muss er anhalten, dieses Script erst fertig ausführen und erst dann mit dem Aufbau fortfahren.
Das nennt man Render-Blocking. Eine Menü-App, die ihr Script an einer schlechten Stelle platziert und das async- oder defer-Attribut nicht nutzt, kann das Rendern der gesamten Seite blockieren — nicht nur das des Menüs.
Das Ergebnis in der Praxis: Eine Kundin klickt auf einen Produktlink, doch die Seite friert kurz ein, weil sie darauf wartet, dass das Menü-Script fertig wird. Sie sieht weder das Bild noch den Preis, gar nichts. Dabei sollte gerade das, was wirklich schnell laden muss, der verkaufende Inhalt sein, nicht die Menüleiste.
Jedes Icon, jede Schrift und jedes Bild ist eine HTTP-Anfrage
Ein schönes Menü kommt oft mit Icons aus einer eigenen Schrift, manchmal sogar einem Hintergrundbild oder einem Logo für jeden Eintrag. Jede Ressource ist eine HTTP-Anfrage — ein Hin und Her, bei dem der Browser den Server bittet, eine Datei zu senden.
Jede Anfrage braucht Zeit, um die Verbindung aufzubauen und auf eine Antwort zu warten. Zehn Icons bedeuten zehn Hin- und Rückwege. Kommt noch eine eigene Schrift nur für das Menü dazu, wird die Liste länger. Jede einzelne ist klein, aber zusammen summiert es sich — besonders für Kunden mit einer schwachen 3G-/4G-Verbindung in einer Gegend mit schlechtem Empfang.
Ein schlankes Menü, das Inline-SVG-Icons oder die ohnehin auf dem Gerät vorhandene Systemschrift nutzt, kann eine ganze Reihe dieser Anfragen einsparen.
CLS: Ein spät ladendes Menü verschiebt das Layout
CLS (Cumulative Layout Shift) ist eine der Core-Web-Vitals-Metriken von Google. Sie misst, wie stark sich die Oberfläche während des Ladens verschiebt. Laut Google liegt ein guter Schwellenwert bei einem CLS unter 0,1.
Ebenfalls laut Google entsteht CLS häufig, wenn JavaScript spät Inhalte in die Seite einfügt und bestehende Elemente nach unten schiebt. Eine Menüleiste oder ein Navigationsbanner, das nach dem Hauptinhalt lädt, ist ein klassisches Beispiel: Es erscheint, beansprucht Platz und schiebt alles darunter nach unten.
Beim Einkaufen ist dir das vermutlich schon passiert: Du willst gerade auf „In den Warenkorb” tippen, doch genau in dem Moment springt das Menü herein, das Layout verschiebt sich, und du tippst stattdessen auf die falsche Stelle. Das ist CLS — ärgerlich und ein Grund, warum Kunden gehen.
Anzeichen dafür, dass dein Menü den Shop ausbremst
Jetzt, wo du die Mechanik verstehst, kommt der praktische Teil: wie du erkennst, ob deine Menü-App Probleme verursacht. Du brauchst kein tiefes technisches Wissen, nur ein paar kostenlose Tools.
PageSpeed Insights ausführen
Geh auf pagespeed.web.dev, füge deine Shop-Adresse ein und klick auf Analysieren. Dieses Google-Tool bewertet deine Seite und listet Probleme in zwei Bereichen auf: Empfehlungen (Opportunities) und Diagnose (Diagnostics).
Achte auf Zeilen, die renderblockierende Ressourcen oder die Reduzierung der JavaScript-Ausführungszeit erwähnen. Wenn ein Dateiname oder eine Beschreibung von Navigation, Menü oder Drawer spricht, ist die Wahrscheinlichkeit hoch, dass die Menü-App mit zur Verlangsamung beiträgt.
Führe sowohl den Mobile- als auch den Desktop-Modus aus. Der Mobile-Wert ist meist niedriger und näher an der tatsächlichen Erfahrung deiner Kunden, da die meisten von ihnen auf dem Handy kaufen.
Den Network-Tab in den Chrome DevTools nutzen
Öffne deinen Shop in Chrome, drück F12, um die DevTools aufzurufen, und wähl den Network-Tab. Lade die Seite neu und filtere dann nach dem Typ JS, um nur JavaScript-Dateien zu sehen.
Die erscheinende Tabelle zeigt, wie schwer jede Datei ist und wie lange sie braucht. Such nach Dateien mit Namen, die deiner Navigations-App ähneln. Wenn eine Menü-Datei ein paar hundert KB wiegt und eine Weile braucht, bis sie fertig geladen ist, ist das ein handfester Beleg statt einer Vermutung.
Ein kleiner Tipp: Die DevTools bieten Optionen, um ein langsames Netzwerk (Throttling) und eine schwache CPU zu simulieren. Schalte sie ein, um das Gerät eines echten Kunden nachzustellen, und du siehst Zahlen, die der Realität viel näher kommen als die deiner eigenen Maschine.
Werte vor und nach der Installation der App vergleichen
Der ehrlichste Ansatz ist, vorher und nachher zu messen. Bevor du eine neue Menü-App installierst, führe PageSpeed Insights aus und notiere den Wert sowie die Metriken LCP, INP und CLS. Nachdem du die App installiert und das Menü gebaut hast, führe es erneut aus und vergleiche.
Laut Google liegen die guten Schwellenwerte bei LCP unter 2,5 Sekunden, INP unter 200 Millisekunden und CLS unter 0,1. Wenn nach der Installation der App der LCP steigt oder der CLS über 0,1 springt, kostet dich diese App Geschwindigkeit.
Das ist wichtig, denn der durchschnittliche Shop läuft nicht mit nur einer App. Laut Daten, die viele Quellen zitieren, hat ein typischer Shopify-Shop rund sechs Apps installiert, und manche Shops nutzen bis zu dreißig. Jede App fügt ein wenig Last hinzu, und zusammen ergibt das eine Zahl, die nicht klein ist. Und Geschwindigkeit hängt direkt damit zusammen, wie viele Menschen die Seite verlassen — bei einer durchschnittlichen Warenkorbabbruchrate, die laut Baymard Institute ohnehin schon bei etwa 70 % liegt, kann jede zusätzliche Sekunde diese Zahl verschlechtern.
Wähle eine Menü-App, der Geschwindigkeit wichtig ist
Nicht jede Menü-App bremst die Dinge aus. Die Frage ist, ob die App mit Blick auf Geschwindigkeit gebaut wurde: schlankes JavaScript, kein Render-Blocking, wenige unnötige Anfragen und reservierter Platz für das Menü, damit es das Layout nicht verschiebt.
Genau das hat für uns oberste Priorität beim Bau von Navi+. Navi+ baut Menüs ganz ohne Code für Shopify und jede beliebige Website — Tab Bar, Mega Menu, Slide Menu, FAB, Grid Menu — mit getrennten Konfigurationen für Mobil und Desktop, und es ist so optimiert, dass es deine Core Web Vitals nicht nach unten zieht. Du solltest trotzdem selbst messen, mit den Schritten von oben, vorher und nachher; das ist die zuverlässigste Art, es zu überprüfen.
Kurz gesagt: Die Menü-App ist Teil des Erlebnisses, aber lass sie nicht heimlich deinen ganzen Shop ausbremsen. Ein paar Minuten mit PageSpeed Insights und ein Blick in den Network-Tab geben dir eine klare Antwort.
Dieser Artikel ist Teil des größeren Leitfadens Navigation und Ladegeschwindigkeit — eine Menü-App wählen, die deinen Core Web Vitals nicht schadet.