Home Technische Artikel Maximieren der CDN-Leistung für Ihre Anwendung mit EdgeJS by Edgio
Applications

Maximieren der CDN-Leistung für Ihre Anwendung mit EdgeJS by Edgio

About The Author

Outline

Eine Einführung zum strategischen Zwischenspeichern dynamischer Inhalte an der Peripherie: Wie funktioniert es und warum es besser ist als herkömmliche CDNs.

Wenn es um die Leistung geht, machen die meisten CDNs einige Dinge gut: Sie stellen statische Dateien schnell bereit, bieten Netzwerk-Overhead für Spitzenzeiten und schützen vor DDoS-Angriffen auf Netzwerkebene. In der Vergangenheit bedeutete dies eine spürbare Steigerung der Leistung und Sicherheit für Assets wie Bilder, Videos und andere statische Inhalte. Mit der Weiterentwicklung der Webtechnologien sind die oben genannten Vorteile im Wesentlichen nur die Tabellenpositionen, die etabliert wurden, als CDNs Teil der gängigen Web-Bereitstellungslösungen wurden.

Das Problem ist, dass die CDN-Architektur vor Jahren entwickelt wurde. Die Architektur der Website hat sich sprunghaft verändert, aber die meisten CDNs haben sich nicht an die sich verändernde Landschaft angepasst.

Wenn Sie dies lesen, haben Sie eine Site, die wahrscheinlich mit einer gewissen Menge an serverseitig wiedergegebenen dynamischen Inhalten ausgestattet ist. Wenn Sie ein älteres CDN verwenden, sind Sie wahrscheinlich daran gewöhnt, etwas derartiges in Ihren Antwortheadern zu sehen, wenn Sie die Entwicklertools Ihres Browsers aufrufen.

cdn-Cache: Pass

Ersetzen Sie den Wert für dieses Paar je nach Provider: Pass, Miss oder Dynamic-content. Es bedeutet alles dasselbe.

„Diese Antwort kommt von Ihrer Herkunft, weil sie zu kompliziert war.“

Und was bedeutet das für die Performance Ihrer Website? Das bedeutet, dass Sie auf Geschwindigkeit verzichten müssen, da Ihre dynamischen Inhalte fast immer einfach und einfach von Ihrem Ursprung stammen. Ihre Kategorien- und Produktseiten, Artikel und API-Anfragen werden fast 100 % der Fälle direkt an Ihren Ursprung gesendet. Die meisten CDNs leiden unter derselben Fäule. Wenn Sie Glück haben, können Sie etwa 10 bis 11 Prozent der dynamischen Antworten Ihres Servers in Ihren Edge-Cache einpressen. Sie werden schnell feststellen, dass Sie nicht über ausreichend detaillierte Kontrolle verfügen, um Ihre Caching-Regeln zu optimieren, um eine Website zu erstellen, die sofort geladen wird und sich wie eine native App anfühlt.

Willkommen in Edgio

Bei Edgio verfügen wir über das zweitgrößte CDN der Welt mit mehr als 300 weltweit verteilten Pops und einer Kapazität von 250 TBS. Wir sind sicher, leistungsstark und überall auf der Welt. Aber wie wir bereits gesagt haben, sind das nur die Tischplatten. Bei Edgio nähern wir uns dem CDN-Problem aus einer anderen Perspektive. Anstatt an zwanzig Jahre alte Regeln gebunden zu sein, haben wir für die nächsten zwanzig Jahre und darüber hinaus ein reaktionsfähiges und flexibles CDN aufgebaut. Wir haben das weltweit erste Code-konfigurierbare CDN entwickelt, das Ihren Entwicklern und DevOps-Teammitgliedern die Flexibilität und granulare Kontrolle bietet, die sie benötigen, um Websites in weniger als einer Sekunde bereitzustellen.

Es ist keine Magie, sondern die Zukunft der CDNs und jetzt erhältlich

An diesem Punkt denken Sie wahrscheinlich, dass dies nach Magie klingt. Vielleicht fühlt es sich so an, aber das ist es nicht, es ist die Zukunft der Bereitstellung von Webanwendungen. Anstatt Ihre DevOps- und Engineering-Teams zu trennen, führen wir sie zusammen, indem wir Ihnen die Möglichkeit geben, Ihre CDN-Logik in Ihre lokalen, Staging- und Produktionsumgebungen zu integrieren.

Speichern Sie ganz einfach, was Sie wollen, und zwar für die Dauer

Jede Edgio-Konfiguration beginnt mit einem Code-Repository, das Sie besitzen und steuern. Jede Bereitstellung ist einzigartig und atomar, sodass Sie in weniger als einer Minute auf jede Version zurücksetzen können. Sie können die Konfiguration neben Ihrem Projekt bereitstellen oder in einem separaten Workflow verwalten. Die meisten unserer Kunden integrieren schließlich ihre CDN-Regeln in ihre CI/CD-Pipeline und ihren normalen Entwicklungsablauf. Das Ergebnis ist eine höhere Entwicklergeschwindigkeit ohne Abstriche bei Leistung und Kontrolle. Verwalten Sie Ihr CDN wie Ihre Codebasis.

Ich bin es gewohnt, meine Konfigurationsänderungen in einem Portal zu veröffentlichen oder API-Anfragen zu stellen. Wie unterscheidet sich Edgio von anderen?

Keine Sorge, wir haben API-Endpunkte und eine herkömmliche Benutzeroberfläche, wenn Sie sie möchten, aber um Ihre Cache-Trefferrate, Site-Performance und Entwicklergeschwindigkeit vollständig zu maximieren, sollten Sie EdgeJS verwenden. Tauchen wir ein.

Wenn ein Projekt initialisiert wird, beginnen Sie mit einer einfachen Konfigurationsdatei, die einen empfohlenen Regelsatz enthält. Ihre Konfiguration wird in JavaScript geschrieben, der weltweit beliebtesten Entwicklungssprache, und mit unserer CLI in Sekunden bereitgestellt. Eine Datei definiert Ihre Ursprungsserver.

				
					module.exports = {
backends: {
  origin: {
    domainOrIp: "example.com",
    hostHeader: "example.com",
  },
},
				
			

Fügen Sie Ihre API-Endpunkte, Media Buckets oder einen anderen benötigten Ursprung hinzu. Einfach und mit wenigen Codezeilen.

Was ist mit der Flexibilität beim Caching?

Tolle Frage, hier beginnt der Spaß. Wir fügen eine weitere Datei hinzu, damit Sie Ihre Routen konfigurieren und einige Caching-Regeln schreiben können. Erstellen Sie Regeln für Ihre Inhalte, und legen Sie die Caching-Regeln für Edge-, Browser- und Servicemitarbeiter nach Belieben fest.

Beginnen wir mit den statischen Vermögenswerten, die CDNs so gut verarbeiten.

				
					.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
  ({ cache, proxy }) => {
    cache({
      edge: {
      maxAgeSeconds: 60 * 60 * 24,
      staleWhileRevalidateSeconds: 60 * 60
      },
      browser: {
      maxAgeSeconds: 60 * 60 * 24,
      },
    })
    proxy('origin')
  }
)
				
			

Mit einer Regel haben wir so etwas für jede Anfrage festgelegt:

„Wenn wir eine Anfrage mit einer passenden Dateierweiterung sehen, speichern Sie sie 24 Stunden lang auf Edgio und dem Browser des Kunden.“

Wenn Sie dies zu Hause versuchen, können Sie sich lokal um Ihre Website klicken und sehen, wie wir Bilder, Ihre Bilder, Schriftarten, CSS und JS zwischenspeichern und bereitstellen. Starten Sie ein Inkognito-Fenster, damit Sie sicher sind, dass Ihr Browser-Cache leer ist, und sehen Sie Ihre Cache-Treffer lokal an. Ja lokal. Sie müssen nicht implementiert werden, damit sie funktioniert. Sie wissen genau, wie Ihr Code mit unserem CDN interagiert.

Was ist mit dem dynamischen Inhalt, den Sie erwähnt haben?

Keine Sorge, wir haben es nicht vergessen. Wir sind nur 10 Minuten da und wir passen diese alten CDNs an. Jetzt schalten wir die Nachbrenner an und lassen sie im Staub liegen. Angenommen, Sie möchten eine Route für einige dynamische Inhalte hinzufügen.

				
					router.match('/products/:productId', ({ cache, proxy }) => {
  cache({
    edge: {
      maxAgeSeconds: 60 * 60 * 24
      staleWhileRevalidateSeconds: 60 * 60
    }
  })
  proxy('origin')
})
				
			

Und übersetzt bedeutet dies Folgendes:

„Cachen Sie alle Produktseiten für einen Tag.
Wenn dieser Cache abgelaufen ist, serviere den alten für eine Stunde, während wir nach einer neuen Version suchen.“

Jetzt haben Sie die Flexibilität gesehen und die Grundlagen verstanden. Hoffentlich stellen Sie sich vor, welche Auswirkungen die Bereitstellung Ihres CDN auf Edgio auf die Geschwindigkeit und Leistung Ihrer Website haben kann. Sie können ganz einfach eigene Routen definieren und ihnen Caching-Regeln zuweisen. Aber was können Sie noch mit Edgios Anwendungsplattform und EdgeJS tun?

  • Anforderungen an einen anderen Pfad an Ihren Ursprung weiterleiten,
  • Anforderungen ändern
  • Antworten ändern
  • Cookies manipulieren
  • Statische Dateien bereitstellen
  • Weiterleitung zu serverlosen Funktionen
  • Gehen Sie zurück auf serverseitiges Rendering
  • Umleitungen
  • Datenverkehrssperre
  • Selektives Bereinigen mit benutzerdefinierten Cacheschlüssel
  • Oder verändern Sie die Antwort Ihrer Herkunft vollständig.

Es liegt an Ihnen, zu entscheiden, wie Sie die Technologie der nächsten Generation von Edgio nutzen werden. Die oben genannten Beispiele sind nur die Spitze des Eisbergs. Wir bei Edgio sind ständig auf der Suche nach Leistung. Deshalb haben wir uns entschieden, die Lösung mit unserer einzigartigen HTML- und Asset-Prefetching-Lösung noch einen Schritt weiter zu gehen, über den Rand hinaus und in den Browser Ihres Besuchers zu integrieren.

Um herauszufinden, wie Sie Netzwerkreaktionszeiten praktisch eliminieren und Ihre Website vollständig transformieren können, indem Sie ihr das Gefühl einer nativen Anwendung geben, lesen Sie unbedingt unseren Follow-up-artikel: Reduzieren Sie Absprungraten und verbessern Sie die Website-Erfahrung mit Predictive Prefetching von Edgio.