First Meaningful Paint - Liefere bedeutsamen Content schnell aus

Die Verbesserung des Pagespeeds ist nicht nur Zahlenspielerei. Die besten technischen Werte nützen nichts, wenn Dein Besucher das Gefühl hat, Deine Seite lade langsam. Metriken wie der First Contentful Paint zeigen, wann Nutzer die ersten gerenderten Elemente auf einer Seite sehen. Wann der Hauptinhalt Deiner Seite angezeigt wird, verrät Dir jedoch der First Meaningful Paint.

Inhaltsverzeichnis

  1. Was ist der First Meaningful Paint?
  2. Wie beschleunige ich den First Meaningful Paint?
  3. Wie kann ich die Leistung meiner Seite noch verbessern?
  4. Wo finde ich weitere Informationen?

Was ist der First Meaningful Paint?

Das Problem des First Contentful Paint ist, dass hier auch Elemente wie Navigationsleisten oder Ladeanimationen in die Berechnung einbezogen werden. Besucher eines Nachrichtenportals oder eines Online Shops wollen jedoch direkt wichtige Neuigkeiten beziehungsweise Angebote sehen. Für sie zeigt sich die gefühlte Ladezeit einer Seite dadurch, wie schnell Deine Webseite diese Inhalte bereitstellt.

Der First Meaningful Paint gibt die Zeit in Sekunden an, die verstreicht, bis Deine User den Hauptcontent Deiner Seite im sichtbaren Bereich ("Above the fold") zu sehen bekommen. Was genau als Hauptinhalt gewertet wird, ist natürlich von Seite zu Seite unterschiedlich. In einem Shop sind dies die verschiedenen Artikel, während es in einem Blog eher um die Headlines und Teaser geht.

Rendert der Browser den Main Content direkt zuerst, kann der Fall eintreten, dass First Contentful Paint und First Meaningful Paint identisch sind. Andernfalls ist Dein Score für den First Meaningful Paint immer geringer als für den First Contentful Paint. Über tiefergehende technische Details wie den Umgang mit Layouts und Webfonts kannst Du Dich in Googles Artikel Time to First Meaningful Paint: a layout-based approach informieren.

First Meaningful Paint am Beispiel des Blogs von Sistrix.de

Während die Nutzer des Blogs auf Sistrix.de bereits nach kurzer Zeit die ersten Elemente angezeigt bekommen, lässt der bedeutsame Content auf sich warten.

Wie beschleunige ich den First Meaningful Paint?

Die Zeit bis zum First Meaningful Paint lässt sich durch die gleichen Maßnahmen reduzieren, die auch für die neue Metrik des Largest Contentful Paint gelten. Grundsätzlich hängt der FMP von der Antwortzeit Deines Servers, den Ladezeiten von Ressourcen und Bildern, der Ausführungsdauer von JavaScript sowie der Zeitspanne ab, in der das Rendern blockiert wird. Mit folgenden Maßnahmen kannst Du Deinen FMP-Score verbessern:

  1. Minimiere die Downloadgröße von textbasierten Ressourcen, zum Beispiel von JavaScript- oder CSS-Dateien. Dies erreichst Du, indem Du den Code in den Dateien entweder minimierst oder diese komprimierst. Wie Du zum Beispiel die Downloadgröße von JavaScript reduzierst, erklären wir Dir in unserem Artikel zur JavaScript Bootup-Time.
  2. Schaue Dir den kritischen Rendering-Pfad Deiner Seite an. Reduziere die Anzahl externer Scripte und Stylesheets, die das Rendern blockieren könnten. Sorge zum Beispiel dafür, dass Du nicht zu viele CSS-Dateien nutzt und deren Codebase schlank hältst.
  3. Nutze Tree Shaking und Code Splitting, um Deine JavaScript-Nutzlast zu verringern.

    Beim Tree Shaking durchforstest Du Deine Codebase nach nicht mehr benötigten Programmzeilen oder Abhängigkeiten. Gerade bei älteren Applikationen sammelt sich oft "toter" Code an, der aus nicht mehr genutzten Funktionen besteht und keine Zweck mehr erfüllt.

    Beim Code Splitting teilst Du Deinen JavaScript-Code in mehrere Dateien auf. Schaue zum Beispiel, dass Du Features, die Du nicht direkt beim ersten Laden der Webseite benötigst, in eine separate Datei auslagerst. Je weniger JavaScript der Browser beim Aufruf durch den User verarbeiten muss, desto kürzer ist die Zeit bis zum First Meaningful Paint.

  4. Nutze HTTP-Caching, um die Webseite für wiederkehrende Besucher zu beschleunigen. Bei jeder Browseranfrage prüft der Server die Verfügbarkeit der angeforderten Dateien und stellt diese für den Browser bereit. Richtest Du einen Cache ein, legst Du bereits geladene Dateien in einem Puffer ab, was die Antwortzeit des Servers reduziert und die Geschwindigkeit Deiner Seite erhöht.

    Zahlreiche Hosting-Anbieter stellen in ihren Paketen Cache-Lösungen bereit, die Du nur noch aktivieren musst. Nutzt Du Wordpress als Content Management System, kannst Du hierfür ein Plugin wie zum Beispiel WP Super Cache nutzen.

  5. Komprimiere Deine Bilddateien und nutze Techniken wie Lazy Loading. Mithilfe von Tools wie TinyPNG verkleinerst Du im Handumdrehen Deine Bilder und sorgst für schnellere Ladezeiten. Du kannst auch zunächst eine Datei mit niedriger Auflösung als Hintergrundbild innerhalb eines <div> bereitstellen und dann die hochauflösende Version nachladen. Lazy Loading sorgt dafür, dass Deine Bilder erst geladen werden, sobald sie im Viewport zu sehen sind. Dies trägt primär zur Steigerung Deines Pagespeeds bei und nicht direkt zum FMP.

Der First Meaningful Paint im Vergleich zum First Contentful Paint

Sind First Contentful Paint und First Meaningful Paint nicht identisch, zeigt der FCP früher eher unwichtige Element an, wie hier die Navigation auf Sistrix.de.

Wie kann ich die Leistung meiner Seite noch verbessern?

Performance-Metriken wie der First Contentful Paint, der First Meaningful Paint oder die Time to Interactive hängen stark miteinander zusammen. Daher solltest Du Dich nicht nur auf eine Metrik versteifen, sondern bei Deiner Auswertung auch die anderen Punkte in der Leistungs-Kategorie überprüfen. Schaue, welche Aufgabe die Ladezeiten am meisten reduzieren könnte und gehe diese an. Hierdurch ergeben sich Synergieeffekte, die auch die anderen Metriken verbessern.

Wo finde ich weitere Informationen?