Hinzufügen und Nutzen eines CDN auf Ihrer Website

Wenn Sie sich schon eine Weile mit Webentwicklung beschäftigen, wissen Sie, dass das Web Geschwindigkeit braucht. Die Wahrheit ist einfach: Geschwindigkeit zählt und schneller wird als besser angesehen.

Ein „einfacher Gewinn“ zur Steigerung der Leistung ist die Nutzung einesCDN. Wir haben dies bei CSS-Tricks mehrmals besprochen. Es ist einfach, da Sie keinen Code umschreiben oder Inhalte manuell bearbeiten müssen, aber es ist ein Leistungsbereich, den viele von uns vielleicht übersehen, weil, nun ja, Hosting, Server und cPanels, oh je!

Glücklicherweise muss der Prozess der Integration eines CDN nicht schwierig sein. Idealerweise konfigurieren Sie die Dinge und dann jubeln Dinge wie Google PageSpeed vor Freude in Form von hohen Leistungsergebnissen, die wiederum zu besseren Suchmaschinenrankings, höheren Einnahmen, einer Gehaltserhöhung für Sie und ... Sie verstehen schon.

Dieser Beitrag führt Sie durch den Prozess der Einrichtung eines CDN für eine benutzerdefinierte Webanwendung, gefolgt von einigen Tricks, mit denen wir das Beste aus unserer Arbeit herausholen können. Wie ich sagte, muss es nicht schwierig sein, also tauchen wir ein und machen das Web schneller!

Es ist erwähnenswert, dass die Einrichtung eines CDN für Benutzer eines CMS wie WordPress, wo Plugins helfen können, sogar noch einfacher sein kann als das, was wir hier behandeln. Wir gehen davon aus, dass nicht jeder diesen Luxus hat (Shout-out an Webanwendungen!) und fahren auf die traditionellere Weise fort.

Moment mal, ich habe Sie bei CDN verloren

Es schadet nicht, die Grundkonzepte dessen, was ein CDN ist und wofür es verwendet wird, noch einmal zu wiederholen, also fangen wir damit an.

Ein CDN funktioniert, indem es statische Assets vom Server Ihrer Website abruft und sie auf seinen Servern zwischenspeichert. Wenn ein Browser eine Anfrage zum Besuch Ihrer Website stellt, werden die statischen Inhalte über das CDN und nicht über Ihre Website bereitgestellt. Dies ist schneller, da die CDN-Server global verteilt sind und als Proxys dienen, die bestimmen, welcher Server sich physisch am nächsten zu Ihrem Besucher befindet, und somit Inhalte über ein schnelleres, bequemeres Netzwerk liefern. Daher der vollständige Name: Content Delivery Network.

Wie weiß der Browser also, dass er die Ressourcen vom CDN und nicht von Ihrem Server abrufen soll? Die URL Ihrer statischen Ressourcen wird ersetzt, um auf den CDN-Server und nicht auf die URL Ihrer eigenen Website zu verweisen.

Nehmen wir zum Beispiel an, wir möchten, dass das CDN als Subdomain konfiguriert wird. Für CSS-Tricks könnte dies etwa cdn.css-tricks.com sein, und dies wird die relative URL sein, auf der wir alle unsere Assets basieren.

Kurz gesagt, die URLs von Assets auf unserer Website wie diese

https://css-tricks.de/image.jpg 
https://css-tricks.de/style.css 
https://css-tricks.de/script.js

...würden zu

http://cdn.css-tricks.com/image.jpg 
http://cdn.css-tricks.com/style.css 
http://cdn.css-tricks.com/script.js

Der Browser sendet die Anfragen an Ihr CDN anstelle Ihres Servers, wodurch die Last von Ihrem Server genommen und Ihre gesamte Website dadurch schneller wird.

Moment, zwei Server für eine Website?

Ja, bis zu einem gewissen Grad, aber das bedeutet nicht wirklich, dass Sie zwei Server verwalten.

Was wir stattdessen meinen, ist die Nutzung des CDN als virtuelle Schicht, die zwischen Ihrem Server und dem Browser eines Benutzers steht. Diese virtuelle Schicht lauscht auf die Anfrage, die der Browser an Ihren Server stellt, und antwortet gerne mit zwischengespeicherten Assets im Namen des Servers.

In einigen Fällen laden Sie Ihr Asset direkt auf das CDN hoch und nehmen die gesamte Last von Ihrem Server. Was wir uns in diesem Beitrag ansehen werden, ist ein Prozess, bei dem das CDN Assets von Ihrem Server abruft und vorab zwischenspeichert, so dass kein Hochladen auf verschiedene Server und die Verwaltung mehrerer Speicherorte erforderlich ist.

So implementieren Sie ein CDN auf einer benutzerdefinierten Anwendung

Zwei der am weitesten verbreiteten CDN-Dienste sind Amazon AWS und MaxCDN, obwohl sicherlich viele andere Dienste verfügbar sind. Wir werden uns hauptsächlich auf MaxCDN als Beispiel für die Einrichtung konzentrieren.

Schritt 1: Wählen Sie ein CDN und registrieren Sie Ihre Website

Sobald Sie sich entschieden haben, dass ein CDN für Ihre Webanwendung die richtige Wahl ist, möchten Sie sich für ein Konto registrieren. Es gibt viele, viele Optionen, und anstatt die Vor- und Nachteile jeder einzelnen abzuwägen (was vielleicht einen guten zukünftigen Beitrag ergibt), hier sind einige, um Ihnen den Einstieg zu erleichtern

• MaxCDN
• AWS CloudFront
• Cloudflare
• Akamai
• Google Cloud
• Microsoft Azure

Ein häufiger Schritt bei der Registrierung Ihres Kontos ist die Einrichtung einer Pull-Zone oder Distribution. Eine Pull-Zone oder Distribution wird vom CDN als Speicher für Ihre alltäglichen Support-Dateien verwendet. Sie zieht die Daten automatisch von einem von Ihnen angegebenen Ort ab, sobald die erste Anfrage für die Datei gestellt wird. Die Dateien werden dem Endbenutzer entweder über eine Subdomain Ihres gewählten CDN oder eine benutzerdefinierte Domain (Subdomain) Ihrer Wahl bereitgestellt, die auf das CDN verweist. Die Daten im Speicher werden nach einer konfigurierbaren Zeit automatisch vom Server gelöscht.

Schritt 2: Erstellen Sie Ihre CDN-URL

Ihre CDN-URL ist die URL, auf die alle Ihre Assets zeigen werden, sobald alles eingerichtet ist. Eine gute Faustregel ist, einen URL-Namen zu verwenden, der sich leicht in Ihrer Datenbank nach allen vorhandenen URLs durchsuchen und ersetzen lässt.

Wie jede andere Subdomain muss dies als CNAME-Eintrag in den DNS-Einstellungen Ihres Hosts eingerichtet werden.

Schritt 3: Zeigen Sie Ihre Assets auf das CDN

Wir betrachten eine Methode zur Erstellung einer Variablen für die CDN-URL und wie diese verwendet werden kann, um die URL programmatisch vor unsere statischen Ressourcen zu stellen. Der Grund dafür ist, dass (1) es schwieriger wird, Fehler in unserem Markup zu machen, und (2) die URL leichter zu pflegen ist, falls wir sie ändern müssen.

Wir tun dies, indem wir eine globale CDN-Variable definieren und dann diese Variable unserer URL für statische Ressourcen voranstellen. Wir definieren diese Variable sowohl auf PHP- als auch auf JavaScript-Ebene, damit wir mehr Flexibilität haben, wie wir sie später verwenden können. Es macht es uns auch leichter, wenn wir uns entscheiden, das CDN aufzugeben, denn alles, was wir tun müssen, ist, die Variable durch ein einfaches / zu ersetzen, um die Dinge zum relativen Pfad unseres ursprünglichen Servers zurückzubringen.

Beachten Sie, dass die folgenden Beispiele dazu dienen, Beispiele zu veranschaulichen und nicht wörtlich verwendet werden sollten. Ihre tatsächliche Verwendung kann variieren.

<?php
define('cdnURL', 'http://cdn.css-tricks.com/');
?>
<html>
    <head>
        <title>Hello World!</>
        <script type='text/javascript'>
            /* Let’s define a javascript global for using the CDN inside scripts */
            var cdnURL = '<?php echo cdnURL ?>';
        </script>
        
        <link rel='stylesheet' href='<?php echo cdnURL ?>css/style.css' />	
    </head>
    <body>
        <img src='<?php echo cdnURL ?>img/logo.png' />
        <button>Submit</button>
        <script type='text/javascript' src='<?php echo cdnURL ?>js/main.js'></script>
    </body>
</html>

Oder, in JavaScript

(function() {
    var preloadImage = document.createElement('img');
    preloadImage.src = cdnURL + 'img/logo.png';
})();

Dies erfordert eine leichte Änderung in Ihrem Denkprozess als Entwickler. Jede statische Ressource muss die Variable cdnURL vorangestellt bekommen.

Das gleiche Denken gilt für Ihr CSS. Zum Beispiel können wir auch eine globale CDN-Variable einrichten und sie mit einem CSS-Präzessor wie LESS unseren CSS-Ressourcen voranstellen

@cdnURL: 'http://cdn.css-tricks.com/';
button {
  background-image: url('@{cdnURL}img/button.png');
  &:hover {
    background-image: url('@{cdnURL}img/button_hover.png');
  }
}

...oder Sass übrigens auch

$cdnURL: 'http://cdn.css-tricks.com/';

button {
  background-image: url('#{$cdnURL}img/button.png');
  &:hover {
    background-image: url('#{$cdnURL}img/button_hover.png');
  }
}

Das Tolle daran ist, dass Sie Ihr CDN ausschalten können, indem Sie einfach cdnURL auf / setzen, was alle Ihre relativen URLs neu erstellt. Dies hat auch den Vorteil, dass Sie nur cdnURL ändern müssen, wenn Sie die CDN-URL wechseln möchten.

Das ist wirklich der dreistufige Prozess für die Einrichtung eines CDN, die Verknüpfung mit Ihrem Server und dann die Umleitung Ihrer vorhandenen Assets darauf, damit das CDN die Dinge bei Bedarf bereitstellen kann.

Lassen Sie uns über einige erweiterte Einstellungen sprechen

Die Einrichtung des CDN war nicht so beängstigend, oder? Nachdem wir die größten Hürden überwunden haben, können wir uns mit erweiterten Einstellungen vergnügen, die die Auslieferung unserer Assets optimieren.

TimeToLive (TTL)

CDNs haben normalerweise eine TimeToLive (TTL) für Assets eingestellt. Dies ist eine ausgefallene Art, dem CDN mitzuteilen, wie lange (in Sekunden), bevor es ein Asset als veraltet behandeln soll. Dann sucht es erneut auf dem Server nach einer „frischen“ Kopie.

Je länger die TTL, desto länger bleibt eine „Version“ dieses Assets beim CDN und wird weiterhin ausgeliefert. Je kürzer die TTL, desto öfter verwirft es die gespeicherte „Version“ des Assets und geht zum ursprünglichen Server zurück, um nach einer aktualisierten Version zu suchen.

Assets ungültig machen

Der zweischneidige Schwert der TTL ist, dass Sie ein Asset auf Ihrem Server aktualisieren können und die Änderung erst auf Ihrer Website reflektiert wird, wenn die TTL abgelaufen ist und das CDN seinen nächsten Besuch auf dem Server macht, um eine neue Kopie zu finden.

Wir können dies überwinden, indem wir ein Asset *ungültig machen*. Der Trick dabei ist, den Dateinamen bei der Aktualisierung zu ändern. Wenn sich der Dateiname ändert, weiß das CDN nichts Besseres und liest die neu benannte Datei als völlig neues Asset und nicht als Aktualisierung der vorhandenen.

Mit anderen Worten, dies: http://cdn.css-tricks.com/image100.jpg

...würde in etwa so umbenannt: http://cdn.css-tricks.com/image101.jpg

Auf Wiedersehen alte Version und hallo neue!

TTL für Versionskontrolle nutzen

Hey, wenn also das CDN eine Version eines Assets speichert und eine neuere Version davon auf unserem Server liegt, die es noch nicht abgerufen hat, dann haben wir technisch gesehen zwei Iterationen desselben Assets. Wir können dies nutzen, um eine Form der „Versionskontrolle“ zu erstellen, bei der das Aktualisieren unserer Assets auf dem Server nicht bedeutet, dass wir sie automatisch verlieren und zu einer früheren Kopie zurückkehren können, falls nötig.

Der wirklich komplizierte Weg, dies zu tun, ist, alle unsere Ressourcen jedes Mal umzubenennen, wenn wir eine Änderung vornehmen, wie wir es beim Ungültigmachen des Assets getan haben. Dies ist jedoch aus Wartungssicht übertrieben, selbst wenn wir eine Variable dafür erstellen müssten, wie wir es für cdnURL getan haben. Wir werden stattdessen etwas schummeln, denn so machen wir das auf einem Blog, der auf Tricks basiert.

Wir beginnen damit, unsere statischen Assets in eigene Ordner zu legen, damit dies: http://cdn.css-tricks.com/image.jpg

...wird zu: http://cdn.css-tricks.com/img100/image.jpg

Um die Datei ungültig zu machen und das CDN zu zwingen, die neueste Version bereitzustellen, würden wir den Unterverzeichnispfad wie folgt ändern: http://cdn.css-tricks.com/img101/image.jpg

Sehen Sie den Unterschied? Der Dateiname bleibt gleich, aber er scheint jetzt in einem Verzeichnis auf dem Server zu leben. Wieder weiß das CDN den Unterschied nicht und sieht dies als eine völlig neue Datei. Wir haben gerade eine gefälschte Form der Versionskontrolle erstellt, die direkt im Ordner stattfindet!

Aber warten Sie, wir können es noch besser machen.

Das Ändern der Nummer eines Ordners bei jeder Aktualisierung ist immer noch ein umständlicher Prozess und ein weiterer Schritt in der Wartung unserer Website. Was wir stattdessen tun können, ist, ein paar kleine Änderungen an der .htaccess-Datei der Website vorzunehmen, um die Hauptarbeit zu erledigen.

Wir werden das CDN austricksen, indem wir alle unsere Assets aus demselben Ordner bereitstellen, es aber so aussehen lassen, als ob sie aus einem versionierten Ordner bereitgestellt würden, dank einiger Rewrite-Regeln.

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^ver-[0-9]+.[0-9]+.[0-9]+(.*)$ $1 [L,NC]
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteRule ^(.*)$ index.php?/$1 [QSA,L]
</IfModule>

Ha! Jetzt täuscht unser Server die Versionsnummer in der URL vor, während er unser Beispiel image.jpg-Asset vom selben Pfad auf dem Server bereitstellt, auf dem es ursprünglich hochgeladen wurde.

Alle Assets bei Bedarf ungültig machen

Das Letzte, um dies abzurunden, ist die Integration unseres Versionskontrolltricks in unser HTML-Markup, damit das CDN alle Assets aktualisiert, sobald wir sie vollständig ungültig machen wollen.

Wir richten eine Konfigurationsdatei ein, in der wir eine Variable für die Versionsnummer definieren, diese Variable in unsere Asset-URL-Struktur importieren und dann die Versionsnummer ändern, wann immer wir eine Aktualisierung unserer Assets über das gesamte System pushen wollen.

Hier sehen Sie, wie das in einer PHP-Konfigurationsdatei aussehen könnte

VERSION
1.0.0

Configure::load('cdn');
define('VERSION', file_get_contents(APP.DS."Config".DS."VERSION"));
define('CDN', Configure::read('CDN.path').VERSION.'/'); /* the trailing slash is important */

So könnte das in einer LESS-Konfigurationsdatei funktionieren

@VERSION: '1.0.0';

@import 'cdn';
@import 'version';
@CDNURL: '@{CDN}@{VERSION}/';
 
button {
    background-image: url('@{CDNURL}img/button.png');
    &:hover {
        background-image: url('@{CDNURL}img/button_hover.png');
    }
}

Wie Sie sehen, können Sie auch die CDN-Variable als Datei, Umgebungsvariable oder was auch immer am besten für Sie geeignet ist, verwenden. Die Prinzipien sind weitgehend die gleichen, alle erreichen das gewünschte Endergebnis, nämlich die Einbeziehung der CDN-URL (und Versionsnummer) in alle unsere externen Ressourcen.

CDN, FTW!

Hoffentlich nimmt dies die Angst vor der Einrichtung eines CDN. Es kann sicherlich wie eine entmutigende Aufgabe erscheinen und es gibt absolut erweiterte Einstellungen, die Sie im Dickicht verlieren können. Die anfängliche Einrichtung ist das, was die meisten von uns sowieso brauchen, und die Vorteile sind enorm, wenn es um Leistung und Benutzererfahrung geht, neben einer *Vielzahl* anderer Dinge (Wortspiel beabsichtigt).

Die Wahrheit ist, dass es sogar noch einfacher wird, wenn Sie Inhalte auf Ihrer Website mit einem beliebten CMS wie WordPress verwalten, wo es Plugins im Überfluss gibt, um den Prozess noch weiter zu optimieren.

Selbst wenn wir nicht den Luxus von Plugins haben, kann die Einrichtung eines CDN immer noch recht unkompliziert sein, selbst für die am wenigsten hosting-orientierten von uns. Die Einrichtung ist die größte Hürde, und wir konnten sie in drei grundlegende Schritte unterteilen. Alles andere fließt von dort schön.