Bye bye, JSDelivr – Third-Party-Requests mit Cloudflare komplett eliminieren

Ghost lädt standardmäßig einige Skripte und Stylesheets von JSDelivr, einem Content Delivery Network (CDN), für Funktionen wie das Mitglieder-Portal, die Suche und (falls aktiviert) die Kommentarfunktion. Diese Anfragen an externe Dienste sind aus datenschutzrechtlicher Sicht in der Regel unproblematisch, da sie keine personenbezogenen Daten übertragen oder verarbeiten. Trotzdem kann es Gründe geben, sie zu vermeiden.

Warum Third-Party-Requests vermeiden?

Ein guter Grund für die Vermeidung von Third-Party-Requests liegt in der potenziellen Verbesserung der Performance und Ladezeiten der Website:

1. Reduzierte DNS-Lookups: Jede Anfrage an eine externe Domain erfordert einen DNS-Lookup, der Zeit in Anspruch nimmt. Durch die Vermeidung von Third-Party-Requests reduziert sich die Anzahl der notwendigen DNS-Lookups, was die initiale Ladezeit der Seite verkürzen kann.
2. Vermeidung von Verbindungsaufbau: Für jede externe Domain muss eine neue TCP-Verbindung aufgebaut werden. Dieser Prozess, der Handshakes und möglicherweise SSL/TLS-Verhandlungen beinhaltet, kann die Ladezeit erheblich verlängern. Durch die Nutzung lokaler Ressourcen eliminiert man diese zusätzlichen Verbindungsaufbauzeiten.
3. Kontrolle über Caching: Wenn alle Ressourcen lokal gehostet werden, hat man die volle Kontrolle über deren Caching-Verhalten. So kann man aggressive Caching-Strategien implementieren, die die Ladezeiten für wiederkehrende Besucher drastisch reduzieren.
4. Vermeidung von CDN-Ausfällen: Obwohl CDNs in der Regel zuverlässig sind, kann es zu Ausfällen oder Verzögerungen kommen. Durch das Hosten von Ressourcen auf einem eigenen Server eliminiert man diese potenzielle Fehlerquelle und gewährleistet konsistente Ladezeiten.
5. Optimierte Ressourcenbündelung: Wenn alle Skripte und Stylesheets lokal gehostet werden, können sie leichter zusammengefasst und minimiert werden. Dies reduziert die Anzahl der HTTP-Requests insgesamt und kann zu schnelleren Ladezeiten führen.
6. Verbesserte Time to First Byte (TTFB): Durch die Reduzierung der Abhängigkeiten von externen Ressourcen kann der Server schneller mit dem Senden von Inhalten beginnen, was die TTFB verbessert – ein wichtiger Faktor für die wahrgenommene Ladegeschwindigkeit und SEO.
7. Geringere Latenz: Lokale Ressourcen haben in der Regel eine geringere Latenz als solche, die von externen Servern geladen werden. Dies kann besonders für Benutzer in geografisch entfernten Regionen von Vorteil sein.
8. Bessere Kontrolle über Ressourcenpriorisierung: Mit allen Ressourcen auf dem eigenen Server können die Ladereihenfolge und -priorität besser gesteuert werden.

Wir wollen einen Mittelweg gehen und die von JSDelivr geladenen Skripte und Stylesheets mithilfe eines Cloudflare-Workers cachen. Das verbessert die meisten der oben genannten Leistungsaspekte, ohne dass wir die externen Skripte und Stylesheets ständig händisch aktualisieren müssen.

Konfiguration alternativer URLs in Ghost

Um Third-Party-Requests zu vermeiden, können in der Ghost-Konfigurationsdatei alternative URLs für die normalerweise über JSDelivr geladenen Ressourcen angegeben werden. Dazu müssen folgende Zeilen in der config.[env].json Datei eingefügt werden:

{
  "portal": {
    "url": "/cdn-jsdelivr/npm/@tryghost/portal@~{version}/umd/portal.min.js"
  },
  "sodoSearch": {
    "url": "/cdn-jsdelivr/npm/@tryghost/sodo-search@~{version}/umd/sodo-search.min.js",
    "styles": "/cdn-jsdelivr/npm/@tryghost/sodo-search@~{version}/umd/main.css"
  },
  "comments": {
    "url": "/cdn-jsdelivr/npm/@tryghost/comments-ui@~{version}/umd/comments-ui.min.js",
    "styles": "/cdn-jsdelivr/npm/@tryghost/comments-ui@~{version}/umd/main.css"
  }
}

Diese Konfiguration leitet die Anfragen an den lokalen Pfad /cdn-jsdelivr/* um, der von unserem Cloudflare Worker bedient werden wird.

Der Cloudflare Worker: Eine Proxy-Lösung

Der Cloudflare Worker fungiert als Proxy zwischen Ihrer Ghost-Installation und JSDelivr. Er empfängt Anfragen, leitet sie an JSDelivr weiter, empfängt die Antwort und sendet sie zurück an den Client. Um die Antwortzeiten zu verbessern, werden die Ressourcen gecached.

Den Code gibt es hier:

This Cloudflare Worker proxies and caches requests to a CDN, making it easier to avoid third-party-requests

This Cloudflare Worker proxies and caches requests to a CDN, making it easier to avoid third-party-requests - third-party-cdn-cloudflare-worker-proxy.worker.js

Gist262588213843476

Einrichtung des Cloudflare Workers

Ein neuer Cloudflare-Worker kann mit den folgenden Schritten konfiguriert werden:

1. Anmelden und zum Bereich Workers & Pages navigieren.
2. Dort einen neuen Worker erstellen und den Code aus diesem Gist ein.
3. Nun muss in den Worker Settings noch eine Route konfiguriert werden, unter der dieser erreichbar ist. In unserem Beispiel wäre das meine-ghost-website.de/cdn-jsdelivr/*.
4. Worker speichern & deployen

Herzlichen Glückwunsch: Nun werden alle Anfragen an JSDelivr über den Cloudflare Worker geleitet!