{"id":43611,"date":"2021-09-23T16:23:07","date_gmt":"2021-09-23T14:23:07","guid":{"rendered":"https:\/\/kinqsta.com\/?p=102244"},"modified":"2023-07-27T14:13:26","modified_gmt":"2023-07-27T13:13:26","slug":"optimieren-css","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/optimieren-css\/","title":{"rendered":"Wie du CSS f\u00fcr eine optimale Leistung deiner Webseite optimierst"},"content":{"rendered":"

Auch im Jahr 2021 bleibt die Webleistung ein Problem. Laut HTTP Archive ben\u00f6tigt eine durchschnittliche Seite einen Download von 2 MB<\/a>, stellt mehr als 60 HTTP-Anfragen und braucht 18 Sekunden<\/a>, um auf einem mobilen Ger\u00e4t vollst\u00e4ndig geladen zu werden. Stylesheets machen 60 kB aus, die sich auf sieben Anfragen verteilen. Daher haben sie selten oberste Priorit\u00e4t, wenn es darum geht, Leistungsprobleme zu l\u00f6sen.<\/p>\n

CSS hat jedoch eine Wirkung, auch wenn sie noch so gering erscheint. Wenn du dich um dein JavaScript<\/a> gek\u00fcmmert hast, solltest du als N\u00e4chstes lernen, CSS richtig zu optimieren.<\/p>\n

Lass uns damit anfangen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Wie sich CSS auf die Leistung einer Seite auswirkt<\/h2>\n

CSS sieht unschuldig aus, kann aber eine hohe Rechenleistung erfordern.<\/p>\n

CSS ist ein Render-Blocker<\/h3>\n

Wenn dein Browser auf ein <link><\/code>-Tag st\u00f6\u00dft, h\u00e4lt er andere Browser-Downloads und -Verarbeitungen an, w\u00e4hrend er die CSS-Datei abruft und analysiert.<\/p>\n

Auch JavaScript kann das Rendering des Browsers blockieren<\/a>, aber eine asynchrone Verarbeitung ist damit m\u00f6glich:<\/p>\n

    \n
  1. Das async<\/code>-Attribut, um Skripte parallel herunterzuladen, die sofort ausgef\u00fchrt werden, wenn sie bereit sind.<\/li>\n
  2. Das defer<\/code>-Attribut, um Skripte parallel herunterzuladen, die dann der Reihe nach ausgef\u00fchrt werden, wenn das DOM fertig ist.<\/li>\n
  3. Das Attribut type=\"module\"<\/code>, um ein ES-Modul zu laden (das sich wie defer<\/code> verh\u00e4lt).<\/li>\n<\/ol>\n

    Assets wie Bilder ben\u00f6tigen oft mehr Bandbreite, aber es gibt effiziente Formate<\/a>, und sie k\u00f6nnen „lazy“ geladen<\/a> werden (loading=\"lazy\"<\/code>-Attribut), ohne das Browser-Rendering zu blockieren.<\/p>\n

    All das ist bei CSS nicht m\u00f6glich. Die Datei wird im Cache gespeichert, so dass nachfolgende Seitenladevorg\u00e4nge schneller sein sollten, aber der Rendering-Blockiervorgang bleibt bestehen.<\/p>\n\n

    Gro\u00dfe CSS-Dateien brauchen Zeit zum Verarbeiten<\/h3>\n

    Je gr\u00f6\u00dfer dein Stylesheet ist, desto l\u00e4nger dauert es, es herunterzuladen und in ein CSS-Objektmodell (CSSOM) umzuwandeln, das der Browser und die JavaScript-APIs verwenden k\u00f6nnen, um die Seite anzuzeigen. Obwohl CSS-Stylesheets kleiner sind als die meisten anderen Dateien auf Webseiten, gilt auch f\u00fcr sie die Faustregel „kleiner ist besser“.<\/p>\n

    CSS-Dateien wachsen<\/h3>\n

    Es kann schwierig sein, Stile zu erkennen, die nicht mehr verwendet werden, und das Entfernen der falschen Stile kann auf einer Webseite verheerende Folgen haben. Entwickler entscheiden sich in der Regel f\u00fcr den sichersten Ansatz: „Alles beibehalten“. Seitenstile<\/a>, Komponenten<\/a> und Widgets, die nicht mehr verwendet werden, bleiben in CSS bestehen. Das Ergebnis? Die Dateigr\u00f6\u00dfe, die Komplexit\u00e4t und der Wartungsaufwand steigen exponentiell an, so dass die Entwickler immer weniger dazu geneigt sind, \u00fcberfl\u00fcssigen Code zu entfernen.<\/p>\n

    Stylesheets k\u00f6nnen auf andere Assets verweisen<\/h3>\n

    CSS kann mithilfe von @import-Regeln auf andere Stylesheets verweisen. Diese Importe blockieren die Verarbeitung des aktuellen Stylesheets und laden weitere CSS-Dateien nacheinander<\/strong>.<\/p>\n

    Auch auf andere Assets, wie z. B. Schriften und Bilder, kann verwiesen werden. Der Browser wird versuchen, die Downloads zu optimieren, aber im Zweifelsfall holt er sie sofort. Inline base64-kodierte Dateien m\u00fcssen noch weiter verarbeitet werden.<\/p>\n

    CSS-Effekte Rendering<\/h3>\n

    Browser haben drei Rendering-Phasen<\/a>:<\/p>\n

      \n
    1. In der Layout<\/strong>– (oder Reflow<\/strong>-) Phase werden die Abmessungen jedes Elements berechnet und wie es sich auf die Gr\u00f6\u00dfe oder Positionierung der Elemente um es herum auswirkt.<\/li>\n
    2. In der Malphase<\/strong> werden die visuellen Teile der einzelnen Elemente auf separate Ebenen gezeichnet: Text, Farben, Bilder, Rahmen, Schatten usw.<\/li>\n
    3. Der Verbund<\/strong> zeichnet jede Ebene in der richtigen Reihenfolge auf die Seite, je nach Stapelkontext, Positionierung, Z-Index usw.<\/li>\n<\/ol>\n

      Wenn du nicht aufpasst, k\u00f6nnen \u00c4nderungen der CSS-Eigenschaften und Animationen dazu f\u00fchren, dass alle drei Phasen neu gerendert werden. Einige Eigenschaften, wie z. B. Schatten und Farbverl\u00e4ufe, sind au\u00dferdem rechenintensiver als Blockfarben und R\u00e4nder.<\/p>\n

      Tools zur CSS-Leistungsanalyse<\/h2>\n

      Sich einzugestehen, dass man ein CSS-Leistungsproblem hat, ist der erste Schritt auf dem Weg zur Besserung! Die Ursachen zu finden und zu beheben ist eine andere Sache.<\/p>\n

      Die folgenden Tools und Dienste (in keiner Reihenfolge) k\u00f6nnen dir helfen, Styling-Engp\u00e4sse in deinem Code zu erkennen.<\/p>\n

      1. DevTools Network Panel<\/h3>\n

      Web-Performance-Spezialisten verbringen viel Zeit mit DevTools<\/a> und insbesondere mit dem Netzwerk<\/strong>-Panel. DevTools ist in den meisten modernen Browsern<\/a> integriert, obwohl wir in unseren Beispielen Google Chrome verwenden werden.<\/p>\n

      Die DevTools k\u00f6nnen \u00fcber das Browsermen\u00fc ge\u00f6ffnet werden, in der Regel \u00fcber Mehr Tools<\/strong> > Entwicklertools<\/strong>, oder \u00fcber die Tastaturk\u00fcrzel Strg | Cmd + Shift + I<\/strong> oder F12<\/strong>.<\/p>\n

      Wechsle zur Registerkarte „Netzwerk<\/strong>“ und stelle sicher, dass „Cache deaktivieren<\/strong>“ aktiviert ist, damit zwischengespeicherte Dateien den Bericht nicht beeintr\u00e4chtigen. Du kannst auch die Drosselungsoption \u00e4ndern, um langsamere mobile Netzwerke zu simulieren.<\/p>\n

      Aktualisiere die Seite, um das Wasserfalldiagramm f\u00fcr den Download und die Verarbeitung anzuzeigen:<\/p>\n

      \"DevTools<\/a>
      DevTools Netzwerk-Panel<\/figcaption><\/figure>\n

      Jeder lange Balken ist besorgniserregend, aber du solltest dich besonders vor langen blockierten Balken in Acht nehmen (in wei\u00df dargestellt). In diesem Beispiel konnten die hervorgehobene Zeile und alle folgenden Zeilen nicht mit dem Herunterladen beginnen, bis die Rendering-blockierenden CSS- und JavaScript-Dateien am Anfang der HTML-Seite verarbeitet wurden.<\/p>\n

      Mit dem Filterfeld<\/strong> kannst du bestimmte Assets ein- oder ausblenden:<\/p>\n