Anleitung zur Verwendung des Plugins Autoptimize
Ich interessiere mich sehr für die WordPress-Beschleunigung , da die Seitengeschwindigkeit schon immer das wichtigste Thema von Admins war.
Heute werde ich über das Auto-Stimulation-Plugin sprechen – einer der besten kostenlosen Beschleuniger.
Mục lục
Wie beschleunigt mich ein Plugin?
Die Autostimulation verbessert die Seitenladezeiten durch drei Schlüsselfaktoren:
- CSS-Dateien komprimieren, zusammenführen und optimieren
- JavaScript-Dateien komprimieren, zusammenführen und optimieren
- HTML-Komprimierung
Die Komprimierung reduziert die Dateigröße, während das Pooling die Anzahl der Anfragen an den Server reduziert. Beide Faktoren tragen dazu bei, die Geschwindigkeit der Website zu erhöhen. Während es bei der „optimalen“ Operation hauptsächlich darum geht, Anzeige-blockierendes CSS und Rendering-blockierendes JS zu entfernen, um den „above the fold“-Inhalten den Vorzug zu geben.
Gehen Sie nach der Installation und Aktivierung des Plugins zu seinen Einstellungen:
Grundeinstellung
Die benutzerdefinierte Oberfläche sieht wie folgt aus, Sie kreuzen alle 3 optimalen Optionen an:
Dann scrollt ihr ganz nach unten und klickt auf Save Changes / Save changes.
Wenn Sie einen CDN-Dienst (wie MaxCDN, KeyCDN, CDNSun) verwenden, geben Sie dort in den CDN-Optionen die CDN-Stamm-URL ein, lassen Sie sie andernfalls leer (ich persönlich verwende sie nicht, daher wird dieser Teil nichts ausfüllen):
Erweiterte Anpassung
Mit der Basisoption müssen Sie Ihre Website bereits beschleunigen, wenn Sie eine tiefere Optimierung wünschen, entscheiden Sie sich für die erweiterte Anpassung.
Um den Abschnitt „Erweiterte Anpassung“ aufzurufen, klicken Sie wie unten gezeigt auf die Schaltfläche:
Die erweiterte Benutzeroberfläche sieht wie folgt aus:
Ich werde auf jede Option im Detail eingehen.
- HTML-Kommentare behalten? Das bedeutet, dass die HTML-Kommentare auf der Seite bleiben. Wenn Sie den HTML-Kommentar behalten möchten, markieren Sie ihn.
- JavaScript in <head> erzwingen?: Das heißt, JS in die . Wenn Sie dies überprüfen, werden wahrscheinlich einige JS-bezogene Fehler behoben, es können jedoch Probleme mit der Blockierung des Renderings auftreten. Meine persönliche Wahl: nicht ankreuzen.
- Auch Inline-JS aggregieren?: Das schließt Inline-JS ein. Diese Prüfung hilft beim Extrahieren und Aggregieren von Inline-JS und kann die Leistung verbessern, aber die Cache-Größe schnell erhöhen. Persönliche Wahl: Ja oder Nein, je nach Standort, aber normalerweise nicht ausgewählt.
- Skripte von Autoptimize ausschließen : Das heißt, bestimmte JS-Dateien nicht optimieren (keine Paketierung und Komprimierung). Standardmäßig optimiert Autoptimize keine jQuery-Dateien. Der Grund dafür ist, dass viele Plugins und Designs jQuery verwenden, und wenn Autoptimize eine Optimierung durchführt, wird die Funktionalität dieser Plugins und Designs beeinträchtigt (und die Webseite beeinträchtigt). Um eine nicht optimierte Datei hinzuzufügen, geben Sie ihren Namen in den entsprechenden Bereich ein und trennen Sie ihn durch ein Komma, zum Beispiel: any.js, another.js
- Try-Catch-Verpackung hinzufügen? : Wenn Sie einen Fehler mit JS haben, sollten Sie dies ankreuzen.
- Daten generieren : URIs für Bilder? Dies hilft, das kleine Hintergrundbild in die CSS-Datei aufzunehmen, um zusätzliche Anforderungen zum Herunterladen von Bildern zu vermeiden. Sie sollten ankreuzen. (kann image base64-Codierung verwenden, um den Code inline direkt in das CSS zu bekommen)
- Auch Inline-CSS aggregieren? Dies führt zu einer Inline-CSS-Zusammenführung, ähnlich der Inline-JS-Zusammenführung, die je nach Seite überprüft werden kann oder nicht, aber normalerweise tue ich das nicht, warum? Da bei Prestige-Themes Inline-CSS meistens verwendet wird, um eine Blockierung von vornherein zu vermeiden, ist es also nicht erforderlich, etwas einzufügen.
- Inline- und Defer-CSS? Das heißt, CSS-Ladevorgänge inline und verzögern. Normalerweise würde Autoptimze das CSS optimieren und oben im Head-Tag platzieren, aber das würde das Rendern der Seite blockieren (die Nachricht, die Sie normalerweise in den PageSpeed Insight-Nachrichten von Google sehen). Wenn Sie diese Option aktivieren, wird die CSS-Datei zurückgestellt (bevorzugt, dass HTML und Inline-CSS zuerst geladen werden). Und damit das Seitenlayout nicht zu sehr beeinträchtigt wird, können Sie hier das CSS zu Paste Ahead of CSS hinzufügen – dies sind wichtige CSS im Zusammenhang mit dem Seitenlayout für "above the fold"-Inhalte. Um dieses CSS zu erhalten, gehen Sie zu: https://www.sitelocity.com/critical-path-css-generator und fügen Sie die URL des Beitrags ein, es wird Ihnen das erforderliche CSS extrahieren. Persönliche Wahl: Es hängt davon ab, einige Websites werden in Ordnung sein, andere nicht, aber insgesamt sollte es so sein.
- Alles CSS einbetten? Es ist alles CSS inline. Dies hat den Effekt, dass Anfragen im Vergleich zum Offline-Schalten des CSS reduziert werden. Es ist jedoch nur effektiv, wenn die CSS-Datei nicht groß ist und die Anzahl der Seitenaufrufe pro Benutzer nicht hoch ist. Durch das Inlining des gesamten CSS wird das Browser-Caching vollständig verhindert. Persönliche Wahl: In den meisten Fällen nicht ankreuzen.
- Exclude CSS from Autoptimize : Hat dieselbe Bedeutung wie Exclude JS. Aber hier sind CSS-Dateien ausgeschlossen. Es gibt CSS-Dateien, die, wenn Sie mit Autoptimize optimieren, die Funktionalität oder das Layout der Website zerstören, Sie müssen sie hier ausschließen. Standardmäßig sind einige CSS-Dateien ausgeschlossen wie: wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
- Cache-Info : Dieser Abschnitt zeigt Cache-bezogene Informationen, einschließlich Verzeichnis, Autoptimize-Überschreibungsstatus und verfügbare Cache-Dateigröße.
- Verschiedene Optionen : Dies sind zusätzliche erweiterte Optionen. Zusammengesetztes Skript/CSS als statische Datei speichern? im Zusammenhang mit dem statischen Caching von JS- und CSS-Dateien. Auch für eingeloggte Benutzer optimieren? im Zusammenhang mit der Auto-Optimierung wird für beide angemeldeten Benutzer aktiviert. Persönliche Wahl: angekreuzt.
Benutzerdefinierte zusätzliche / inkrementelle Optimierung
Diese Optionen helfen Ihnen weiterhin, die Geschwindigkeit Ihrer Website weiter zu verbessern.
- Emojis entfernen : Beinhaltet das Entfernen von Inline-CSS- und Inline-JS-Emojis (mit Ausnahme von nicht optimierten JS-Dateien). Persönliche Wahl: angekreuzt.
- Abfragezeichenfolgen aus statischen Ressourcen entfernen : Beinhaltet das Entfernen von Abfragezeichenfolgen (oder Versions-/versionsspezifischen Parametern). Es erhöht nicht die Website-Geschwindigkeit, kann aber zur Verbesserung der Leistungswerte beitragen. Persönliche Wahl: kein Häkchen.
- Google Fonts : Wenn Ihr Design Google Fonts verwendet, hilft Ihnen diese Option, Google Fonts zu entfernen (Google Fonts entfernen). Kombinieren und verlinken Sie im Head, was bedeutet, dass Google Fonts zusammengeführt und dann gezwungen werden, das Head-Tag anzubringen. Das asynchrone Kombinieren und Laden von Schriftarten mit webfont.js bedeutet das Zusammenführen von Dateien und das asynchrone Laden mit webfont.js. Lassen Sie es so, wie es ist, mit anderen Worten, wenn die Website über Google Fonts verfügt, wird sie heruntergeladen. Persönliche Wahl: angekreuzt.
- Vorabverbindung mit Domänen von Drittanbietern (fortgeschrittene Benutzer): Diese Option beinhaltet die Vorabverbindung mit einer Drittanbieterdomäne. Es führt DNS-Lookups und sichere Verbindungen parallel zwischen vielen Ressourcen von Drittanbietern durch und reduziert so die Latenz. Sie können weitere ähnliche Mechanismen wie Prefetch und Preload kennenlernen.
- Asynchrone Javascript-Dateien (fortgeschrittene Benutzer) : Diese Option verarbeitet das Laden von JS-Dateien asynchron. Wenn Sie Dateien haben, die asynchron heruntergeladen werden müssen, fügen Sie diese bitte hier ein, einschließlich lokaler Dateien und Dateien von Drittanbietern.
- YouTube-Videos optimieren : Dazu müssen Sie zusätzliche Plugins installieren. Es hilft YouTube-Videos, das Laden zu verzögern, wodurch die Seitenladegeschwindigkeit erhöht wird. Allerdings nur geeignet, wenn sich Ihr Video nicht ganz oben auf der Seite befindet (nur empfohlen, wenn es sich in der Mitte oder am Ende der Seite befindet). Lesen Sie hier mehr über eine andere Möglichkeit, Video-Downloads zu verzögern. Informationen zur Verwendung des WP YouTube Lyte-Plug-ins finden Sie hier.
Weitere Optimierung / keine Endbegrenzung
Dies ist der Bereich, in dem der Autor von Autoptimize „Geld verdient“, indem er „Affiliate“-Produkte anbietet, die die Website weiter optimieren, darunter:
- Autoptimize Pro Support: Das Premium-Supportpaket von Autoptimize zur Beschleunigung Ihrer Website. Die Preise beginnen bei 99 Euro.
- WP Rocket Dies ist ein kostenpflichtiges Plugin zum Erstellen von Caching, das dabei hilft, die Website zu beschleunigen, was von vielen Menschen sehr geschätzt wird. Persönliche Blogs können es teuer finden. Wenn Sie Geld sparen möchten, empfehle ich, es durch das WP Super Cache-Plugin oder den Cache Enabler zu ersetzen. Die Kombination mit Autoptimize funktioniert gut.
- ShortPixel ist ein Plugin, das hilft, Bilder zu komprimieren.
- Criticalcss.com ist eine Premium-Lösung für Above-the-Fold-CSS (auch bekannt als Critical CSS – um Rendering-blockierendes CSS zu vermeiden).
- Siteground ist eine für WordPress optimierte Hosting-Lösung. Ich schlage vor, Closte, Linode, UpCloud, DigitalOcean, Vultr und KnownHost hinzuzufügen.
- Astra ist eine leistungsoptimierte Theme-Lösung. Ich mag dieses Beschleunigerthema sehr, seine kostenlose Version hat auch viele Benutzer. Im Allgemeinen hat GeneratePress jedoch die Oberhand über Astra.
- Letztendlich ist KeyCDN eine Lösung, die ein CDN verwendet, um die Ladegeschwindigkeit von Seiten über einen global verteilten Server zu verbessern. Allerdings hat KeyCDN (2020) derzeit keinen Server in Vietnam, daher können wir ihn durch CDNSun ersetzen, der Preis ist ähnlich, und es gibt 2 PoPs in Hanoi und Saigon (siehe das CDNSun-Handbuch in diesem). Außerdem können Sie Cloudflare verwenden, wenn Sie das Web mit einem Host außerhalb Vietnams beschleunigen möchten, dies ist eine erschwingliche Lösung, gute Qualität und vor allem die Einrichtung ist viel einfacher als bei anderen Websites. herkömmliche CDN-Dienste. Eigentlich habe ich die kostenpflichtige CloudFlare-Version (20 USD/Monatsplan) verwendet und war ziemlich zufrieden (siehe Cloudflare-Benutzerhandbuch hier), aber es ist fair zu sagen, wenn Sie geschickt genug sind, um CDN nach traditionellem Stil zu optimieren, wäre es besser. PS: Obwohl Cloudflare PoP in Vietnam hat, können Benutzer tatsächlich immer noch keine Ressourcen von hier herunterladen, Sie können sich auf diesen Artikel beziehen, um weitere Details zu erhalten.
Fazit
Autoptimze ist ein sehr gutes Tool, mit dem Sie die Ladegeschwindigkeit von Seiten verbessern können. Die Optionen sind sehr umfangreich. Und wenn Sie beim Anpassen geschickt sind, werden die Ergebnisse beeindruckend sein.
Autoptimize ist auch ein großartiges kBlood-Plugin für kostenlose Caching-Plugins wie Cache Enabler. Sie müssen kein zusätzliches Geld ausgeben, um kostenpflichtige Plugins zum Erstellen statischer Seiten zu verwenden.
Nun zum letzten Test. Die automatische Auslösung führt dazu, wie schnell die Seite geladen wird. Ich werde A/B-Tests verwenden, eine Seite verwendet Autoptimize nicht, die andere verwendet unter gleichwertigen Bedingungen (gleicher Server, gleiche Schnittstelle, gleicher Inhalt usw., gleiche Umgebung, d. h. gleiche gleiche Bedingung. Umgebung)).
Ich werde das GTmetrix-Tool verwenden, um die Geschwindigkeit der Website zu testen. Im Video unten ist der linke Bereich das Web, ohne dass Autoptimize installiert ist. Im rechten Bereich ist Autoptimize installiert. Der Geschwindigkeitstest wurde 5 Mal hintereinander durchgeführt, die Ergebnisse zeigten, dass die Website mit installiertem Autoptimize in allen Fällen alle 3 Faktoren gewonnen hat: Seitenladegeschwindigkeit, Seitengröße und Anzahl der Verbindungen. Je niedriger diese Statistiken, desto besser
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
