Anleitung
Deine Website ist auf dem Handy langsam: Ursachen und Lösung
Finde heraus, was deine Seite auf dem Handy ausbremst, und behebe es Schritt für Schritt. Das Messen dauert Minuten, und die ersten Massnahmen brauchen keinen Entwickler.
Die kurze Antwort
Eine Website ist auf dem Handy aus ein paar immer gleichen Gründen langsam: Fotos, die viel grösser sind, als der Bildschirm braucht, zu viele Skripte und Plugins, fremde Widgets, die als Letztes laden, und Inhalte, die springen, weil kein Platz für sie reserviert wurde. Miss zuerst, auf einem echten Handy und mit PageSpeed Insights. Dort siehst du drei Werte: LCP, INP und CLS. Googles Zielwerte für „gut“ sind LCP bis 2,5 Sekunden, INP bis 200 Millisekunden und CLS bis 0,1, bei mindestens drei von vier Besuchen. Behebe dann nach Wirkung geordnet: Bilder verkleinern und komprimieren, das Hauptbild zuerst laden, Unbenutztes entfernen, fremde Widgets verzögern und Platz für Bilder und Einbettungen reservieren. Es lohnt sich: Laut Google/SOASTA-Studie ist die Wahrscheinlichkeit, dass ein mobiler Besucher abspringt, um 32 % höher, wenn eine Seite 3 Sekunden statt 1 Sekunde zum Laden braucht.
In unter einer Minute gesehen
Ein kurzes Video zum Problem und seiner Lösung. Die Untertitel sind im Video.
In dieser Anleitung
Für wen diese Anleitung ist
Du betreibst eine Website, und auf dem Handy fühlt sie sich träge an: Die Seite bleibt eine Weile leer, der Text springt, während etwas nachlädt, oder ein Menü reagiert verspätet, wenn man darauf tippt. Vielleicht sieht alles auf deinem Laptop gut aus, und ein Besucher oder eine Kollegin sagt dir etwas anderes. Oder ein Geschwindigkeitstest ist rot ausgefallen, und du weisst nicht, wo du anfangen sollst.
Die Anleitung gilt für WordPress, Baukästen sowie handgebaute und statische Websites. Die ersten Schritte brauchen kein technisches Wissen: messen und Bilder verkleinern. Spätere Schritte betreffen Plugins, Skripte, Schriften und Hosting, dafür brauchst du eventuell die Person, die deine Website gebaut hat oder betreut.
Was „langsam“ heisst und warum das Handy es zuerst zeigt
„Langsam“ ist nicht eine einzige Grösse. Google beschreibt das Erlebnis mit drei Messwerten, den Core Web Vitals, und nennt für jeden einen Zielwert. Eine Seite gilt als „gut“, wenn sie alle drei bei mindestens 75 % der Seitenaufrufe erreicht, getrennt gemessen für Handys und für Computer (web.dev):
- LCP (Largest Contentful Paint): wie lange es dauert, bis das grösste Element im Bildschirm sichtbar ist, meist das Hauptbild oder die Überschrift. Gut: bis 2,5 Sekunden.
- INP (Interaction to Next Paint): wie lange die Seite braucht, um auf Tippen, Klicken oder Schreiben zu reagieren. Gut: bis 200 Millisekunden.
- CLS (Cumulative Layout Shift): wie stark der Inhalt beim Laden springt. Gut: bis 0,1.
Auf dem Handy fallen Probleme zuerst auf, weil es weniger Rechenleistung hat als ein Laptop und oft eine schwächere Verbindung. Eine schwere Seite oder ein Haufen Skripte kostet dort mehr Zeit. Und Warten kostet Besucher: In einer Google/SOASTA-Studie von 2017 war die Wahrscheinlichkeit, dass ein mobiler Besucher abspringt, um 32 % höher, wenn eine Seite 3 statt 1 Sekunde zum Laden brauchte.
So findest du heraus, welche Ursache zutrifft
Mach zuerst Schritt 1 und vergleiche dann:
- LCP liegt über 2,5 Sekunden. Das Hauptbild oder die Überschrift kommt spät. Wahrscheinliche Ursachen: ein zu grosses oder schlecht vorbereitetes Hauptbild, ein langsamer Server oder Text, der auf eine Schrift wartet. Weiter mit den Schritten 2, 3, 4, 8 und 9.
- INP liegt über 200 Millisekunden. Tippen und Menüs fühlen sich zäh an, das Handy ist mit Skripten beschäftigt. Wahrscheinliche Ursachen: zu viele Plugins und Skripte oder schwere fremde Widgets. Weiter mit den Schritten 6 und 7. Googles Anleitung zu INP erklärt die technische Seite für Entwickler.
- CLS liegt über 0,1. Beim Laden verschiebt sich etwas, und man tippt auf den falschen Knopf. Wahrscheinliche Ursachen: Bilder und Einbettungen ohne reservierten Platz, Banner oder Werbung, die spät erscheinen, Schriften, die nachträglich wechseln. Weiter mit den Schritten 5 und 8.
- Auf dem Laptop schnell, auf dem Handy langsam. Das ist normal, denn ein Laptop im schnellen WLAN versteckt das Problem. Teste auf einem Handy mit mobilen Daten (Schritt 1) und beginne bei den Bildern (Schritt 2) und den Skripten (Schritt 6).
- Nur einzelne Seiten sind langsam. Schau nach, was diese Seiten haben, was andere nicht haben: einen Slider, ein Video, eine Karte, eine Galerie oder ein Widget. Weiter mit den Schritten 4, 5 und 7.
- Labor- und Felddaten widersprechen sich. Labordaten sind ein einzelner simulierter Test, Felddaten zeigen, was echte Besucher erlebt haben. Verlass dich für das Urteil auf die Felddaten und suche mit dem Labortest nach Ursachen (warum sie sich unterscheiden).
- Es werden keine Felddaten angezeigt. Die Seite hat noch nicht genug Besuche. Nimm den Labortest und ein echtes Handy und prüfe nach ein paar Wochen erneut.
Schritte zur Lösung
Auf einem echten Handy messen und die Werte aufschreiben. Öffne PageSpeed Insights, gib die Adresse deiner Startseite und von ein bis zwei weiteren wichtigen Seiten ein und lies den Reiter Mobil. Der obere Teil zeigt Felddaten: Erfahrungen echter Chrome-Besucher der letzten 28 Tage. Der untere Teil ist ein Labortest mit Lighthouse, ein simulierter Durchlauf, der konkrete Probleme auflistet (wie sich beide unterscheiden). Notiere LCP, INP und CLS für jede Seite. Ist deine Website in der Google Search Console bestätigt, zeigt der Bericht zu den Core Web Vitals dieselben Daten, nach ähnlichen Seiten gruppiert. So siehst du, welche Art von Seiten ein Problem hat. Öffne die Website danach selbst auf einem Handy mit ausgeschaltetem WLAN und achte darauf, wie sie sich anfühlt. Felddaten umfassen 28 Tage und ändern sich nach einer Korrektur langsam. Mit dem Labortest prüfst du eine Änderung sofort.
Bilder verkleinern und komprimieren. Zu grosse Fotos sind die häufigste Ursache. Ein Foto direkt aus der Kamera oder von einer Bilddatenbank kann mehrere tausend Pixel breit sein, während ein Handy es nur einige hundert Pixel breit zeigt. Mach jedes Bild ungefähr so gross wie die grösste Darstellung, in der es vorkommt, und komprimiere es dann. Biete mit
srcsetmehrere Grössen an, damit ein Handy die kleine lädt (responsive Bilder). In WordPress fügst du Bilder in der angezeigten Grösse ein statt in voller Grösse. Ein Bild-Plugin oder dein Hoster kann Bilder oft automatisch verkleinern und umwandeln.Ein modernes Bildformat verwenden. WebP und AVIF können besser komprimieren als JPEG und PNG, dasselbe Bild lädt also schneller. Wandle deine Bilder um und behalte JPEG oder PNG als Ersatz für Browser, die das neue Format nicht unterstützen, falls dein Werkzeug das nicht selbst erledigt (Format wählen). Speichere ein bereits komprimiertes Bild nicht immer wieder neu, denn die Qualität sinkt jedes Mal. Wandle von der Originaldatei aus um.
Das Hauptbild zuerst laden, den Rest verzögert. Das Hauptbild oben auf der Seite (oft das LCP-Element) soll so früh wie möglich laden. Setze es als normales
<img>in die Seite, nicht als CSS-Hintergrund und nicht in einen Slider, der per Skript lädt, und fügefetchpriority="high"hinzu, damit der Browser es zuerst holt (LCP optimieren). Setze bei ihm niemalsloading="lazy". Bei Bildern weiter unten ist es umgekehrt: Mitloading="lazy"laden sie erst, wenn der Besucher in ihre Nähe scrollt (Lazy Loading). WordPress macht beides seit Version 6.3 automatisch für das wahrscheinliche Hauptbild (Ankündigung von WordPress). Themes, Slider und Page Builder können das aber abschalten, schau deshalb in den Seitenquelltext.Platz reservieren, damit nichts springt. Gib jedem Bild und Video die Attribute
widthundheightoder ein CSS-aspect-ratio, damit der Browser die richtige Lücke freihält, bevor die Datei da ist (CLS optimieren). Dasselbe gilt für eingebettete Karten, Videos und Widgets: Lege ihre Grösse fest und lade verzögert, was erst unterhalb des ersten Bildschirms beginnt (Best Practices für Einbettungen). Cookie-Hinweise, Ankündigungsleisten und Werbung, die spät erscheinen und den Inhalt nach unten schieben, sind eine klassische Ursache für Layoutsprünge. Gib ihnen einen festen Platz oder zeige sie als Überlagerung.Nicht benutzte Plugins und Skripte entfernen. Jedes Plugin, jedes Tracking-Tag und jede Erweiterung kann eigene Skripte und Stile mitbringen, oft auf jeder Seite. Liste auf, was installiert ist, lösche, was niemand benutzt, und ersetze schwere durch leichtere Lösungen. Entferne eines nach dem anderen und miss jeweils neu, dann weisst du, welches den Unterschied gemacht hat. Mach vorher ein Backup. In WordPress ist es sicherer, ein Plugin auf einer Testkopie der Website zu deaktivieren als auf der Live-Seite. Lighthouse in PageSpeed Insights listet unbenutztes JavaScript und CSS auf und führt dich so zu den Verursachern.
Fremde Widgets verzögern. Chat-Blasen, Social-Feeds, Bewertungs-Badges, Karten, Videoplayer und Werbe-Tags laden Code von anderen Firmen. Sie laden oft zuletzt und konkurrieren mit deinen eigenen Inhalten. Lade nur, was du brauchst, und lade es spät: Ergänze bei Skripten
asyncoderdefer, oder lade ein Widget erst nach einem Tipp und zeige bis dahin ein einfaches Vorschaubild (Drittanbieter-JavaScript). Lighthouse markiert Drittanbieter-Code, der den Hauptthread 250 Millisekunden oder länger blockiert (Details). Frag bei jedem Widget: Wird es überhaupt benutzt?Schriften sinnvoll laden. Verwende wenige Schriftfamilien und Schnitte und hoste die Schriftdateien auf deiner eigenen Domain im Format WOFF2, nur mit den Zeichen, die du brauchst. Setze
font-display, damit der Text sofort in einer Ersatzschrift erscheint und nicht unsichtbar bleibt, und lade nur die ein oder zwei Schriften vor, die der erste Bildschirm braucht (Best Practices für Schriften). Ein Schriftwechsel kann den Text verschieben, wähle deshalb eine Ersatzschrift von ähnlicher Grösse.Caching und ein Content Delivery Network einrichten. Ein langsamer Server bremst alles, was danach kommt. Mit Caching kann der Server oder der Browser des Besuchers eine Seite wiederverwenden, statt sie neu aufzubauen, und ein Content Delivery Network (CDN) liefert Dateien von einem Standort in der Nähe des Besuchers. Die meisten guten Hoster und WordPress-Caching-Plugins bieten beides. Prüfe, dass Änderungen nach dem Einschalten des Cachings noch erscheinen (LCP und Serverantwortzeit).
Erneut messen und im Blick behalten. Wiederhole Schritt 1 mit denselben Seiten und vergleiche die Werte. Ändere jeweils nur eine Sache, dann siehst du, was geholfen hat. Prüfe in einem Monat nochmals, denn Felddaten brauchen 28 Tage, um nachzuziehen, und neue Plugins, grosse Uploads und neue Widgets machen die Arbeit schleichend wieder zunichte. Trag dir jedes Quartal einen Geschwindigkeitscheck in den Kalender ein oder führe ihn vor jeder grösseren Inhaltsänderung durch.
Wann du Hilfe holen solltest
Hol dir jemanden mit Erfahrung dazu, wenn:
- die Werte nach den Schritten 1 bis 9 immer noch rot sind
- du an die Theme-, Hosting- oder Plugin-Einstellungen nicht herankommst oder nicht weisst, wer das kann
- die Website mit eigenem Code oder einem Page Builder gebaut ist, den niemand pflegt
- die Langsamkeit vom Server selbst kommt, zum Beispiel wenn das erste Byte erst nach Sekunden eintrifft
- langsame Seiten dich Anfragen oder Verkäufe kosten, etwa bei Landingpages für Werbung oder in einem Shop, und du ein gemessenes und überwachtes Setup willst statt einer einmaligen Korrektur