Stoyan hat absolut Recht. So sehr wir CSS auch lieben, es ist immer noch ein wichtiger Faktor dafür, wie Websites geladen werden, und weniger davon zu verwenden, ist eine gute Sache. Er hat ein neues, nettes Bookmarklet namens CSS Me Not entwickelt, um unnötige CSS-Dateien zu diagnostizieren, aber dazu kommen wir gleich.
Das [Problem] ist, dass CSS im kritischen Pfad liegt, es blockiert das Rendering und oft sogar die JavaScript-Ausführung. Wir lieben CSS, es ist Magie, es kann unglaubliche Dinge tun, defekte UIs beheben und Bilder manipulieren und erstaunliche Bilder zeichnen. Wir lieben CSS. Wir wollen einfach… weniger davon, wegen seiner von Natur aus blockierenden Art.
Manchmal verwenden unsere Websites *ganze Stylesheets*, die einfach unnötig sind. Ich gebe es nur ungern zu, aber WordPress ist hier berüchtigt und lädt Stylesheets für Plugins und Blöcke, die Sie vielleicht gar nicht wirklich verwenden. Diese Situation befinde ich mich auf dieser Website gerade. Ich habe einfach noch keine Zeit gefunden, ein paar kleine, unnötige Stylesheets auszusortieren.
Stoyan hat ein schnelles Bookmarklet namens CSS Me Not erstellt, um all diese CSS-Dateien anzuzeigen. Der große Vorteil ist natürlich, dass es Ihnen zeigt, womit Sie es zu tun haben.
Sie könnten diese Stylesheets auch in DevTools finden, aber das CSS Me Not Bookmarklet macht es besonders einfach und hat eine herausragende Zusatzfunktion: **das Ausschalten dieser Stylesheets.** Beim Testen des Bookmarklets hier auf CSS-Tricks sehe ich vier Stylesheets, die WordPress lädt (wegen Einstellungen und Plugins), von denen ich weiß, dass ich sie nicht brauche.
Wenn Sie dies stattdessen in DevTools tun möchten, könnten Sie Ihre Netzwerkanfragen nach CSS filtern, das Stylesheet finden, das Sie ausschalten möchten, mit der rechten Maustaste darauf klicken, es blockieren und neu laden.
Ich bekämpfe diesen Kampf schon seit Ewigkeiten und entferne Skripte und Stile in WordPress, die ich nicht möchte.
Das Entfernen von komplett ungenutzten Stylesheets ist ein klarer Gewinn, aber es gibt das kniffligere Problem, ungenutztes CSS zu entfernen. In diesem Beitrag erwähne ich den einzig wahren Weg, um wirklich zu wissen, ob ein bestimmtes CSS ungenutzt ist: das Anhängen eines background-image an jeden Selektor und das anschließende Überprüfen der Serverprotokolle nach einer angemessenen Produktionszeit, um zu sehen, welche dieser Bilder nie angefordert wurden. Stoyan bestätigt meine Geschichte hier.
UnCSS ist sozusagen ein "Labor". Die "reale Welt" kann überraschen. Ein Trick, den wir bei SomeCompany Inc. angewendet haben, war, alle CSS-Deklarationen zur Build-Zeit zu instrumentieren, wobei jeder Selektor ein 1×1 transparentes Hintergrundbild erhielt. Dann wühlten wir nach einer Woche oder so in den Serverprotokollen, um zu sehen, was tatsächlich verwendet wird.
Ja. Sie erhalten den gesamten Block-Style-CSS-Download, ob Sie ihn verwenden oder nicht. Woo-Commerce? All das auch. "Coole Gutenberg-Blöcke"? Äh-äh.
Jemand, irgendwo, schlug vor, dass man mit HTTP2 genauso gut das CSS und JS mitliefern könnte, wenn man jede "Komponente" hereinholt. Wenn wiederholt, würde der lokale Cache-Lookup des Browsers sagen: "Das haben wir schon."
Mmmph – ja, das ist Müll in WP
Oder in Firefox ist es in den traditionellen Menüs: Ansicht → Seitenstil → Kein Stil.
Wenn Sie sich fragen, warum die andere Option in diesem Untermenü "Basis-Seitenstil" lautet, liegt es daran, dass Browser lange, *lange* vor dem Aufkommen von
@prefers-color-schememehrere Themen für Websites unterstützten. Es nennt sich alternative Stylesheets. Fast niemand hat es tatsächlich genutzt, also hat Chrome es nie implementiert. Ich bin mir nicht sicher, ob Safari es derzeit unterstützt, daher vermute ich, dass Firefox möglicherweise der einzige Browser ist, der es jetzt unterstützt. Demo unter https://www.w3.org/Style/Examples/007/alternatives.en.html.Ich habe das Gefühl, ich führe einen anderen Krieg, aber es könnte derselbe Kampf sein.
Ich sehe CSS als wichtigen Baustein, aber JavaScript als ein Übel, das oft unnötig ist.
Ich verstehe vollkommen, dass überflüssiges CSS nicht benötigt wird, aber im Allgemeinen leistet es wichtige Dinge, während die Hälfte des von uns verwendeten JS für ganze Bibliotheken (von denen nur ein winziger Teil verwendet wird) oder sogar nur zur Verfolgung unserer Nutzung dient.
Was ruiniert die Leistung einer Website, CSS oder Javascript? Weniger Javascript ist viel besser als weniger CSS. Wir verwenden Javascript-Frameworks, die das Gesamtgewicht von CSS-Dateien verdoppeln oder verdreifachen. Tatsächlich sind wir manchmal geneigt, Javascript-Frameworks zu verwenden, die wir eigentlich nicht hätten verwenden müssen. Daher sehe ich keinen Grund, sich ausschließlich auf CSS zu konzentrieren.
Ich stimme zu, dass JS ein größeres Ziel ist, aber es spielt eine Rolle. CSS kann verhindern, dass JavaScript überhaupt startet. Das ist wichtig.