Schnellere Ladezeiten dank CSS Komprimierung

Home / Design / Schnellere Ladezeiten dank CSS Komprimierung

Schnellere Ladezeiten dank CSS-Komprimierung

Webseiten bestehen meistens, grob gesagt, aus zwei Komponenten. Dem HTML-Code, der den Inhalt vorgibt, und dem CSS (Cascading Style Sheet)-Code, der das Aussehen bestimmt. In der Vergangenheit wurden Stil und Inhalt oft gemischt, aber je komplexer das Projekt ist, desto eher macht es Sinn, beides voneinander zu trennen.

Onlineshop-Systeme wie Shopware und Content Management Systeme (CMS) wie WordPress oder Joomla! bestehen oft aus PHP-, HTML- und CSS-Dateien. Die PHP-Dateien sind für Programmabläufe gedacht, sie enthalten Berechnungen und Konfigurationsangaben.

Die Trennung macht Sinn, damit Daten nicht immer wieder gepflegt werden müssen, sondern an einer Stelle gesammelt werden. Bei kleinen Webseiten findest du also mindestens eine HTML-Datei, eine CSS-Datei und, falls Bilder gezeigt werden, diese meistens in einem Unterordner um auch hier Bilder vom Code zu trennen.

Was macht CSS?

In den CSS-Dateien legst du (oder der Programmierer) fest:

  • Schriftart

  • Schriftgröße

  • Formatierung

  • Position (bei Schaltflächen oder Popups)

  • Hintergrundfarbe

  • Linien

und vieles mehr. Wenn du dich näher damit beschäftigen und vielleicht sogar CSS lernen willst, schau doch mal bei LerneProgrammieren vorbei.

CSS verlangsamt die Website

Ein Nachteil ist allerdings, dass jede extra Datei den Seitenaufbau verlangsamt. Der PageSpeed leidet, aber das kannst du einschränken. Als Erstes solltest du sicherstellen, dass auch nur der CSS-Code geladen wird, der wirklich auf der Startseite verwendet wird. Wie du das herausfindest und den nicht verwendeten CSS-Code entfernst, liest du in unserem Artikel Nicht verwendete CSS entfernen.

Aber da CSS für die Website wichtig ist, gibt es noch verschiedene Wege, die Übertragung zu beschleunigen. Durch Komprimierung wird der Code verkleinert. Dazu kannst du verschiedene Tools nutzen. Oft gibt es bereits Plugins, die einfach im Shop- oder CM-System installiert werden können. Ansonsten stehen dir auch Onlinetools wie cssminifier.com zur Verfügung.

Während CSS-Code normalerweise leicht zu lesen ist, wie hier:

@media (min-width:768px)

 {
    .sp-dsgvo .lwb-d-md-flex
    {
       display:-ms-flexbox !important;display:flex !important
    }
  }



wird er beim Komprimieren stark zusammengefasst:

@media (min-width:768px){.sp-dsgvo .lwb-d-md-flex{display:-ms-flexbox !important;display:flex !important}}

Damit erreichst du, je nach Größe der CSS-Datei, wesentliche Unterschiede. Testen kannst du das Ganze mit Google Pagespeed Insights oder GTMetrix.

Durch die Komprimierung kannst du noch das letzte Stückchen an Geschwindigkeit herausholen, denn wenn es durch ein Plugin im Shop oder CMS gemacht wird, werden auch mehrere Dateien zu einer zusammengefasst.

Eine Webseite erscheint in dieser Reihenfolge auf deinem Bildschirm:
  1. Du tippst eine Adresse in den Browser, z.B. ebakery.de
  2. Dein Browser schickt die Anfrage an den Server.
  3. Der Server öffnet die PHP- oder HTML-Datei und schickt sie an deinen Browser.
  4. Jede in der Datei erwähnte CSS-Datei wird zusätzlich kopiert.
Bei jeder Übertragung wird eine Datei angefragt, geschickt und anschließend der Empfang bestätigt. Werden also viele kleine Dateien geschickt, dauert der Vorgang wesentlich länger als wenn nur eine Datei geschickt wird, auch wenn diese etwas größer sein sollte. Das Komprimieren hat also gleich zwei Vorteile: Der Code wird verschlankt, weil überflüssige Leerzeichen etc. wegfallen und die Dateien werden zusammengefasst, damit sie schneller übertragen werden können.

CSS komprimieren durch eBakery

Gerne übernehmen wir die Fleißarbeit und prüfen, welcher CSS-Code sich komprimieren lässt, ohne Probleme zu verursachen.

Buche doch gleich einen kostenlosen Beratungstermin unter www.ebakery.de/kontakt/

  • 0/5
  • 0 ratings
0 ratingsX
Very bad!BadHmmmOkeGood!
0%0%0%0%0%
Related Posts

Leave a Comment

Kontakt
Zertifzierter JTL WMS
Shopware Business Partner
Zertifizierter Shopware Partner
Zertifizierter Shopware Business Partner
Zertifizierter Shopware Template Designer
Zertifizierter Shopware Template Designer
pickware Partner
Xentral Gold Partner
VARIO BUSINESS PARTNER