Asset-Bereinigung Profi

Das erste, was Sie tun müssen, ist, einen logischen Blick darauf zu werfen. Gibt es bestimmte Funktionen, die Sie beibehalten oder weglassen möchten? Gibt es auf einer Seite Plugins, die dort nicht vorhanden sein müssen?

Gib mir Ein Beispiel

Kontaktformulare sind weit verbreitet. Viele Leute haben sie in der Fußzeile oder überall verstreut. Brauchen Sie das wirklich? Wenn jemand Sie kontaktieren würde, würde er auf die Kontaktseite weitergeleitet. Es kommt sehr selten vor, dass jemand ein Kontaktformular in der Fußzeile verwendet. Warum also sollte es dort stehen?

Kontaktformular-Skripte sind ziemlich umfangreich – in der Regel 50 bis 80 KB groß und voller CSS. Dieses kleine Formular in Ihrer Fußzeile zwingt die Seite nun dazu, diese Skripte bei jedem Seitenladevorgang zu laden. Wäre es nicht besser, Ihre Kontaktformulare auf einer logischen Seite zu haben und die Kontaktskripts nur auf dieser einen Seite zu laden?

Darum geht es bei der Optimierung. Mit Asset Cleanup Pro können Sie zu Ihrer „Kontakt“-Seite gehen und die Kontaktformular-Skripts auf der gesamten Website, mit Ausnahme dieser einen Seite, entladen. Sie haben jetzt 50-80 KB Seitengewicht eingespart, indem Sie Ihre Kontaktformulare logischer neu angeordnet haben.

Kann ich Mach das Mit allen Skripten?

Ja, so ziemlich. Es ist auch sehr praktisch beim Branding. Pagespeed bedeutet oft, dass Sie Ihre Website ein wenig reduzieren müssen. Ihre Marke hängt jedoch möglicherweise vom Aussehen und den Funktionen Ihrer Website ab. Denken Sie also über die Struktur Ihrer Website unter Berücksichtigung des Brandings nach. Erstellen Sie einfachere Seiten wie meine Startseite, und erstellen Sie dann solche, die Ihr Branding überall tragen, wie bei mir Über uns Seite.

Solange Ihre Landingpages optimiert sind, ist das wirklich alles, was zählt. Opfern Sie niemals das Branding für die Seitengeschwindigkeit. Es lässt Ihre Website einfach schrecklich aussehen, wenn Sie sie immer weiter reduzieren. Auf dem Desktop ist es ziemlich einfach, bei Google Insights über 90% zu kommen, aber auf Mobilgeräten sieht das anders aus. Die Kriterien sind viel strenger, da die Daten auf simulierten 4G-Netzwerkgeschwindigkeiten basieren. Seien Sie nicht besessen davon. Solange es schnell lädt und einen mobilen Score im 70er-Jahre-Bereich hat, ist alles in Ordnung. Nur damit Sie es wissen: Der weltweite Durchschnittswert liegt zum Zeitpunkt des Verfassens dieses Artikels bei 38% auf Mobilgeräten.

Code zurückzustellen bedeutet, einen Teil des Codes später im Prozess zu laden. Vorabladen oder Async bedeutet, dass es zum frühestmöglichen Zeitpunkt zusammen mit anderen Dateien geladen wird. Beim asynchronen Laden verarbeitet der Browser die Dateien zusammen mit anderen Dateien, um Renderblockierungen zu vermeiden. Wenn Sie es verschieben, wird es erst am Ende des Ladevorgangs geladen.

Um einen guten Pagespeed-Score und schnelle Ladezeiten zu erzielen, müssen Sie das Laden von Skripten, die nicht sofort benötigt werden, verschieben. Sie konzentrieren sich auf „above the Fold“-Inhalte. Das heißt, was Sie sehen, wenn Sie die Seite zum ersten Mal laden. Sie müssen nichts in die Fußzeile oder Bilder weiter unten auf der Seite laden – nur den Inhalt oben.

Hier kann es verwirrend werden, da nicht immer das, was Sie sehen, geladen werden muss. Beispielsweise verfügen Sie möglicherweise über bestimmte JS-Routinen, die von einer anderen Datei abhängig sind. Das bedeutet, dass die „übergeordnete“ JS-Datei geladen werden muss, damit die untergeordnete JS-Subroutine funktioniert. Ein häufiges Problem, das in den Google Insights-Berichten auftaucht, ist das JQUERY Datei. Dies ist eine Framework-Datei, auf deren Funktion viele andere JS-Dateien angewiesen sind. Sie können versuchen, es zu entladen, es ist jedoch sehr wahrscheinlich, dass Fehler auftreten. Mein Rat ist, dass Sie immer genug Zeit haben, um sich viele Kopfschmerzen zu ersparen. Sie können immer noch hohe Punktzahlen erzielen, wenn es geladen ist.

Beim Vorladen treten ähnliche Probleme auf. Es ist toll, dass die Dateien ohne Renderblockierung geladen werden, aber der Schlüssel hier ist, dass die Dateien gleichzeitig mit anderen Dateien heruntergeladen werden. Dies gilt insbesondere für JS-Dateien und kann einige Probleme verursachen. Dies wiederum ist auf Abhängigkeiten zurückzuführen. Wenn der Download einer übergeordneten JS-Datei noch nicht abgeschlossen ist, bevor das untergeordnete Skript mit dem Herunterladen begonnen hat, kann das untergeordnete Skript nicht funktionieren, was zu Fehlern führt.

Das Gleiche gilt für CSS-Dateien, aber es wird keine Kernfehler verursachen, sondern eher Layoutprobleme. Die meisten Themes verfügen über eine Kernmoduldatei, die den Großteil des CSS-Codes enthält, der die Bausteine Ihrer Website darstellt. Diese Datei sollte geladen bleiben, um Fehler und Layout-Verschiebungsprobleme zu vermeiden. Normalerweise ist sie ziemlich groß. Hier kommen wichtiges CSS und das Vorladen ins Spiel, aber darauf gehen wir weiter unten ein Schnellladen Seite.

Schauen Sie sich also das Video an, gehen Sie dann Seite für Seite hinein und aktivieren Sie die Kontrollkästchen, um die Datei von jeder Seite entweder zu verschieben oder vorab zu laden. Wenn Sie etwas überhaupt nicht laden müssen, aktivieren Sie das Kontrollkästchen, um es auf der gesamten Website zu entladen. Es wird dann auf allen Seiten entladen. Führen Sie jeweils nur einen oder zwei Codes aus, leeren Sie den Cache und überprüfen Sie ihn. Wenn Sie zu viele machen und die Website kaputt geht, wird es zu einer kleinen Detektivarbeit, herauszufinden, wer die Website kaputt gemacht hat!

Das Ändern der Ladereihenfolge mit Asset Cleanup Pro ist eine der Grundlagen zur Optimierung Ihrer Website. Es ist jedoch die zeitaufwändigste Phase im Pagespeed-Prozess. Ein guter Tipp ist, mit Ihren Plugins zu arbeiten, bevor Sie sich mit den Theme-Dateien befassen. Dies liegt daran, dass Sie leicht erkennen können, welche Plugins auf der Seite geladen werden, und beurteilen können, ob Sie die Dateien benötigen oder nicht. Einige Theme-Funktionen sind möglicherweise weniger offensichtlich und es sind die Theme-Dateien, die häufig die meisten Fehler verursachen. Möglicherweise müssen Sie nicht auf der gesamten Website etwas laden, abgesehen von einer kritischen Seite – und es ist leicht, ein nicht geladenes Symbol oder ein fehlendes Karussell usw. zu übersehen.

Na und Sollte ich Tun?

Wie bereits erwähnt, gibt es viele Phasen zur Optimierung, und dies ist die erste. Zum Glück ist es auch das komplexeste. Sobald Sie Ihre Plugins nur dort geladen haben, wo sie benötigt werden, und zufrieden sind, dass alles funktioniert, würde ich ein neues Site-Backup erstellen. Führen Sie dann einen Pagespeed-Test durch, um eine Punktzahl zu erhalten, notieren Sie diese und springen Sie zu einer anderen Phase im Insights-Bericht, die Sie stört. Probieren Sie vielleicht den Bildoptimierungs- oder Plugin-Organizer-Trick aus, wenn auf Mobilgeräten viel Inhalt geladen wird.

Ein weiterer kleiner Tipp, der besonders beim Zurückstellen von JS-Dateien nützlich ist, besteht darin, mit der rechten Maustaste auf das Chrome-Fenster zu klicken und auf „Inspizieren“ zu klicken. Dadurch wird ein Fenster geöffnet, in dem der gesamte Code angezeigt wird, der auf Ihrem Bildschirm geladen wird. Aktualisieren Sie nun die Webseite. Wenn oben im Chrome-Codefenster ein kleines rotes Symbol mit einem Kreuz angezeigt wird, klicken Sie darauf. Dadurch werden Sie über etwaige Fehler auf der Seite informiert. Sehen Sie sich den Fehler an und vergleichen Sie ihn mit den Dateinamen auf Ihrer Seite. Setzen Sie zurück, was Sie zuletzt getan haben (oder hören Sie auf, JQUERY aufzuschieben, wenn Sie das versucht haben). Aktualisieren Sie die Webseite und prüfen Sie, ob der Fehler behoben ist. Wenn es weg ist, wissen Sie, dass Sie diese bestimmte Datei nicht zurückstellen dürfen.

Versuchen Sie nicht, alles auf einmal zu erledigen. Machen Sie es sich bequem, machen Sie sich mit den Plugins vertraut und erstellen Sie dann das Theme selbst, sobald Sie mit der Benutzeroberfläche von Asset Cleanup vertraut sind.

Zu Beginn des Videos werden Sie bemerken, dass der Moderator davon spricht, Kernfunktionen von WordPress zu entfernen. Achten Sie besonders darauf, denn es handelt sich um eine Eigenschaft von Asset Cleanup Pro, die Sie anderswo nicht finden. Es ermöglicht Ihnen, ungenutzten Kerncode zu entfernen, der das Gewicht Ihrer Website erheblich reduzieren kann.

WordPress ist so groß, dass wir selten alles brauchen, was es zu bieten hat, also lasst uns das reduzieren. Asset Cleanup Pro macht diesen Vorgang so einfach, dass Sie lediglich in den Admin-Bereich des Plugins gehen müssen und kleine Kippschalter die Funktionen ein- und ausschalten. Keine Codierung erforderlich!

Was macht Jedes Feature Tun?

Auf das Laden der Schriftarten werden wir näher eingehen, sobald wir dazu kommen OMGF Seite. Sobald wir den Download der Schriftarten auf den Server abgeschlossen haben, können wir über Asset Cleanup Pro alle ausgehenden Aufrufe an Google Fonts blockieren. Sie müssen lediglich auf „Erweitert“ klicken und das Kontrollkästchen aktivieren. Tun Sie es noch nicht, da dadurch nur Standard-Systemschriftarten geladen werden, die schrecklich aussehen!

Ein kurzer Tipp zu Schriftarten

Verwenden Sie in den Theme-Optionen möglichst wenige Schriftarten. Sie können unterschiedliche Schriftstärken für Überschriften usw. verwenden, verwenden Sie jedoch keine unterschiedlichen Schriftarten. Schriftstildateien sind groß und die Wahl einer einheitlichen Schriftart sieht nicht nur einheitlich aus, sondern erhöht auch die Geschwindigkeit.

Die meisten Benutzer können den XML-RPC-Pingback-Dienst deaktivieren. Dies verschließt auch einige Türen für Angriffe auf Ihre Website. Sie können die Funktion nicht deaktivieren, wenn Sie externe Blogging-Dienste oder Jetpack nutzen oder eine App mit Ihrer Website verbunden haben. Wenn Sie jedoch nichts davon haben, deaktivieren Sie es.

Kommentare sind ziemlich selbsterklärend. Wenn Sie sie nicht verwenden, deaktivieren Sie sie. Wenn Sie dies tun, lassen Sie es geladen. Das Gleiche gilt für EMOJIs und Dashicons. Wenn Sie einen Pagebuilder wie Elementor oder WP-Bakery verwenden, deaktivieren Sie auch Gutenberg. Dadurch wird ziemlich viel Code geladen, der nicht benötigt wird. Ihr Pagebuilder wird sich darum kümmern.

Mit der Bereinigung des HTML-Quellcodes können Sie sie so gut wie alle entfernen. Auf der Seite finden Sie Anweisungen. Lesen Sie diese daher unbedingt durch, um sicherzustellen, dass Sie keine der Funktionen verwenden.

Wenn Sie Kinsta oder einen anderen Webhost mit Cloudflare verwenden, sind Sie hier genau richtig nicht Aktivieren Sie die CDN-Bereitstellung. Das CDN verarbeitet es bereits und es verursacht Fehler, wenn Sie es aktivieren. Wenn Sie ein anderes CDN verwenden, geben Sie hier Ihre CDN-Adresse ein. Dadurch wird Asset Cleanup Pro dabei helfen, Dateien vom richtigen Speicherort in Ihrem Setup bereitzustellen.

Sie können jederzeit zurückkommen und mit Asset Cleanup Pro optimieren. Es ist sinnvoll, Optimierungen in Sitzungen zu testen, damit Sie die Arbeit stoppen und später wieder damit fortfahren können, sobald bestimmte Dinge funktionieren. Jedes Mal, wenn Sie ein neues Plugin hinzufügen, können Sie einfach das jeweilige Plugin so optimieren, wie Sie es laden möchten.

Asset Cleanup Pro An sich muss man sich nicht allzu sehr daran gewöhnen. Was verwirrend sein kann, ist das ganze Aufschieben/Vorladen-Geschäft. Eine falsche Bewegung kann die Funktionalität beeinträchtigen. Machen Sie sie daher immer in kleinen Abschnitten, damit Sie sich alle Änderungen, die Sie gerade vorgenommen haben, leicht merken können.

Wenn Sie mit Ihren Fortschritten zufrieden sind, fahren Sie mit der nächsten Stufe fort.