Wenn Sie WordPress zum Erstellen einer unabhängigen Website verwenden, ist die Geschwindigkeit im späteren Stadium die wichtigste Optimierungsrichtung. Zusätzlich zu einigen Caching-Plugins, die wir besprochen haben, müssen wir auch die Leistung der WordPress-Daten optimieren. Lassen Sie mich in dieser Lektion ein Leistungs-Plugin, Perfmatters, mit Ihnen teilen, und dann verwenden wir ein solches PRO-Plugin, um die Leistung unserer unabhängigen WordPress-Site zu verbessern.

Perfmatters Leistungs-Plugin

Zuerst betreten wir den Hintergrund und installieren dann auf die gleiche Weise das Plug-In direkt und laden es dann hoch. Alle Plug-In-Installationen folgen diesem Prozess, aber während des Installationsprozesses des Plug-Ins muss das Komprimierungsformat unseres Plug-Ins im Zip-Format sein.

Wählen Sie das Plug-In aus, klicken Sie zum Öffnen darauf und installieren Sie es. Nach erfolgreicher Installation aktivieren wir das Plug-In. Nach der Aktivierung können wir hier zusätzliche Perfmatters sehen und dann auf Einstellungen klicken. Sobald das Plug-In erfolgreich installiert wurde, wird es natürlich in unserer Symbolleiste angezeigt. Es wird auch noch eine weitere Schaltfläche geben, sodass wir von hier aus schnell die Einstellungsoberfläche unseres Plug-Ins aufrufen können:

2 Perfmatters Performance-Plugin-Einstellungen e1713621023294

Dieses Plug-In ist relativ umfangreich. Es verbessert hauptsächlich unsere Leistung, einschließlich unserer Materialien, einschließlich unserer Dateien, JS-Dateien, CSS-Dateien, unserer Bilder, unserer Schriftarten und natürlich CDN. Es verfügt jedoch nicht über Caching-bezogene Plug-Ins. Nachdem wir also ein solches Plug-In zur Leistungsverbesserung verwendet haben, müssen wir noch mit einigen Caching-Plug-Ins zusammenarbeiten, wie z. B. der kleinen Rakete, über die wir zuvor gesprochen haben, oder wir verwenden das kostenlose CDN Cloudflare, das auch die Rolle des Cachings übernehmen kann. Caching und CDN sind zwei völlig unterschiedliche Konzepte. Wir werden später die Gelegenheit haben, darüber zu sprechen. Wir müssen hier nur dieses Plug-In kennen. Es ist hauptsächlich ein leichtes Plug-In zur Verbesserung unserer Leistung.

Perfmatters Leistungs-Plug-In-Funktionsmodul:

Grundlegende Optimierungseinstellungen von Perfmatters:

Diese Grundeinstellung bezieht sich hauptsächlich auf WordPress, das Programm selbst oder WooCommerce selbst. Wir müssen einige ihrer ungewöhnlichen Funktionen deaktivieren.

Perfmatters unabhängige Stationsressourcenoptimierung:

Vor allem bei JS- und CSS-Dateien besteht die Hauptmöglichkeit zur Leistungsverbesserung darin, das Laden unserer JS-Dateien zu verzögern, damit die Ladegeschwindigkeit unserer Webseiten verbessert werden kann, und eine andere Möglichkeit besteht darin, einige nicht verwendete Dateien zu entfernen. CSS-Datei.

Perfmatters unabhängiges Vorladen von Stationsschlüsselressourcen:

Das ist leicht zu verstehen: Die Kernelemente, wie etwa unsere Schriftarten oder die Adresse unseres CDN, müssen vorab geladen werden.

Die Bildressourcen der unabhängigen Station von Perfmatters werden verzögert geladen:

Wenn beispielsweise unser Bild geladen wird und der Benutzer es nicht sieht, wie etwa beim Umblättern, wird der erste Bildschirm angezeigt. Wenn wir jetzt beispielsweise die Homepage öffnen, ist dies der erste Bildschirm. Er erreicht diese Position. Dann blättern wir weiter und gelangen dann zum zweiten Bildschirm. Wenn unser Benutzer dann den ersten Bildschirm aufruft, werden die folgenden Bilder erst geladen, wenn der Benutzer zu diesem Bildschirm wechselt und dann geladen wird. In diesem Fall wird die Öffnungsgeschwindigkeit unserer Homepage bzw. die Öffnungsgeschwindigkeit unserer Seite effektiv verbessert.

Perfmatters unabhängiger Sender Google Fonts und CDN-Optimierung:

Das Folgende dient für uns hauptsächlich der Optimierung von Google-Schriftarten, das andere ist CDN und das letzte ist die statistische Analyse von Google.

Nachfolgend erläutern wir Ihnen jeden dieser Inhalte.

Grundlegende Optimierungseinstellungen von Perfmatters:

Schauen wir uns zunächst das erste an, das für WordPress und WooCommerce ist. Das Programm selbst ist irrelevant und wir müssen es schließen.

Emojis deaktivieren: Emoticons

Sie können es deaktivieren, da wir es häufig nicht verwenden. Wenn wir beispielsweise Artikel schreiben oder Produkte auflisten, verwenden wir keine Emoticons, da diese Schriftsymbole manchmal wie Emoticons aussehen und an vielen Stellen verwendet werden. Es wird nicht verwendet und einige Browser können es nicht erkennen. Daher deaktivieren wir es unter normalen Umständen einfach.

Dashicons deaktivieren: Offizielle Symbolschriftart von WordPress

Sie sehen, dass es sich bei den Symbolen auch um Schriftarten handelt. Wir können sie also einfach ausschalten.

Einbettungen deaktivieren: WordPress-Einbettungsfunktion

Es gibt auch eine eingebettete Funktion, die wir jetzt ebenfalls ausschalten.

XML-RPC deaktivieren: Remoteverbindungsveröffentlichung

Schreiben und Bearbeiten aus der Ferne. Wenn wir Artikel oder Produkte im Hintergrund bearbeiten, müssen wir unter normalen Umständen keine E-Mails oder andere Methoden zum Bearbeiten von Inhalten verwenden, sodass wir dies auch ausschalten können.

jQuery Migrate entfernen: jQuery Migrate.

Wir deaktivieren auch einige jQuery-Elemente, die für Übergänge nicht häufig verwendet werden.

WP-Version ausblenden: Aktuelle Version von WordPress ausblenden;

Der nächste Schritt besteht darin, die Version von WordPress zu verbergen. Öffnen wir jetzt die Homepage und überprüfen dann den Quellcode. In unserem Quellcode sehen wir oft einige Versionshinweise für WordPress. Beispielsweise können wir sehen, dass die Version, die wir jetzt verwenden, 6.32 ist. Wir können diese Informationen verbergen, um zu verhindern, dass andere unsere Website über eine solche Versionsschwachstelle angreifen.

RSD-Link entfernen: Header ähnlich? RSD-Link

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://yourdomain.com/xmlrpc.php?rsd" />

RSD ist auch ein Remote-Editor und hat die gleiche Wirkung wie XML.

Shortlink entfernen: Kurzlink-Format.

Es gibt auch einen Kurzlink, den wir oft nicht brauchen, weil wir beim normalen Einrichten der Site einen festen Link einrichten. Nachdem wir den festen Link eingerichtet haben, brauchen wir den Kurzlink nicht mehr.

RSS-Feeds deaktivieren: Blog-Abonnement

RSS-Feed-Links entfernen

RSS ist hauptsächlich für Blog-Abonnements gedacht. Wenn wir also ein Einkaufszentrum oder eine Unternehmenswebsite betreiben, müssen andere den Blog nicht abonnieren, und daher ist das Gleiche beim Folgen auch nicht nötig.

Selbst-Pingbacks deaktivieren: Selbst-Pingbacks

Pingbacks: Diese Funktion bedeutet hauptsächlich, dass, wenn jemand unsere Adresse zitiert, z. B. den Blog einer anderen Person, und dann eine Adresse vorhanden ist, die auf unsere Seite springen kann, das Postfach uns eine E-Mail sendet, um uns darüber zu informieren. Das ist normal. Die Situation ist auch unnötig.

REST-API deaktivieren: WordPress-Datentyp-API-Endpunkt

Entfernen von REST-API-Links

Wir können standardmäßig die REST-API verwenden und dann auch Links deaktivieren.

Google Maps deaktivieren: Google Maps-Komponente;

Google Maps ist Google Maps. Wenn wir eine Unternehmenswebsite erstellen, kontaktieren wir uns normalerweise. Manchmal verwenden wir Google Maps je nach unseren eigenen Anforderungen. Wenn Sie Google Maps auf Ihrer Website nicht benötigen, sollten Sie Google Maps deaktivieren, da Google Maps viel JS generiert, was zu einer Verlangsamung unserer Geschwindigkeit führt.

Wenn Sie eine private Baustelle errichten, muss diese geschlossen werden.

Wenn Sie grenzüberschreitend tätig sind, hängt dies von Ihrer eigenen Wahl ab. Wenn Sie Google Maps deaktivieren, können Sie natürlich auch eine Seite als Ziel verwenden, z. B. unsere Kontaktseite. Wir müssen weiterhin Google Maps verwenden, z. B. die oben genannten Google Maps.

Natürlich habe ich dies nicht als Google-Karte festgelegt. Wenn diese Seite benötigt wird, schließen wir diese Seite aus und dann werden alle anderen Seiten deaktiviert. Wie finden wir die ID des Beitrags? Die ID unserer Seite ist sehr einfach; wir wissen zuerst, dass dies eine Seite ist, dann finden wir diese Seite und öffnen diese Seitenliste. Dies sind alle unsere Zubehörseiten. Unsere Kontaktseite ist eine Zubehörseite. Wenn wir Kontakt finden, befindet sie sich auf dieser Seite. Wir bewegen die Maus über „Unter diese Kontaktseite“. Wir können sehen, dass es an dieser Stelle einen Beitrag mit der Nummer 4439 geben wird:

5 WordPress-Seiten-ID anzeigen

Mit anderen Worten, wir können hier für diese Seite 4439 eintragen. Nur diese Seite kann geladen werden, alle anderen Seiten werden geschlossen.

Kennwortstärkemesser deaktivieren: Kennwortstärkemesser;

Wenn wir das Passwort eingeben und es ein schwaches Passwort ist, wird eine Erinnerung angezeigt, die deaktiviert werden kann.

Kommentare deaktivieren: Site-Kommentarfunktion

Die Kommentarfunktion der gesamten Site kann nach Ihren Wünschen angepasst werden. Beispielsweise sind wir eine eigenständige TOC-Site. Unsere Produktseite ist kein Kommentar. Es ist eine Bewertung. Unsere Kommentare beziehen sich hauptsächlich auf unseren Blog. Die Seite ist unsere Blogseite. Die Nachrichten, die andere uns hinterlassen, können nach Ihren eigenen Wünschen geschlossen werden, wenn Sie sie nicht benötigen. Sie können sie auch hier einfügen.

Kommentar-URLs entfernen: in Kommentare eingefügte URLs;

Der nächste Schritt besteht dann darin, die URL aus dem Kommentar zu entfernen, denn wenn andere den Kommentar in WordPress ausfüllen, können sie die URL-Adresse eingeben. Natürlich wird der Kommentaradresse standardmäßig nofollow hinzugefügt, was bedeutet, dass es unseren SEO-Optimierungseffekt nicht beeinträchtigt, aber Sie können es auch direkt löschen.

Leeres Favicon hinzufügen: Fügen Sie ein leeres Symbol hinzu;

Das leere Symbol ist dort, wo wir es jetzt sehen. Es hat ein Symbol und wir möchten, dass es hinzugefügt wird.

Globale Stile entfernen: Integrierte Stile für die gesamte Site;

Dann entfernen wir einige der integrierten Stile von der gesamten Site. Normalerweise erstellen wir später eine unabhängige Site. Alle unsere Stile stammen aus unseren Designs oder Plugins, und einige der Standardstile von WordPress werden von uns oft nicht verwendet. erforderlich, damit wir sie deaktivieren können.

Heartbeat deaktivieren:WordPress Heartbeat

Dies ist der sogenannte Heartbeat von WordPress, der vom Webbrowser zum Ausführen von AJAX-Aufrufen verwendet wird. Wir können ihn standardmäßig so einstellen, dass er alle 15 Sekunden schlägt, sodass wir uns darüber keine Gedanken machen müssen.

Beitragsrevisionen begrenzen: Begrenzen Sie die Anzahl historischer Versionen.

Damit wird eine historische Version unseres Artikels oder unserer Seite begrenzt. Das heißt, jedes Mal, wenn wir sie bearbeiten, wird es eine historische Version geben. Wir verwenden sie standardmäßig, aber Sie können sie auch auf 20 begrenzen. Okay, die nächste ist eine automatisch gespeicherte Version. Wir können sie auf eine Minute oder 10 Minuten einstellen. Das ist in Ordnung.

Anmelde-URL: Anmeldeadresse für das Backend der unabhängigen WordPress-Station;

Der folgende Ort wird verwendet, um unseren WordPress-Anmeldehintergrund zu ändern. Normalerweise besteht unser standardmäßiger WordPress-Anmeldehintergrund darin, /wp-admin oder /wp-login.php nach unserem Domänennamen hinzuzufügen, damit wir unser Backend aufrufen können. Hier können Sie diese Adresse verbergen und einen anderen Namen verwenden, damit andere nicht auf die Anmeldeoberfläche Ihres Backends zugreifen können.

Die folgenden beiden sind Hilfsfunktionen. Sie können beispielsweise eine Nachricht oder eine 404-Seite auswählen, wenn er diese Seite nicht aufrufen kann. Wenn er dennoch /wp-admin eingibt, wird die 404 direkt angezeigt. Sie können ihn auch daran erinnern und ihm mitteilen, dass diese Seite nicht existiert. Nachfolgend finden Sie zwei Ergänzungen zur obigen Seite.

Woocommerce-bezogene Leistungseinstellungen;

Skripte deaktivieren: Woocommerce Global JS;

Woocommerce selbst hat auch einige vorinstallierte Inhalte. Der erste ist das Deaktivieren von JS, also allem JS in Woocommerce. Natürlich gibt es auch Anweisungen im Betriebsprozess. Beispielsweise werden unsere Produktseite, Einkaufsspalte oder Checkout-Seite nicht angezeigt. Ja, aber wir müssen oft mit Vorsicht vorgehen, da beispielsweise viele Produktlisten auf unserer Homepage erscheinen können. Wenn Sie JS eingeben, werden diese Produktlisten nicht angezeigt. Unter normalen Umständen hängt es also von Ihren Anforderungen ab. Im Allgemeinen schließen wir es nicht standardmäßig.

Warenkorbfragmentierung deaktivieren: Woocommerce-Warenkorbfragment;

Dies ist ein Fragment unseres Einkaufswagens. Das sogenannte Fragment ist das Innere unseres Einkaufswagens. Wenn es beispielsweise leer ist, befinden sich jetzt Produkte in unserem Einkaufswagen. Wenn es leer ist, wird es zu diesem Zeitpunkt nicht geladen. Wir können das JS des Einkaufswagens überprüfen.

Status-Meta-Box deaktivieren: WooCommerce-Hintergrundmodul

Dies ist eine Optimierung für das Backend. Wenn wir beispielsweise die Homepage aufrufen, werden Verkaufsinformationen zu Wolframminen angezeigt, aber hier sehen wir, dass diese nicht angezeigt werden. Es sind natürlich Informationen zu diesem Ding. Wir haben es nicht gut konfiguriert. Nach der Konfiguration wird eine Meldung angezeigt, die angibt, wie viele Produkte und Bestellungen Sie heute haben. Unter normalen Umständen geben wir die Bestellung normalerweise ohne Tür oder Statistikoberfläche ohne Tür ein, um diesen Inhalt anzuzeigen. Unter normalen Umständen werden wir dieses Modul also deaktivieren.

Widgets deaktivieren: WooCommerce-Standard-Widgets;

Wenn wir beispielsweise auf unserer aktuellen Website eine unabhängige Website für Produktlisten oder Kataloglisten erstellen, verwenden wir normalerweise alle Themen oder Inhalte in Plug-Ins und verwenden im Erscheinungsbild selten Gadgets. In unserem Erscheinungsbild „Find the Gadgets“ beispielsweise werden Gadget-Inhalte hinzugefügt, solange wir das rahmenlose Notizbuch in den Gadgets installieren.

Okay, nachdem wir reingekommen sind, können wir sehen, dass wir hier zum Beispiel einige Tools hinzufügen können. Beim Hinzufügen gibt es einige kleine Tools, die mit Frameless zusammenhängen. Wenn wir zum Beispiel nach unten ziehen, finden wir die kleinen Tools in Woocmmerce. Tool:

WooCommerce-Widget-Modul e1713621427187

Wir können es auch ganz ausschalten, aber je nach Ihrer tatsächlichen Situation sollten Sie es nicht ausschalten, wenn Sie die darin enthaltenen Gadgets verwenden müssen. Dies ist ein Inhalt für WordPress und Woocmmerce. Wir müssen es nicht ausschalten. Okay, das war's mit den Grundeinstellungen des Performance-Plugins.

Perfmatters-Ressourcenleistungsoptimierung;

6 Perfmatters unabhängige Site-Ressourcenleistungsoptimierung

Es handelt sich hauptsächlich um eine Optimierung für unser JS und CSS. Dieses Plug-In hat eine sehr leistungsstarke Funktion: die JS-Verwaltungsfunktion. Wenn wir sie einschalten, finden Sie eine magische Operation, die für unsere unabhängigen Stationen verwendet werden kann. Die Verwaltung der JS- und CSS-Dateien auf jeder Seite bedeutet hauptsächlich, dass wir beispielsweise unnötige JS- oder CSS-Dateien auf einigen unserer Seiten schließen können.

Wir haben es beispielsweise jetzt gespeichert und können nun nach Belieben eine Seite öffnen. Beispielsweise öffnen wir unsere Seite „Über uns“, damit wir unsere Bearbeitungsseite aufrufen können. Natürlich muss oben auf dieser Seite eine Symbolleiste vorhanden sein. In dieser Symbolleiste klicken wir auf „Skript-Manager“ und können alle JS- und CSS-Dateien verwalten, die auf der aktuellen Seite geladen werden müssen.

7 Leistungsstarke Skript-Manager-Funktion von Perfmatters e1713621580449

Beispielsweise können wir hier alle Plug-Ins auf unserer Seite sehen. Müssen wir beispielsweise auf dieser Seite die Währungen wechseln? Dies ist häufig nicht erforderlich, da der Währungswechsel keine Auswirkungen auf den gesamten Inhalt unserer Seite hat. Da keine Währung vorhanden ist, können wir sie auf dieser Seite schließen und dann alles in der aktuellen URL-Schnittstelle schließen, sodass dieses Plug-In auf dieser Seite nicht angezeigt wird.

Das Gleiche gilt für andere Dinge. Diese Seite hat beispielsweise kein Kontaktformular. Wir können auch alle JS und CSS im Zusammenhang mit dem Plug-In connect form7 auf dieser Seite deaktivieren. Das Gleiche gilt für andere Dinge. Sie können sie einzeln finden. Wenn Sie etwas finden, das Sie nicht benötigen, schließen Sie es, schließen Sie es und speichern Sie es. Auf diese Weise können wir ihre JS- und CSS-Dateien für jede Seite gezielt schließen, da unsere JS-Dateien die Geschwindigkeit unserer Webseiten am meisten beeinflussen, und CSS-Dateien enthalten natürlich auch unsere Materialien. Hier optimieren wir hauptsächlich JS und CSS.

4 Perfmatters Ressourcenoptimierung e1713621524403

Okay, jetzt gehen wir zurück zu unserer „Über uns“-Seite. Natürlich hat es hier keine Auswirkungen, da die Plug-Ins, die es schließt, auf dieser Seite unnötig sind. Dasselbe gilt für andere Seiten. Wenn Sie eine beliebige Seite aufrufen, z. B. die Homepage, können Sie auch die Homepage-Seite als Ziel auswählen und deren JS- oder CSS-Dateien verwalten.

Müssen wir beispielsweise die Währung ändern, wenn wir auf die Homepage des Skriptmanagers klicken? Wir müssen, weil die Homepage Produkte enthält und die Produkte Preise haben, aber es gibt kein Kontaktformular auf der Homepage, also können wir es ausschalten. Der Reporter muss die aktuelle URL auswählen, nicht alle anderen. Schalten Sie es einfach aus. Auf diese Weise können wir jede Seite optimieren. Dies ist der leistungsstärkste Ort für das Plug-In zur Leistungsoptimierung.

8 Perfmatters schließt Seite irrelevante JS- und CSS-Dateien e1713621815452

Der nächste Schritt besteht darin, alle JS zu verzögern. Okay, normalerweise haken wir das ab. Was ist die eigentliche Aktion? Das heißt, wir sollten so viele unserer JS-Dateien wie möglich unten platzieren. Wenn wir die Webseite laden, sehen wir jetzt den Quellcode. Wenn wir die Webseite laden, kann der Browser nur die Codes erkennen, die Sie jetzt sehen, also werden diese Codes von oben nach unten und von links nach rechts geladen. Wenn wir einige unwichtige JS-Dateien unten platzieren, wird das Laden der ersten Bildschirmseite vor uns erheblich verbessert. Für die sogenannte Verzögerung beim Laden unseres JS müssen wir es also abhaken, aber gleichzeitig wird unten ein Formular angezeigt, welches JS oben geladen werden muss, also müssen Sie es abschalten und ausschließen.

Das nächste ist etwas schwerwiegender. Was bedeutet das? Es ist Lazy Loading. Das erste ist verzögertes Laden. Egal wie lange es dauert, es wird trotzdem irgendwann geladen. Nur die Ladereihenfolge ist anders, aber verzögertes Laden ist anders. Verzögertes Laden bedeutet, dass es nicht geladen wird, wenn der Kunde nichts tut. Ja, nur, wenn der Kunde interagiert. Wenn ich zum Beispiel auf eine Seite klicke, um sie zu öffnen, lädt er das notwendige JS. Sie müssen bei der Bedienung aufpassen, weil es mehrere Operationen gibt. Das erste ist, dass ich alle JS-Dateien verzögert einfügen kann, das heißt, keine davon wird geladen. Ihre Geschwindigkeit ist am schnellsten, aber die entsprechenden Probleme können auftreten, zum Beispiel wenn wir einige Spezialeffekte haben, wie sekundäre Menüs und Einkaufsleisten. Der Popup-Effekt kann weg sein, also werden wir hier normalerweise kein vollständiges Laden verwenden. Selbst wenn wir vollständiges Laden verwenden, müssen wir immer noch einige notwendige Plug-Ins ausschließen, wie zum Beispiel Elementor oder andere Plug-Ins.

Natürlich können wir auch andere ausschließen. Das muss jeder beachten. Natürlich gibt es für die Ausschlüsse einige Erklärungen. Wir können auf das Fragezeichen klicken und es werden einige offizielle Dokumente mit Erklärungen angezeigt, aber dieses Dokument soll Sie weiterbringen. Das Auswählen dieser nicht wesentlichen JS-Dateien und das Verzögern des Ladevorgangs verursacht Probleme. Wenn wir beispielsweise jetzt die Seite öffnen und aktualisieren, drücken wir F12 auf der Tastatur, um den Debugging-Modus zu aktivieren. Allgemeine Browser verfügen über einen Debugging-Modus und dann finden wir die geladenen Ressourcen im Ressourcenladevorgang. Wenn wir dann die Seite laden, aktualisieren wir den gesamten Inhalt, der geladen werden muss. Wir können es unten sehen. Beispielsweise werden einige CSS-Dateien, Bilder usw. geladen. Einige Inhalte werden geladen. Sie können hier die Inhalte auswählen und dann diejenigen einfügen, die an dieser Stelle verzögert werden müssen.

Beispielsweise können einige JS-Dateien, die wir häufig verwenden, wie unsere Google-Statistiken oder unsere FB-Pixel, blockiert werden. Informationen zu den konkret blockierten JS-Dateien finden Sie in diesem Artikel hier. Ich habe viel darüber geschrieben, darunter diese von Google, eine Statistik von Google, und diese ist auch eine Statistik aus der vierten Version von Google, und es gibt noch einige andere, wie Google Ads und FB. Diese Dinge können Sie blockieren, und es gibt kein Problem.

Wenn Sie nicht sicher sind, wählen Sie dieses nicht!

CSS ist nicht aktiviert. Wir haben die Seite auch gerade geöffnet. Wir können sehen, dass diese Datei uns mitteilt, welche Dateien geladen werden und welche nicht. Beispielsweise lädt sie eine CSS-Datei. Viele der Dateien in der CSS-Datei werden nicht verwendet, daher können wir zu diesem Zeitpunkt einfach die nicht verwendeten entfernen. Auf diese Weise wird unsere Ladegeschwindigkeit nicht beeinträchtigt und wir können sie blockieren.

Okay, natürlich kann man einige CSS ausschließen, die unten geladen werden müssen. Okay, wir können es einfach direkt überprüfen.

9 Perfmatters-Seitencode-Eingabe

Als nächstes stellt er uns ein Tool zur Verfügung. Wenn wir beispielsweise häufig FB-Pixel, Trackcodes und Google-Statistikcodes hinzufügen, müssen wir unserem Header Code hinzufügen. Sie können ihn direkt in den Text einfügen. Der Code unten im Header ist für den Footer. Sie können ihn je nach Inhalt hinzufügen. Dies ist der Textkörper und dies ist der Footer. Sie können Inhalt hinzufügen, aber wir verwenden ihn normalerweise nicht. Dann speichern Sie ihn. Welcher Inhalt wirkt sich hauptsächlich auf unsere JS- und CSS-Dateien aus?

Es betrifft hauptsächlich zwei wichtige Aspekte unserer Webseitengeschwindigkeit. Beispielsweise öffnen wir ein Google-Leistungsanalysetool und einen Bericht, den wir gerade analysiert haben. Diese Leistungsanalyse, beispielsweise der Leistungswert, hat 6 Hauptelemente. Wir müssen uns entscheiden, aber hier sehen wir nur 5 Elemente, also erweitern wir sie und schauen nach.

Der erste Schritt besteht darin, den ersten Text zu zeichnen. Was bedeutet das? Wenn wir unsere Seite öffnen, wenn der Kunde sie öffnet, wird die erste Datei geladen. Es ist an der Zeit.

Nun, das nächste ist die größte Datei, die auf dieser Seite geladen wird, wenn wir sie öffnen. Beispielsweise muss die größte Datei auf unserer aktuellen Seite dieses Bannerbild sein, das relativ groß ist. Wenn Sie ein Video haben, wird es das größte Video sein, daher sind diese beiden am zeitaufwändigsten. Unsere normale Optimierung besteht darin, diese beiden Elemente zu optimieren, und die anderen haben tatsächlich keine besonders große Auswirkung.

Wenn wir uns jetzt beispielsweise das Baumdiagramm ansehen, bleibt es leer, wenn der Benutzer es öffnet, bis schließlich unser Menü geladen wird, dann unser Banner geladen wird und das erste Banner geladen wird. Diese Geschwindigkeit wird sich also erheblich auf den Leistungswert auswirken, also die Ladezeit des ersten Bildes oder Textes. Dies hat den größten Einfluss.

Wir haben lediglich das Laden von JS oder CSS verzögert, um den Inhalt der Hauptfarbe zu reduzieren. Sie müssen es nur verstehen, also haben wir den Inhalt des Tutorials befolgt und es dann blockiert.

Okay, hier geht es also um Inhaltseinstellungen für Ressourcen.

Vorladen von Perfmatters-Ressourcen;

Wir möchten die Ladegeschwindigkeit einer Seite verbessern. Hierfür gibt es mehrere Methoden. Die erste besteht darin, alle nutzlosen Seiten zu entfernen, die zweite darin, das Laden der unwichtigen Seiten zu verzögern und die nächste darin, die wichtigen Seiten im Voraus zu laden. In diesem Fall wird die Geschwindigkeit unserer gesamten Webseite verbessert.

12 Perfmatters-Ressourcen-Vorladeeinstellungen

Vorladen bedeutet also Folgendes. Manche Seiten sind beispielsweise wichtiger. Wir laden sie vor. Dann können wir hier vorladen; wenn wir beispielsweise bestimmte Schriftarten oder CDNs vorladen, können wir sie eintragen. Wir können an dieser Stelle auch unsere DNS-Adresse eintragen, aber wir haben die DNS-Adresse noch nicht festgelegt. Wenn wir sie festgelegt haben, schreiben wir sie einfach ein.

Okay, als Nächstes müssen wir ein paar Bilder vorladen. Wir können beispielsweise zwei Bilder vorladen. In diesem Fall speichern wir sie. Wenn der Benutzer dann die Seite öffnet, werden einige Seiten im Voraus geladen, was unsere Geschwindigkeit in gewissem Maße verbessert.

Perfmatters-Einstellungen für verzögertes Laden von Bildern;

Lazy Loading tritt auf, wenn einige Bilder nicht auf einmal angezeigt werden, sondern langsam ausgeblendet werden, oder wenn der Benutzer sie nicht sieht und sie nicht geladen werden. In diesem Fall müssen wir es normalerweise einschalten, einschließlich unserer iPhone-Referenzen. Wenn wir beispielsweise ein YouTube-Video einfügen, können wir es auch verzögert laden, insbesondere das YouTube-Thumbnail, aber wir können auch einige Inhalte ausschließen.

13 Perfmatters-Ressourcen-Lazy-Loading-Einstellungen

Okay, das nächste ist für unsere DOM-Struktur. DOM ist die Struktur unserer Webseite. Es bezieht sich auf eine Baumstruktur. Sie können es einfach überprüfen. Das andere ist für einige unserer Bilder. Beispielsweise legen wir die Breite und Höhe für die Produktbilder, die wir oft hochladen, nicht fest. Obwohl das Bild Höhe und Breite hat, legen wir sie nicht fest und treffen sie im Code. Hier können wir sie also hinzufügen; was ist der Zweck davon?

Der Zweck besteht darin, zu verhindern, dass das Bild plötzlich größer oder kleiner wird, was zu einer Leistungsverschiebung führen würde. Es ist eine solche Optimierung, dass wir diese Zahl erhöhen werden. Das andere wird eingeblendet und ausgeblendet; wir können es überprüfen. Es gibt auch eine Ladung unseres Hintergrundbilds. Wir fügen es auch hinzu. Okay, das ist Lazy Loading, nachdem es hinzugefügt und dann gespeichert wurde.

Perfmatters Google-Schriftlokalisierungseinstellungen;

Dies gilt hauptsächlich für Google-Schriftarten. Normale Seiten verfügen über Google-Schriftarten. Wenn wir beispielsweise den Quellcode öffnen und nach Schriftarten suchen, können wir ihn hier sehen. Hier haben wir eine Google-Schriftart eingeführt. Schriftarten: Tatsächlich sollten die von uns zitierten Schriftarten für ein so großes Unternehmen wie Google unter normalen Umständen sehr schnell geladen werden. Da das CDN von Google derzeit jedoch relativ langsam ist, sind die Ressourcendownloads sehr langsam, was dazu führt, dass die Ladegeschwindigkeit unabhängiger Stationen einen größeren Einfluss hat.

14 Google Fonts CDN Einführung

Normalerweise laden wir jetzt die Google-Schriftarten auf unseren Webseiten, also die Schriftarten, die wir verwenden müssen, direkt auf unseren Server herunter, das heißt, wir laden sie in die lokalen Google-Schriftarten herunter, und nachdem der Download abgeschlossen ist, überprüfen wir auch, ob diese beiden integriert sind. Natürlich können Sie sie nur lokal herunterladen. Sie können sie auch auf Ihr CDN herunterladen. Auf das sogenannte CDN werden wir später noch eingehen. Wir können einige unveränderte Materialien auf unserer Site an einen anderen Server binden. In diesem Fall sind wir gleichbedeutend mit zwei laufenden Servern, und dieser Server kann Inhalte verteilen, sodass Sie sie verwenden können. Schreiben Sie sie in Ihr CDN. Wenn Sie es nicht haben, können Sie es nicht schreiben.

Als Nächstes können Sie lokale Schriftarten löschen. Dies liegt hauptsächlich daran, dass, wenn wir beispielsweise später das Design ändern, die von einem anderen Design verwendete Schriftart möglicherweise anders ist. Daher müssen wir sie zu diesem Zeitpunkt vorher löschen. Letzteres ist direkt deaktiviert. Wir empfehlen Ihnen nicht, es zu verwenden. Wenn Sie es tun, werden die Schriftarten unserer Webseiten abnormal angezeigt.

Perfmatters CDN-Funktionseinstellungen;

CDN ist hauptsächlich eine Inhaltsverteilung. Beispielsweise ist unsere aktuelle Website auf einem Server platziert, und einige der Inhalte auf unserer Website enthalten unsere CSS- und JS-Dateien. Sie sind alle fest. Wir können diese Inhalte trennen und auf einem anderen Server ablegen, indem wir die sogenannte dynamische und statische Trennung verwenden. Nach der Trennung lädt ein anderer Server unsere CSS- und JS-Dateien, und unser aktueller Server lädt nur unsere Daten, sodass unsere Geschwindigkeit sehr hoch ist.

15 CDN-Einstellungen

Bezüglich CDN werden wir später natürlich ein anderes Tool verwenden, nämlich das kostenlose Cloudflare. Um Ihnen zu erklären, wie man es hinzufügt, müssen wir es hier nicht einrichten. Auch das Tool, das wir später verwenden, müssen wir hier nicht verwalten.

Das letzte ist das Statistiktool von Google. Normalerweise brauchen wir es nicht. Wir möchten unserem unabhängigen Sender keine Inhalte hinzufügen. Für Statistiken müssen wir beispielsweise nur den statistischen Hintergrund von Google eingeben, um ihn anzuzeigen. Es ist nicht nötig, hier beizutreten. Im Folgenden finden Sie einige Tools. Dieses Tool dient hauptsächlich zum Löschen einiger Daten und Datenbanken. Wir brauchen es im Moment nicht, also müssen wir uns nicht darum kümmern. Importieren und exportieren Sie einige Einstellungen, darunter können wir eine solche Schaltfläche im Menü ausblenden oder ausblenden.

Perfmatters-Datenbankbereinigung;

Dies ist eine Datenbankbereinigung. Das erste, was wir bei der Datenbankbereinigung tun müssen, sind zwei Schritte. Der erste Schritt besteht darin, unnötigen, redundanten Inhalt in unserer Datenbank zu erkennen, und dann überprüfen wir ihn. Nach der Überprüfung löschen wir ihn. Er muss nur jedes Mal gelöscht werden, wenn er verwendet wird, und er kann gelegentlich gelöscht werden.

16 Perfmatters Datenbankbereinigung

Es wird sie löschen, wenn wir sehen, dass sie nicht benötigt werden. Sie müssen sich jetzt, da sie gelöscht wurden, keine Sorgen mehr darum machen. Okay, das nächste ist die Autorisierung, die müssen wir hier nicht ausfüllen, und dann der Support. Okay, dies ist ein Tutorial zur Verwendung des Perfmatters-Plugins.