Beschleunigen Sie WordPress Verwenden von CDNs, Komprimierung und Minimierung

Im ersten Teil dieser Serie haben wir das Caching und die Datenbankoptimierung überprüft. In diesem zweiten Teil werden wir über Komprimierung, Minifizierung und Verwendung eines CDNs sprechen.

Lass uns anfangen!

Komprimierung und Minimierung von Vermögenswerten

Es ist einfach mathematisch: Wenn die Größe Ihrer Seite 1 MB beträgt, kann ein Besucher mit einer 10-MBit-Verbindung diese in 800 Millisekunden laden. Wenn Sie Ihre Seitengröße beispielsweise auf 600 KB reduzieren können, dauert es nur eine halbe Sekunde, bis der Besucher sie lädt.

Glücklicherweise gibt es viele Möglichkeiten, die CSS-, JS- und HTML-Ausgabe Ihrer Seiten zu komprimieren und zu minimieren. Mal sehen wie:

Methode 1: Aktivieren der HTTP-Komprimierung

HTTP-Komprimierungsformate wie gzip und deflate werden von fast jeder Serverplattform (einschließlich Apache und Microsoft IIS) verwendet und von nahezu jedem Browser akzeptiert. Die HTTP-Komprimierung wird daher wahrscheinlich auf jedem Gerät und jedem Server ausgeführt. (Möglicherweise aktiviert es Ihr Server sogar standardmäßig. Um dies zu überprüfen, suchen Sie nach "HTTP-Komprimierungsprüfung", klicken Sie auf eines der Ergebnisse und geben Sie Ihre Website-Adresse ein.)

Wie aktivieren wir die HTTP-Komprimierung? Es gibt mehrere Möglichkeiten, dies zu tun, aber ich denke, diese beiden können jedem helfen:

1. Komprimierung über aktivieren .htaccess: Wenn Ihr Server die HTTP-Komprimierung nicht standardmäßig aktiviert hat, können Sie sie aktivieren, indem Sie den folgenden Code in Ihren einfügen .htaccess Datei (aus der HTML5-Boilerplate übernommen):

 # Erzwingen Sie die Komprimierung für entstellte Header. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html   SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X 15 | ~ 15 | - 15) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] 4,13 $ HAVE_Accept-Encoding RequestHeader hängt die Accept-Encoding-Funktion "gzip, deflate" an env = HAVE_Accept-Encoding   # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # # Bestimmte Ressourcen als komprimiert markieren, um: # # 1) Verhindern Sie, dass Apache sie erneut komprimiert. # 2) Stellen Sie sicher, dass sie mit dem richtigen # 'Content-Encoding' HTTP-Antwortheader bedient werden  AddEncoding gzip svgz  # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Alle Ausgaben komprimieren, die mit einem der folgenden Medientypen gekennzeichnet sind . # WICHTIG: Für Apache-Versionen unter 2.3.7 müssen Sie # 'mod_filter' nicht aktivieren und können das '' entfernen.'&''# lines als' AddOutputFilterByType 'steht noch in den Kernanweisungen.  AddOutputFilterByType DEFLATE "application / atom + xml" \ "application / javascript" \ "application / json" \ "application / ld + json" \ "application / manifest + json" \ "application / rss + xml" \ / application / vnd .geo + json "\" application / vnd.ms-fontobject "\" application / x-font-ttf "\" application / x-web-app-manifest + json "\" application / xhtml + xml "\" / xml "\" font / opentype "" "image / svg + xml" \ "image / x-icon" \ "text / cache-manifest" \ "text / css" \ "text / html" \ "text / plain "\" text / vtt "\" text / x-Komponente "\" text / xml "   

2. Aktivieren Sie die HTTP-Komprimierung mit Plugins: Wenn Sie nicht wissen, wie Sie Ihre bearbeiten? .htaccess Datei (oder möchten Sie einfach nicht), können Sie die HTTP-Komprimierung mit den beiden gängigen Cache-Plugins aktivieren: WP Super Cache und W3 Total Cache. Beide bieten die Möglichkeit, die HTTP-Komprimierung über ihre Einstellungsseiten zu aktivieren.

Methode 2: Reduzieren und Kombinieren von CSS- und JS-Dateien

Das Minimieren von Assets ist fast so wichtig wie das Komprimieren. In PHP-Dateien ist Whitespace nicht wirklich wichtig, da sie analysiert und kompiliert werden. Durch Leerzeichen in HTML-, CSS- und JS-Dateien wird jedoch die Dateigröße erhöht, sodass Besucher größere Dateien herunterladen können. Um dies zu vermeiden, können Sie alle nicht benötigten Zeichen in Ihren HTML-, CSS- und JS-Dateien löschen.

Neben der Minimierung können Sie auch mehrere CSS- und JS-Dateien in einer CSS- und JS-Datei kombinieren. Dadurch wird die Anzahl der DNS-Suchvorgänge reduziert, und Browser laden CSS- und JS-Dateien nicht separat herunter.

Minimieren und kombinieren Sie Ihre Vermögenswerte manuell wird als schlechte Praxis betrachtet und könnte in manchen Fällen unmöglich sein. Glücklicherweise ist es sehr einfach, dies automatisch mit Plugins zu erreichen. Wenn Sie das W3 Total Cache-Plugin verwenden, können Sie das Minimieren und Kombinieren Ihrer CSS- und JavaScript-Dateien auf der Einstellungsseite des Plugins aktivieren. Wenn Sie es nicht verwenden, können Sie ein separates Plugin installieren. Mein Favorit ist Autoptimieren. Die automatische Optimierung macht den Job perfekt und bietet einige sehr nützliche Optionen, die Sie verwalten können. Ich verwende dieses mit WP Super Cache und bin sehr zufrieden mit den Ergebnissen.

Verwenden eines CDN in WordPress

Wenn dein Blog mehr ist visuell Wenn Ihre Seiten mit Bildern gefüllt sind oder wenn Sie regelmäßig Blogger sind und möchten, dass Ihre Bilder schneller geladen werden, können (und sollten) sie Content-Delivery-Netzwerke (üblicherweise als CDNs bezeichnet) verwenden..

Warum ein CDN für eine Website verwenden??

Die Logik hinter Content Delivery Networks ist die effizientere Bereitstellung von Inhalten durch die Verwendung von "Edge-Servern" auf der ganzen Welt. Diese Server können herunterladbare Inhalte enthalten (z. B. Bilder, CSS-Dateien usw.). Wenn ein Benutzer Ihre Seite besucht, stellt der dem Server am nächsten gelegene Edge-Server die Dateien bereit. Mit niedrigen Preisen für Bandbreite (manchmal sogar kostenlos) und rasanten Servern wird die Bereitstellung Ihrer Inhalte schneller als je zuvor.

CDN-Plugins für WordPress

Es gibt mehr als ein paar Plugins, die die Synchronisation Ihrer Assets mit verschiedenen CDNs ermöglichen, aber ich möchte nur einige nennen:

• Jetpacks Photon: Als eines der beliebtesten WordPress-Plugins im Plugin-Repository bietet Jetpack eine Reihe von Funktionen als "Addons". (Stellen Sie sich das als Plugin für viele Plugins vor.) Eines der Addons heißt "Photon", ein einfacher und kostenloser CDN-Service für Ihre Website. Photon nimmt Ihre Bilder und vorgestellten Bilder in Ihre Posts und Seiten auf, lädt sie auf die Server von WP.com hoch und ändert die URLs Ihrer Bilder mit neuen URLs aus dem CDN. Es wird nur Filter Wenn Sie Ihre Posts ändern, ändern Sie die URLs (dh, Ihre Posts werden nicht bearbeitet). Sie können sie also einfach deaktivieren, wenn Sie sie nicht mögen. Wahrscheinlich werden Sie sie jedoch mögen viel-Es ist eine der besten kostenlosen Optionen für die meisten WordPress-Websites.
• CloudFlare: CloudFlare ist eher wie ein Proxy-Server, der über ein CDN verfügt und als Firewall zum Schutz Ihrer Website vor böswilligen Angriffen dient. Da Sie ihre DNS-Zonen verwenden, bleiben die URLs der Bilder gleich, sie werden jedoch auf den CloudFlare-Servern zwischengespeichert. Aber Vorsicht, CloudFlare zu installieren, ist ein bisschen schwierig. Im WPBeginner-Artikel finden Sie weitere Informationen zur Installation von CloudFlare und zur Verwendung der CDN-Funktionen.
• W3 Cache insgesamt: Sie nannten es nicht umsonst "W3 Total Cache". Schließlich enthält dieses äußerst beliebte Caching-Plugin die Funktion, ein CDN Ihrer Wahl in Ihre Website zu integrieren. Eine der bekanntesten CDN-Marken, MaxCDN, bietet eine ausführliche Anleitung zur Installation des CDN in den Einstellungen von W3 Total Cache.

Ende von Teil 2

In diesem zweiten Teil der Serie haben wir die Komprimierung und Minimierung von Assets sowie die Verwendung eines CDNs in WordPress durchlaufen. Im nächsten (und letzten) Artikel werden wir die Bedeutung der Bildoptimierung sehen und einige Gedanken zur Verwendung von WordPress mit gesundem Menschenverstand schließen.

Was denkst du über die Beschleunigung von WordPress? Teilen Sie Ihre Meinung unten in den Kommentaren mit. Und wenn Ihnen der Artikel gefallen hat, vergessen Sie nicht, ihn zu teilen.

Wir sehen uns im nächsten Teil!