So laden Sie Ihre Website auf Mobilgeräten schnell (2022)

Die Leistung Ihrer Website auf Mobilgeräten ist jetzt wichtiger als auf Desktops.

Dies liegt daran, dass es mehr Menschen gibt, die mobil auf das Internet zugreifen, als Menschen, die Desktops verwenden.

Laut StatCounter verwenden über 50 % der Internetnutzer weltweit mobile Geräte. Während nur etwas mehr als 47 % Desktops verwenden.

Wenn Sie Ihre Website hauptsächlich nur für den Desktop optimieren, schaden Sie Ihrem Geschäftserfolg. Mobil ist heute wichtiger denn je.

Die Leistung Ihrer Website auf Mobilgeräten ist für SEO sehr wichtig. Der Ansatz von Google ist jetzt die Mobile-First-Indexierung. Das bedeutet, dass Google die mobile Version einer Website für die Indexierung und das Ranking verwendet.

Wenn Ihre Website auf dem Desktop schnell und auf dem Handy langsam ist, wird Ihr Ranking darunter leiden. Die Leistung Ihrer Website auf Mobilgeräten sollte wichtiger sein als die Leistung auf Desktops.

Das schnelle Laden Ihrer Website auf Mobilgeräten verbessert Ihre SEO, verringert die Absprungrate und erhöht die Konversion.

Das Optimieren einer Website für die Geschwindigkeit auf Mobilgeräten ist jedoch nicht so einfach wie das Optimieren einer Website für die Geschwindigkeit auf Desktops. Glücklicherweise kann dieser Artikel Ihnen helfen, Ihre Website auf Mobilgeräten schnell zu laden, wenn Sie die hier aufgeführten Tipps befolgen.

Testen Sie die Geschwindigkeit Ihrer Website

Als erstes sollten Sie die Geschwindigkeit Ihrer Website auf Mobilgeräten testen. Dadurch erhalten Sie ein klares Bild davon, wie schnell oder langsam Ihre Website ist.

Nur weil Ihre Website auf dem Desktop schnell geladen wird, ist dies keine Garantie dafür, dass sie auf Mobilgeräten schnell geladen wird. Es ist möglich, dass Ihre Website auf dem Desktop superschnell, auf dem Handy aber superlangsam ist.

Es gibt viele mobile Testtools, aber ich bevorzuge die Verwendung von Googles Test My Site für den mobilen Geschwindigkeitstest.

Besuchen Sie einfach ThinkWithGoogle und geben Sie die URL Ihrer Website ein. Sie sollten in der Lage sein, zu testen, wie schnell Ihre Website ist.

Für mich ist eine Seite, die innerhalb von 3 Sekunden lädt, gut genug. Aber Think With Google empfiehlt mindestens 2,4 Sekunden.

Wie Sie dafür sorgen, dass Ihre Website auf Mobilgeräten schnell geladen wird

Hier sind die Best Practices zur Beschleunigung Ihrer Website auf Mobilgeräten:

Verwenden Sie ein responsives Design

Ein responsives Design ist ein Design, das sich an alle Geräte anpasst. Das bedeutet, dass selbst wenn Ihre Benutzer von Desktop, Handy oder Tablet kommen, Ihr Thema ihnen eine Version Ihrer Website liefert, die zu jedem Gerät passt, das sie verwenden.

Die Bereitstellung der Desktop-Version einer Website für mobile Benutzer verlangsamt die Ladezeit. Und es ist schrecklich für die Benutzererfahrung.

Die Verwendung eines responsiven Designs ist sehr wichtig. Es ist die erste Grundlage einer schnellen Website auf dem Handy. Es gibt mehrere ansprechende Themen, aus denen Sie auswählen können. Lesen Sie meine Liste der 10 schnellsten und besten WordPress-Themen durch, jedes der dort aufgeführten Themen ist gut genug und reaktionsschnell.

Verwenden Sie einen schnellen Webhost

Ihr Webhoster spielt die wichtigste Rolle bei der Beschleunigung Ihrer Website. Ein sehr schneller Webhost mit den neuesten Hosting-Technologien sorgt dafür, dass Ihre Website auf Mobilgeräten schnell geladen wird.

Wenn Sie einen langsamen Webhost haben, sehen Sie möglicherweise keine signifikante Verbesserung, egal wie Sie Ihre Website optimieren.

Ich empfehle Cloudways und Kinsta für etablierte Websites. TargetTrend wird bei Cloudways gehostet. Für Anfängerseiten empfehle ich Bluehost.

Verwenden Sie AMP

Accelerated Mobile Pages (AMP) ist ein Projekt von Google zur Beschleunigung von Websites auf Mobilgeräten.

AMP ist für das mobile Surfen optimiert und kann dazu beitragen, die Ladezeit einer Website erheblich zu beschleunigen. Laut einer Studie kann es auch die Anzahl der Anfragen um über 77 % reduzieren.

Sie können mit AMP beginnen, indem Sie das offizielle AMP-Plug-in installieren. Es gibt andere AMP-Plugins, die Sie auch verwenden können.

Sobald Sie das Plugin aktiviert haben, können Sie einen der drei verfügbaren Modi auswählen. Wenn die Mehrheit Ihrer Besucher von Mobilgeräten kommt, sollten Sie den Übergangs- oder Standardmodus verwenden. Aber Ihr Thema muss AMP-kompatibel sein.

Bilder faul laden

Bilder können eine Website verlangsamen, insbesondere auf Mobilgeräten. Der beste Weg, mit ihnen umzugehen, besteht darin, sie zu laden, wenn Benutzer zu ihnen gescrollt haben. Auf diese Weise werden sie nur bei Bedarf geladen und haben daher nur geringe oder keine Auswirkungen auf die Ladezeit.

Wenn Sie versuchen, Ihre Website auf PageSpeed ​​Insight oder Web.dev zu testen, und Sie gewarnt werden, „Offscreen-Bilder zurückzustellen“, bedeutet dies, dass Bilder Ihre Ladezeit verlangsamen, und Sie sollten in Erwägung ziehen, sie nachlässig zu laden.

Beim Verlangsamen des Ladens von Bildern geht es darum, das Laden von Bildern zu verzögern, bis ein Benutzer dorthin scrollt. Dies kann die Geschwindigkeit verbessern.

Es gibt viele Plugins für Lazy Loading. Die meisten Cache-Plugins und Bildoptimierungs-Plugins haben Lazy-Loading-Optionen.

Beseitigen Sie Ressourcen, die das Rendern blockieren

Das Eliminieren von Render-Blocking-Ressourcen kann die Ladezeit Ihrer Website auf Mobilgeräten beschleunigen.

Es gibt normalerweise einige Java-Skripte und CSS, die es dem Browser erschweren, eine Website schnell darzustellen, wenn ein Benutzer sie besucht. Dies liegt daran, dass der Browser diese Dateien stoppen und lesen muss, bevor er die Website für den Benutzer rendern kann.

Das Eliminieren dieser Ressourcen kann die Ladezeit beschleunigen. Es gibt Plugins wie Autoptimize, die helfen können, Render-Blocking-Ressourcen zu eliminieren.

Ich habe dazu einen hilfreichen Artikel, den Sie lesen sollten: How to Eliminate render-blocking resources in WordPress.

Entfernen Sie unbenutztes CSS

Eine Menge ungenutztes CSS kann eine Website verlangsamen. Nicht verwendete CSS sind CSS, die nicht zum Laden einer Website benötigt werden. Aber weil sie vorhanden sind, muss der Browser sie trotzdem herunterladen, parsen und verarbeiten.

Es gibt Plugins wie Perfmatters und Asset CleanUp, die dabei helfen können, ungenutztes CSS zu entfernen.

Dazu habe ich eine einfache Anleitung geschrieben: So entfernen Sie ungenutztes CSS und JS in WordPress.

Generieren Sie kritisches CSS

Critical CSS wird zum einfachen Extrahieren von „above the fold“-Inhalten verwendet, um sie dem Benutzer schnell wiederzugeben. Ein kritischer CSS-Pfad kann die Ladezeit Ihrer Website auf Mobilgeräten und Desktops beschleunigen.

Es gibt Plugins, die beim Generieren von kritischem CSS helfen können. WP Rocket kann das, LiteSpeed ​​Cache und WP Performance können auch kritisches CSS generieren.

Haben Sie ein gutes Caching-System

Caching ist eine sehr zuverlässige Methode, um eine Website zu beschleunigen. Sie sollten ein effektives Caching-Plugin verwenden, um Ihren mobilen Besuchern zwischengespeicherte Inhalte bereitzustellen. WP Rocket ist ein Premium-Caching-Plugin, das sehr effektiv ist. W3 Total Cache kann bei guter Konfiguration sehr effektiv sein.

Die meisten verwalteten Webhosting-Unternehmen bieten Caching auf Serverebene an. Finden Sie heraus, ob Ihr Webhost dasselbe anbietet, und bitten Sie ihn, es für Ihre Website zu aktivieren, wenn es nicht sofort einsatzbereit ist.

Sie können Ihren Host auffordern, den Varnish-Cache zu installieren und zu aktivieren. Varnish Cache ist dafür bekannt, Websites zu beschleunigen.

Bilder optimieren

Stellen Sie sicher, dass Sie Bilder komprimieren. Ich ziehe es vor, Bilder vor dem Hochladen vollständig zu komprimieren. Es gibt jedoch viele Plugins wie Optimole und andere, die dabei helfen können, Bilder in WordPress zu komprimieren.

Das Bereitstellen von WebP-Bildern kann auch dazu beitragen, die Website-Geschwindigkeit zu steigern. WebP sind kleiner als JPG und PNG und daher schneller.

Es gibt viele Plugins, die beim Konvertieren und Bereitstellen von WebP-Bildern helfen können. Optimole und Flugbilder können das sehr gut.

Code minimieren

Bei der Minifizierung wird der Code einer Website von einer größeren auf eine kleinere Größe komprimiert. Je kleiner desto besser, solange nichts kaputt geht.

Sie sollten erwägen, JS und CSS zu minimieren.

Die meisten Caching-Plugins bieten Minimierungsfunktionen. Stellen Sie jedoch sicher, dass Sie zum Testen Staging verwenden, da die Minimierung bekanntermaßen Websites beschädigt.

Weiterleitungen minimieren

Zu viele Weiterleitungen können Ihre Website verlangsamen, insbesondere auf Mobilgeräten. Dies kann die Antwortzeit des Servers verlangsamen.

Stellen Sie sicher, dass Sie nicht zu viele Umleitungen haben. Wenn ja, dann reduzieren Sie sie so weit wie möglich.

Komprimierung aktivieren

Komprimieren Sie Dateien, um Ihre Website auf Mobilgeräten schnell zu machen. Je kleiner die Dinge sind, desto schneller wird Ihre Website.

Gzip oder Brotli können die Geschwindigkeit Ihrer Website erheblich steigern, indem sie Website-Dateien komprimieren. Im Allgemeinen ist Brotli besser als Gzip. Aber jeder von ihnen wird gut funktionieren. Wenden Sie sich an Ihren Webhoster, um die Komprimierung für Sie zu aktivieren.

Es gibt auch Plugins, die Ihnen helfen können, die Komprimierung zu aktivieren, wenn eine Plugin-Lösung für Sie besser geeignet ist.

Reduzieren Sie die Anzahl von AdSense pro Seite

Google AdSense ist eine der beliebtesten Möglichkeiten, mit dem Bloggen Geld zu verdienen, aber es ist auch dafür bekannt, Websites erheblich zu verlangsamen.

Wenn Sie AdSense deaktivieren, werden Sie meiner Beobachtung nach sofort einen sehr großen Unterschied in Ihrer Ladezeit bemerken.

Aber Geld ist sehr wichtig, ebenso wie Geschwindigkeit. Man muss also einen Kompromiss finden. Google empfiehlt 3 Anzeigenblöcke pro Seite. Wenn du dich daran hältst, dann sollte es dir gut gehen.

Mir ist aufgefallen, dass die Anzeigenblöcke mit Contentempfehlungen und Anzeigen auf Seitenebene die größten negativen Auswirkungen auf die Ladezeit auf Mobilgeräten haben.

Verwenden Sie ein CDN

Ein Content Delivery Network kann dazu beitragen, die Geschwindigkeit Ihrer Website zu erhöhen, indem es eine statische Kopie Ihrer Website erstellt und diese Benutzern auf der ganzen Welt von einem näher gelegenen Standort aus zur Verfügung stellt, wenn sie versuchen, Ihre Website zu besuchen.

Wenn Sie kein CDN verwenden, verpassen Sie etwas!.

Sehen Sie sich die besten WordPress-CDN-Anbieter an.

Verwenden Sie die System-Stack-Schriftart

Kürzlich habe ich versucht, die Ladezeit dieser Website auf Mobilgeräten zu beschleunigen. Also beschloss ich, die Google-Schriftart nicht mehr zu verwenden, und probierte den System-Stack aus, und zu meiner Überraschung gab es eine deutliche Verbesserung der Geschwindigkeit.

Google Fonts und Font Awesome sind erstaunlich, aber sie können die Website verlangsamen. Durch die Verwendung des Systemstapels stellen Sie sicher, dass keine externen Anforderungen gestellt werden, da die Schriftart des vom Benutzer verwendeten Geräts benötigt wird.

Einige Themen erleichtern den Wechsel zum System-Stack. Wechseln Sie einfach zum System-Stack.

Verwenden Sie neuere PHP-Versionen

Neuere PHP-Versionen sind normalerweise schneller als die älteren. Sie sollten sicherstellen, dass Sie die neueste PHP-Version oder nur eine Version rückwärts verwenden.

Nicht nur für Geschwindigkeit, sondern auch für Sicherheit.