Wie Sie eine Website für mobile Geräte optimieren

Warum mobile Optimierung kritisch ist

Über 60 % des globalen Web-Traffics kommen von Mobilgeräten, und in einigen Branchen übersteigt dieser Prozentsatz 80 %. Google ist 2019 für alle neuen Websites auf Mobile-First-Indexierung umgestiegen, und seit März 2021 verwendet es ausschließlich die mobile Version der Website zur Indexierung und zum Ranking. Das bedeutet, wenn Ihre Website auf Mobilgeräten nicht gut funktioniert, funktioniert sie auch in der Google-Suche nicht gut – unabhängig davon, wie perfekt die Desktop-Version ist.

Mobile Nutzer haben andere Erwartungen als Desktop-Nutzer. Sie erwarten schnelles Laden (53 % der Nutzer verlassen eine Website, die auf dem Mobilgerät länger als 3 Sekunden zum Laden braucht), einfache Navigation mit einer Hand, lesbaren Text ohne Zoomen, touch-freundliche Schaltflächen und Formulare sowie minimale Dateneingabe. Eine Website, die diese Erwartungen nicht erfüllt, verliert Besucher, Conversions und Suchpositionen.

Mobile-First-Indexierung

Was das in der Praxis bedeutet

Mobile-First-Indexierung bedeutet, dass der Google-Bot vorrangig die mobile Version Ihrer Website crawlt und indexiert. Wenn Sie Inhalte haben, die nur in der Desktop-Version sichtbar sind, aber nicht in der mobilen, wird Google sie nicht indexieren. Dies ist kritisch für Websites, die responsives Design mit auf Mobilgeräten verstecktem Inhalt (display:none) verwenden, oder Websites mit einer separaten m.domain.com-Mobilversion, die weniger Inhalt als die Desktop-Version hat.

So überprüfen Sie die mobile Version

Verwenden Sie die Google Search Console zur Verfolgung der Mobile-First-Indexierung. Im Coverage-Bericht können Sie sehen, ob Google die mobile oder die Desktop-Version Ihrer Website crawlt. Das URL Inspection Tool zeigt, wie Google eine bestimmte Seite sieht. Der Mobile Usability-Bericht zeigt Probleme wie zu kleine Schriftgröße, überlappende Elemente oder zu nah beieinander platzierte Links an. Der Google Mobile-Friendly Test (search.google.com/test/mobile-friendly) testet schnell, ob eine bestimmte Seite mobil optimiert ist.

Responsives Webdesign

Grundlagen des Responsive-Designs

Responsives Webdesign ist ein Ansatz, bei dem sich das Website-Layout automatisch an die Bildschirmgröße des Nutzers anpasst. Statt separater Versionen für Desktop und Mobil haben Sie eine Website, die das Layout der Elemente fließend ändert. Wichtige Elemente des Responsive-Designs sind das Viewport-Meta-Tag, das dem Browser sagt, die Inhaltsbreite an die Gerätebreite anzupassen, CSS-Media-Queries, die unterschiedliche Stile für unterschiedliche Bildschirmgrößen anwenden, flexible Bilder, die mit dem Container skalieren, und ein Fluid-Grid, das Prozente statt fester Pixel für Elementbreiten verwendet.

Mobile-First-Ansatz beim Codieren

Die beste Praxis ist das Codieren vom Mobilgerät zum Desktop (Mobile-First). Grundlegende CSS-Stile sind für die mobile Anzeige, und Media-Queries fügen Stile für größere Bildschirme hinzu. Dies hat zwei Vorteile: Mobilgeräte müssen kein CSS herunterladen und verarbeiten, das dann überschrieben wird (bessere Leistung), und es zwingt Sie, Inhalte und Funktionalität für den kleinsten Bildschirm zu priorisieren. CSS-Frameworks wie Tailwind CSS und Bootstrap 5 verwenden den Mobile-First-Ansatz mit Breakpoints für sm-, md-, lg- und xl-Bildschirme.

Häufige Fehler im Responsive-Design

Die häufigsten Fehler sind feste Elementbreiten in Pixeln (verwenden Sie max-width und Prozente), horizontales Scrollen auf dem Mobilgerät (prüfen Sie, dass kein Element die Bildschirmbreite überschreitet), zu kleine Schaltflächen und Links (die minimale Touch-Target-Größe beträgt laut Google-Richtlinien 48x48 Pixel), nicht optimierte Bilder (ein großes Desktop-Bild wird auch auf dem Mobilgerät geladen), Pop-ups, die den gesamten mobilen Bildschirm bedecken (Google bestraft Intrusive Interstitials) und Formulare mit zu vielen Feldern (minimieren Sie die Eingabe auf dem Mobilgerät, verwenden Sie Autocomplete).

Geschwindigkeitsoptimierung auf dem Mobilgerät

Warum Geschwindigkeit auf dem Mobilgerät wichtiger ist

Mobilgeräte haben in der Regel langsamere Internetverbindungen (4G/LTE im Gegensatz zu Glasfaser), weniger Prozessorleistung für das Rendern von Seiten und weniger RAM für die JavaScript-Verarbeitung. Google PageSpeed Insights (oder unser kostenloses Tool zur Geschwindigkeitsmessung) zeigt separate Ergebnisse für Mobil und Desktop an – das mobile Ergebnis ist fast immer niedriger und beeinflusst das Ranking stärker.

Bildoptimierung für Mobilgeräte

Bilder sind die häufigste Ursache für langsames Laden auf Mobilgeräten. Verwenden Sie responsive Bilder mit dem srcset-Attribut, das unterschiedliche Bildgrößen für unterschiedliche Bildschirme bereitstellt – Mobilgeräte erhalten ein 400px-Bild statt eines 1600px-Desktop-Bildes. Auch das Bildformat ist wichtig: WebP und AVIF sind 30–50 % kleiner als JPEG bei gleicher Qualität. Lazy Loading (loading="lazy"-Attribut) verzögert das Laden von Bildern, die nicht auf dem Bildschirm sichtbar sind. WordPress fügt seit Version 5.5 automatisch Lazy Loading zu allen Bildern hinzu.

JavaScript-Optimierung

JavaScript ist oft der Hauptverursacher für langsame mobile Websites. Minimieren Sie die JavaScript-Menge – jedes Kilobyte JS erfordert Download, Parsing und Ausführung, und auf dem mobilen Prozessor dauert dies wesentlich länger als auf dem Desktop. Verwenden Sie Code-Splitting, um nur das JS zu laden, das für die aktuelle Seite benötigt wird. Verzögern Sie das Laden von nicht kritischem JavaScript mit async- oder defer-Attributen. Vermeiden Sie große JS-Frameworks für einfache Websites – wenn Sie nur einen Slider und ein Hamburger-Menü benötigen, brauchen Sie kein React oder Angular.

Critical CSS

Die Critical-CSS-Technik extrahiert das CSS, das für das Rendern des Above-the-Fold-Inhalts benötigt wird, und fügt es inline in das HTML ein, während der Rest des CSS asynchron geladen wird. Auf dem Mobilgerät ist der Above-the-Fold-Inhalt kleiner (kleinere Viewport-Höhe), daher ist auch das Critical CSS kleiner. Tools wie Critical, Penthouse und CriticalCSS.com generieren Critical CSS automatisch. WordPress-Plugins wie WP Rocket und Autoptimize bieten integrierte Unterstützung für diese Optimierung. Weitere Informationen zur Beschleunigung finden Sie in unserem Leitfaden zur Beschleunigung der Website.

AMP (Accelerated Mobile Pages)

Was ist AMP

AMP ist Googles Framework zur Erstellung ultraschneller mobiler Seiten. AMP-Seiten verwenden eine begrenzte Teilmenge von HTML, inline CSS bis 75 KB und minimales JavaScript (nur die AMP-Bibliothek). Google speichert AMP-Seiten in seinem CDN-Netzwerk zwischen, was zu nahezu sofortigem Laden führt. AMP war besonders beliebt für Nachrichtenseiten und Blogs, bei denen Lesegeschwindigkeit kritisch ist.

Brauchen Sie AMP

AMP ist für das Google Top Stories Carousel nicht mehr obligatorisch (seit Juni 2021) und kein direkter Ranking-Faktor. Wenn Ihre Website bereits gute Core Web Vitals-Ergebnisse hat, benötigen Sie AMP wahrscheinlich nicht. AMP kann jedoch nützlich sein für Websites mit hoher Bounce-Rate auf Mobilgeräten (AMP reduziert die Ladezeit dramatisch), Nachrichtenseiten und Blogs mit vielen Artikeln, Websites mit schwacher Infrastruktur, bei denen das Caching im Google CDN erheblich hilft, und E-Mail-Marketing (AMP for Email ermöglicht interaktive E-Mails). Für WordPress generiert das AMP-Plugin von Google und XWP automatisch AMP-Versionen Ihrer Seiten.

Core Web Vitals auf dem Mobilgerät

LCP (Largest Contentful Paint)

LCP misst die Ladezeit des größten sichtbaren Elements auf der Seite – meist eines Hero-Bildes oder einer Hauptüberschrift. Auf dem Mobilgerät ist das Ziel ein LCP unter 2,5 Sekunden. Die häufigsten Probleme sind große, nicht optimierte Bilder, langsame Server-Antwortzeit (TTFB) und render-blockierende Ressourcen. Preloaden Sie das LCP-Bild mit link rel="preload", verwenden Sie ein optimiertes Format (WebP) und die passende Größe und minimieren Sie render-blockierendes CSS und JS.

INP (Interaction to Next Paint)

INP hat FID als Core-Web-Vital-Metrik ersetzt und misst die Reaktionsfähigkeit der Website auf Nutzerinteraktionen. Auf dem Mobilgerät ist ein INP unter 200 Millisekunden ein gutes Ergebnis. Häufige Probleme sind langwierige JavaScript-Tasks, die den Main Thread blockieren, komplexe DOM-Manipulationen und zu viele Event-Listener. Lösungen umfassen das Aufteilen langer Tasks in kleinere (Yield to Main Thread), Debouncing von Event-Handlern und die Verwendung von Web Workers für rechenintensive Operationen.

CLS (Cumulative Layout Shift)

CLS misst die visuelle Stabilität der Seite – wie sehr sich Elemente während des Ladens bewegen. Auf dem Mobilgerät ist ein CLS unter 0,1 ein gutes Ergebnis. Die häufigsten Ursachen für schlechtes CLS sind Bilder ohne width- und height-Attribute (der Browser weiß nicht, wie viel Platz reservieren), dynamisch eingefügte Werbung, die Inhalte verschiebt, Web-Fonts, die die Textgröße beim Laden ändern (FOUT), und Inhalte, die über vorhandene Inhalte eingefügt werden. Definieren Sie immer Abmessungen für Bilder und Videos, verwenden Sie font-display: swap für Web-Fonts und reservieren Sie Platz für Werbung.

Testen der mobilen Optimierung

• Google PageSpeed Insights: Detaillierter Leistungsbericht mit spezifischen Empfehlungen für Mobilgeräte und Desktop.
• Chrome DevTools Device Mode: Simuliert verschiedene Mobilgeräte im Browser zum Testen von Layout und Funktionalität.
• BrowserStack und LambdaTest: Tests auf echten Mobilgeräten in der Cloud – verschiedene Modelle, OS-Versionen und Browser.
• Google Search Console: Der Mobile-Usability-Bericht identifiziert Seiten mit Problemen auf Mobilgeräten.
• WebPageTest: Erweitertes Geschwindigkeitstest-Tool mit Option für Mobilgeräte und langsame Verbindungen.
• Lighthouse: Googles Tool für umfassende Analyse von Leistung, Zugänglichkeit, SEO und Best Practices.

Fazit

Mobile Optimierung ist keine Option – sie ist eine Pflicht für jede Website, die in der Google-Suche sichtbar sein und ein gutes Nutzererlebnis bieten möchte. Responsives Design mit Mobile-First-Ansatz, optimierte Bilder, minimales JavaScript und gute Core-Web-Vitals-Metriken sind das Fundament erfolgreicher mobiler Optimierung. Bei BeoHosting sind alle Hosting-Pakete für das schnelle Ausliefern von Inhalten auf Mobilgeräten mit LiteSpeed-Webserver, serverseitigem Caching und kostenlosem CDN optimiert, das das Laden für Nutzer weltweit beschleunigt.