In unserem vorherigen Artikel haben wir die Vorteile eines CDN-Dienstes mit WordPress untersucht und warum CDNs eine der besten Möglichkeiten sind, WordPress viele Male zuvor im Blog zu beschleunigen. . Wir haben beobachtet, wie stark die Leistung steigt, wenn Ihre Besucher weit von Ihrem Hostserver entfernt sind. Wir hoffen, dass dies Ihr Interesse geweckt hat, denn in dem heutigen Artikel werden wir eine Schritt-für-Schritt-Anleitung zum Erstellen einer CDN-Ressource bei CDN77 und zur richtigen Optimierung geben. Danach installieren wir einen bestimmten Satz von Plugins auf WordPress und prüfen dann, ob alles gut funktioniert.
Der erste Schritt in unserem Leitfaden wird sein, Erstellen Sie ein CDN77-Konto. Falls Sie noch kein Konto haben, CDN77 bietet eine kostenlose 14-Tage-Testversion. Die Registrierung dauert nur wenige Minuten. Dann erstellen wir tatsächlich eine CDN-Ressource, indem wir auf Neue CDN-Ressource erstellen (unter der Registerkarte CDN) klicken. Für diesen Artikel implementieren wir ein CDN in einem Filmblog, der in einem Rechenzentrum in Las Vegas gehostet wird.
Da wir eine vollständige HTTPS-Lösung implementieren werden, verwenden wir das neue „HTTPS“ bei CDN77. Diese Option sichert die Datenübertragung von Ihrem Host-Server zum CDN-Server.
Wenn Ihre Site im SSL-Modus ausgeführt wird, müssen Sie unbedingt eine reine SSL-Ressource unter CDN77 erstellen. Andernfalls riskieren Sie Mixed-Content-Fehler. Diese Art von Fehlern tritt auf, wenn der Browser im SSL-Modus ausgeführt wird und plötzlich versucht, eine Ressource über eine unsichere HTTP-Anforderung zu laden.
So richten Sie ein SSL bei CDN77 ein
Wir können ein kostenloses SSL-Zertifikat auf zwei Arten einrichten. Wir können entweder ein Shared SSL-Zertifikat für eine Subdomain unter xxx.c.cdn77.org oder unseren eigenen CNAME verwenden (siehe Bild oben). Im Allgemeinen empfehlen wir, einen CNAME wie cdn.yoursite.com zu verwenden.
Wenn Sie sich für die gemeinsam genutzte CDN77-Lösung entscheiden, sind keine weiteren Schritte erforderlich, damit die SSL-Subdomain ordnungsgemäß funktioniert.
In diesem Fall richten wir einen CNAME ein. Dies bedeutet, dass der Inhalt unserer Website sofort über HTTPS zugänglich ist, wenn wir unsere Website durch cdn.ourdomain ersetzen. Mit CDN77 ist der Erhalt einer SSL mit wenigen Klicks möglich.
Verbessere es!
Nachdem Sie die Ressource erstellt haben, müssen Sie sich zunächst das Menü Andere Einstellungen ansehen. Wenn Sie HTTPS verwenden möchten, ist es unbedingt erforderlich, HTTP/2 aktiviert zu lassen. Die Geschwindigkeitsverbesserung zwischen normalem HTTP/1.x und HTTP/2 ist enorm. CDN77 funktioniert standardmäßig im HTTP/2-Modus in Ihrer HTTPS-Ressource, wodurch Ihre Zeit halbiert wird.
Wenn Sie über HTTPS gehen, müssen Sie auch eine Weiterleitung 301 durchführen, um den Google-Standards für HTTPS zu entsprechen. Aktivieren Sie die HTTPS-Weiterleitung.
Um eine optimale Leistung zu erzielen, aktivieren Sie alle ignorieren in Abfragezeichenfolgen ignorieren. Sofern auf Ihrer Site kein dynamisch geladener Inhalt ausgeführt wird, der stündlich aktualisiert werden muss, können Sie mit den Abfragezeichenfolgen davonkommen und alle ignorieren. Dies erhöht die Cache- und Site-Leistung enorm.
CDN77 bietet auch die Option Cache Expiry. Wenn Sie viele Bilder laden, sollte dies auf die höchstmögliche Einstellung eingestellt werden, also 12 Tage.
In diesem Leitfaden werden wir uns in erster Linie mit der Geschwindigkeit befassen. CDN stellt uns daher nur den statischen Bildinhalt zur Verfügung, alles andere wird vom Ursprungsserver geladen.
Warum nicht CDN für Javascript & CSS verwenden, sind Sie verrückt?
Denken Sie daran, dass wir in unserem vorherigen Artikel darüber gesprochen haben, wie die CDN-Leistung variieren kann, wenn der Inhalt auf dem angeforderten Knoten des CDN-Netzwerks nicht verfügbar ist. Nun, wenn es sich bei der noch nicht zwischengespeicherten Datei um eine CSS-Datei handelt, erhöht sich die Ladezeit und dies kann sich negativ auf Ihre Leistung auswirken. Dies kann die Rendering-Geschwindigkeit Ihrer Website viel stärker beeinträchtigen, als wenn Sie sich entscheiden, kein CSS mit CDN bereitzustellen.
CSS- und Javascript-Dateien sind für das Laden von Websites in jedem Browser unerlässlich und sollten nicht Gegenstand eines Cache-Mechanismus wie bei CDN-Diensten sein. Sie können jedoch eine statische Ressource auf dem CDN erstellen, um diese wichtigen Dateien zu sichern. Dies ist eine fortgeschrittenere Technik, bei der Sie Ihr WordPress auf ein Niveau optimieren müssen, das über den Rahmen dieses Tutorials hinausgeht.
Sobald wir alles richtig optimiert haben, können wir zum Menü-Tab des Rechenzentrums gehen.
CDN77 bietet eine bequeme Möglichkeit, jeden Knoten ihres Netzwerks zu aktivieren/deaktivieren. Der Punkt ist, sorgfältig auszuwählen, welche Knoten am aktivsten verwendet werden. Dies ist leicht herauszufinden, folgen Sie einfach Ihren Lesern.
Sobald Sie wissen, welche Knoten Sie benötigen, sollten Sie alle entbehrlichen Knoten deaktivieren. Dafür gibt es eine einfache Erklärung: Je mehr Knoten Sie in Ihrem Netzwerk haben, desto länger dauert es, sie alle zu aktualisieren, daher leidet Ihre Leistung. Generell gilt: Wenn Sie die Anzahl der Knoten reduzieren, erhöhen Sie auch die Cache-Leistung. Wählen Sie mit Bedacht.
Wenn Sie die Leistung Ihrer Website zum ersten Mal testen, bereinigen und vorausholen könnte praktisch sein. Purge verschiebt einen bestimmten Inhalt aus dem CDN-Netzwerk. Dies ist praktisch, wenn Sie den Inhalt ändern und den Cache zum Aktualisieren leeren müssen. Prefetch macht das Gegenteil, es wird einen bestimmten Inhalt in den CDN-Cache zwingen.
Sobald Sie alles konfiguriert haben, können Sie Ihren CNAME auf Ihre eigene Domain verweisen. Dazu müssen Sie in Ihrem Registrar oder Ihrem Hosting-Panel im DNS-Bereich eine Regel erstellen und Ihre cdn.yourdomain.com wie im Bild gezeigt auf CNAME xxx.rsc.cdn77.org verweisen, dies weist den DNS an um den gesamten Verkehr Ihrer Subdomain an den tatsächlichen Ort umzuleiten, an dem er sein muss. Keine Sorge, die Leistung wird dadurch nicht beeinträchtigt. Darüber hinaus dient es auch dazu, Ihren Lesern zu zeigen, dass Sie a cdn.ihredomain.com was schick aussieht.
Wenn Sie es vorziehen, die Adresse cdn77.org zu verwenden, müssen Sie nichts tun, verwenden Sie einfach diese Adresse, wenn Sie Ihre Inhalte in WordPress ersetzen.
WordPress-Seite
Auf der WordPress-Seite müssen wir ein Plugin hinzufügen, damit dies ordnungsgemäß funktioniert. Wir werden die CDN-Enabler, ein praktisches kostenloses Plugin. Der Grund für die Verwendung dieses Plugins ist einfach – die meisten CDN-Plugins erlauben keine so detaillierte Kontrolle über die Ordner, die Sie an das CDN senden. Dieses Plugin tut es und ist für unseren Fall sehr wichtig, da wir keine Javascript- oder CSS-Dateien einbinden möchten, sondern nur die hochgeladenen Bilder.
Nach der Installation finden Sie das Plugin gleich hier…
Lassen Sie es uns optimieren!
Erinnern Sie sich, als wir über die Anpassung sprachen? Hier ist die wichtigste Tatsache, wie man ein CDN in WordPress richtig einrichtet. Die überwiegende Mehrheit der CDN-Plugins fordert Sie auf, ein Verzeichnis für das CDN zum „Replizieren“ anzugeben, und normalerweise weisen sie Sie an, wp-Inhalte einzuschließen. Das ist für eine allgemeine Einstellung in Ordnung, aber es ist nicht gut für Ihre Leistung, da der Ordner wp-content mit einem anderen sehr sensiblen Ordner gefüllt ist, dem Ordner Plugins und Themes, einschließlich Tonnen von Javascript- und CSS-Dateien. Sie können an Leistung verlieren, wenn sie nicht wie zuvor beschrieben zwischengespeichert werden.
Also, wie können wir das beheben? Wir binden einfach den Ordner wp-content/uploads ein. So eine einfache Lösung!
So schockiert Sie auch sein mögen, die überwiegende Mehrheit der Plugins, die mit CDNs umgehen, wird Ihnen dies nicht erlauben. Wenn Sie nur diesen Unterordner einschließen, wird Ihr CDN zu Ihrem Upload-Ordner geleitet, dh nur Ihre Bilder.
Durch eine einfache Aktualisierung der Site kann das CDN die Inhalte für Sie abrufen. In diesem Beispiel haben wir einen Firefox-Entwickler-Tab (F12) geöffnet und nach dem ersten Bild gesucht. Man sieht deutlich, dass der Link ersetzt wurde und nun direkt vom CDN statt von unserem Hostserver geladen wird!
Vorher und nachher
Mal sehen, wie sich das alles entwickelt hat!
Auf dem linken Bildschirm sehen wir, wie lange es dauert, die Site aus Schweden zu laden (der weit von unserem Hostserver in Las Vegas entfernt ist, erinnern Sie sich?). Auf dem rechten Bildschirm sehen wir, dass die Leistung gestiegen ist, die Zeit war fast halbiert! Alle wichtigen Dateien werden immer noch von unserem Server in Las Vegas geladen, aber die schweren Dateien, wie die Bilder, werden vom Knoten in Schweden geladen.
Einpacken
Hoffentlich haben Sie einen leistungsstarken Weg kennengelernt, um ein CDN in Ihre WordPress-Site zu implementieren. Einige Techniken sind nicht aufdringlich, wie zum Beispiel CSS- und Javascript-Dateien, die für die Ladegeschwindigkeit der Website unerlässlich sind. Sie können nun alle Vorteile eines CDN nutzen und gleichzeitig seine Nachteile minimieren. Wir hoffen, dass Sie die kostenlose CDN-Testversion ausprobieren und die Tipps in diesem Artikel verwenden, um zu sehen, ob Sie Ihre WordPress-Site beschleunigen können. Wir hoffen, Ihnen hat der Artikel gefallen! Hinterlassen Sie wie gewohnt Fragen oder Zweifel in den Kommentaren unten.