Shopify Agentur
Shopware Agentur
JTL-Shop 5 Agentur
Gambio Agentur
Magento Agentur
WooCommerce Agentur
PrestaShop Agentur
JTL-Servicepartner
Xentral Servicepartner Enterprise
VARIO Servicepartner
Odoo Agentur
Amazon Agentur
eBay SEO
Otto SEO
Google SEO
Google Ads
Social Media
Facebook Ads Agentur
Instagram Ads Agentur
ChatGPT Agentur
Linkbuilding Agentur
Ecommerce Tutorials
eCommerce Podcast
SEO Tools
KI Tools
eCommerce Facebook Gruppe
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:
Du tippst eine Adresse in den Browser, z.B. ebakery.deDein Browser schickt die Anfrage an den Server.Der Server öffnet die PHP- oder HTML-Datei und schickt sie an deinen Browser.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/
Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.
