Shopify Agentur
Shopware Agentur
JTL-Shop 5 Agentur
Gambio Agentur
Magento Agentur
WooCommerce Agentur
PrestaShop Agentur
Xentral Servicepartner Enterprise
VARIO Servicepartner
Odoo Agentur
Amazon Agentur
eBay SEO
Otto SEO
Google SEO
Google Ads
Social Media
Bing Ads
Facebook Ads Agentur
Instagram Ads Agentur
ChatGPT Agentur
Linkbuilding Agentur
Ecommerce Tutorials
eCommerce Podcast
SEO Tools
KI Tools
eCommerce Facebook Gruppe
Nicht verwendete CSS entfernen
Über CSS (Cascading Style Sheets) wird das Design einer Webseite oder eines Onlineshops festgelegt. Die Inhalte werden in HTML (HyperText Markup Language) verfasst. Grob kann man sagen, dass HTML festlegt, wo etwas stehen soll und CSS definiert, wie es aussehen soll.
Früher wurde viel davon vermischt. So wurden direkt im HTML-Code auch Anweisungen hinterlegt, wie dieser spezielle Bereich auszusehen hat. Im HTML-Code der Seite findest du Einträge wie <h2>Überschrift</h2> – das sagt aus, dass diese Überschrift mit der Codierung h2 gezeichnet werden soll. Überschriften sind unterteilt von h1-h6, groß nach klein, und sollen eine Seite, bzw. ein Dokument gliedern.
Bei kleinen Webseiten ist das relativ einfach. Wenn aber fertige Systeme wie WordPress, Joomla! oder Shopware zum Einsatz kommen, findet hier relativ viel Code seinen Platz. Auch diverse Plugins, mit denen du deine Seite anpassen kannst, bringen eigenen Code mit um z.B. Popups in einer bestimmten Art und Weise darzustellen.
Hauptsächlich wird aber eine Trennung vorgenommen, damit sauberer Code entsteht und die Webseite immer gleich aussieht. Du kannst dir natürlich notieren, dass eine <h1>-Überschrift immer in der Schriftart Roboto und Größe 16 dargestellt werden soll. Aber bestimmte Absätze sollen ja auch immer gleich aussehen. Merkt sich das keiner, sieht die Seite manchmal etwas wirr aus. Auch SEO-Aspekte spielen hier eine Rolle, daher ist gute CSS-Arbeit immer notwendig.
CSS kann aber wesentlich mehr, die gesamte Gestaltung der Seiten ist in CSS hinterlegt.
CSS und Pagespeed
Je mehr Code geladen werden muss, desto langsamer wird die Seite. Du solltest also darauf achten, dass wirklich nur der Code geladen wird, der für die Anzeige der jeweiligen Seite notwendig ist.
Zur Analyse kannst du bereits die Entwicklertools deines normalen Browsers Firefox oder Chrome nutzen. Klicke einfach mit der rechten Maustaste auf einen Bereich auf deiner Webseite und klicke „Element untersuchen (Q)“ in Firefox.
Hier im roten Bereich ist eine Anweisung für den blau markierten Bereich daneben. Links steht nur der HTML-Code <h3> und eine spezielle Einsortierung „elementor“. Da du in CSS fast komplett alles so benennen kannst, wie du möchtest (ein paar Begriffe sind reserviert) findest du je nach eingesetztem System und Design immer wieder eigene Begriffe. Diese werden dann in einer .css-Datei erklärt, bzw. mit einem Design versehen. Welche Befehle das sind, findest du im roten Bereich.
Hier werden also nicht nur Schriftgröße, -art usw. festgelegt, sondern auch die Position, wie weit dieses Element vom Bildschirmrand entfernt sein soll, wie weit von anderen Elementen und vieles mehr. Wenn du dich näher mit diesem Thema beschäftigen möchtest, schau doch mal bei selfhtml vorbei. Hier werden dir die Grundlagen und erweiterte Kenntnisse in HTML und CSS vermittelt: selfhtml wiki
CSS entfernen
Bevor du nicht benötigte CSS-Regeln entfernst, solltest du die notwendigen von den nicht verwendeten Regeln trennen. Es ist ja nicht so, als wenn alle CSS-Regeln über sind, denn viele werden wirklich benötigt. Es gibt aber auch einige CSS-Regeln, die nur auf Unterseiten oder nur auf der Startseite benötigt werden.
Manche Shop-Plugins machen nur auf der Artikelseite Sinn, z.B. wenn ein Chatbutton eingefügt werden soll. Angenommen, der Besucher ist für 60 Sekunden auf der Seite, und das Produkt ist erklärungsbedürftig. Hier könnte man ein Plugin aktivieren, dass nach 60 Sekunden aufpoppt und den Besucher fragt, ob alles in Ordnung ist.
Der CSS-Code dafür ist auf der Unterseite wichtig, aber nicht auf der Hauptseite. Mit Tools wie diesem:
https://www.jitbit.com/unusedcss/
kannst du ungenutzten CSS-Code aufspüren. Zum Entfernen sind meist andere Plugins notwendig, die du je nach Shop- oder Webseiten-System installieren kannst. Diese bringen natürlich keinen unnützen Code für die Seite mit, sondern entfernen einfach die Einträge.
Wie sehr sich das auswirkt, kannst du auf Seiten wie Google PageSpeed Insights und GTMetrix testen. Gib deine Adresse dort ein und schaue, wie sich die Geschwindigkeit verändert. Erscheint immer noch der Punkt „Ungenutztes CSS entfernen“ wird dir hier aufgezeigt, welche CSS-Dateien das sind.
Zeigst du auf die Links, wird dir genau die Datei angegeben, die noch entfernt werden sollte. Prüfe allerdings, ob das auch stimmt. Manchmal ist die Messung nicht ganz akkurat und du entfernst Code, der vielleicht zum Cookie-Plugin gehört. Entfernst du diesen Code, ist dein Shop nicht mehr rechtssicher.
CSS entfernen durch eBakery
Gerne prüfen wir deinen Shop und entfernen zuverlässig wirklich nur den Code, den dein Shop auf der Seite nicht braucht. Alle wichtigen Codestellen bleiben unangetastet. So holst du noch mehr Geschwindigkeit aus deinem Shop ohne viel umbauen zu müssen.
Buche doch gleich einen kostenlosen Beratungstermin unter www.ebakery.de/kontakt/
Guter Beitrag 🙂
Es ist immer schwierig, die wichtigen von den nicht ganz so wichtigen CSS-loadings zu filtern.
Einen Kritikpunkt habe ich. Du könntest bei dem Bild (da es ja wirklich eine sehr kleine Schrift ist) die Lightbox aktivieren.
Mit Lightbox->Media Datei, kannst du auf das Bild klicken und es öffnet sich in Groß. Dabei verbraucht die Datei auch nicht so viel Speicher (Extra für die Loadtime 🙂
MfG
Philipp von Techwarez