Website-Performance

Zeit ist Geld...

Text: Markus Amalaraj 

Ladezeit ist bares Geld ‚Äď das hat Amazon k√ľrzlich ausgerechnet: Wenn deren Seite eine Sekunde langsamer laden w√ľrde, ginge ihnen ein Umsatz von 1,6 Milliarden Dollar im Jahr verloren. Das ist eine sehr schlechte Nachricht f√ľr deutsche E-Commerce-Treibende, denn¬†die Bandbreite hierzulande ist ‚Äď nun ja, wir wissen es alle.

Daraus folgt: Website-Performance ist nicht nur ein ‚ÄěProjekt‚Äú zum Launch, sondern eine fortw√§hrende¬†Herausforderung. Wir zeigen hier einmal mehr die goldenen Regeln der Pagespeed-Optimierung auf. Und die neuesten Trends, die man unbedingt kennen muss!

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

Weitere interessante Artikel im Up-Date Magazin

B2B Marketing Rules - unser Podcast

Der B2B-Marketing-Podcast von digit.ly √ľber die Besonderheiten des Online-Marketings f√ľr B2B-Unternehmen mit vielen Insights aus der Praxis...

Zum Artikel

Webinar: Der TYPO3-Turbo - Corporate Websites von B2B-Unternehmen schneller ausliefern und mehr Leads generieren

In unserem kostenfreien Live-Webinar am 21.04.2022 erfahren Sie, wie Sie die Corporate Website Ihres B2B-Unternehmens f√ľr eine bessere Ladegeschwindigkeit optimieren k√∂nnen.

Zum Artikel

Erfolgreiche Kundenbindung im B2B

Eine gute Kundenbindung ist im B2B besonders wichtig. Erfahren Sie, mit welchen Maßnahmen es auch Ihrem Unternehmen gelingt, Kunden erfolgreich zu binden!

Zum Artikel