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
Remove unused CSS
CSS (Cascading Style Sheets) is used to define the design of a website or online store. The content is written in HTML (HyperText Markup Language). Roughly, you can say that HTML defines where something should be and CSS defines how it should look.
In the past, much of it was mixed. Thus, directly in the HTML code also instructions were deposited, how this special area has to look like. In the HTML code of the page you can find entries like <h2>heading</h2> – this says that this heading should be drawn with the coding h2. Headings are divided from h1-h6, large to small, and are intended to organize a page or document.
For small websites, this is relatively easy. But if ready-made systems like WordPress, Joomla! or Shopware are used, relatively much code finds its place here. Also, various plugins that you can use to customize your site bring their own code to display popups in a certain way, for example.
Mainly, however, separation is done so that clean code is created and the web page always looks the same. Of course, you can make a note that a <h1> heading should always be displayed in Roboto font and size 16. But certain paragraphs should always look the same. If no one notices this, the page sometimes looks a bit confused. SEO aspects also play a role here, so good CSS work is always necessary.
But CSS can do much more, the entire design of the pages is stored in CSS.
CSS and pagespeed
The more code that needs to be loaded, the slower the page will be. So you should make sure that really only the code is loaded that is necessary for the display of the respective page.
For analysis you can already use the developer tools of your normal browser Firefox or Chrome. Just right-click on an area on your web page and click “Inspect Element (Q)” in Firefox.
Here in the red area is an instruction for the blue highlighted area next to it. On the left is only the HTML code <h3> and a special sorting “elementor”. Since you can name almost everything in CSS as you like (a few terms are reserved) you will always find your own terms depending on the system and design used. These are then explained in a .css file, or provided with a design. Which commands these are, you find in the red area.
So not only font size, font type etc. are defined here, but also the position, how far this element should be from the edge of the screen, how far from other elements and much more. If you want to learn more about this topic, take a look at selfhtml. Here you will learn the basics and advanced knowledge of HTML and CSS: selfhtml wiki
Remove CSS
Before you remove CSS rules you don’t need, you should separate the necessary rules from the ones you don’t use. It’s not like all CSS rules are over, because many are really needed. But there are also some CSS rules that are only needed on subpages or only on the home page.
Some store plugins only make sense on the article page, e.g. if a chat button is to be inserted. Let’s say the visitor is on the page for 60 seconds and the product needs explanation. Here you could activate a plugin that pops up after 60 seconds and asks the visitor if everything is ok.
The CSS code for this is important on the subpage, but not on the main page. With tools like this:
https://www.jitbit.com/unusedcss/
you can detect unused CSS code. To remove them, you usually need other plugins, which you can install depending on the store or website system. These, of course, do not bring useless code to the page, but simply remove the entries.
You can test how much of an impact this has on sites like Google PageSpeed Insights and GTMetrix. Enter your address there and see how the speed changes. If the item “Remove unused CSS” still appears, it will show you which CSS files these are.
If you point to the links, you will be given the exact file that should be removed. However, check that this is true. Sometimes the measurement is not quite accurate and you remove code that may belong to the cookie plugin. If you remove this code, your store is no longer legally compliant.
Remove CSS through eBakery
We will be happy to check your store and reliably remove only the code that your store does not need on the page. All important code points remain untouched. This way you get even more speed out of your store without having to rebuild much.
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.
