5 tips for a better, faster mobile site

Was gibt es beim Surfen mit dem Smartphone Schlimmeres als eine Webseite, die gerade dann unmöglich langsam lädt, wenn Sie eine schnelle Antwort brauchen? Oder wenn Sie auf ein Element tippen, und dieses plötzlich wegspringt, weil die Seite noch nicht vollständig geladen ist und Sie am Ende etwas anderes anklicken? (Mal ehrlich: ist es nicht noch nerviger wenn das „andere“ dann auch noch eine Werbeanzeige ist?)

Beides sind schrecklich frustrierende Erfahrungen für Mobiltelefonnutzer. (Nach HubSpot ist es nicht nur frustrierend, sondern kann sogar Stress auf einem Level verursachen als würde man einen Horror-Film ansehen!)

Die gute Nachricht? Es gibt vieles, das Sie tun können um das erste Pixel so schnell wie möglich zu übermitteln und Nutzern so Probleme zu ersparen, bzw. sogar deren Treue zu gewinnen. Hier sind 5 Ideen, wie Sie die Leistung und Ladezeit Ihrer Mobilseite verbessern können.

 1.     Nutzen Sie ein Content Delivery Network (CDN)

Wenn ein Benutzer in den USA eine mobile Webseite aufruft, die in Frankreich gehostet ist, dann müssen die Daten lange reisen. Der mobile Browser des Benutzers muss Daten vom Server in Frankreich abrufen, welcher die Daten bis in die USA schickt – das verlangsamt den Vorgang.

Mit einem Content Delivery Network kann ich das verhindern. Damit können Inhalte von meiner Webseite weltweit auf verschiedenen Servern kopiert und gespeichert werden, so dass meine Webseite überall und zu jeder Zeit verfügbar ist. Inhalte können schnell von dem Server abgerufen werden, der am nächsten am Nutzer dran ist.

Für ein positives mobiles Interneterlebnis zählt jede Millisekunde. Mit einem CDN können Sie wertvolle Ladezeit sparen.

 

 2.     Eine Lade-Reihenfolge für Daten bestimmen

Wenn wir nun wieder auf das nervige Problem zurückkommen, welches wir benannt haben, bei dem ein Benutzer auf einer langsam ladenden Seite auf etwas klickt, was dann woanders hinspringt… und schon hat der Benutzer unabsichtlich auf eine Anzeige geklickt (was beim Benutzer Zorn auslöst und Sie wahrscheinlich Geld kostet).

Es gibt einen einfachen Weg dies zu vermeiden: Lassen Sie nicht alle Dateien auf der Seite gleichzeitig laden! Setzen Sie eine Reihenfolge fest.

Laden Sie zuerst das Seitenlayout, sodass die Struktur der Inhalte sichtbar wird, so dass der Benutzer weiß, wo Inhalte auftauchen werden, selbst wenn Text und Bilder noch nicht sichtbar sind; dies hilft ihnen, die Struktur der Seite zu verstehen. So springen Inhalte auch nicht als Elemente von einer Seite zur anderen.

Dann laden Sie Textinhalte. Ihre Benutzer können so auf wichtige Textinformationen zugreifen, nach denen sie suchen, selbst wenn die Bilder noch nicht geladen sind, so dass Ihre Seite trotz fehlender Grafiken komplett nutzbar ist.

Laden Sie dann die Grafiken, und schon ist Ihre mobile Webseite komplett geladen und steht dem Benutzer in voller Pracht zur Verfügung.

Datei für mobile Webseite wird geladen

Durch das Übermitteln des Layouts, der Texte und dann der Grafiken, haben Ihre Benutzer den Eindruck, dass die Seite schneller lädt als das tatsächlich der Fall ist, da sie nicht mehr vor einer weißen Seite warten müssen.

 

3.     Lassen Sie schwere Dateien weg (nicht nur die Größen anpassen)

Jahrelang haben wir gehört, wie wichtig Benutzerfreundlichkeit im Webdesign ist und wie wichtig es ist, dass die Bilder unserer Webseiten sich automatisch den mobilen Bildschirmen anpassen, um so eine verbesserte Benutzererfahrung zu gewährleisten. Richtig?

Oft wird dabei aber vergessen, wie Sie erraten können – dass dies die Geschwindigkeit der mobilen Seiten negativ beeinträchtigt. Nur weil sich eine Seite an die Bildschirmgröße anpasst, ist sie noch lange nicht für mobile Leistung optimiert.

Angepasstes Bild für eine verbesserte Benutzerfreundlichkeit

Hier ein typischer Fehler: die Anzeigegröße eines Bildes wird auf den mobilen Bildschirm angepasst (die Originalbilddatei mit Desktop-Qualität bleibt riesig). Natürlich passt das angepasste Bild in mobile Bildschirme, die große Datei erfordert aber eine lange Ladezeit.

Vermeiden Sie es, Ihre Desktopbilder für mobile Geräte in der Größe anzupassen. Bieten Sie stattdessen verschiedene Versionen auf Ihrem Server an, eine Version mit hochwertigen Bildern für Desktop-Geräte und eine leichtere Version mit Bildern mit niedrigerer Auflösung für Mobilgeräte.

 

 4.     Cache wann immer möglich

Nutzen Sie so oft wie möglich den Cache, um Daten auf Ihrem Server oder in den Browsern von Benutzern zu speichern, um spätere Besuche schneller zu machen:

  • Cache im Server: Berechnete Datenergebnisse werden auf Ihrem Server gespeichert damit der nächste Nutzer, der die gleiche Information abruft, schnell auf vorberechnete Ergebnisse zugreifen kann.
  • Browser-Cache: Manche Elemente Ihrer mobilen Seite können auf mehreren Unterseiten gleich und statisch sein, wie Ihr Firmenlogo oder die Fußzeile, diese können im Cache des von Ihnen benutzten Browser gespeichert werden. Wenn der Benutzer eine andere Unterseite Ihrer mobilen Webseite abruft, werden die Elemente aus dem Cache direkt geladen, da Sie im Browser des Benutzers gespeichert sind.

 

 5.     Weniger anfragen: Tags vereinfachen

Denken Sie über die Anzahl von Abfragen nach, die beim Laden jeder Seite erforderlich sind: Tags von Werbeanzeigen, Widgets, Analytics-Tags und noch vieles mehr …

Da mit jeder Anfrage extra Ladezeit notwendig ist, muss eine Seite, die viele Tools nutzt, länger laden. Überlegen Sie sich daher genau, welche Tools auf Ihrer Webseite wirklich sinnvoll sind, und behalten Sie nur solche, die wirklich Sinn machen. Brauche Sie wirklich 10 verschiedene Anzeigenserver? Durch das Vereinfachen der Tags und Anfragen, die Sie beim Laden jeder Seite benötigen, können Sie die Leistungen Ihrer mobilen Seite verbessern.

Wollen Sie wissen, wie lange Ihre Webseite braucht um auf einem Mobilgerät zu laden? Testen Sie die Geschwindigkeit unter https://www.webpagetest.org/ – hier sehen Sie auch wie viele Anfragen gesendet wurden, eine Staffelung der Bearbeitungszeit, und vieles mehr.

 

Konkretere Tipps zur Verbesserung der Leistung Ihrer mobilen Webseiten und Ideen für leichte Analytics-Tags finden Sie in dieser Webinar-Aufzeichnung (auf Englisch):

Mobile Leistungen verbessern & Tag laden optimieren

 

Danke an Florian Rieupet, AT Internet Produktmanager, für die Beihilfe zu diesem Artikel!

Autor

Ashleys Heimat ist das Silicon Valley. Sie verfügt über 10 Jahre Erfahrung als Marketing Writer und hat zuletzt bei Google im digitalen B2B-Marketing gearbeitet. 2014 ist sie zu AT Internet gekommen um unsere internationale Kommunikation in 6 Sprachen auf- und auszubauen. Ihr Ansporn ist es, die Inhalte aus dem komplexen, sich unablässig verändernden digitalen Universum in klare, ansprechende und verlässliche Botschaften zu übersetzen – mit nichts als den richtigen Worten.

Comments are closed.