Mobile Website Optimierung: 5 Tools + Checkliste für schnelle Ladezeiten.

Warum Mobile First entscheidend ist

Google verwendet für Indexierung und Ranking die mobile Version einer Website, gecrawlt mit dem Smartphone-Crawler (Google Search Central). Ist Ihre Desktop-Seite perfekt, die mobile Version aber schwach, zählt für Google die schwache Version.

Auch Ihre Besucher sind oft mobil unterwegs, gerade bei Suchen wie „Friseur in meiner Nähe“. Wie hoch der Anteil bei Ihnen ist, sehen Sie in Ihrer eigenen Statistik, etwa in der Google Search Console unter „Geräte“. Wenn Ihre Website grundlegende Fehler hat, verlieren Sie diese Besucher sofort.

Mobile Optimierung ist also keine Kür, sondern Grundvoraussetzung. Mit den richtigen Tools prüfen Sie den Zustand Ihrer mobilen Seite in wenigen Minuten, kostenlos.

5 kostenlose Tools für die mobile Optimierung

1. Google PageSpeed Insights

Was es macht: Analysiert Ihre Adresse und vergibt einen Wert von 0 bis 100 für Smartphone und Desktop. Dazu bekommen Sie konkrete Empfehlungen, sortiert nach Einsparpotenzial.

Warum Sie es brauchen: Wenn genug Daten vorliegen, zeigt PageSpeed Insights neben Labormessungen auch Felddaten echter Chrome-Nutzer aus dem Chrome UX Report. Das sind die Werte, die bei Ihren Besuchern tatsächlich ankommen.

Adresse: pagespeed.web.dev

2. Google Lighthouse

Was es macht: Eine umfassende Prüfung direkt in Chrome: Performance, Barrierefreiheit, Best Practices und SEO in einem Durchlauf, mit einem detaillierten Bericht.

Warum Sie es brauchen: Lighthouse geht tiefer als PageSpeed Insights. Es zeigt, welche Dateien das Rendern blockieren, welche Bilder zu groß sind und wo JavaScript die Bedienung verzögert.

Zugang: Chrome-Entwicklertools → Tab „Lighthouse“ → „Mobil“ auswählen → Analyse starten

3. GTmetrix

Was es macht: Testet Ihre Seite von verschiedenen Standorten aus und zeigt ein Wasserfalldiagramm: welche Datei wann geladen wird und wie lange sie braucht.

Warum Sie es brauchen: Im Wasserfall sehen Sie auf einen Blick, ob ein riesiges Bild, ein langsamer Server oder ein externes Script bremst.

Adresse: gtmetrix.com

4. WebPageTest

Was es macht: Der technisch genaueste Test. Sie können Geräte, Netzbedingungen und Standorte wählen und den Ladevorgang Bild für Bild als Filmstreifen ansehen.

Warum Sie es brauchen: Wenn Sie wissen wollen, wie Ihre Seite auf einem Mittelklasse-Smartphone im Mobilfunknetz lädt, zeigt WebPageTest es Ihnen.

Adresse: webpagetest.org

5. Chrome-Entwicklertools

Was es macht: Die Entwicklerwerkzeuge in Chrome. Der Gerätemodus simuliert Smartphones, der Tab „Netzwerk“ zeigt alle geladenen Dateien, der Tab „Leistung“ zeichnet den Ladevorgang auf.

Warum Sie es brauchen: Sie können langsame Verbindungen simulieren, die mobile Ansicht prüfen und JavaScript-Probleme finden, alles direkt im Browser.

Zugang: F12 oder Rechtsklick → „Untersuchen“ → Gerätesymbolleiste einschalten

Bilder für mobile Geräte optimieren

Bilder sind oft der größte Bremsklotz auf mobilen Seiten. Ein einziges unkomprimiertes Foto kann mehrere Megabyte groß sein; im Mobilfunknetz bedeutet das spürbar längere Ladezeit.

Die Lösung ist einfach:

• Moderne Formate statt PNG/JPG: Laut Google sind WebP-Bilder verlustbehaftet 25–34 % kleiner als vergleichbare JPEGs und verlustfrei 26 % kleiner als PNGs (Google for Developers). Aktuelle Browser unterstützen WebP; AVIF ist eine weitere moderne Option.
• Responsive Bilder mit srcset: Laden Sie je nach Bildschirmbreite eine passende Bildgröße. Ein Smartphone braucht kein 1920 Pixel breites Bild.
• Lazy Loading: Bilder unterhalb des sichtbaren Bereichs erst laden, wenn jemand dorthin scrollt. Ein loading="lazy" im img-Tag reicht.
• Feste Abmessungen: Geben Sie im HTML immer width und height an. Das verhindert Layoutverschiebungen (CLS).
• Komprimierung: Tools wie Squoosh (squoosh.app) oder TinyPNG verkleinern Bilder ohne sichtbaren Qualitätsverlust.

CSS und JavaScript verschlanken

Jede CSS- und JavaScript-Datei, die der Browser laden muss, verzögert die Darstellung. Auf Smartphones mit langsamerem Prozessor ist das stärker zu spüren als am Desktop.

Was Sie tun können:

• Minifizieren: Leerzeichen, Kommentare und unnötige Zeichen aus CSS und JS entfernen. Tools wie cssnano und Terser machen das automatisch.
• Kritisches CSS inline: Das CSS für den ersten sichtbaren Bereich direkt ins HTML schreiben, den Rest nachladen.
• JavaScript mit defer/async: Scripts mit defer oder async einbinden, damit sie die Darstellung nicht blockieren.
• Ungenutztes CSS entfernen: Viele Websites laden CSS, das auf der jeweiligen Seite gar nicht gebraucht wird. Werkzeuge wie PurgeCSS entfernen es automatisch.
• Externe Scripts begrenzen: Jedes Tracking-Script, jedes Widget, jeder Chat kostet Ladezeit. Fragen Sie bei jedem: Brauchen wir das wirklich?

Core Web Vitals einfach erklärt

Die Core Web Vitals sind drei Messwerte, mit denen Google die Nutzererfahrung einer Seite beschreibt. Eine gute Seitenerfahrung entspricht laut Google dem, was die Ranking-Systeme belohnen sollen (Google Search Central). Die Grenzwerte unten stammen von Google (web.dev). Als gut gilt eine Seite, wenn mindestens 75 % der Seitenaufrufe den Zielwert erreichen.

LCP: Largest Contentful Paint

Was es misst: Wie lange dauert es, bis das größte sichtbare Element, meist ein Bild oder eine Überschrift, geladen ist?

Zielwert: höchstens 2,5 Sekunden. Über 4 Sekunden gilt als schlecht.

Häufige Ursachen für einen schlechten LCP: zu große Hero-Bilder, ein langsamer Server, CSS, das die Darstellung blockiert.

INP: Interaction to Next Paint

Was es misst: Wie schnell reagiert Ihre Seite auf Eingaben? Wenn jemand auf einen Button tippt, wie lange dauert es, bis sich sichtbar etwas tut?

Zielwert: höchstens 200 Millisekunden. Über 500 Millisekunden gilt als schlecht.

Häufige Ursache für einen schlechten INP: schweres JavaScript, das den Browser blockiert.

CLS: Cumulative Layout Shift

Was es misst: Wie stark verschiebt sich das Layout beim Laden? Sie kennen das: Sie wollen auf einen Button tippen, und plötzlich springt alles nach unten, weil ein Bild nachgeladen wurde.

Zielwert: höchstens 0,1. Über 0,25 gilt als schlecht.

Häufige Ursachen für einen schlechten CLS: Bilder ohne feste Abmessungen, nachgeladene Werbung, Webfonts, die beim Laden springen.

Checkliste: mobile Optimierung

Arbeiten Sie die Liste von oben nach unten ab; sie ist nach Priorität sortiert:

• Responsives Design prüfen: auf verschiedenen Geräten testen. Kein seitliches Scrollen, Texte ohne Zoomen lesbar.
• Viewport-Meta-Tag setzen: <meta name="viewport" content="width=device-width, initial-scale=1.0"> muss im Head stehen.
• PageSpeed Insights testen: Ab 90 Punkten gilt die Leistung als gut, unter 50 als schlecht (Chrome for Developers).
• Bilder umstellen: WebP oder AVIF, mit srcset und Lazy Loading.
• Tippflächen prüfen: Alle klickbaren Elemente ausreichend groß und mit Abstand. Flächen ab 48 × 48 Pixel bestehen die Lighthouse-Prüfung immer, 8 Pixel Abstand sind ein guter Startwert (Chrome for Developers).
• Kritisches CSS inline: CSS für den ersten Bildschirm direkt ins HTML, den Rest nachladen.
• JavaScript optimieren: Scripts mit defer laden, ungenutztes JavaScript finden und entfernen.
• Core Web Vitals messen: LCP höchstens 2,5 s, INP höchstens 200 ms, CLS höchstens 0,1.
• Schriften optimieren: font-display: swap nutzen, Schriften möglichst selbst hosten.
• Server-Antwortzeit prüfen: Antwortet der Server spürbar langsam, Caching aktivieren oder das Hosting wechseln.
• HTTPS aktiv: SSL-Zertifikat eingerichtet, alle Dateien über HTTPS geladen.
• Weiterleitungen vermeiden: Jede Weiterleitung kostet Zeit. Verlinken Sie direkt auf die richtige Adresse.

Und danach? Performance ist keine einmalige Sache. Neue Inhalte, Updates und Plugins können die Ladezeit mit der Zeit wieder verschlechtern. Wer das nicht selbst im Blick behalten möchte, gibt es in eine laufende Pflege. Schnelle, mobil optimierte Seiten bauen wir von Grund auf so; was dazugehört, steht bei unseren Leistungen.

Weiterlesen