PartyTown - Revolutionierung der Nutzung von Third-Party Scripts

Einführung

In der heutigen digitalen Landschaft sind Websites zunehmend auf Third-Party Scripts angewiesen, um Funktionen wie Analysen, Werbung und die Verbesserung der Bedienungsfreundlichkeit zu ermöglichen. Diese Skripte können jedoch die Ladeleistung einer Website erheblich beeinträchtigen. An dieser Stelle kommt PartyTown ins Spiel. Unser Unternehmen hat PartyTown vor kurzem in seine Landing Page integriert, um die anfängliche Ladeleistung zu verbessern, indem schwere Skripte von Drittanbieter:innen wie Google Tag Manager (GTM) in einen Web-Worker verlagert wurden. In diesem Artikel werden der Ansatz von PartyTown, seine Ziele und die Vorteile für die Webentwicklung erläutert.

PartyTown verstehen: Ein Durchbruch in der Web-Performance

PartyTown ist eine einzigartige Lösung zur Optimierung der Website-Leistung, die durch Third-Party Scripts beeinträchtigt wird. Traditionell laufen diese Skripte auf dem Haupt-Thread eines Webbrowsers und konkurrieren um Ressourcen mit der primären Webanwendung, was oft zu langsameren Ladezeiten und einem minderwertigen Benutzungserlebnis führt. PartyTown löst dieses Problem, indem es diese Skripte in einen Web-Worker verlagert, einen separaten Thread, der im Hintergrund läuft, so dass sich der Haupt-Thread ausschliesslich auf die Webanwendung konzentrieren kann.

Ziele von PartyTown

PartyTown wurde mit spezifischen Zielen entwickelt, um die Web-Performance zu verbessern:

1. Freisetzung von Ressourcen des Haupt-Threads: Durch die Auslagerung von Skripten von Drittanbieter:innen in einen Web-Worker stellt PartyTown sicher, dass der Haupt-Thread für die Ausführung der primären Webanwendung reserviert ist, wodurch deren Leistung gesteigert wird.

2. Sandboxing von Third-Party Scripts: Diese Funktion ermöglicht die Kontrolle über den Zugriff dieser Skripte auf die APIs des Haupt-Threads und erhöht so die Sicherheit und Leistung.

3. Isolierung lang laufender Tasks: Lange Aufgaben werden im Webworker untergebracht, so dass sie den Haupt-Thread nicht blockieren.

4. Weniger Layout-Thrashing: PartyTown minimiert die Leistungseinbussen, die durch häufige DOM-Manipulationen entstehen, indem Aktualisierungen in Stapeln zusammengefasst werden.

5. Drosselung des Skript-Zugriffs: Die Häufigkeit, mit der Skripte von Drittanbieter:innen mit dem Haupt-Thread interagieren, wird auf intelligente Weise geregelt.

6. Unveränderte Ausführung von Skripten: PartyTown ermöglicht es Skripten von Drittanbieter:innen, wie vorgesehen zu arbeiten, ohne dass der Code verändert wird.

7. Synchrone DOM-Operationen: Es ermöglicht das synchrone Lesen und Schreiben von DOM-Operationen aus dem Web Worker, was eine nahtlose Skriptausführung gewährleistet.

Die Vorteile der Implementierung von PartyTown

Die Integration von PartyTown in eine Web-Plattform bietet mehrere entscheidende Vorteile:

• Erhöhte Ladegeschwindigkeiten: Durch die Auslagerung von Skripten in einen Webworker können die anfänglichen Ladezeiten einer Seite deutlich reduziert werden.

• Verbesserte Benutzungsfreundlichkeit: Schnellere Ladezeiten tragen zu einem reibungsloseren, ansprechenderen Benutzererlebnis bei.

• Optimierung der Ressourcen: Freisetzung von Haupt-Thread-Ressourcen für wichtige Funktionen der Webanwendung.

• Sicherheit und Kontrolle: Sandboxing bietet eine zusätzliche Ebene der Sicherheit und Kontrolle über Skripte von Drittanbieter:innen.

• Effiziente Skript-Ausführung: Trotz der Verlagerung werden Skripte effizient und wie vorgesehen ausgeführt, wobei ihre Funktionalität erhalten bleibt.

Verwendung von PartyTown in einer Angular 17 SSR-Anwendung

Der Einstieg in ein neues Gebiet kann manchmal recht komplex und zeitaufwendig sein. Wir haben uns daher entschlossen, diese Hürde zu erleichtern. Ausserdem wollen wir der Angular-Community etwas zurückgeben und den Einstieg erleichtern.

Wir haben ein neues Projekt in einem einfachen Repository aufgesetzt, um eine mögliche Implementierung zu zeigen. Entwickler:innen können den Code kopieren und nach ihren Bedürfnissen und Anforderungen anpassen.

Für die Integration ist es lediglich erforderlich, den Provider zu registrieren und die gewünschten Konfigurationen zu setzen.
 

• src/app/app.config.ts

providePartyTown({
    partyTown: {
        enabled: true,
        debug: false,
    },
    gtm: {
        enabled: true,
        key: 'GTM-NLMGSWS', // set your configured GTM key here
    },
} as PartyTownConfig);

Ressourcen:

• https://partytown.builder.io/

• https://github.com/find-ida/angular-ssr-partytown

Fazit

Die Integration von PartyTown in die Landing Page unseres Unternehmens stellt einen bedeutenden Schritt in der Optimierung der Web-Performance dar. PartyTown löst das häufige Problem der Verlangsamung durch Skripte von Drittanbieter:innen und ebnet so den Weg für schnellere, effizientere und benutzungsfreundlichere Websites. Der innovative Ansatz für den Umgang mit Skripten von Drittanbietern steigert nicht nur die Leistung, sondern stellt auch sicher, dass das Benutzungserlebnis nicht beeinträchtigt wird. Im Zuge der Weiterentwicklung der Webtechnologien werden Lösungen wie PartyTown für die Aufrechterhaltung des empfindlichen Gleichgewichts zwischen Funktionalität und Leistung von entscheidender Bedeutung sein.