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! Bad Hmmm Oke Good!
0% 0% 0% 0% 0%

Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.


    eBakery benötigt die Kontaktinformationen, die Sie uns zur Verfügung stellen, um Sie bezüglich unserer Produkte und Dienstleistungen zu kontaktieren. Sie können sich jederzeit von diesen Benachrichtigungen abmelden. Informationen zum Abbestellen sowie unsere Datenschutzpraktiken und unsere Verpflichtung zum Schutz Ihrer Privatsphäre finden Sie in unseren Datenschutzbestimmungen.*.

    Related Posts

    Leave a Comment

    Hat dir der Artikel gefallen?

    Dann melde dich doch zu unserem Newsletter an!

    Neben unseren Blog Themen informieren wir dich darin regelmäßig zu neuen Features und Tutorials