Wie Du Deine mobile Webseite schneller machst
Posted by Julia Werner •
Wie man seine Website handyfreundlich macht
Hat man David Platt, Seth Porges, Steve Ballmer und so viele andere Zweifler von vor zehn Jahren gehört, hätte man nie gedacht, dass das Smartphone durchstarten würde. Aber wie es durchgestartet ist!
Wie von TIME berichtet, überprüfen die Amerikaner als Gesamtheit ihre Smartphones atemberaubende 8 Milliarden Mal am Tag. Wenn du das aufschlüsselst, überprüft der Durchschnittsverbraucher sein Handy etwa alle 12 Minuten oder etwa 80 Mal im Laufe eines normalen Tages.
Das ist nicht nur verblüffend, es ist auch geradezu lächerlich. Aber als Geschäftsinhaber ist es auch ein wertvoller Einblick in deinen potenziellen Kundenstamm – ganz zu schweigen von einer genialen Art und Weise, wie du deine Website optimieren kannst, um besser auf dein Publikum eingehen zu können. Das ist richtig; wir sprechen von der Entwicklung mobiler, freundlicher Websites, so dass, wenn deine Verbraucher von ihren mobilen Geräten aus im Internet surfen, deine Website ganz oben auf ihrer To-Do-Liste stehen wird.
Hier sind einige Möglichkeiten, wie du deine Website mobiler gestalten kannst, damit deine Kunden immer wiederkehren.
me ways that you can make your website more mobile-friendly so your customers will keep returning again and again.
Ein kurzer Blick auf die Zahlen
Aber zuerst musst du verstehen, wie wichtig eine handyfreundliche Website für dein Unternehmen ist. Ein kleiner Blick auf die aktuellen Statistiken (wie von OuterBox berichtet) sollte den Zweck erfüllen:
62% der Smartphone-Nutzer nutzten ihr Handy in den letzten sechs Monaten zum Einkaufen.
80% der Verbraucher nutzten ihre mobilen Geräte, um Vergleichseinkäufe zu tätigen, andere Standorte zu finden oder mehr über ein Produkt zu erfahren.
Mehr als 33% aller E-Commerce-Einkäufe wurden in der Weihnachtszeit 2015 mit einem Smartphone getätigt.
57% der Nutzer würden ein Unternehmen nicht empfehlen, wenn es eine schlechte mobile Website hat.
61% der Nutzer würden nicht auf eine Website zurückgreifen, wenn sie diese nur schwer auf einem mobilen Gerät nutzen könnten.
Ich könnte weitermachen, aber du hast wahrscheinlich schon eine Vorstellung bekommen. Mobiles eCommerce ist die Welle der Zukunft, und wenn du nicht an Bord gehst, wirst du wahrscheinlich zurückgelassen. Zum Glück für dich findest du unten einige Pro-Tipps, die dir helfen, schnell auf den mobilen Zug aufzusteigen.
Sei reaktionsschnell
So wie Freunde, Familienangehörige und Mitarbeiter möchten, dass wir auf die von ihnen besuchten Websites reagieren, so möchten auch die Website-Besucher, dass die von ihnen besuchten Websites reagieren. Wenn du durcheinander bist, lass es mich erklären. Eine reaktionsschnelle Website ist eine Website, die den Typ des Geräts, das du verwendest, berücksichtigt; sie ändert automatisch die Größe, Formatierung und das Inhaltslayout deiner Website, um sie an den Bildschirm anzupassen, den du gerade betrachtest. Schön! Ein reaktionsschnelles Design stellt sicher, dass wichtige Marketingfunktionen, auffällige Symbole und die sorgfältig platzierten Elemente deines Website-Design nicht an die Parameter der Bildschirmgröße verloren gehen.
Denke im Großen und Ganzen
Wir sind visuelle Geschöpfe, weshalb Bilder eine so wichtige Rolle bei der Gestaltung von Websites spielen. Laut Hubspot nannten 37% der Marketingspezialisten visuelles Marketing als die wichtigste Contenform für Unternehmen, und 74% gaben an, dass sie Bilder vor Blog-Posts und Videoinhalten ranken. Mit anderen Worten, Bilder sind eine große Sache, also stellt sicher, dass eure Bilder eure Produkte für euch verkaufen. Verwendet nur hochauflösende Bilder, um diesen hässlichen Pixel-Pop-Effekt zu vermeiden.
Vermeide den Zoom
Wie sehr hasst du es, auf einer Webseite zu landen, nur um einen unscharfen Text zu finden, den du nicht lesen kannst, selbst wenn du wie deine Großmutter blinzelst? Die meisten Menschen wären frustriert, und deshalb musst du das um jeden Preis vermeiden, wenn du deine mobilfreundliche Website gestaltest. Wähle stattdessen eine Schriftgröße und -stil, die auf diesen Geräten gut lesbar ist. Experten empfehlen etwa 14px für Text und 44px x 44px für Tasten.
Finde einen Website-Builder, der mobiltaugliche Optionen bietet
Versuchst du, auf zu vielen Hochzeiten gleichzeitig zu tanzen? Wenn die Idee des Jonglierens von Marketing, Inventar, CRM, Website-Design, PR und mobiler Optimierung für dich ein wenig zu viel ist, ist es an der Zeit, Hilfe zu holen. Such dir einen großartigen Website-Builder, der auch mobilfreundliche Optionen in seinen Paketen anbietet. Dies ist nicht schwer, denn in der Tat bieten die besten Website-Builder-Dienste dir die mobile Optimierung im gleichen Paket an. Hier sind einige Website-Builder, an die du dich wenden kannst:
Wix : Wix hat einen großartigen mobilen Editor, mit dem du Designelemente für mobile Geräte sofort ändern kannst.
SimpleSite: Mit diesem Website-Builder kannst du reaktionsschnelle Blog-Websites erstellen, so dass sie mobil einsetzbar sind.
Site123: Site123 verfügt über vollständig reaktionsfähige Vorlagen, einen mobilen Vorschaumodus und die Möglichkeit, deine Texte, Bilder oder Inhalte ohne einen separaten Editor zu ändern.
Wordpress : Es gibt kein Ende für die Apps und Plugins, die du über WordPress verwenden kannst, um eine umwerfend mobile Website zu erstellen.
Weebly : Weebly bietet einen vollständigen mobilen Website-Builder, reaktionsschnelle Vorlagen und einen einfachen Drag-and-Drop-Designer für schöne mobile Designs in wenigen Minuten.
Angebotsoptionen
Obwohl du für das Handy eine Optimierung durchführen musst, möchtest du die Option für die Desktop-Ansicht nicht ganz ausschließen. Denn während die meisten Menschen die aktualisierte, mobiltaugliche Website bevorzugen, gibt es immer noch eine ausreichend große Gruppe von Konsumenten, die es vorziehen, die alte, vertraute Desktop-Version zu sehen. Für diese Leute, fügst du einfach einen simplen Link hinzu, der sie anweist, zur vollständigen Website zu gehen oder die Desktop-Version zu sehen. Auf diese Weise können die Benutzer wählen, ob sie mobil werden möchten oder ob sie am Desktop bleiben möchten. Und jeder liebt es, eine Wahl zu haben.
Flash überspringen
Mit einem Wort, Flash ist Old-School. Es ist langsam zu laden, wird nicht von Android- oder iOS-Geräten unterstützt und viele Browser funktionieren einfach nicht gut mit Flash. Unterm Strich, vergiss es.
Testen, Testen, Testen
Testen ist der beste Weg, um die Dinge aus der Perspektive des Betrachters zu sehen. Lade also gelegentlich deine Website auf verschiedene mobile Geräte, um zu sehen, was deine Kunden sehen. Wenn es nicht gut aussieht, behebe das Problem!
Zeit, deine Kräfte mit handyfreundlichen Designs zu bündeln
E-Commerce ist mobil geworden, und es gibt keinen Weg zurück. Deshalb musst du dich der Menge anschließen, wenn du willst, dass dein Unternehmen in ein paar Jahren noch hier ist. Die gute Nachricht ist, dass es relativ einfach ist, ein schönes, reaktionsschnelles Website-Design zu erstellen, das auch mobile Besucher berücksichtigt.
– – –
TIME:
OuterBox:
Hubspot:
– – –
IMAGES
Responsive Website:
Mobile Friendly Website:
6 Tools, um Deine Seite perfekt für mobile Suchen zu optimieren
6 Tools, um Deine Seite perfekt für mobile Suchen zu optimieren
Als ich gerade erst mit dem Bloggen angefangen hatte, musste ich mir noch keine Gedanken über die mobile Suchoptimierung machen.
Damals gab es noch gar keine mobilen Suchen! Die Leute haben noch aufklappbare Handys benutzt! Kennst Du die noch?
Ich habe meine ersten Blog-Beiträge 2007 veröffentlicht, ganze zwei Jahre bevor Smartphones den Markt übernommen haben.
Natürlich haben sich damals sehr wenige meiner Leser (wenn überhaupt welche) für die Optimierung ihrer Seite für diese aufklappbaren Handys interessiert.
Als die Smartphones dann aber überall zu finden waren, hat es lediglich ein paar Jahre gedauert, bis die mobile Suche zur neuen Norm wurde.
Im Großen und Ganzen hat sich die Marketingwelt sehr schnell an diese Veränderungen gewöhnt.
Die meisten Unternehmen nutzen jetzt ein responsives Webdesign und die meisten SEO-Berater kennen die Grundsätze des mobilen SEO.
Mir ist aber aufgefallen, dass eine grundlegende Sache fehlt: Tools.
Denk mal darüber nach. Wir haben jede Menge Tools für Keyword-Optimierung, SEO-Leistung, Analysen, Keyword-Verfolgung, Split Testing, Conversion-Optimierung, Ladegeschwindigkeit, und was eben sonst noch so anfällt.
Aber benutzt Du Tools für die mobilen Suchen?
Zum Glück gibt es ein paar Tools, die Dir dabei helfen, Deine Seite perfekt für mobile Suchen zu optimieren. Ich will sechst meiner Lieblingstools mit Dir teilen.
Das mobile Website Speed Testing Tool von Google
Google hat so viele Tools, dass man da schnell mal den Überblick verlieren kann.
Ich habe sehr lange das Tool PageSpeed Insights benutzt.
Google trennt sich aber gerade von einigen ihrer alten Tools.
Sie haben ein hübscheres, besseres und hilfreicheres Tool veröffentlicht.
Das Mobile Website Speed Testing.
Ich zeige Dir jetzt, wie Dir das Tool dabei helfen kann, Deine mobilen Suchen zu verbessern.
Gib Deine URL ein und klick auf “Jetzt testen”.
Es dauert nur wenige Sekunden.
Dann bekommst Du die Bewertung Deiner Seitenleistung.
Hier sind die Noten, die Du bekommst:
Mobil-Freundlichkeit: Diese Note zeigt, wie geeignet Deine Seite für mobile Geräte ist. Können die Nutzer ganz einfach tippen, wischen und Deine Webseite mit dem Smartphone oder Tablet besuchen? Wird die Nutzererfahrung von Unterbrechungen und Problemen negativ beeinflusst?
Mobile Schnelligkeit: Diese Note zeigt, wie schnell Deine Seite auf einem mobilen Gerät lädt. Mobile Nutzer haben weniger Geduld, und weniger Bandbreite, als Desktop-Nutzer.
Desktop-Schnelligkeit: Die letzte Note zeigt, wie schnell Deine Seite für Desktop-Nutzer lädt.
Das Tool erklärt jede Note sehr ausführlich.
Hier ist meine Note für Mobil-Freundlichkeit:
Hier ist meine Note für mobile Schnelligkeit:
Und hier ist meine Note für Desktop-Schnelligkeit:
Auf der letzten Seite kann ist einen kostenlosen Bericht bekommen.
Es ist ein einfacher, oberflächlicher Bericht. Er ist aber durchaus hilfreich.
Du kannst Dir den Bericht runterladen. Klick einfach auf “Kostenlosen Bericht anfordern”.
Dann musst Du “Ja” auswählen, Deine E-Mail-Adresse eingeben, …
… und auf “Senden” klicken.
Das Tool sagt dann, dass Du den Bericht innerhalb der nächsten Stunde bekommst.
Meiner ist nach 39 Minuten gekommen.
In der E-Mail siehst Du dann Deine Noten mit Verbesserungsvorschlägen für jeden Bereich.
Diese Verbesserungsvorschläge werden auch auf der Webseite gezeigt. (Du musst Dir dafür nicht extra den Bericht schicken lassen, obwohl es durchaus hilfreich sein kann.)
Um Details zu sehen, musst Du auf “Diese Probleme sollten Sie beheben” klicken.
Dann siehst Du sofort all Deine Probleme mir farblicher Hervorhebung. Praktisch!
Das gleiche dann bei der Desktop-Schnelligkeit – Eine Zusammenfassung der Ergebnisse mit Empfehlungen.
Das ist ziemlich hilfreich, besonders, wenn Du Deine Seite schnell für die mobile Suche optimieren willst.
Was aber, wenn Du technischere Informationen haben willst?
Es ist leicht zu übersehen, aber dafür gibt es einen Link.
Hier gibt es nicht besonderes. Der Link führt Dich ins Google-Verzeichnis über die Grundsätze der Webleistung.
Das sind zwar hilfreiche Informationen, aber für die meisten SEO-Berater sind sie nicht wirklich nützlich, wenn es um mobile Suchen geht.
Mit dem Haupt-Tool solltest Du die besten und nützlichsten Informationen für die mobile Optimierung bekommen.
Der Mobile Friendly Test von Google
Google hat den Mobile Friendly Test mit dem “Mobilegeddon” (April 2015) eingeführt.
Dieser mobile Algorithmus hat die SEO-Welt erschüttert.
Der Algorithmus trat einige Monate zuvor in Kraft, Google hat uns aber vorher gewarnt.
Damit sich die Webseiten-Betreiber auf Mobilegeddon vorbereiten konnten, hat Google eine Anleitung für “mobil-freundliche Webseiten” bereit gestellt.
Noch besser, Google hat den Mobile Friendly Test eingeführt.
Wir probieren den jetzt mal aus. Gib Deine URL ein und klick auf “Testen”
Die Ergebnisse kommen in weniger als einer Minute.
Dann siehst Du Folgendes:
Der Test sagt Dir einfach nur, ob Du bestanden hast, oder nicht. Wenn Deine Seite nicht für mobile Geräte optimiert ist, dann siehst Du so etwas:
Dieser Test ist hilfreich, wenn Du einfach nur wissen willst, ob Deine Seite für eine fortgeschrittenere mobile Optimierung geeignet ist.
Wenn sie den Test nicht besteht, musst Du erst auf ein responsives Webdesign umstellen.
Du kannst auf das Tool auch aus Deiner Google Search Console zugreifen. Klick dafür einfach auf “Mobile Usability”.
Dann kannst Du im GSC-Bericht sehen, ob Du den Test bestehst, aber ohne detaillierte Erklärungen und Screenshot.
Benutze die “Augen” von Google mit Googlebot Mobile
Auch wenn Deine Seite mobil-freundlich ist, kann es durchaus sinnvoll sein, Deine Webseite durch die “Augen” von Google zu betrachten.
Dafür musst Du Dich in die Search Console einloggen.
Klick auf “Crawl”.
Dann auf “Fetch as Google”.
Du kannst die URL unausgefüllt lassen. Klick aufs Drop-Down-Menü und wähle “Mobile: Smartphone” aus.
Dann klick auf “Fetch and Render”. Der Googlebot braucht ca. eine Minute, um Deine Seite zu durchsuchen.
Anschließend kannst Du Deinen Bericht sehen, indem Du auf die Doppelpfeile in der rechten Ecke klickst.
Hier ist der Beispiel-Bericht einer Seite mit einem 301-Fehler.
Das Tool ist sehr hilfreich für die Indizierung, besonders wenn Du Indizierungsprobleme mit Deiner Seite feststellst.
Dafür musst Du einfach nur auf den “Request indexing” Button klicken.
Google Search Console Search Analytics
Mit Google Analytics kannst Du eine Menge nützlicher Informationen zu Deinen mobilen Suchen bekommen. (Um es kurz zu halten, werde ich hier jedoch nicht näher auf diese Berichte eingehen.)
Eine tolle Quelle für die Analyse mobiler Daten ist die Google Search Console, nicht Google Analytics.
Um diese Berichte zu sehen, musst Du die Google Search Console aufrufen und auf Search Traffic → Search Analytics klicken.
Um die besten Berichte zu bekommen, musst Du die folgenden Einstellungen vornehmen.
Setze einen Haken in allen vier Kästchen (um die ausführlichsten Daten zu bekommen).
Dann klick auf “Devices”.
Klick auf “No filter” im Drop-Down-Menü. Dann klick auf “Filter Devices” und dann auf “mobile”.
Dann siehst Du den Vergleich Deiner Klicks, Impressionen, CTR und der Ergebnisse Deiner mobilen Such-Positionen.
Dann klick auf “Queries”, um die Zusammenfassung der mobilen Leistung der Top Suchanfragen zu sehen. Deine Einstellungen bleiben gleich.
Dann siehst Du den Bericht der Nutzeranfragen, die auf Deine Seite verweisen. Du kannst auch die Klicks, Impressionen, CTR und Position sehen.
Du kannst auch Deine Desktop und mobilen Analysen miteinander vergleichen.
Klick auf Devices → Mobile → Compare Devices, um das zu tun.
Wähle Mobile vs. Desktop aus und klick auf “Compare.”
Dann siehst Du gepunktete Linien.
Diese Berichte können durchaus verwirrend werden, darum solltest Du Deine Ansicht immer nur auf ein paar Details auf einmal beschränken.
In diesem Beispiel habe ich Klicks, CTR und Position nicht ausgewählt. Ich wollte die Impressionen von Desktop mit mobilen Geräten vergleichen.
Der Mehrwert dieser Vergleiche steckt im Detail. Du kannst auf “Queries” oder andere Such-Filter klicken, um Dir die individuellen Ergebnisse anzusehen.
In diesem Beispiel habe ich “Queries”angeklickt, um die Desktop-Impressionen mit den mobilen Impressionen zu vergleichen. Der Bericht errechnet sogar die Diskrepanz.
Meiner Meinung nach liefert die Google Search Console extrem detaillierte, hilfreiche und nützliche Daten für das mobile SEO.
Du kannst die Daten auf tausende unterschiedliche Arten analysieren. Wenn Du ein bisschen mit den Einstellungen herumgespielt hast, kommst Du bestimmt auf ein paar nützliche Ideen zur Optimierung Deiner Seite.
Mobile SEO Page Analyzer
Ein anderes hilfreiches Tool wird von Pure Oxygen Labs bereitgestellt.
Pure Oxygen ist eine bezahlte Dienstleistung, aber die SEO-Prüfung ist kostenlos. Du musst nur Deine E-Mail-Adresse hinterlassen.
Ich möchte Dir das Tool und die Informationen, die es bereitstellt, zeigen.
Geh zum Mobile SEO Page Analyzer. Klick auf “Try Mobile SEO Page Analyzer Now.”
Dann siehst Du eine Seite mit einer Handy-Grafik und einem Formular.
Du bekommst die Ergebnisse erst, wenn Du das Formular ausgefüllt und Deine E-Mail-Adresse bereitgestellt hast.
Gibt die Seite, die Du analysieren willst, und Deine E-Mail-Adresse ein.
Wenn Du auf “Analyze” klickst, wirst Du dazu aufgefordert, Deine E-Mail zu überprüfen.
Der Bericht ist sofort in Deinem Posteingang. Du musst nicht warten.
Klick auf “Check it out”, um Deinen Bericht zu sehen.
Dann siehst Du Folgendes:
Wenn Du Dich ein bisschen mit Servern und Seitensignalen auskennst, ist der Bericht hilfreich. Du bekommst nicht viele Informationen, aber dennoch genug, um ein paar hilfreiche Einblicke zu gewinnen.
Die Information sind nicht umsetzbar, so wie die aus dem Google-Bericht. Dieser Bericht sagt Dir also nicht, was Du an Deinem CSS verändern musst.
Der Bericht versorgt Dich aber mit ein paar hilfreichen Informationen zur Verbesserung der mobilen Nutzbarkeit Deiner Seite.
Mobile SEO Issues Tool
Hier ist ein Tool zur schnellen SEO-Prüfung von Varvy. Mit dem Tool kannst Du nach Problemen suchen.
Das wollen wir uns mal genauer ansehen.
Du musst Deine URL eingeben und auf “Test” klicken.
Der Bericht wird in wenigen Sekunden erstellst.
Der Bericht ist übersichtlich und leicht zu verstehen.
Er umfasst vier Punkte:
Mobile Freundlichkeit: Ziel ist die Nutzerfreundlichkeit
Mobile Geschwindigkeit: Deine Seite sollte schnell laden
Google Zugriff: Google sollte Zugriff auf Deine Seite haben
Weiterleitungen: Das Ziel sind keine Weiterleitungen
Du musst vier grüne Kästchen bekommen.
(In meinem Fall ist die langsamere Ladegeschwindigkeit für mobile Seiten nicht so schlimm. Meine Videos funktionieren super, darum ist es ein guter Kompromiss.)
Der echte Mehrwert wird sichtbar, wenn Du nach unten scrollst. Hier findest Du ausführlichere Informationen, die technische Details zum mobilen SEO liefern.
All das findest Du in diesem Bericht.
Unter dem Bericht findest Du dann eine hilfreiche Anleitung zum mobilen SEO, mit Bildern.
Fazit
Natürlich gibt es noch viel mehr Tools für das mobile SEO als die sechs, die ich in diesem Beitrag vorgestellt habe.
Eins der Größten? Google Analytics? Ich liebe Daten und GA versorgt mich mit allen notwendigen Informationen.
Diese Daten sind hilfreich, denn sie sind 1) kostenlos, 2) relativ einfach zu verstehen und zu nutzen, und 3) können einen Unterschied im mobilen SEO machen.
Es gibt aber kein Tool, das all Deine mobilen SEO-Bedenken auf magische Art und Weise allein beheben kann.
Ich habe die Erfahrung gemacht, dass man so viel wie möglich über die Mobile Usability lernen sollte.
Ich habe das bereits erwähnt, dank der Evolution des SEO ist Such-Optimierung heutzutage eher eine Nutzer-Optimierung.
Der Schlüssel zum Erfolg ist dem Nutzer zu geben was will, braucht und erwartet. Denn schließlich haben wir es nicht mit Crawlern und Algorithmen zu tun.
Wir haben es mit echten Leuten, die mobile Geräte jeden Tag benutzen, zu tun.
Wenn Du bei der Optimierung immer die Nutzer im Hinterkopf behältst, optimierst Du Deinen Seite automatisch auch für die Suchmaschinen.
Hast Du Lieblingstools für die mobile Optimierung? Wie benutzt Du sie?
Wie Du Deine mobile Webseite schneller machst
Wie Du Deine mobile Webseite schneller machst
Wenn Du Dir meine Artikel mal genau anschaust, wirst Du feststellen, dass ich besonderen Wert auf mobile Webseiten lege.
Warum ist das so wichtig?
Weil man um die mobilen Geräte heutzutage einfach nicht mehr herum kommt.
Die mobilen Geräte sind mittlerweile sogar wichtiger als Desktop.
51,3 % der Internetnutzer surfen auf mobilen Geräten. Diese Zahl wird in näherer Zukunft noch weiter wachsen.
Darum sage ich meinen Kunden immer, dass sie sich auf die mobilen Internetnutzer konzentrieren sollen. Dir gebe ich den gleichen Rat.
Du solltest Dich besonders gut um Deine mobile Webseite kümmern.
Eine responsive Webseite ohne aufdringliche Pop-ups ist Standard.
Außerdem kann man die bewährten Erfolgsmodelle der Desktop-Optimierung auch auf die Optimierung einer mobilen Webseite anwenden.
Heute will ich mich mit dem Thema “Seitengeschwindigkeit” befassen.
Dein Besucher erwartet eine schnell ladende Webseite. Wenn Deine Webseite nicht schnell genug ist, verlierst Du eine Menge Traffic.
Wie schnell?
73 % der mobilen Internetnutzer sagen, dass sie immer wieder auf Webseiten stoßen, die viel zu langsam laden und 40 % verlassen die Webseite, wenn sie nicht innerhalb von drei Sekunden lädt.
Einige Experten behaupten sogar, dass die Leute das Interesse verlieren, wenn die Webseite nicht wortwörtlich im Handumdrehen lädt. Das sind 400 Millisekunden.
Außerdem ist die Seitengeschwindigkeit ein Ranking-Faktor von Google, der Einfluss auf die Indexierung und Platzierung Deiner Webseite hat.
Wenn Deine Seite nicht schnell genug ist, macht sie sich bei den Nutzern und Google unbeliebt. Dann verlierst Du wertvollen Traffic.
Wie schnell ist Deine Webseite denn eigentlich?
Wenn sie länger als zwei oder drei Sekunden lädt, verlierst Du Traffic.
Es ist nicht schlimm, wenn Deine Webseite ein bisschen langsamer ist. Es gibt ein paar Dinge, die Du unternehmen kannst, um Dir keinen einzelnen Webseitenbesucher mehr durch die Lappen gehen zu lassen.
Überprüfe Deine Ladegeschwindigkeit
Zuerst musst Du die Ladegeschwindigkeit Deiner mobilen Webseite prüfen, denn sie ist wahrscheinlich langsamer als zunächst angenommen.
Für diese Prüfung empfehle ich Ubersuggest. Der Prozess sieht so aus:
Schritt Nr. 1 : Gib Deine URL in die Suchbox ein und klick auf “Suchen”.
Schritt Nr. 2 : Klick anschließend im linken Seitenmenü auf “Seiten-Audit”.
Schritt Nr. 3 : Scroll dann nach unten zum Bereich “Websitegeschwindigkeit”.
In diesem Bereich findest Du die Ladegeschwindigkeit Deiner mobilen und Deiner Desktop-Seite. Meine Webseite lädt innerhalb von zwei Sekunden und bekommt somit die Bewertung “ausgezeichnet”.
Du erhältst zudem weitere Informationen zu folgenden Elementen, die mit der Ladegeschwindigkeit zusammenhängen:
First Contentful Paint
Speed Index
Time to Interactive
First Meaningful Paint
First CPU Idle
Estimated Input Latency
Wenn Deine Webseite ebenfalls die Bewertung “ausgezeichnet” bekommt, ist alles super. Falls nicht, solltest Du jedoch keine unnötige Zeit verlieren, denn mit jeder halben Sekunde Verzögerung springen mehr und mehr Besucher von Deiner Webseite ab.
Ich werde jetzt auf die häufigsten Gründe für lange Ladezeiten eingehen und erklären, wie man eine Webseite schneller macht.
Perfektioniere das mobile Design Deiner Webseite
Kannst Du Dich noch daran erinnern, als Du das Design Deiner Webseite ausgewählt hast?
Hast Du damals schon an die mobilen Internetnutzer gedacht?
Wahrscheinlich nicht. (Wenn doch, kannst Du Dir selbst auf die Schulter klopfen.)
Ist aber nicht weiter schlimm, wenn dem nicht so ist. Jetzt musst Du das Design Deiner Webseite überdenken.
Mobile Webseiten haben sich in den letzten Jahren ganz schön verändert.
Früher gab es mal zwei unterschiedliche Versionen derselben Webseite, eine für die mobilen Geräte und eine für die Desktop-Geräte.
Eine mobile Seite kann an der “m.” Subdomain erkannt werden:
In diesem Fall handelt es sich um zwei komplett unterschiedliche Seiten, die auf verschiedenen Betriebssystemen laufen.
So wie ein Fast-Food-Restaurant mit Drive-Thru. Die Desktop-Seite ist der Hauptteil des Restaurants und die mobile Seite ist der Drive-Thru.
Meistens kann die mobile Seite dem Besucher nur einen Bruchteil der Erfahrung bereitstellen, so wie auch der Drive-Thru nicht das komplette Restaurant-Feeling vermittelt.
Du willst Deinen Nutzern aber immer die bestmögliche Erfahrung bieten.
Um das tun zu können, brauchst Du ein responsives Webdesign.
Das responsive Design passt sich automatisch unterschiedlichen Geräten an.
Deine mobilen und Deine Desktop-Besucher besuchen die gleiche Webseite, die ja nach Gerät aber jeweils anders angezeigt wird.
Diese Lösung wird von Google bevorzugt. Diese Aussage wird hier bestätigt: “Ein responsives Webdesign wird von Google empfohlen.”
Du denkst jetzt bestimmt: “Okay, so weit, so gut. Aber was hat das mit der Seitengeschwindigkeit zu tun”
Ein responsives Design lädt in der Regel schneller als rein mobile Webseiten. Du kannst Dir also einen SEO-Vorteil verschaffen.
Wenn Du ein responsives Design hast, wird Deine Webseite auch häufiger in den sozialen Medien geteilt, was Deiner SEO dann einen zusätzlichen Schub verleiht.
Das hat dann wiederum positive kurzfristige und langfristige Auswirkungen. Wenn Du also noch keine responsive Webseite hast, solltest Du Dir schnellstens eine anschaffen.
Ein responsives Webdesign ist aber lediglich ein Schritt in die richtige Richtung.
Du musst noch weitere Design-Aspekte in Betracht ziehen.
Deine Seite darf nicht überladen werden
Man kann sich schnell mal in ein wunderschönes aber aufwendiges Design verlieben.
So ein Design macht Deine Webseite aber immer langsamer, weil sie nach und nach mit unnötigen Elementen überladen wird.
Das wird unter Entwicklern auch als Code Bloat bezeichnet.
Das Problem tritt auf, wenn die Webseite mit unnötig viel Quelltext überladen ist.
Das kommt vor, wenn der Designer nur auf das visuelle Erscheinungsbild der Webseite bedacht ist.
Versteh mich jetzt nicht falsch. Deine Webseite muss toll aussehen.
Aber die Leistung Deiner Webseite sollte immer den Vorrang haben.
Das ist auch gar nicht so schwer. Du kannst Dein Stück von Kuchen abbekommen.
Hier sind ein paar Tipps, die Du immer im Hinterkopf behalten solltest, wenn Du das Design Deiner Webseite erstellst:
Weniger ist mehr. Leonardo da Vinci hat seine eigene Meinung dazu:
Einfachheit ist die höchste Stufe der Vollendung.
Auch jetzt noch, hunderte Jahre später, entspricht diese Aussage der Wahrheit.
Schau Dich mal um. Die komplexen Designs der Vergangenheit haben den minimalistischen Designs der Zukunft Platz gemacht.
Das gibt auch für Webseiten. Besonders mobile Webseiten.
So eine Seite kann auf einem mobilen Gerät schnell mal überladen wirken, darum sollte man sich nicht mit zu viel Schnickschnack zumüllen.
Als Faustregel gilt: Du solltest nur eine Handlungsaufforderung pro Seite anbieten. Das minimiert den Code und verbessert die Nutzererfahrung.
Du solltest vielleicht auch ein weniger kompliziertes Design, wie das von Rug Doctor, in Betracht ziehen:
Es ist nicht auffällig, fängt den Besucher aber elegant ein.
Du brauchst keine grellen Farben oder viele Fotos, um Deine Seite aus der Menge herausstechen zu lassen. Weniger ist eben oft mehr.
Eliminiere unnötige Schritte. Je weniger ein Nutzer machen muss, desto besser.
Denk mal kurz darüber nach. Warum sollte der Kunde 7 Schritte unternehmen, wenn der Verkauf auf in 3 Schritten abgeschlossen werden kann?
Du kannst den Verkaufstrichter verkürzen und sie Nutzererfahrung verbessern.
Viele E-Commerce-Seite nutzen diese Strategie, um ihre Verkäufe zu fördern.
Auf der mobilen Webseite von Boden kann man ganz leicht einkaufen. Du legst das Produkt in Deinen Einkaufswagen, gehst zur Kasse und bezahlst.
Schlicht und auf den Punkt gebracht. Keine unnötigen Schritte.
Du kannst so Deinen Code reduzieren, denn wenn Du nur wenige Seiten hast, kann der Code Bloat nicht so schnell auftreten.
Das Entfernen unnötiger Schritte ist eine der besten Methoden, um Deine Besucher glücklich zu machen. Die mobilen Internetnutzer verweilen viel länger auf einer Webseite, wenn diese ihnen nicht zu viel abverlangt.
Du kannst Deinen Besuchern ein paar Klickst sparen und dann die Früchte Deiner harten Arbeit ernten.
Benutze weniger Bilder. Bevor ich hier ins Detail gehe, möchte ich kurz anmerken, dass gute Bilder auf jeden Fall wichtig sind und SEO-Vorteile mit sich bringen.
Man kann es aber auch übertreiben.
Wenn Du zu viele Bilder benutzt, macht es Deine Webseite langsamer.
Du machst Dir jetzt vielleicht noch nicht so viele Gedanken dazu, aber Bilder können rund 63 % des “Gewichtes” Deiner Webseite ausmachen.
Die Größe einer durchschnittlichen mobilen Webseite hat sich in den Jahren von 2011 bis 2015 verdreifacht.
Die Bilder können Deine Webseite also ausbremsen. Sie nehmen viel Platz ein und zu viele Bilder sind nicht gut.
Du könntest also auf ein paar Bilder verzichten.
Ein weiterer (und durchaus praktischerer) Lösungsansatz ist die Reduktion der Dateigröße.
Wenn Du Deine Bilder komprimierst, kannst Du sie kleiner machen ohne Qualität einzubüßen. Dann lädt Deine Seite auch schneller.
Außerdem können die Suchmaschinen Deine Webseite dann auch schneller durchsuchen und indexieren.
Du kannst Deine Bilder auf Seiten wie Compressor.io im Handumdrehen reduzieren.
Du solltest Dir dieses Vorgehen auf jeden Fall angewöhnen, auch wenn Deine Seite schon blitzschnell ist.
Verzichte auf benutzerdefinierte Schriftarten. Auch ich liebe hübsche Schriftarten, aber einige sind ganz schön aufwendig.
Einige Schriftarten brauchen viel CSS, und andere viel JavaScript. In beiden Fällen produzieren sie viel überflüssigen Code.
Wenn Du Dich gern näher mit diesem Thema beschäftigen willst, solltest Du Dir diesen Artikel von Google durchlesen.
Hier ist die Kurzversion: Verzichte am besten auf benutzerdefinierte Schriftarten, wenn es nicht absolut notwendig ist.
Hübsche Schriftarten für Überschriften sind akzeptabel, der Haupttext sollte aber aus einer weit verbreiteten Schriftart bestehen.
Minimiere Deinen Code
Die Minimierung ist eine beliebte Technik, um einen Code zu vereinfachen.
Hier ist eine kurze Definition, damit Du verstehst, was mit “Minimierung” gemeint ist:
Bei der Minimierung werden alle überflüssigen Elemente aus Deinem Code entfernt. Dann greift Deine Webseite nur auf den nötigen Code zu.
So kannst Du Deine Seite aufräumen.
Du kannst Deinen Code manuell minimieren (siehe Anleitung), solltest davon aber vielleicht besser absehen, wenn Du kein erfahrener Programmierer bist.
Zum Glück gibt es ein paar hilfreiche Tools, mit denen Du Deinen Code blitzschnell entrümpeln kannst.
verfügt über zahlreiche Funktionen, um HTML, CSS, JavaScript und weitere zu überarbeiten.
Wenn Deine Webseite mit WordPress erstellt worden ist, stehen Dir sogar noch weitere Optionen, zum Beispiel das Plug-in Better WordPress Minify, zur Verfügung:
Mit diesen Tools kannst Du Deinen Code mit nur wenigen Klicks optimieren und Deine Seite schneller machen.
Du solltest natürlich alles in Deiner Machst stehende unternehmen, um unnötigen Code zu vermeiden, aber Fehler treten immer mal wieder auf. Mit diesen Tools kannst Du diese Fehler ausfindig machen und beheben.
Übertreibe es nicht mit den Weiterleitungen
Ich liebe Weiterleitungen. Sie können extrem nützlich für die SEO und die Nutzererfahrung sein.
Aber wie der Code, haben auch Weiterleitungen ihre Einschränkungen. Du kannst nicht unendlich viele Weiterleitungen einrichten und dann erwarten, dass Deine Webseite einwandfrei funktioniert.
Das liegt daran, weil Weiterleitungen Deine Webseite langsamer machen.
Wenn Du auf einen mobilen Link klickst, verweist der Server auf die Datei, die dort hinterlegt ist.
Wenn es sich dabei aber um eine Weiterleitung handelt, ist keine Datei hinterlegt. Dann muss der Server erst auf die Seite, auf der die Datei hinterlegt ist, zugreifen.
Dieser Prozess muss für jede einzelne Seite einer Webseite wiederholt werden. Jede Bild-, CSS- und JavaScript-Datei muss die Weiterleitung überbrücken.
Darum kann das Laden einer Webseite in diesen Fällen schon mal mehrere Sekunden dauern. Dann haben Deine Besucher aber schon längst die Flucht ergriffen.
Ich kann Dir den Redirect Mapper von Varvy ans Herz legen, wenn Du die Weiterleitungen Deiner Webseite überprüfen willst:
Dann kannst Du Dir jede einzelne Weiterleitung ansehen und ggf. Veränderungen vornahmen.
Viele Webmaster denken gar nicht an die Weiterleistungen, obwohl sie einen entscheidenden Unterschied machen können.
Je weniger Deine Webseite arbeiten muss, desto schneller ist sie. Obwohl Weiterleitungen durchaus sinnvoll sein können, sollte man sie nicht überstrapazieren.
Lade zuerst die Inhalte im sichtbaren Seitenbereich
Natürlich sehen Deine Besucher die Inhalte im sichtbaren Seitenbereich zuerst.
Warum solltest Du also Deine komplette Seite laden?
Warum solltest Du nicht zuerst die Inhalte im sichtbaren Seitenbereich laden und den Rest dann später nachholen?
Das bezeichnet man auch als “Lazy Loading”. Es kann Wunder bewirken.
Ich wette Du würdest lieber 3 kg und nicht 30 kg stemmen, wenn Du die Wahl hast.
Lazy Loading folgt dem gleichen Prinzip.
Du kannst Deiner Webseite mitteilen, dass sie nur so viel wie Arbeit wie unbedingt notwendig leisten muss
Wenn Du Dich gut mit Code auskennst, kannst Du das jQuery Plug-in benutzen:
Für Deine WordPress-Seite kannst Du auch auf Plug-ins wie BJ Lazy Load zurückgreifen.
Wenn beide Plug-ins keine gute Option sind, solltest Du einen Entwickler einstellen.
Diese Technik ist zwar fortgeschritten, kann Deine Webseite aber deutlich schneller machen.
Fazit
Die Geschwindigkeit ist nicht nur in der Formel 1 wichtig. Sie ist ein wichtiges Element jeder Webseite.
Ich habe schon mit vielen Webseiten zusammengearbeitet und weise meine Kunden immer auf die Wichtigkeit der mobilen Leistungsfähigkeit hin.
Wenn ich ihnen dann dabei geholfen habe, ihre Webseite mobil-freundlich zu gestalten, schießt ihr Traffic durch die Decke. Dann gewinnen sie automatisch mehr Kunden und verkaufen mehr Produkte.
Kein Hexenwerk. Jeder ist in sein Mobiltelefon vertieft oder kann sich nicht von seinem Tablet losreißen.
Das mobile Zeitalter ist endlich angebrochen.
Die Desktop-Leistung Deiner Webseite ist zwar noch immer wichtig, aber mobile Webseiten sind die Gegenwart und die Zukunft.
Eines Tages sind Desktop-Computer vielleicht so überflüssig wie Kabeltelefone oder Faxmaschinen. Dann übernimmt das mobile Browsen das Internet.
Gar nicht so abwegig, oder?
Und wenn diese Zukunft wirklich unmittelbar bevorsteht, solltest Du Dich bereits jetzt darauf vorbereiten.
Was kannst Du also machen?
Mach Deine Webseite so schnell wie möglich und reduziere die Datenmengen.
Wie dieser Artikel von Think With Google so schön sagt: “Geschwindigkeit nervt, Reibung ist tödlich.”
Mobile Nutzer lieben schnittige Webseiten und hassen alles, was eine Webseite langsamer macht.
Die Verbesserung Deiner Webseitengeschwindigkeit ist eine todsichere Methode, um Deine Seite für Suchmaschinen und Nutzer zu optimieren.
Wenn Du Dich bis dato noch nicht mit der mobilen Webseite auseinander gesetzt hast, solltest Du sofort damit anfangen.
Welche dieser Methoden willst Du benutzen, um Deine mobile Webseite schneller zu machen?
Tagged: