Optimierung der Website-Geschwindigkeit für SEO: die Aufteilung zwischen Marketing und Entwicklung

Optimieren Sie die Geschwindigkeit Ihrer Website (für Besucher und SEO)? Ich stelle fest, dass viele meiner Kunden mit diesem Problem zu kämpfen haben. Aber was sollte die Entwicklung tun und was kann das Marketing tun? Aus diesem Grund habe ich diesen Artikel geschrieben.
Die Bedeutung der Website-Geschwindigkeit (für SEO)
Die Geschwindigkeit einer Website ist sowohl für den Besucher als auch für die Suchmaschinenoptimierung entscheidend. Für den Besucher um der Konvertierung willen. Aus Gründen der Suchmaschinenoptimierung (SEO), damit Google eine Website effizient crawlen kann (eine langsame Website bedeutet auch mehr Arbeit für Google beim Herunterladen der Seiten).

Erstellung eines Plans zur Website-Geschwindigkeit
Eine gründliche Analyse der Website-Geschwindigkeit ist wichtig, um eine Vorstellung davon zu bekommen, was „unter der Motorhaube“ vor sich geht. Dies ist wichtig zu beachten:
- Die Startseite ist nicht die einzige Seite, die beschleunigt werden muss. Bestimmen Sie anhand von Google Analytics, welche Seiten beschleunigt werden sollen (ich priorisiere die Seiten, die häufiger besucht werden).
- Analysieren Sie die Ausgaben all dieser Seiten (ich verwende dafür immer die API von Lighthouse ).
- Bieten Sie keine einmalige Optimierung an. Um die Geschwindigkeit der Website hoch zu halten, müssen bestimmte interne Prozesse (wie das Hochladen von Bildern auf die Website) geändert werden.
Meine Checkliste zur Website-Geschwindigkeit für das Marketing
Ich gebe gerne meine Checkliste für die Marketingabteilung weiter, um Bilder nicht nur jetzt, sondern auch in Zukunft zu optimieren.
Bilder
Bilder sind ein wichtiger Bestandteil dieser Checkliste, da dies oft mit dem Marketing zusammenhängt und ein wichtiger Bestandteil der gesamten Website-Geschwindigkeitsgeschichte ist(2).
- Liegt das Bild im richtigen Format vor (Tipp: Wenn Sie es nicht zu kompliziert machen wollen, verwenden Sie einfach immer .webp):
- JPEG für Fotos.
- PNG für transparente Bilder.
- SVG für Vektor.
- Ist das Bild kleiner als 150 KB (es sei denn, es handelt sich um ein Banner) (150 KB ist bereits ziemlich groß)?
- Ist das Bild so groß, wie es auf der Website tatsächlich sein sollte (die richtige Breite und Höhe)?
- Enthält das Bild ein lazyload-Attribut, wenn es
nicht „above the fold“ angezeigt wird?(3) - Ist das Bild komprimiert? Und enthält sie nun dieses richtige Verhältnis von Qualität und Gewicht?
- Verwenden Sie mehrere Varianten von Bildern für Handy, Desktop und Tablet. Wenn Sie ein einzelnes Bild verwenden, ist es oft zu groß für Mobilgeräte und lädt daher unnötige KBs.

Video
Ein weiterer wichtiger Bestandteil einer optimierten Website-Geschwindigkeit sind Videos. Auch dies ist vor allem eine Aufgabe des Marketings.
- Verwenden Sie eingebettete YouTube-Videos, um ein direktes Hosting auf der Website zu vermeiden.
- Implementieren Sie „Lazy Loading“ für Videos, so dass sie nur geladen werden, wenn sie in das Sichtfeld des Nutzers gelangen.
- Achten Sie darauf, dass die Videos responsive sind und sich an verschiedene Bildschirmgrößen und Geräte anpassen.
- Optimieren Sie alle Bilder und Miniaturansichten, um die Dateigröße zu minimieren.
- Richten Sie eine Browser-Zwischenspeicherung ein und ziehen Sie ein Content Delivery Network (CDN) für eine schnellere Bereitstellung von Videos in Betracht.
- Laden Sie JavaScript- und CSS-Dateien asynchron, um Render-Blocking zu vermeiden (in Absprache mit der Entwicklung).
- Überwachen Sie die Seitenladezeiten und analysieren Sie die Wirkung von Videos mit Analysetools.
Meine Checkliste zur Website-Geschwindigkeit für die Entwicklung
Und nun die Entwicklung. Dies sind die technischen Aspekte der Geschwindigkeit einer Website. Oft ist es so, dass zuerst die Entwicklung eine gute Grundlage für die Geschwindigkeit der Website schafft und danach das Marketing dazu kommt. Sie können dies bei der Zuweisung dieser Ressourcen berücksichtigen.
Der Server
Dabei unterscheide ich zwischen dem, was auf dem Server kontrolliert werden kann, und dem, was auf der Website selbst kontrolliert werden kann.
- Server-Antwortzeit (TTFB): Optimieren Sie die Zeit, die der Server braucht, um auf eine Anfrage des Browsers zu antworten. Ich verwende dieses Tool, um dies zu überprüfen.
- Hosting-Typ: Wählen Sie einen Hosting-Typ (Shared, VPS, Dedicated oder Cloud), der dem Verkehrsaufkommen der Website entspricht.
- Geografischer Serverstandort: Wählen Sie einen Serverstandort in der Nähe Ihrer Zielgruppe, um die Latenzzeit zu verringern.
- Verwendung eines Content Delivery Network (CDN): Implementieren Sie ein CDN, um statische Dateien schnell von einem Server in der Nähe des Benutzers zu liefern (bei niederländischen Websites würde ich ebenfalls ein CDN empfehlen).
- Caching: Konfigurieren Sie das serverseitige Caching, um die Ladezeiten für wiederkehrende Besucher zu verkürzen.
- Datenbankoptimierung: Gewährleistung einer effizienten Datenbank durch regelmäßige Bereinigung und Optimierung der Abfragen.
- Lastausgleich: Implementieren Sie den Lastausgleich, um den Datenverkehr effizient auf mehrere Server zu verteilen und Ausfallzeiten und Verzögerungen zu vermeiden.
- Komprimierung: Aktivieren Sie die Komprimierung (z. B. Gzip), um die Größe der übertragenen Daten zu verringern.
- HTTP/2: HTTP/2 ermöglicht eine effizientere Handhabung mehrerer gleichzeitiger Anfragen (z.B. können Sie standardmäßig mehrere JS-Dateien gleichzeitig laden).
- SSL/TLS-Optimierung: Optimieren Sie SSL/TLS für sichere und dennoch schnelle Verbindungen.
- Ressourcenminimierung: Minimieren und kombinieren Sie CSS- und JavaScript-Dateien serverseitig, um die Anzahl der HTTP-Anfragen zu reduzieren (dies hilft nicht, wenn Sie HTTP/2 haben).
Und das Geschäft innerhalb der Website?
- Dateikomprimierung: Reduzieren Sie die Größe von CSS-, JavaScript- und HTML-Dateien, indem Sie z.B. unnötige Leerzeichen und Zeilenumbrüche entfernen.
- Bildoptimierung: Implementieren Sie eine automatische Bildoptimierung, um die Dateigröße ohne Qualitätsverlust zu reduzieren (dies kann auch Marketingarbeit sparen). In der Regel wird dies standortweit durch die Entwicklung geregelt.
- Asynchrones Laden von Dateien: Implementieren Sie asynchrone oder verzögerte Ladetechniken für CSS und JavaScript, um Rendering-Blockaden zu vermeiden.
- Browser-Caching: Stellen Sie das Browser-Caching für statische Dateien ein, um die Ladezeiten für wiederkehrende Besucher zu verkürzen.
- Lazy Loading: Implementieren Sie Lazy Loading für Bilder und Videos, um die anfängliche Ladezeit der Seite zu verkürzen. Dies wird am besten einmalig für die gesamte Website übernommen (und von dort aus automatisch hinzugefügt, wenn neue Bilder hinzugefügt werden).
- CSS-Sprites verwenden: Kombinieren Sie mehrere kleine Bilder oder Icons in einem Sprite, um die Anzahl der HTTP-Anfragen zu reduzieren. Prüfen Sie, ob dies tatsächlich einen positiven Einfluss auf HTTP/2 hat.
- Optimierung des Inhalts: Stellen Sie sicher, dass der Inhalt, insbesondere oberhalb des Falzes, für schnelles Laden und direkte Benutzerinteraktion optimiert ist (dies wirkt sich hauptsächlich auf das LCP aus).
- Reduzierung der HTTP-Anfragen: Reduzieren Sie die Anzahl der HTTP-Anfragen, indem Sie Dateien zusammenfassen und externe Skripte und Schriftarten reduzieren.
- Vermeidung von Weiterleitungen: Minimieren Sie die Verwendung von Weiterleitungen, um die Ladezeit der Seite zu verkürzen(4).
- Implementierung von Sicherheitsheadern: Fügen Sie HTTP-Sicherheitsheader hinzu, um die Website vor verschiedenen Angriffen und Schwachstellen zu schützen.

Schlussfolgerung
Nutzen Sie diese Checklisten nicht nur, um einmalig eine gute Grundlage für die Geschwindigkeit Ihrer Website zu schaffen, sondern auch, um sie zukunftssicher zu machen. Viel Glück!
Das umfassendste Buch über Website-Geschwindigkeit
Ich habe so viel über die Beschleunigung von Websites und alles, was damit zusammenhängt, geschrieben, dass ich es in verschiedene Abschnitte unterteilen möchte: Allgemeines, Tools, Punkte zur Verbesserung der Geschwindigkeit und Tipps. Unter den folgenden Links finden Sie weitere Informationen über Tools und Tipps zur Beschleunigung Ihrer Website.
Allgemein
- Wie hoch ist die Geschwindigkeit der Website?
- Der Einfluss von SEO auf UX
- Der Einfluss des Webdesigns auf SEO
- SPAs und SEO
- Was sind die Google Core Web Vitals?
Werkzeuge
- Autoptimieren
- Pagespeed.Vergleichen
- W3 Total Cache
- Werkzeuge Pingdom
- Google Pagespeed-Einblicke
- GTMetrix
Verbesserungen der Geschwindigkeit
- Erstes zufriedenstellendes Bild (FCP)
- Zeit bis zum ersten Byte (TTFB)
- Zeit bis zur Interaktivität (TTI)
- Bild für Größte Ansicht mit vorgeladenem Inhalt (LCP)
- Aktivieren Sie die Textkomprimierung
- Reduzieren Sie den CSS
- Gesamt-Sperrzeit (TBT)
- Geschwindigkeitsindex
- JavaScript reduzieren
- Größte inhaltsreiche Farbe
- Vermeiden Sie übermäßigen DOM
- Ungenutzte CSS löschen
- Ungenutztes JavaScript entfernen
- Bilder in modernen Layouts bereitstellen
- Verbinden Sie sich im Voraus mit den gewünschten Ursprüngen
- Verhindern, dass veraltetes JavaScript an moderne Browser übermittelt wird
- Verwenden Sie eine effiziente Cache-Richtlinie für statische Elemente
- Doppelte Module aus JavaScript entfernen
- Vermeiden Sie mehrfache Umleitungen
- Bilder effizient kodieren
- Verzögertes Laden verwenden
- Laden Sie wichtige Anfragen im Voraus