Mit dem First Meaningful Paint (FMP) wird gemessen, wann alle Elemente des Top Fold geladen sind. Wir zeigen Ihnen, was Sie beachten müssen, wenn Sie den First Meaningful Paint Ihrer Website optimieren möchten. Mehr zum Thema Website Speed Test in unserem großen Übersichtsartikel.
Was ist der First Meaningful Paint (FMP)?
Der First Meaningful Paint, kurz FMP, ist ein Messwert für die Ladegeschwindigkeit einer Website (auch Page Speed genannt). Dabei wird der Zeitpunkt gemessen, an dem der Top Fold geladen ist. Dadurch hat der Nutzer das Gefühl, dass die Website zu Ende geladen ist.
Was wird mit dem First Meaningful Paint gemessen?
Damit dies geschehen kann, müssen zuvor eine Verbindung zwischen Browser und Webserver hergestellt und die Seiteninhalte bis zu einem bestimmten Punkt heruntergeladen werden. Dazu gehören CSS- und Javascript-Dateien, der HTML-Quelltext und Fonts sowie Bilder und Videos.
Der FMP ist für die Psychologie des Nutzers besonders wichtig, da ab diesem Punkt der Sichtbereich im Browser vollständig mit allen Darstellungselementen geladen ist. So bekommt er die die positive Rückmeldung, dass die Website geladen ist, auch wenn dies auf technischer Seite noch nicht vollständig geschehen ist.
Jedoch beginnt der Nutzer in diesem Moment die Aufnahme von Informationen auf der Website. In dieser Zeit kann die Seite im Hintergrund vollständig geladen werden. Viele sehen in der Nutzeroptimierung für Webseiten den First Meaningful Paint daher als wichtigsten Messwert an.
In dem Messtool PageSpeed Insights von Google wird der First Contentful Paint als "Inhalte weitgehend gezeichnet" angezeigt und in Screenshots unterhalb der Messwerte wiedergegeben. Der FMP ist hier die zweite Mess-Station nach dem First Contentful Paint ("Erste Inhalte gezeichnet").
Wodurch wird der First Meanigful Paint langsam?
- Große Datenmengen (besonders Bilder)
- Langsame Datenübertragung
- Daten werden nicht aus einem Cache angefordert
Mit welchen Tools kann man den FMP messen?
- PageSpeed Insights: Im Ergebnis als "Inhalte weitgehend gezeichnet" gekennzeichnet
- WebPageTest: Im Ergebnis "Plot Full Results" auswählen, als "Time to Visually Complete" gekennzeichnet
- Dareboost: Im Ergebnis "More Metrics" auswählen, als "Visually Complete" gekennzeichnet
First Meaningful Paint richtig optimieren
Bilder machen bei einer modernen Webseite fast die Hälfte des Downloadvolumens aus. Bei Online-Shops sind es noch viel mehr. Dementsprechend können eine hohe Anzahl hochaufgelöster Bilder den Page Speed enorm ausbremsen.
Das wirkt sich auf den First Meaningful Paint aus, da die Anzeige dieser Bilder ausschlaggebend ist für die gefühlte Wahrnehmung der fertig geladenen Website. Gerade bei Produktübersichten, in denen viele der Bilder eigentlich erst nach dem Scrollen für den Nutzer sichtbar sind, kann der First Meaningful Paint unnötig in die Länge gezogen werden.
Wie kann man den First Meaningful Paint optimieren?
Da der First Meaningful Paint zeitlich nach dem First Contentful Paint und dem Time To First Byte liegt, ist es sinnvoll, ebenfalls für diese Messwerte zu optimieren. Hierzu haben wir Ratgeber geschrieben, wie man den TTFB optimieren kann und den FCP optimieren kann.
Um die Website-Optimierung an den Bedürfnissen des Nutzers auszurichten, ist Bild-Optimierung unerlässlich. Dazu haben wir einen Ratgeber im Ryte Magazine geschrieben. Für Online-Shops mit tausenden Produktbildern und Webseiten mit vielen redaktionellen Inhalten kann dies jedoch sehr aufwendig werden. Über die verschiedenen Möglichkeiten, Produktbilder zu komprimieren, haben wir im Blog von TrustedShops geschrieben.
Für Produktübersichten und andere Websites, die viele Bilder erst nach dem Scrollen anzeigen, empfehlen wir eine dynamische Einbindung durch sogenanntes Lazy Loading. Dadurch werden die Bilder erst vom Server angefordert, wenn sie tatsächlich auf dem Viewport ausgegeben werden sollen. In der Zwischenzeit werden dort Platzhalter und Fortschrittsanzeigen ausgegeben, damit das Layout nicht verändert wird und der Nutzer mitbekommt, dass die Bilder geladen werden. Mit wao.io lässt sich Lazy Loading automatisiert für Websites einrichten.
Zusammenfassung: Maßnahmen zur FMP Optimierung
Weitere Mess-Stationen für den Page Speed
Der First Meaningful Paint ist nur eine der vielen Mess-Stationen, an denen der Page Speed gemessen werden kann. Im Verbund mit weiteren gewonnenen Messwerten lassen sich Schwachstellen und Flaschenhälse identifizieren und gezielt optimieren. Dazu haben wir auch einen umfangreichen Ratgeber im Ryte Magazine veröffentlicht.
Die vier wichtigsten Page Speed Mess-Stationen
- Time to First Byte (TTFB): Der Zeitraum zwischen dem Aufruf der Website und dem ersten vom Webserver geladenen Byte
- First Contentful Paint (FCP): Der Zeitpunkt, an dem im Browser zum ersten Mal ein Darstellungselement angezeigt wird
- First Meaningful Paint (FMP): Der Zeitpunkt, an dem der Nutzer das Gefühl hat, dass die Website geladen ist
- Time to Interactive (TTI): Der Zeitpunkt, an dem die Website fertig gerendert und bereit zur Nutzereingabe ist
Optimierungspotenzial Ihrer Website analysieren
Mit dem wao.io Analyzer finden Sie heraus, wo das Optimierungspotenzial Ihrer Website liegt.
Jetzt Website analysieren
