Wie können Sie die Ladezeit von Seiten optimieren und Ihre SEO verbessern?

Wir leben in einer wahnsinnig ungeduldigen Welt. Die schnelle Bereitstellung qualitativ hochwertiger Inhalte war vor einigen Jahren eine beneidenswerte Leistung. Heute ist es eine rudimentäre Voraussetzung für jedes Unternehmen.

Je länger Sie Leute warten lassen, bis sie auf Ihre Website zugreifen, desto größer ist die Wahrscheinlichkeit, dass sie abspringen. Eine langsame Website ist ein ernstes Problem, das sofortige Aufmerksamkeit erfordert.

Wieso den?

Angenommen, Sie haben eine Conversion-Rate von 3 %. Sie erhalten drei potenzielle Kunden pro 100 Klicks. Nun, was ist, wenn alle drei abprallen, weil Ihre Zielseite in Dinosaurierjahren geladen wird? Stellen Sie sich die Auswirkungen auf Ihr Endergebnis vor.

In diesem Beitrag zeigen wir Ihnen, wie Sie dieses Szenario vermeiden können. Es gibt 5 Schritte zur Optimierung der Ladezeit Ihrer Seite.

Schritt Eins: Ermitteln Sie Ihre aktuelle Seitenladegeschwindigkeit.

Google PageSpeed ​​Insights und GTMetrix sind nützliche Tools zur Berechnung der Seitengeschwindigkeit. Beide listen Faktoren auf, die die Geschwindigkeit behindern. GTMetrix sagt Ihnen jedoch, wie viele Sekunden es dauert, bis Ihre Seite geladen ist.

Fügen Sie Ihre Domain-URL in GTMetrix ein und lassen Sie das Tool seine Magie ausführen.

In wenigen Sekunden füllt es die Zahlen aus und weist Ihnen eine Note zu.

Es zeigt auch, wie viel Zeit jedes Element der Seite zum Laden benötigt hat. Zum Beispiel dauerte es gemäß dem obigen Bild 5,5 Sekunden, bis FCP oder First Colorful Paint geladen war. Die Gesamtladezeit der Seite beträgt faule 7,3 Sekunden!

Das Tool enthält auch eine Liste mit Vorschlägen zur Erhöhung der Ladegeschwindigkeit Ihrer Seite…

…und noch ein paar Tipps:

Im nächsten Abschnitt wird erläutert, wie Sie mit GTMetrix eine schnellere Geschwindigkeitsbewertung erhalten.

Schritt Zwei: Optimieren Sie Ihre Website, um die Seitenladegeschwindigkeit zu erhöhen.

Tipps zur SEO-Bildoptimierung

Wie verkleinere ich die Bildgröße?

Jede Website ist eine Datei, die auf Anfrage von den Servern geladen wird. Sie möchten, dass diese Dateigröße minimal ist, um ein schnelles Laden zu fördern.

Bilder sind normalerweise riesig groß! Sie brauchen Äonen zum Laden.

Aber sie bieten einen enormen Mehrwert, wenn sie klug eingesetzt werden. Zum Beispiel haben mir die Bilder von GTMetrix geholfen, meinen Standpunkt besser darzustellen, während ich Ihnen eine Referenz gegeben habe.

Wir sollten Bilder nicht eliminieren, aber wir können ihre Verwendung optimieren. Dies sind 4 Methoden, um die Bildgröße zu reduzieren.

• Bildkompression
• Bilder zuschneiden
• Bilder skalieren

Bildkompression

Machen Sie Bilder, die Sie verwenden, kleiner. Der Prozess dieser Reduzierung der Dateigröße wird als Bildkomprimierung bezeichnet. Bilder sind ein Stapel von Ebenen; Jede Schicht fügt einen Geschmack hinzu. Die Komprimierung reduziert die Seitengröße, indem Ebenen entfernt werden, die das Bild schärfen.

Dies wirkt sich zwar auf die Bildqualität aus, gleicht dies jedoch mehr als aus, indem es Ihnen SEO-Punkte einbringt.

Beginnen Sie damit, Ihre Bilder im JPG-Format zu speichern, da sie weniger Speicherplatz beanspruchen. Einige Blogs empfehlen JPEG2000 oder WEBP, aber mein Design hatte Probleme beim Rendern mit diesem Format. Oft funktioniert JPG gut.

Von hier aus gibt es zwei Möglichkeiten, mehr Komprimierung zu erreichen.

1. Bilder online komprimieren

Gehen Sie zu compressjpeg und laden Sie Ihr JPG-Bild hoch. Das Tool komprimiert Ihr Bild und gibt an, wie stark es komprimiert wurde. Laden Sie das komprimierte Bild herunter und verwenden Sie es für Ihre Webseite.

2. Verwenden Sie Plugins, um Bilder zu komprimieren

Ich bin kein großer Fan von Plugins. Sicher, sie machen die Arbeit einfach, wenn Sie nicht programmieren können. Aber sie behindern den bestehenden Code Ihrer Website. Es ist jedoch eine erwägenswerte Option.

Es gibt Unmengen von Plugins, die Ihnen helfen können, Bilder zu komprimieren; Sie haben die Qual der Wahl. Überprüfen Sie auf jeden Fall das Häkchen „Mit Ihrer Version von WordPress kompatibel“, bevor Sie ein Plugin verwenden.

Wählen Sie zwischen verlustbehafteter/verlustfreier Komprimierung

Die Komprimierung kann verlustbehaftet/verlustfrei sein. Es macht aus, wie stark Sie Ihre Bilder komprimieren.

Ich verwende verlustfreie Komprimierung für textlastige Bilder. Verlustbehafteter Bildtext neigt dazu, zu verschwommen zu sein, um gelesen zu werden. Für alles andere verwende ich verlustfreie Komprimierung.

Probieren Sie aus, welche für Sie am besten funktioniert.

Bilder zuschneiden

Es scheint eine offensichtliche Methode zu sein, die Bildgröße zu reduzieren – Sie reduzieren buchstäblich die Bildgröße – aber viele neigen dazu, sie zu ignorieren.

Notieren Sie sich die Bildabmessungen, die für Ihr Blog geeignet sind. Die Größe des Hauptbilds und des Beitragsbilds muss konsistent sein. Unterstützende visuelle Elemente können jedoch zugeschnitten werden, um das Notwendige anzuzeigen.

Beispielsweise hat keiner der Screenshots in diesem Beitrag redundante Grafiken. Keine Adressleisten oder Fußzeilen. Jedes Pixel verlängert die Ladezeit der Seite. Entfernen Sie unnötige.

Ändern Sie die Größe von Bildern in MS Paint

Diese offensichtlich klingende Methode verbirgt sich vor aller Augen.

1. Öffnen Sie Ihr Bild in MS Paint. Sie sehen die Option zum Ändern der Größe.
2. Stellen Sie Ihren Größenänderungsprozentsatz ein, und jetzt haben Sie eine Version, die in Abmessungen und Größe viel kleiner ist. Es spart Lasten bei der Dateigröße!

Lazy Load-Bilder

Alle Ihre Website-Daten werden in Rechenzentren gespeichert und bei Bedarf abgerufen; Bilder sind nicht anders. Die Technik des verzögerten Ladens verzögert den Abrufprozess bis zu dem Zeitpunkt, an dem der Besucher zum Bild scrollt.

Erst dann sammelt das System die Ressourcen, die zum Bereitstellen des besagten Bildes erforderlich sind. Diese Technik reduziert die anfängliche Belastung des Systems, indem Elemente zum Laden nur bei Bedarf in eine Warteschlange gestellt werden.

Dies spart nicht nur anfängliche Ladezeit, sondern spart auch Bandbreite.

Probieren Sie es auf dieser Seite aus: Scrollen Sie nach unten und sehen Sie, wie ein Bild geladen wird, wenn Sie es erreichen, nicht vorher.

Wie implementieren Sie Lazy Load auf Ihrer Website?

Das a3 Lazy Load-Plugin kann Ihnen helfen, Lazy Load schnell zu implementieren.

Wählen Sie die passende Schriftart.

Schrift fällt oft in den Zuständigkeitsbereich des Designs; es wird selten als Leistungsfaktor angesehen.

Aber es trägt zur Seitengröße bei. Der zuvor besprochene Bericht von GTMetrix zeigt, dass Font nach Bildern die größte Größe einnimmt.

Für eine schnelle Ladegeschwindigkeit müssen Sie Schriftarten auswählen, die schnell geladen werden.

Ich verwende Open Sans für meine Website, weil ich mich nicht für meine Business-Kategorie schick machen muss. Wenn Sie ein kreatives Unternehmen besitzen, möchten Sie vielleicht ein wenig Seitengeschwindigkeit für den Schönheitsaspekt opfern. Wenn Sie auch eine stilvolle Schriftart wünschen, die zu Ihrer Markenidentität beiträgt, entscheiden Sie sich dafür. Marke >> Seitengeschwindigkeit.

Klopfen Sie den Code ab

JavaScript (JS) und Cascading Style Sheets (CSS) sind Codeteile, die jede angezeigte Webseite unterstützen. Beide wirken sich auf zwei Arten auf die Seitenladegeschwindigkeit aus – sie erhöhen die Seitengröße und stellen eine Reihe von Anforderungen an den Server, deren Verarbeitung einige Zeit in Anspruch nimmt.

Aber sie werden benötigt, um Ihrer Website etwas Stil und Schwung zu verleihen. Beachten Sie zum Beispiel mein Abonnementfeld unten – es nickt, wenn Sie dorthin gescrollt haben. Wenn Sie den Effekt verpasst haben, laden Sie diese Seite neu und versuchen Sie es erneut.

Effekt erregt Aufmerksamkeit, wird aber, wenn er überstrapaziert wird, zu einer Ablenkung.

Es gibt einen Kompromiss zwischen Styling und Seitengeschwindigkeit. Eliminieren Sie das Styling nicht für die Seitengeschwindigkeit. Die Optimierung des Codes erhöht jedoch die Ladegeschwindigkeit Ihrer Seite.

Und so habe ich es gemacht:

Minimiere JS/CSS

Die Minimierung eliminiert unnötige Codeblöcke und reduziert die Dateigröße. Dadurch können Browser Code schneller herunterladen und ausführen, wodurch Bandbreite gespart wird.

Nutzen Sie Caching

Ein Cache ist die Speichereinheit, die Kopien Ihrer Website aufbewahrt, sodass sie nicht jedes Mal geladen werden muss, wenn sie angefordert wird. Mit Caching wird Ihre Website nach dem ersten Laden schneller geladen, wenn sie erneut aufgerufen wird.

Ich verwende das LiteSpeed ​​Cache- Plugin, um Code und Cache zu minimieren.

Schritt drei: Erwägen Sie, Ihren Webhosting-Anbieter zu wechseln.

Würde ein aerodynamischer Sportwagen mit Kerosin fahren? Nö.

Ebenso wird eine gut optimierte Website eine langsame Seitenladegeschwindigkeit haben, wenn der Server erst bei der nächsten Eiszeit antwortet.

Ich zögerte, den Wechsel vor allem wegen der Unsicherheit vorzunehmen. Aber ich habe einige Nachforschungen angestellt und mich für Hostinger entschieden, und ich bereue es nicht.

Viele andere Webhoster erledigen die Arbeit für Sie. Entscheiden Sie anhand Ihres Budgets und Standorts, was für Sie am besten geeignet ist.

Hier ist eine vollständige Anleitung zum Ändern Ihres WebHosts.

Schritt vier: Verwenden Sie ein Content Distribution Network (CDN).

Die geografische Entfernung wirkt sich stark auf die Seitengeschwindigkeit aus. Je weiter ein Besucher von dem Ort entfernt ist, an dem Ihre Website gehostet wird, desto länger ist die Ladezeit der Seite.

CDN ist eine Sammlung globaler Server, die sich in mehreren Rechenzentren auf der ganzen Welt befinden. Es ermöglicht einem Besucher, sich mit einem geografisch näher gelegenen Server anstelle des Heimatservers zu verbinden. Dies geschieht durch die Nutzung von Servern an den Austauschpunkten zwischen verschiedenen Netzwerken.

Die reduzierte Entfernung fördert eine schnellere Bereitstellung Ihrer Webseite.

Ich verwende das Cloudflare CDN und es hat seinen Zweck voll erfüllt.

Schritt 5 (optional): Verwenden Sie Accelerated Mobile Pages (AMP), um die Ladegeschwindigkeit mobiler Seiten zu erhöhen

Denken Sie daran, dass wir über das Minimieren des Codes gesprochen haben. HTML ist eine Form von Code, die leichter ist als CSS/JS. Es erlaubt kein Styling, aber HTML ist der grundlegende Code, den Server zum Laden Ihrer Website benötigen.

AMP-Seiten sind die HTML-Form Ihrer Webseite. Dies sind Seiten der zweiten Version, die hauptsächlich für mobile Geräte verwendet werden. Sie sind auf das Nötigste reduziert, sodass Seiten in Sekundenbruchteilen geladen werden.

Auf AMP umzustellen bedeutet, das Styling von Ihrer Seite zu eliminieren. Sie sind jedoch für Nachrichtenseiten und Blogs von Vorteil. Ich habe sie kurz verwendet, aber die Entscheidung zurückgenommen, weil die ersten drei Schritte sogar für meine mobile Seitengeschwindigkeit ausreichten.

Ich habe eine detaillierte Anleitung geschrieben, wie Sie entscheiden können, ob Sie AMP implementieren möchten oder nicht.

Ergebnisse

Die obigen Schritte haben Wunder für meine Seitenladegeschwindigkeit bewirkt. Zurück zu GTMetrix, hier steht heute meine Website.

Es lädt in 1,2 Sekunden. Etwa eine 6-fache Steigerung.

Aber der Beweis liegt im Pudding. Probieren Sie es aus und lassen Sie mich in den Kommentaren wissen, wie es läuft.