Verwenden Sie das CSS, das ich nicht mit Lesezeichen versehen kann

Stoyan hat völlig recht. Obwohl wir alle CSS lieben, ist es immer noch ein wichtiger Faktor für die Ladegeschwindigkeit der Website, und die Reduzierung der CSS -Nutzung ist eine gute Sache. Er erstellte ein bequemes Lesezeichen namens "CSS Me No" für die Diagnose unnötiger CSS -Dateien, die wir später ausführlicher behandeln werden.

Das Problem ist, dass CSS auf einem kritischen Pfad steht, der das Rendering blockiert und die Ausführung von JavaScript häufig sogar blockiert. Wir lieben CSS, es ist erstaunlich, es kann unglaubliche Leistungen erbringen, beschädigte Benutzeroberflächen reparieren, Bilder manipulieren und erstaunliche Bilder zeichnen. Wir lieben CSS. Wir wollen nur ... weniger CSS, weil seine Natur blockiert.

Manchmal verwendet unsere Website ganze Stilblätter , die völlig unnötig sind. Ich muss zugeben, dass WordPress dafür bekannt ist, und es lädt Stylesheets für Plugins und Blöcke, die Sie möglicherweise überhaupt nicht verwenden. Ich war in dieser Situation, als ich diesen Artikel schrieb. Ich habe einfach keine Zeit gefunden, um einige kleine Stylesheets zu löschen, die nicht geladen werden müssen.

Stoyan erstellte ein kurzes Lesezeichen mit dem Titel "CSS me nicht", um all diese CSS -Dateien anzuzeigen. Der größte Vorteil ist natürlich, dass Sie wissen, was Sie konfrontiert sind.

Sie können diese Stylesheets auch in Devtools finden, aber das Lesezeichen "CSS me nicht" macht es einfacher, und es gibt einen Killer -Extra: Schalten Sie diese Stylesheets aus . Wenn Sie dieses Lesezeichen auf meiner CSS-Tricks-Website testen, kann ich sehen, dass WordPress vier Stylesheets lädt (aufgrund von Einstellungen und Plugins). Ich weiß, dass ich sie nicht brauche.

Wenn Sie dies in Devtools tun möchten, können Sie CSS drücken, um Ihre Netzwerkanforderungen zu filtern, das Stylesheet zu finden, das Sie schließen möchten, mit der rechten Maustaste klicken und blockieren und dann neu laden.

Ich arbeite seit Jahren daran, unqueueingige Skripte und Stile in WordPress.

Das Löschen eines völlig ungenutzten Stylesheetes ist ein offensichtlicher Gewinn, aber es gibt ein schwierigeres Problem, das nicht verwendete CSS entfernen soll. In diesem Beitrag habe ich erwähnt, dass der einzige Weg, um wirklich zu verstehen, ob ein bestimmtes CSS nicht verwendet wird, darin besteht, jedem Selektor ein Hintergrundbild anzuhängen und dann das Serverprotokoll nach einer Produktionszeit zu überprüfen, um festzustellen, welche Bilder noch nie angefordert wurden. Stoyan bestätigte, was ich hier gesagt habe:

UNCSS ist ein bisschen wie ein "Labor". Die "reale Welt" kann Sie überraschen. Wir haben also einen Trick bei Somecompany Inc. gemacht, um Tools für alle CSS -Deklarationen zur Bauzeit hinzuzufügen, bei denen jeder Selektor ein 1 × 1 transparentes Hintergrundbild erhält. Überprüfen Sie dann die Serverprotokolle nach etwa einer Woche sorgfältig, um zu sehen, was tatsächlich verwendet wird.

Das obige ist der detaillierte Inhalt vonVerwenden Sie das CSS, das ich nicht mit Lesezeichen versehen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!