How fast is your Blogger website or blog? Not so good? Well, Unused CSS in your blogger template can be the reason for slow website speed.
We Offer Website Speed Optimization Service!
Feel your website needs Page Speed Optimization? Do not panic. We will fix it for you. A fast-loading website to boost your website traffic, sales, and revenue..
A slow website is like an enemy. Isn’t? If your website’s loading speed is not good then you are losing something. Like ranking. Right?
As per Google’s Core Web Vitals update, your overall website speed score should be good along with FID, CLS, LCP.
You should remove these Unused CSS from Blogger Website.
Why should I remove unused CSS from blog templates? Basically, unused CSS is not a critical problem that interferes with website performance.
Even so, unused CSS that is too large is very important to be removed or removed from blog templates for reasons of saving bytes that are not needed for top-of-the-line content and reducing bytes that are not used by network activities.
This means that the smaller the unused CSS, the better the rendering of the top half content of the website/blog, otherwise if there are too many invalid rules from the stylesheet (unused CSS) the rendering of the top half of the content of the website will be worse.
Therefore, in this tutorial, I will explain as well as possible the types of unused CSS (CSS that are not used for part-time content) and how to remove unused CSS from blog templates (blogger).
Types of Unused CSS in Blogger Templates and How to Remove them
- CSS Layout (body#layout).
- CSS Group Description (Variable Stylesheet).
- Duplicate CSS (Unapplicable CSS rules).
- Unused Widget CSS.
- CSS Unused Third Party (Font Awesome).
After knowing the types of CSS that are not used for content or part pages, now I will start a tutorial on removing unused CSS from blogger templates, read and understand well so you don’t make mistakes when practicing.
1. CSS Layout (Body Layout)
To successfully remove unused CSS from the blogger template, the first thing we have to secure is the CSS layout or body layout. CSS layout is unused CSS (unused stylesheet) for the top half of the page, but CSS layout is very important for the blog layout display on the blogger dashboard.
So for CSS layout we only need to hide it from rendering the top half of the page without having to delete it, thus the CSS layout will not be rendered by the browser and not considered as unused CSS which hinders parsing of CSS for the top half pages.
To hide it, save the CSS body layout into the tag data:view.isLayoutMode like the example below:
<b:if cond='data:view.isLayoutMode'>
<b:template-skin>
<![CDATA[
body#layout here
body#layout here
more...
]]>
</b:template-skin>
</b:if>2. CSS Group Description (Variable Stylesheet)
CSS Group Description is not useful (unused CSS) for top half pages but for blogger users who don’t understand CSS it is very useful, CSS group description allows users to customize blogger themes such as changing fonts, colors, and so on from the layout of the theme designer.
If you are an expert in customizing blogger themes through editing HTML and CSS, it’s best if you delete this CSS because this is unused CSS (unused CSS) for top-of-the-line pages/content.
How to Delete CSS Group Description
- Open your blog URL in the Chrome browser
- Then press Ctrl+U to view the site source or (view-source:https://www.waytoidea.blogspot.com/).
- Copy all the CSS on the source page without including the CSS group description (variable stylesheet).
- Then replace the original CSS of the blog template with the CSS copied from the source page.
- Preview the blog site to make sure there are no changes (errors) in the appearance of the blog.
If successful, continue to the next tutorial, if not successful (there is an error in the blog display) check the CSS layout if there is still something not parsed.
Css Not Parsed:
#layout div.widget{float:$(startSide);}Parse mode:
#layout div.widget{float:left;}3. How to Remove Duplicate CSS (Invalid CSS rules).
Of the many types of unused CSS in blogger templates, according to what I have observed the most affecting blog performance is duplicate CSS (stylesheet rules that don’t apply).
For example: Basic css in html <em/> is italic font, so there’s no point in adding css style font-style:italic; on the <em/> html element , it just adds unused css to your blog page.
Moreover, adding css style font-style:normal; on the <em/> html element , it will only make the css rules contradict the basic, if you want to display the element with normal font you should use <span> or <p> .
4. Removing Unused CSS From Unused Widgets
Unused CSS of this type is actually the easiest to remove or delete and does not cause any damage to the appearance of the blog, and usually, the CSS for features or widgets are arranged sequentially if the blogger template has many features like most premium templates on ThemeForest.
If you don’t understand the function of all the CSS in the blog template, use a web tool unused CSS detector like jitbit.com to detect unused CSS in your blog template.
Note: The unused CSS displayed on the web tool may not be 100% accurate, so be careful when deleting unused CSS, do it slowly, and always preview your blog after deleting unused CSS.
5. Third-Party CSS (Font Awesome)
Unused third-party CSS from font awesome is very small, the range of unused CSS bytes from third-party CSS like font-awesome is only 10 to 11 Kib, if you want to delete it means you delete the font awesome icon from the blog template.
It’s still possible to do that because blogs can use SVG icons or icons made from CSS and HTML. But of course, it will require a lot of hard work and skill.
If you are not expert enough in HTML and CSS you can ignore this part, just load font-awesome asynchronously to avoid render-blocking resources of CSS font awesome bundle to make your blog lighter (faster).
Conclusion
Deleting unused CSS from blogger templates should be done slowly, don’t be in a hurry to delete unused CSS. Unused CSS in small amounts is common, but if it’s too much and it’s possible to delete it, it’s a shame if it’s not removed, because there is an opportunity to improve blog performance especially on top half-page rendering.
If you are not good at coding. Stucking everywhere when doing these steps given above, then don’t worry we will fix those errors for you.
We have a team of professional developers that fixes CWV (Core Web Vitals) errors significantly for our clients for highest Website Speed and Performance. So drop us a message or see our Affordable Pricing if you’re struggling with Core Web Vitals stuff and Website Speed, and we’ll fix all Core Web Vitals errors for you.
Hopefully, this article is useful and can help you in optimizing your blog. Hit the share button ❤️
