Ungenutztes CSS entfernen: Google PageSpeed ​​​​Fehler

Eines der von Entwicklern am häufigsten verwendeten Tools zum Testen der   Geschwindigkeit einer Website   ist zweifellos das von Google: das Tool namens   PageSpeed ​​​​​​Insights   . Es ist ein sehr mächtiges Tool, das durch die Seiten unserer Website scrollt und es uns ermöglicht, detailliert zu analysieren, was nicht stimmt.

Tatsächlich gibt es mehrere Fehler, die dazu führen können, dass wir wertvolle Sekunden verlieren und folglich SEO-Positionierung, sinkende Conversion-Rate und vieles mehr. Tatsächlich mag niemand eine langsame Website. Heute werden wir uns speziell mit diesem Fehler befassen:   Entfernen Sie nicht verwendete CSS   .

In der Vergangenheit habe ich Ihnen gezeigt, wie Sie Fehler im Zusammenhang mit Querverweisen von Bildern außerhalb des Bildschirms   und der   Veröffentlichung von Bildern in aktuellen Formaten beheben     können. Heute werden wir uns ansehen, wie Sie mit unseren Website-Stilen   die Leistung verbessern können   .

Inhaltsverzeichnis

  • Warum Google PageSpeed ​​​​​​Insights verwenden
  • Was bedeutet es, ungenutztes CSS zu entfernen?
    • Drucken Sie den Code im Style-Tag
    • Erstellen Sie spezifische CSS-Dateien
    • Verwenden Sie automatische Tools
  • WordPress-Plugin zum Entfernen von ungenutztem CSS
  • Schlussfolgerungen

Warum Google PageSpeed ​​​​​​Insights verwenden

Die erste Frage, die Sie sich sicherlich schon einmal gestellt haben, ist, warum Sie dieses Tool verwenden, um Ihre Website zu testen. Auf der anderen Seite gibt es viele GTmetrix auf dem Markt     , um nur einen zu nennen.

Es gibt viele Gründe, lassen Sie uns versuchen, die Angelegenheit besser zu analysieren und zu verstehen, warum dieses Tool zusammen mit Google Lighthouse am häufigsten verwendet wird und ich ehrlich gesagt auch für das zuverlässigste und funktionsreichste halte.

Dieses Tool wird uns, wie erwähnt,     von Google kostenlos zur Verfügung gestellt, um die Geschwindigkeit unserer Website zu messen und deren Indexierung in Suchmaschinen zu verbessern. Wenn Sie es nicht wissen, hat die Leistung einer Website und ihrer   wichtigen Webelemente einen   großen Einfluss auf ihre Fähigkeit, richtig zu indizieren.

Google gehört übrigens zu den Befürwortern eines immer schnelleren Internets, weshalb es ein so  nützliches und funktionales Tool kostenlos zur Verfügung stellt  : Es hilft den Nutzern, die Leistung ihrer Website zu verbessern.

Wir können unsere Website problemlos in der Desktop-   und   Mobile- Version  testen     . Eine Desktop-optimierte Website bietet auf Mobilgeräten nicht unbedingt die gleiche Leistung. Die letzte Art der Anzeige wird von Google verwendet, um die Site zu indizieren. Daher ist eine für Mobilgeräte optimierte Version der Website ohne Zweifel ein Vorteil für uns.

Tatsächlich sollten Sie bei der Entwicklung einer Website immer einen Ansatz namens „   Mobile first   “ verwenden, d. h. ihre Elemente zuerst auf dem Handy entwerfen und implementieren     und dann auf dem Desktop entsprechend anpassen.

So einfach ist das Testen Ihrer Website. Gehen Sie einfach auf die PageSpeed ​​​​​​-Website und geben Sie die URL der Webseite ein, die Sie überprüfen möchten. Sobald die URL eingegeben und die Schaltfläche Start gedrückt wurde, beginnt Google sofort mit dem Crawlen und findet alle Fehler, die die Leistung der Website beeinträchtigen könnten.

Unter den Fehlern, die er Ihnen möglicherweise melden könnte, gibt es auch den, über den wir in diesem Artikel sprechen. Lassen Sie uns also gemeinsam sehen, warum Google diesen Mangel meldet und vor allem, wie man ihn selbst auf einer WordPress-Site löst.

Was bedeutet es, ungenutztes CSS zu entfernen?

Aber   was bedeutet es, ungenutztes CSS zu entfernen   ? Die Frage ist berechtigt. Wenn Sie CSS in Ihre Site einbetten, liegt dies wahrscheinlich daran, dass Sie es verwenden möchten. Nun, bis jetzt sind wir uns alle einig, aber oft ist es das nicht.

Ich gebe Ihnen ein praktisches Beispiel. In Ihre  main.css-  Datei, die sich außerhalb der HTML-Datei befindet, müssen Sie möglicherweise das CSS einfügen, das eine Galerie steuert , die sich im Portfolio-Bereich Ihrer Site befindet.

Die gleiche Datei main.css wird jedoch auch auf der Homepage geladen, wo die   Galerie im   Grunde   nicht existiert   . Es handelt sich also um einen Code, der nicht auf der Homepage gedruckt werden kann, da er nicht verwendet wird.

Der beste Ansatz wäre daher, das CSS der Galerie zu verwenden, sie befinden sich auf den Seiten, auf   denen es wirklich benötigt wird!

Aber wie kann dieser Fehler behoben werden? In Wirklichkeit gibt es viele Ansätze. Ich werde einige von ihnen auflisten, ohne zu technisch zu sein

Drucken Sie den Code im Style-Tag

Die erste Lösung, die nicht nur einfacher ist und Ihnen auch in Bezug auf die Geschwindigkeit viele Punkte ermöglicht, besteht darin, das für die Seite benötigte CSS direkt in das style-Tag einzufügen, das sich im Kopfbereich von . befindet deine Website.

Auf diese Weise können Sie CSS zeitnah und genau drucken und vermeiden, dass Klassen in Ihre Seite aufgenommen werden, die nicht wirklich verwendet werden.

CSS-Beispiel gedruckt auf style-Tag

Darüber hinaus können Sie mit dieser Lösung einen weiteren Fehler beheben, der häufig von Google gemeldet wird und den wir bereits in einem anderen Artikel behandelt haben, nämlich die   Beseitigung von CSS, das das Rendern von Inhalten über dem Bildschirm blockiert.

Erstellen Sie spezifische CSS-Dateien

Die zweite Lösung besteht jedoch darin, Ihre CSS-Datei in Mini-CSS zu entpacken, um sie bei Bedarf abzurufen. Sie haben sozusagen nicht mehr die Datei main.css, sondern gallery.css, sidebar.css, menu.css usw.

Diese Lösung, obwohl die sauberste, wird die Anforderungen erhöhen. Wenn Sie zuvor tatsächlich nur eine Datei heruntergeladen haben, werden die Anfragen jetzt zunehmen. Wenn Sie diese zweite Option verwenden möchten, empfehle ich daher dringend, dass Sie für Ihre Skripte und Stile Verkleinerungs- und Verpackungsoptionen verwenden.

Wenn Sie WordPress verwenden, können Sie dies mit dem W3 Total Cache-Plugin tun. Ich habe kürzlich in diesem Artikel darüber gesprochen, wo ich andere Tricks erkläre   , um eine WordPress-Site zu beschleunigen

Verwenden Sie automatische Tools

Die letzte Option, die ich empfehlen möchte, ist die Verwendung erweiterter automatischer Tools, mit denen Sie den Dom-Knoten für Knoten analysieren und automatisch erkennen können, welche CSS-Regeln auf Ihrer Seite nicht verwendet werden.

Derzeit gibt es mehrere Tools, mit denen Sie dies tun können. Das bekannteste und zuverlässigste ist   PurgeCSS   . Aber wissen Sie, dass nicht alles Gold ist, was glänzt. PurgeCSS und andere ähnliche Tools sind nicht in der Lage, Elemente zu erkennen, die später auf der Seite geladen werden, wie z. B. Modals und Elemente, die über asynchrone Anforderungen geladen werden.

In diesen Fällen sind Sie gezwungen, die Klassen manuell zu löschen, um Fehler und Anwendungsfehlfunktionen zu vermeiden.

WordPress-Plugin zum Entfernen von ungenutztem CSS

Das Thema ist eckig, tatsächlich ist es eine sehr komplexe und manuelle Operation, die schwer an ein Plugin zu delegieren ist. Ich verstehe jedoch, dass nicht jeder ein Code-Experte ist, also habe ich nach einem Plugin gesucht, das das für uns tun kann.

Nach ein paar Versuchen habe ich   PageSpeed ​​​​​​Ninja gefunden   , ein für uns sehr interessantes Plugin. Dieses Plugin bietet übrigens neben dem Entfernen des CSS, das nicht auf unseren Seiten verwendet wird, weitere interessante Funktionen.

Im Detail:

  • Dadurch können wir die Gzip-Komprimierung aktivieren  
  • Dadurch können wir nicht   aufgerufenes CSS und Javascript  auf Seiten entfernen
  •  HTML-, CSS-, JS-  Minifizierung
  • Durch   Lazy Loading wird  das Laden von Bildern optimiert
  • Optimieren Sie   die Reihenfolge der Skripte  auf der Seite
  • Damit können Sie die Nutzung des Browser-Cache stoppen

Der einzige Fehler dieses Plugins ist, dass es nicht empfohlen wird, W3Total Cache zu verwenden, wenn wir es verwenden. Im Allgemeinen sollten wir   nur ein Plugin verwenden   , das das gleiche gut oder schlecht macht. Wenn wir uns entscheiden, Caching- und Minifizierungsvorgänge an dieses Tool zu delegieren, sollten Sie besser keine ähnlichen verwenden.

Schlussfolgerungen

Wie wir gesehen haben, lässt sich dieser von PageSpeed ​​​​​​Insights gemeldete Fehler auch leicht mit etwas Fett beheben.

Eine leistungsstarke, schnelle und gut optimierte Website ist der beste Weg, um Ihre Konversionsrate zu erhöhen und unser Geschäft in jeder Hinsicht zu verbessern.

Wenn Sie andere Methoden kennen, um dieses Problem zu lösen, können Sie mir gerne schreiben und ich werde diese Liste gerne aktualisieren.

 

Leave a Comment

Your email address will not be published.