Speed Up Blogger Templates By Removing Old JS And CSS 2023.

byNeuron • • 5 min read
0
Speed Up Blogger Templates By Removing Old JS And CSS 2023.

As a professional blogger, it is essential to prioritize the speed of your website's pages. The page loading time is a crucial on-page SEO factor that search engines consider when determining search rankings. In particular, Blogger blogs may experience slower page loading times due to the default javascript and CSS code that gets automatically added to the HTML template. Removing these default codes can improve the page loading time of your blog.

Removing default blogger scripts and CSS files can be challenging as they are automatically added to your blog and are not visible in the HTML template code editor. However, following a few simple steps, you can remove these unwanted files, such as 'widget_css_bundle.css' (CSS) and 'widgets.js' (JS), that are slowing down your blog.

To remove default CSS and javascript from a BlogSpot blog, you can remove specific links and script tags in the source code, such as 'b: template' and 'b: skin', and ensure that the encrypted 'plusone.js' javascript is removed as well. This method is recommended for bloggers who need to start using the default widgets provided by Blogger. It's essential to remember that disabling these default codes, default stylesheet CSS, and other native blogger scripts will stop working, so you won't be able to use any of the default widgets.

Different variations of JavaScript (.js) and Stylesheet (.css) files can be used as defaults.

The following are various types of default JavaScript and CSS files generated and added automatically by Blogger:

  1. widget_css_bundle.css: This is the first file executed on the browser side as soon as a visitor visits your blog. It includes all the default widget stylesheet CSS bundle files of the Blogger template and all default widgets such as related posts, review widgets, popular posts, a comment section, and a contact form.
  2. authorization.css: This is a small CSS code file delivered on every page load that holds your Blog ID.
  3. widget.js: This file contains the code for all the default Blogger widgets and can take longer to fetch and load on the browser side.
  4. plusone.js: This JavaScript was added to each Blogger blog for Google+ widgets. Note: Google+ has been shut down, and this file will be automatically removed.

Why it's important to eliminate the default CSS Bundle and Widgets.js from Blogger.

When it comes to customizing the appearance and functionality of your Blogger blog, it's important to understand the role of the default CSS Bundle and Widgets.js that come pre-installed with the platform. While these tools may seem valuable, they can impede your blog's performance and overall look.

One of the main issues with the default CSS Bundle is that it can slow down the loading time of your blog. This is because the bundle contains a large amount of code that may be optional for your blog. By removing this bundle and only including the CSS you need, you can significantly improve the speed of your blog.

Another issue with the default CSS Bundle is that it can clash with the custom CSS that you may be using on your blog. This can lead to unexpected and often unwanted effects on your blog's design. By eliminating the default bundle, you can ensure that your custom CSS is the only styling code affecting your blog.

Check Fast Loading Blogger Template:

Widgets.js is another default tool that can cause problems for your blog. This script is responsible for handling the functionality of certain widgets on your blog, such as the comments and search box. However, it can also slow down the loading time of your blog and cause conflicts with other scripts you may be using. By removing this script, you can improve the performance of your blog and avoid any potential conflicts.

The default code for JavaScript is found in the file Widgets.js, while the default code for CSS styles is located in the css_bundle_v2.css file.

To view the default JavaScript (Widgets.js) and CSS stylesheet (css_bundle_v2.css) code on a Blogger page, open the page and right-click anywhere on it. Select "View page source" from the menu to access the code, which is hidden and automatically added by Blogger settings.

Default JavaScript (Widgets.js) 

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2423294629-widgets.js"></script>

CSS stylesheet (css_bundle_v2.css) 

<link href='https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css' rel='stylesheet' type='text/css'/>

Improving Page Loading Speed by Eliminating Default Blogger JavaScript and CSS

It is important to remove any unnecessary default JavaScript and CSS. This task requires a basic understanding of how to customize the HTML template code in Blogger, including how widgets are configured and operate according to the theme design.

To remove default javascript and CSS bundle files from your blogger template, follow these steps:

  1. First, it is crucial that you backup your entire blogger template code.
  2. Next, navigate to the HTML code of your template.
  3. Within the first few lines, you will come across the following code: 
    4. <html b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.3' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:include name='themeColor'/>
  4. Add the codes b:css='false' and b:js='false' as shown below 
    5. <html b:css='false' b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.3' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:include name='themeColor'/>
  5. Locate the code for the default blogger CSS files 
    6. <b:skin><![CDATA[
...
All CSS codes
...
]]></b:skin>
  6. Replace that code with the code provided 
    7. <style type='text/css'>
...
All CSS codes
...
</style>
  7. Insert the code provided above the code created in step 6. 
    8. &lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>

    So that the whole code will looks alike:

    &lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
...
All CSS codes
...
</style>
  8. Find the <head> tag in your template and replace it with the code provided 
    9. &lt;head&gt;
  9. Next, find the </head> tag and replace it with the code provided 
    10. &lt;!--</head>--&gt;&lt;/head&gt;
  10. Find the <body> tag and replace it with the code provided 
    11. &lt;body onload=&quot;script();&quot; onload=&quot;callFunction();&quot; onload=&quot;loaded();&quot; data-progrecss-mock=&quot;5&quot; class=&quot;progrecss green fixed mock staggered&quot; class=&#39;index&#39; expr:class=&#39;&amp;quot;loading&amp;quot; + data:blog.mobileClass&#39; itemscope=&#39;itemscope&#39; itemtype=&#39;http://schema.org/WebPage&#39;&gt;
  11. Finally, find the </body> tag and replace it with the code provided 
    12. &lt;!--</body>--&gt; &lt;/body&gt;
  12. Don't forget to save your template changes, then check your blog's speed to ensure it has improved.

In conclusion, it is vital to focus on speeding up the page loading time of your blog or website. Removing default javascript and CSS code from your Blogger blog can improve page loading time and boost your search engine rankings. However, it's important to remember that disabling these default codes will stop you from using any of the default widgets that Blogger provides.

Tags:
Neuron

Maximize your blog's potential with this Adsense-approved, responsive, and SEO-optimized template. Ensure a thriving blogging career with its help.

Post a Comment

Previous Post Next Post