Dies ist echte CSS-Trickserei von Harry, die Ihnen allgemeine Performance-Ratschläge gibt, basierend darauf, was sie in Ihrem <head>-Element sieht.
Zuerst ist es möglich, einen <style>-Block wie jedes andere Element sichtbar zu machen, indem man das display vom Standardwert none ändert. Das ist ein netter kleiner Trick. Man kann das sogar für Dinge im <head> tun, zum Beispiel...
head,
head style,
head script {
display: block;
}Von dort aus wird Harry sehr clever mit Selektoren, der Ermittlung problematischer Situationen anhand der Verwendung und Platzierung bestimmter Tags. Zum Beispiel, sagen wir, es gibt ein <script>, das nach einigen Styles kommt...
<head>
<link rel="stylesheet" href="...">
<script src="..."></script>
<title>Page Title</title>
<!-- ... -->Nun, das ist schlecht, weil das Skript von CSS wahrscheinlich unnötigerweise blockiert wird. Vielleicht könnte Ihnen eine ausgefeilte Performance-Tooling-Software das mitteilen. Aber wissen Sie, was noch das kann? Ein CSS-Selektor!
head [rel="stylesheet"]:not([media="print"]):not(.ct) ~ script,
head style:not(:empty) ~ script {
}Das ist so etwas wie zu sagen head link ~ script, aber ein wenig ausgefeilter, da es nur tatsächliche Stylesheets oder Stilblöcke auswählt, die wirklich blockieren (und nicht sich selbst). Harry wendet dann Stile und Pseudoinhalte auf die Blöcke an, sodass Sie das Stylesheet als visuelles Performance-Debugging-Tool verwenden können.
Das ist einfach verdammt clever. Das Stylesheet enthält viele kleine Dinge, die man testen kann, wie z. B. unnötige Attribute, blockierende Ressourcen und Elemente, die in der falschen Reihenfolge sind.
Habe das irgendwie schon 2019* so gemacht
– https://codepen.io/co0kie/pen/yLLRRrN