First Contentful Paint

Was ist der First Contentful Paint (FCP)?

Der First Contentful Paint (FCP) ist eine Möglichkeit, die Ladegeschwindigkeit einer Seite zu messen. Sie können die Seitengeschwindigkeit nicht als einen Zeitpunkt zusammenfassen; es gibt tatsächlich mehrere Momente während des Ladeprozesses, in denen ein Besucher die Seite als schnell oder langsam empfinden kann. Der FCP misst die Zeitspanne zwischen der Anfrage der Seite und dem Moment, in dem der erste sinnvolle Inhalt zum ersten Mal auf dem Bildschirm gerendert wird.

Was sagt Ihnen das genau? Es sagt Ihnen, dass der FCP in erster Linie eine "nutzerzentrierte Metrik" ist, da er etwas über die Ladegeschwindigkeit aussagt, die ein Besucher erlebt. Er sagt etwas über die User Experience aus. Zum FCP-Moment können Sie sicher sein, dass ein Besucher tatsächlich "etwas" auf dem Bildschirm sieht.

Lassen Sie uns die Worte aufschlüsseln: 'First','Contentful' und 'Paint'.

1. First:  Mit First meinen wir natürlich den allerersten genauen Moment, in dem etwas Wesentliches in Ihrem Browser erscheint.
2. Contentful: Mit Contentful meinen wir ein HTML-Element mit Inhalt. Also kein Layout-Element wie ein leeres Element oder eine Hintergrundfarbe, sondern eher etwas Text, ein Bild (einschließlich Hintergrundbild), SVG oder Canvas.
   
3. Paint: Paint bedeutet (mehr oder weniger), dass der Browser bereit ist, etwas auf den Bildschirm zu bringen. Das scheint einfach, ist aber eigentlich die komplizierteste Aufgabe des Browsers. Um etwas auf den Bildschirm zu bringen, muss ein Browser bereit sein, alle Eigenschaften eines Elements zu berechnen. Unten sehen Sie ein Beispiel für den Renderprozess, der erforderlich ist, bevor etwas zum Bildschirm hinzugefügt werden kann.

Was ist ein guter First Contentful Paint Score?

Ein guter FCP-Score liegt zwischen 0 und 1,8 Sekunden. Wenn Ihr FCP-Score zwischen 1,8 und 3 Sekunden liegt, bedarf er Verbesserung. Jeder FCP-Score über 3 Sekunden gilt als schlecht. Um die Core Web Vitals für den Largest Contentful Paint zu bestehen, müssen mindestens 75% Ihrer Besucher einen 'guten' FCP-Score haben.

Wie immer bei den Core Web Vitals ist ein schnellerer First Contentful Paint Score besser als ein langsamerer. 

Wie messen Sie Ihren First Contentful Paint (FCP)?

Der FCP wird von Google gemessen, indem Daten von echten Nutzern gesammelt werden. Diese Daten werden im CrUX-Datensatz gespeichert. Diese Daten sind öffentlich über die CrUX-API oder Google BigQuery verfügbar. Der FCP kann auch durch sogenannte Lab-Tests gemessen werden. Der häufigste Lab-Test heißt Lighthouse.

Den First Contentful Paint aus dem CrUX-Datensatz abrufen

Der First Contentful Paint  kann aus dem CrUX-Datensatz über pagespeed.web.dev, die CrUX-API oder über Google BigQuery ausgelesen werden.

Den First Contentful Paint über Real User Monitoring (RUM) messen 

RUM-Tracking steht für Real User Monitoring. Mit Real User Monitoring können Sie den First Contentful Paint durch Interaktionen echter Nutzer verfolgen. Der Vorteil von RUM-Tracking ist, dass Sie nicht 28 Tage auf neue Daten warten müssen und die Daten viel detaillierter abgefragt und analysiert werden können.

Den FCP in Lighthouse messen

1. Öffnen Sie die Seite – in Chrome –, deren FCP Sie messen möchten. Tun Sie dies im Inkognito-Modus, damit Plugins Sie nicht stören und möglicherweise den FCP Ihrer Seite verlangsamen.
2. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie Element untersuchen. Damit öffnen Sie die Chrome-Entwicklerkonsole.
3. Oben in der Konsole sehen Sie den Tab Lighthouse. Klicken Sie darauf. Wählen Sie dann unter Kategorien 'Performance' (lassen Sie die anderen leer) und wählen Sie 'Mobil' unter Gerät.
4. Klicken Sie nun auf Bericht generieren. Lighthouse erstellt einen Geschwindigkeitsbericht Ihrer Seite. Oben links im Bericht sehen Sie, was der FCP Ihrer Seite ist.

Dies ist ein Screenshot des Lighthouse-Berichts für diese Seite. Der FCP dieser Seite auf einem mobilen Gerät beträgt 0,8 Sekunden! Nicht schlecht, oder?

FCP mit einem Online-Tool messen

Sie können den FCP auch mit einer Reihe von Online-Tools messen. Die bekanntesten sind GTMetrix, Pingdom und pagespeed.web.dev. Diese Tools sind einfach zu bedienen und geben einige Daten über den LCP unter spezifischen Laborbedingungen.

Den First Contentful Paint verbessern

Jetzt, da Sie wissen, was der First Contentful Paint ist, können wir daran arbeiten, ihn schneller zu machen. Die Idee hinter einem schnellen FCP ist eigentlich ganz einfach: sicherstellen, dass ein Browser sofort mit dem Rendern beginnen kann. Alles, was eine Verzögerung des Renderns verursachen kann, führt zu einem schlechten FCP-Score.

Genau wie beim Largest Contentful Paint kann der First Contentful Paint in 2 oder 4 Kategorien unterteilt werden:

1. Time to First Byte (TTFB) - Die Zeit vom Beginn des Ladens der Seite bis zum Empfang des ersten Bytes des HTML durch den Browser. 
2. Resource Load Delay - Die Zeit zwischen TTFB und dem Beginn des Ladens der FCP-Ressource durch den Browser
   
3. Resource Load Time - Die Zeit, die benötigt wird, um die FCP-Ressource selbst zu laden.
   
4. Element Render Delay - Die Zeit zwischen dem Abschluss des Ladens der FCP-Ressource und dem vollständigen Rendern des LCP-Elements
   

Geschwindigkeitstipp: Sie können Schritt 2 & 3 einfach eliminieren, indem Sie sicherstellen, dass das LCP-Element keine Netzwerkressource erfordert. Erwägen Sie im Fall eines Textelements die Verwendung von font-display:swap. Erwägen Sie bei einem kleinen Bildelement, das Bild inline zu platzieren.

Dies lässt uns nur mit der Time to First Byte und dem Element Render Delay zum Optimieren.

Im Folgenden finden Sie 14 Lösungen, die ich oft verwende, um den FCP zu verbessern. Aber seien Sie vorsichtig, die Verwendung einer Lösung an der falschen Stelle kann tatsächlich Verzögerungen verursachen. Daher ist es am besten, einen Pagespeed-Experten zu konsultieren, bevor Sie selbst beginnen.

1. Schnelle Serverantwort (TTFB)

Die TTFB (die Zeit zwischen der Anfrage und dem ersten Byte, das der Server sendet) ist immer der erste Schritt im Renderprozess. Ab diesem Punkt beginnt Ihr Browser mit dem Multitasking, und die Auswirkungen weiterer Optimierungen nehmen ab. Der HTML-Code ist die einzige Anfrage, die sich direkt auf alle Geschwindigkeitsmetriken auswirkt.

Die Geschwindigkeit, mit der der HTML-Code vom Server gesendet wird, wird oft als Time to First Byte (TTFB) gemessen. Es ist wichtig, dies so schnell wie möglich zu machen. Oft tun Sie dies, indem Sie serverseitiges Caching aktivieren.

Wenn es um Time to First Byte geht, ist niedriger immer besser. 

Sie können die Time to First Byte einfach selbst messen. Das geht wie folgt:

1. Verwenden Sie die Tastenkombination Strg-Shift-I, um die Entwicklerkonsole von Google Chrome zu öffnen.
   
2. Oben in der Konsole sehen Sie einen Tab Netzwerk. Klicken Sie darauf.
3. Laden Sie die Seite mit Strg-R neu.
   
4. Sie sehen nun alle Netzwerkanfragen, die Chrome an Ihren Server gesendet hat.
5. Klicken Sie auf die oberste Netzwerkanfrage, das ist die Anfrage für Ihre Seite selbst.
6. Jetzt erhalten Sie weitere Informationen zu dieser Netzwerkanfrage.  Klicken Sie auf den Tab Timing oben in diesen Informationen, um zu sehen, was die TTFB für Ihre Seite ist.

2. HTTP/3

HTTP/3 ist die dritte Version des HTTP-Protokolls. HTTP/3 löst viele der Probleme, die in den älteren HTTP/1.1- und HTTP/2-Protokollen gefunden wurden. Zum Beispiel können Sie seit HTTP/2 mehrere Dateien gleichzeitig über dieselbe Verbindung senden. HTTP/3 bietet eine schnellere anfängliche Verbindung und weniger Probleme durch kleinere Netzwerkunterbrechungen.

Ohne zu sehr ins Detail zu gehen: HTTP/3 ermöglicht einen signifikanten Geschwindigkeitsgewinn, insbesondere in einem langsameren Netzwerk wie einem Mobilfunknetz. Ihr Netzwerkadministrator kann Ihnen sagen, ob Ihr Webserver bereits für das schnellere HTTP/3-Protokoll geeignet ist.

Sie können selbst überprüfen, ob Ihre Website bereits das schnellere HTTP/3-Protokoll verwendet. Verwenden Sie die Tastenkombination Strg-Shift-I, um den Netzwerk-Inspektor von Google Chrome zu öffnen. Klicken Sie mit der rechten Maustaste auf den Tabellenkopf und wählen Sie Protokoll. Laden Sie nun die Seite neu, um zu sehen, welches Protokoll Ihre Seite verwendet.

3. Browser Caching

Die Netzwerkverbindung ist oft ein schwaches Glied, wenn es um die Seitengeschwindigkeit geht. Wäre es nicht viel einfacher, das Netzwerk ganz zu überspringen?

Wenn ein Besucher Ihre Seite zuvor besucht hat, können Sie angeben, ob und wie lange die Netzwerkressourcen  (zum Beispiel ein Stylesheet)  vom Browser des Besuchers gespeichert werden dürfen. Jedes Mal, wenn der Besucher eine dieser Dateien wieder benötigt, tauchen sie im Handumdrehen aus dem Cache des Browsers auf. Dadurch kann der Browser viel schneller mit dem Rendern beginnen und den FCP beschleunigen.

4. Komprimierung

Die Netzwerkgeschwindigkeit ist in fast allen Fällen ein schwaches Glied. Für einen guten First Contentful Paint ist es so wichtig, dass die Dateien so schnell wie möglich über das Netzwerk gesendet werden. Komprimierung reduziert die Anzahl der Bytes, die vom Server gesendet werden müssen – weniger Bytes bedeuten weniger Wartezeit auf eine Netzwerkressource. Komprimierung ist meiner Meinung nach eine Technik, die nicht die Aufmerksamkeit erhält, die sie verdient. Leider "schalten zu viele Webmaster die Komprimierung ein" und schauen sie sich dann nicht mehr an. Und das ist schade, denn es ist einfach eine einfache Möglichkeit, Dinge ein wenig schneller zu machen.

Es gibt zwei beliebte Komprimierungstechniken: Gzip und Brotli. Gzip ist die am häufigsten verwendete Komprimierungstechnik, aber Brotli holt schnell auf. Brotli wurde von Google selbst erstellt und hat 15 bis 20% bessere Ergebnisse, wenn es um HTML-, JavaScript- oder CSS-Dateien geht. Brotli ist daher ideal für das Web.

Es gibt auch einen Unterschied zwischen dynamischer Komprimierung und statischer Komprimierung. Bei der dynamischen Komprimierung komprimieren Sie die Datei kurz bevor Sie sie über Ihren Webserver senden; bei der statischen Komprimierung wird die komprimierte Datei auf dem Server gespeichert. Dies ist oft eine viel klügere Art zu komprimieren, wird aber selten verwendet.

5. Frühe Web-Fonts mit Resource Hints

Resource Hints initiieren einen Download oder eine Netzwerkverbindung, bevor der Browser dies von selbst tun würde. Einige Netzwerkressourcen, wie Webfonts oder Bilder, werden erst heruntergeladen, nachdem der Browser sicher ist, dass er sie anzeigen muss.

Wenn Sie sicher sind, dass Sie eine Ressource benötigen, um den sichtbaren Teil der Seite zu rendern, ist es fast immer eine gute Idee, einen "Resource Hint" einzufügen. Dadurch wird sichergestellt, dass der Browser sofort mit dem Herunterladen oder Verbinden mit der Ressource beginnt. Das Ergebnis ist, dass die Ressource früher verfügbar ist und der Browser früher mit dem Rendern beginnen kann.

Aber seien Sie vorsichtig mit Resource Hints, wenn Sie sie falsch verwenden, können sie Ihre Seite tatsächlich verlangsamen.

Frühzeitiges Herunterladen mit "Preloading"

<link rel="preload" href="/static/font/opensans600.woff2" as="font" type="font/woff2" crossorigin>

Der Preload-Link ist eines der mächtigsten Werkzeuge im Page-Speed-Arsenal. Über den Preload-Link laden Sie eine Netzwerkressource herunter, die Sie später benötigen. Dies ist oft eine sehr gute Idee bei Fonts, kritischen Skripten und Bildern im sichtbaren Teil der Seite.

Vorab verbinden mit Preconnect

Der Preconnect-Link stellt bereits eine Verbindung zu einem Server her. Dies ist nützlich, wenn Sie Dateien auf einem Server eines Drittanbieters wie einem CDN oder Google Analytics hosten.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

6. Die nächste Seite mit Prefetch vorabrufen

<link rel="prefetch" href="/seite2.html">

Mit Prefetch können Sie Ressourcen mit niedriger Priorität abrufen. Dies ist eine nützliche Methode, um Ressourcen abzurufen, von denen Sie glauben, dass Sie sie später benötigen werden – zum Beispiel, wenn Sie erwarten, dass jemand auf den Link zur nächsten Seite klickt.

7. Redirects vermeiden

Ein häufiger Fehler ist eine Redirect-Kette, die zu lang ist. Lassen Sie mich das erklären: Ihre Seite läuft wahrscheinlich über eine sichere Verbindung. Wenn ein Besucher Ihre Seite eingibt, ohne https hinzuzufügen, wird er auf die nicht gesicherte Version Ihrer Website weitergeleitet. Wenn jedoch alles richtig eingestellt ist, wird der Besucher auf die sichere Website weitergeleitet. Sie sehen dies im grünen Beispiel unten.

Aber manchmal erfolgt die Weiterleitung über einen oder mehrere Zwischenschritte, wie im roten Beispiel gezeigt. Es sind diese Zwischenschritte, die dazu führen, dass die Website langsam läuft, was zu einem schlechten First Contentful Paint Score führt. Jeder Zwischenschritt kostet zusätzliche Zeit, die sich schnell summieren kann. Stellen Sie also immer sicher, dass Sie innerhalb einer Weiterleitung auf die richtige Seite gelangen.

8. CSS minimieren

Eine externe CSS-Datei ist immer render-blocking. Das bedeutet, dass ein Browser normalerweise nicht mit der Anzeige von Inhalten beginnen kann, bis alle Stylesheets heruntergeladen und analysiert wurden. Daher ist es am besten, Stylesheets so klein wie möglich zu halten. So müssen Sie nicht so lange warten, bis das Stylesheet heruntergeladen ist.

Die CSS-Größe mit Shortcode reduzieren

Eine der Möglichkeiten, die CSS-Größe zu reduzieren, ist die Verwendung von Shortcodes. Dies sind Einzeiler, mit denen Sie die wichtigsten Eigenschaften eines CSS-Selektors in einer Zeile aufschreiben können.

body{
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 0.94rem;
    line-height: 1.6;
    font-family: "Segoe UI", "Segoe UI", system-ui, -apple-system, sans-serif;
}

Sie können es auch schreiben als:

body{font: 400 .94rem/1.6 Segoe UI,Segoe UI,system-ui,-apple-system, sans-serif;}

Die Größe von CSS weiter reduzieren

Es ist möglich, die CSS-Größe noch weiter zu reduzieren, indem Selektoren mit einem Komma zusammengeführt, Zeilenumbrüche und Leerzeichen entfernt und kürzere Farbcodes geschrieben werden.

h1{
  color : #000000;
}
h2{
  color : #000000;
}
h3{
  color : #000000;
}
h4{
  color : #000000;
}
h5{
  color : #000000;
}

Könnte verkürzt werden wie

h1,h2,h3,h4,h5{color:#000}

9. Critical CSS

Wir können CSS einen Schritt weiter bringen, indem wir Critical CSS verwenden. Critical CSS ist ein Must-have für eine schnelle Website und einen schnellen First Contentful Paint.

Critical CSS ist eine Sammlung aller Selektoren (wie body, p, h1 usw.), die Sie benötigen, um den sichtbaren Teil der Seite anzuzeigen. Legen Sie dieses Critical CSS nicht in ein separates Stylesheet; fügen Sie es stattdessen direkt in den <head> der Seite ein. Auf diese Weise müssen Sie keine neue Datei herunterladen und der Browser kann blitzschnell mit dem Rendern beginnen. Dies sorgt für einen schnelleren FCP. Das CSS, das Sie nicht direkt für den sichtbaren Teil der Seite benötigen, wird geladen, nachdem der erste Renderzyklus abgeschlossen ist. Für Ihren Besucher ist die Seite bereits fertig – niemand bemerkt, dass die neuen Stile noch im Hintergrund hinzugefügt werden.

Critical CSS kann einfach mit unserem eigenen Critical CSS Tool generiert werden. Fügen Sie einfach die URL Ihrer Webseite in das Tool ein und wir erledigen den Rest für Sie!

10. JavaScript-Laden aufschieben

Einer der häufigsten Gründe für einen langsamen First Contentful Paint ist JavaScript. Abhängig davon, wie Sie JavaScript verwenden, kann es das Rendern der Seite blockieren. Normalerweise wird JavaScript heruntergeladen und ausgeführt, bevor der Render Tree erstellt wird. Ohne den Render Tree kann ein Browser nichts auf den Bildschirm bringen – dies gilt auch für den FCP.

Wir können dies umgehen, indem wir JavaScript aufschieben. Sie können dies auf drei Arten tun

Async JavaScript

<script async src="async.js"></script>

Durch Hinzufügen des async-Attributs zu einem Skript-Tag wird der Aufbau der Seite nicht mehr blockiert, während das JavaScript heruntergeladen wird. Das async-Attribut gibt an, dass das Herunterladen und der Aufbau des Render Tree gleichzeitig erfolgen können.

Sobald das Skript ausgeführt wird, wird die Seite blockiert. In den meisten Fällen hatte der Browser dank des async-Attributs genügend Zeit, einen wichtigen Teil der Seite aufzubauen, wobei der First Contentful Paint bereits auf der Seite ist.

Defer JavaScript

<script defer src="async.js"></script>

Das defer-Attribut funktioniert mehr oder weniger genauso wie das async-Attribut. Durch Hinzufügen des defer-Attributs zu einem Skript-Tag darf das Skript ebenfalls gleichzeitig mit dem Erstellen der Seite heruntergeladen werden. Nachdem alle Skripte heruntergeladen wurden, werden sie in der Reihenfolge ausgeführt, in der sie im HTML-Code gefunden wurden. Dies kann auch die Anzeige der Seite blockieren, aber in vielen Fällen befindet sich der First Contentful Paint bereits auf dem Bildschirm.

11. Verlassen Sie sich nicht auf externe Ressourcen

Externe Ressourcen wie externe Fonts, externe Bilder, externe Stylesheets oder externe Skripte sind ein potenzieller Engpass, wenn es um den First Contentful Paint geht. Da Sie keine Kontrolle über den Server haben, auf dem die Dateien gehostet werden, wissen Sie nicht, wie schnell sie gesendet werden. Darüber hinaus können Sie die bestehende Verbindung zum Webserver nicht nutzen. Es muss eine neue Verbindung zu einem neuen Server aufgebaut werden – und das kostet Zeit.

Externe Ressourcen blockieren

Keine externen Ressourcen

12. Verwenden Sie das richtige Schriftformat

Fonts verdienen besondere Aufmerksamkeit, wenn es um den First Contentful Paint geht. Auf etwa 99% der Seiten, die wir uns ansehen, ist das FCP-Element eine Textzeile. Wenn Sie externe Webfonts verwenden, müssen Sie diese Fonts zuerst von einem Server herunterladen, was – natürlich – Zeit kostet. 

In letzter Zeit haben Webfonts mehr Aufmerksamkeit erhalten, und es gibt mehr neue, schnellere Schriftformate. Das schnellste Schriftformat im Moment ist woff2, gefolgt von woff. Woff2 wird von jedem modernen Browser unterstützt. 

Sie können die bevorzugte Reihenfolge Ihres Webfonts in der CSS-Font-Face-Deklaration angeben. Das machen Sie wie folgt:

 @font-face {  
   font-family: 'myFont';  
   font-weight: 400;  
   font-style: normal;  
   font-display: swap;
   unicode-range: U+000-5FF 
   src: local('myFont'),
        url('/fonts/myFont.woff2') format('woff2'),
        url('/fonts/myFont.woff') format('woff');
}

13. Font display:swap

Bei der Verwendung von Webfonts ist das Standardverhalten dieser Fonts, den Text auf der Seite erst anzuzeigen, wenn der Font geladen ist. Dies geht normalerweise direkt auf Kosten des First Contentful Paint. 

Sie können dies lösen, indem Sie font-display:swap verwenden. Damit können Sie wählen, den Text trotzdem auf der Seite anzuzeigen, in einer Schriftart, die der Browser kennt, während der Webfont im Hintergrund geladen wird..

Ohne font-display:swap

Mit font-display:swap

Lesen Sie unseren vollständigen Artikel  Stellen Sie sicher, dass Text während des Ladens von Webfonts sichtbar bleibt

14. Minimieren Sie die DOM-Größe

Eine Webseite besteht aus HTML. Das Erste, was ein Browser tut, ist das HTML in DOM-Knoten umzuwandeln. Das ist eine Baumstruktur von HTML-Elementen, die später verwendet wird, um den Render Tree damit aufzubauen. Aus dem Render Tree beginnt ein Browser mit dem Rendern; schließlich erscheint die Webseite auf dem Bildschirm. 

Wie viele DOM-Knoten (HTML-Elemente) Sie haben und wie tief diese DOM-Knoten in der Baumstruktur sitzen, bestimmt, wie kompliziert es für einen Browser ist, Ihre Seite zu erstellen. CSS und JavaScript benötigen auch mehr Zeit für die Analyse, wenn Sie zu viele DOM-Knoten haben. Dies geht alles wieder direkt auf Kosten des FCP.

Lösen Sie dies durch:

• Lazy Load von Teilen Ihrer Webseite
  Um die anfängliche Anzeige zu beschleunigen, können Sie erwägen, Teile Ihrer Website, wie die Fußzeile, zu einem späteren Zeitpunkt per AJAX zu laden.
• Nutzen Sie content-visibility
  Die CSS-Eigenschaft content-visibility weist einen Browser an, Stil, Layout und Paint während des Renderns zu überspringen. Dies geschieht kurz bevor das Element sichtbar wird.
•  Teilen Sie große Seiten in mehrere Seiten auf
  Die Anzahl der DOM-Knoten kann reduziert werden, indem große Seiten in mehrere Seiten aufgeteilt werden.
•  Implementieren Sie Infinite Scroll
  Infinite Scroll ist im Grunde Lazy Loading: Beim Scrollen durch wiederholte Elemente wie Bilder (Pinterest) oder große Datentabellen kann Infinite Scroll Ihre Seite erheblich beschleunigen.
• Vermeiden Sie JavaScript-DOM-Interaktion
  Seien Sie besonders vorsichtig mit JavaScript, wenn Sie eine große Anzahl von DOM-Knoten auf Ihrer Seite haben. Ein Befehl kann dann eine große Anzahl von DOM-Knoten laden, was den Speicherverbrauch erhöht.
• Vermeiden Sie komplizierte CSS-Deklarationen
  Seien Sie besonders vorsichtig mit komplizierten CSS-Befehlen bei einer großen Anzahl von DOM-Knoten. Sie sollten zum Beispiel den last-child-Status für jedes div-Element auf Ihrer Seite überprüfen.
• Verwenden Sie Web Workers, um den Main Thread Ihres Browsers zu schonen
  Web Workers sind JavaScript, das parallel zu Ihrer Webseite ausgeführt werden kann. Sie können diesen Web Workern Befehle geben, die im Hintergrund ausgeführt werden. Wenn der Web Worker den Befehl ausgeführt hat, gibt er ihn an die ursprüngliche Seite weiter. Der Vorteil hierbei ist, dass Sie immer noch komplexes JavaScript ausführen können, ohne dass die Seite einfriert.