Shopware Agency
Shopify Agency
JTL SHOP 5 Agency
Gambio Agency
Magento Agency
WooCommerce Agency
PrestaShop Agency
Xentral Service Partner Enterprice
VARIO Service Partner
Odoo Agency
Amazon Agency
eBay SEO
Otto SEO
Google SEO
Google Ads
Social Media
Facebook Ads Agency
Instagram Ads Agency
ChatGPT Agency
Link Building Agency
Ecommerce Tutorials
eCommerce Podcast
SEO Tools
AI Tools
eCommerce Facebook Group
Faster loading times thanks to CSS compression
Websites usually consist, roughly speaking, of two components. The HTML code, which defines the content, and the CSS (Cascading Style Sheet) code, which defines the appearance. In the past, style and content were often mixed, but the more complex the project, the more likely it makes sense to separate the two.
Online store systems like Shopware and content management systems (CMS) like WordPress or Joomla! often consist of
PHP
-, HTML- and CSS-
Files. The PHP files are intended for program operations, they contain calculations and configuration information.
The separation makes sense so that Data does not have to be maintained over and over again, but is collected in one place. So for small websites you will find at least one HTML file, one CSS file and, if images are shown, they are usually in a subfolder to separate images from code here as well.
What does CSS do?
In the CSS files you (or the programmer) specify:
-
Font
-
Font size
-
Formatting
-
Position (for buttons or popups)
-
Background color
-
Lines
and much more. If you want to take a closer look and maybe even learn CSS, check out LerneProgrammieren.
CSS slows down the website
One disadvantage, however, is that each extra file slows down the page load. PageSpeed suffers, but you can limit that. First of all, you should make sure that only the CSS code that is really used on the home page is loaded. How to find out and remove the unused CSS code, you can read in our article Remove unused CSS.
But since CSS is important for the website, there are still various ways to speed up the transfer. Compression reduces the size of the code. You can use various tools for this purpose. Often there are already plugins that can be easily installed in the store or CM system. Otherwise, online tools like cssminifier.com are also available to you.
W hile CSS code is usually easy to read, as here:
@media (min-width:768px) { .sp-dsgvo .lwb-d-md-flex { display:-ms-flexbox !important;display:flex !important } }
it is strongly compressed during compression:
@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.
Compress CSS through eBakery
We are happy to do the legwork and check which CSS code can be compressed without causing problems.
Why not book a free consultation appointment now at www.ebakery.de/kontakt/
Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.
