Website-Performance: ⏱ Zeit ist 💸 Geld...

Kleiner, schneller, weiter!

Das Google Page Experience Update kommt

Das Google Page Experience Update kommt
Für den Mai 2021 hat Google das Update der Page Experience angekündigt. Ab dann wird sich die Page Experience direkt auf das Ranking-Ergebnis auswirken. Die Benutzerfreundlichkeit der Seite wird also nicht mehr nur bewirken, dass der Kunde ein besseres Online-Shopping-Erlebnis hat, sondern dass er seinen Online-Shop auch besser findet.

Die Page Experience basiert auf den Core Web Vitals von Google. Das ist ein Bewertungssystem aus drei Metriken, die die Renderzeit und die visuelle Stabilität der Seite messen:

1 // Largest Contentful Paint (CLP)

Die Largest Contentful Paint (CLP) misst das wahrgenommene Ladetempo bis zu dem Moment, an dem die Hauptinhalte der Seite geladen sind. Wenn das größte Element schnell im Viewport geladen ist, etwa das Hauptbild der Seite, dann ist der CLP-Wert gut und die Seite wird gut gerankt. Logische Folge: Die effiziente Komprimierung des Bildmaterials wird immer wichtiger.

2 // First Input Delay (FID)

Die Interaktivität der Seite wird mit dem First Input Delay (FID) gemessen. Der Wert macht eine Aussage über die Fähigkeit einer Seite, auf Eingaben der Nutzer zu reagieren: Wann ist der Nutzer im Ladeprozess zum ersten Mal in der Lage, mit der Seite zu interagieren?

3 // Cumulative Layout Shift (CLS)

Mit dem Cumulative Layout Shift (CLS) schließlich wird die visuelle Stabilität der Seite ausgedrückt. Er hält fest, wann die letzten unerwarteten Layout-Änderungen bei sichtbaren Seiteninhalten erfolgen.

Weitere Faktoren der Core Web Vitals:

Wie mobile-freundlich ist die Seite aufgebaut?
Wie sicher ist sie?
Liegt sie im HTTPS-Standard vor?
Und: Sind hinderliche Unterbrecher-Elemente eingebaut?

Damit bekommen Seitenbetreiber einen sehr verlässlichen Rahmen für die Performance der Seite. Die Core Web Vitals sind quasi das Handwerkszeug, mit dem die Seite schneller und besser gemacht werden kann.

Noch mehr Infos zu den Core Web Vitals findest Du in unserer Webinar-Aufzeichnung.

Mobile-Only statt Mobile-First

»Mobiloptimierte Seiten sind automatisch schneller.«

Im März 2021 wurde Googles Crawling-Index erneut überarbeitet. Ab sofort werden reine Desktop-Inhalte nicht mehr in den Suchindex aufgenommen, für die Crawler gilt jetzt mobile-only. Entscheidend sind also die Anweisungen für die Crawler in der robots.txt. Die Meta-Robot-Tags und die Inhalte für Desktop und Mobile müssen übereinstimmen, sonst kommt es zu Traffic-Einbußen.

Gut zu wissen: Wer ein mobilfreundliches Design entwickelt, der verkürzt zugleich die Ladezeit. Das Design wird schlichter und klarer, die Texte werden kürzer und bekommen mehr Struktur, die Bilder werden kleiner. Und die verbesserte Performance bringt wiederum Pluspunkte beim Ranking.

Wie ein Puzzle...

Stück für Stück zur besten Performance

Bei der Performance-Optimierung ergeben viele Details zusammen ein großes Kunstwerk – eine blitzschnelle Seite. Hier kommen einige der langfristig gültigen Tricks, das Puzzle einfacher zu machen:

Statischer Inhalt lädt schneller als vom Webserver neu generiertes HTML. Also: Daten vor der Auslieferung in eine statische HTML-Seite speichern und diese ausliefern!
Mehrere JS- und CSS-Dateien sollten komprimiert und zu einer bis zwei Dateien zusammengefasst werden. Die sind dann schneller zu laden.
Mit Lazyload lädt sich der sichtbare Teil der Seite am schnellsten. Aber aufgepasst: Lazyloading nicht für die Hauptinhalte anwenden, damit die Googlebots nicht an der Erfassung der Inhalte gehindert werden!
Für hochfrequentierte Seiten kann ein Proxy-Cache den Pagespeed verbessern. Er entlastet durch die Bündelung der Anfragen den Backend-Server.
Aktuelle Software nutzen – Beispiel: Wenn man WordPress 5.6 von PHP 7.1 auf PHP 7.4 updatet, lädt die Seite um 60 Prozent schneller.
Service Worker können die Geschwindigkeit für mobile Endgeräte erhöhen, die häufiger eine Seite besuchen. Gecachte Inhalte werden dann auch ohne Internetverbindung geladen.
Bandbreite spart auch die responsive Verwendung verschiedener Bilder je nach Plattform. Mit dem Picture-Tag werden dann unterschiedliche Bilder geladen.

Noch mehr Tricks!

Es gibt noch unzählige weitere Puzzle-Teile, die dabei helfen, die Performance zu verbessern:

korrekt gesetzte Caching-Header
gute Komprimierung
http2-Push-Verfahren
leistungsfähiges Webhosting
angepasstes Content Delivery Network (CDN)
Speicherung sehr kleiner Bilder im Base64-Code

Alles auf einen Blick... 👀

In Zusammenarbeit mit dem Team der webinale haben wir eine umfangreiche Checkliste als Infografik aufbereitet, die alle wesentlichen Punkte zur Performance Optimierung von Websites darstellt...

Sichere Dir jetzt Deinen Download:

Eine langsame Website ist ein Bug

Schnelligkeit beginnt beim Konzept

Die Performance einer Seite ist kein Projekt, sondern als laufende Aufgabe zu begreifen. Nur vor dem Launch einmal übers Tempo nachzudenken, das reicht nicht mehr. Letzten Endes ist es auch eine Frage der grundlegenden Konzeption und des Designs. Denn: Ein vollformatiges Image-Bild oder ein schickes Hintergrund-Video sind vielleicht keine gute Idee, auch wenn das Markenimage dadurch besonders emotional transportiert werden kann.

Verantwortungsvolle Website-Betreiber handeln proaktiv, bevor die ersten Kundenklagen oder verschlechterte Conversion-Zahlen hereinkommen. Wenn dieses grundlegende Verständnis von Performance besteht und die aktuellen Tools eingesetzt werden, dann stellt Pagespeed kein Problem mehr dar.

Autor

Markus Amalaraj ist Leiter der Webentwicklung bei digit.ly. Er entwickelt mit seinem Team komplexe TYPO3-Systeme und webbasierte Anwendungen, häufig mit einem hohen Anteil an individueller Programmierung. Der Schwerpunkt seiner Arbeit liegt auf dem Entwurf und der Umsetzung von technischen Konzepten, die dank eines sehr hohen Qualitätsstandards eine optimale Performance aufweisen. Markus ist überzeugt vom Wert einer offenen, kooperativen Kommunikation und berät daher seine Kunden engagiert auf Augenhöhe, ist zusätzlich verantwortlich für die Betreuung der Auszubildenden bei digit.ly und hält zahlreiche Vorträge, etwa auf der ODC, der Webinale und der Up-Date Konferenz. Markus bringt bei digit.ly seine Erfahrung aus vier Jahren Webentwicklung auf Unternehmensseite und 12 Jahren bei verschiedenen Agenturen ein, wo er namhafte Kunden betreute.

Termin mit Markus vereinbaren