As I earlier told you that every Sunday I take one relevant question from lots of queries asked by Showeblogin live visitors and discuss it with all my readers. Today, I will elaborate a very important topic that may impact the speed and search engine optimization of your blogger blog.
The extract of the question asked by one of my visitor is –
“Hi Suresh, I am from California (US) and a regular user of your site. Today, I am asking you very basic problem I am facing right now. So, please help me immediately. Actually, I was testing my blog speed through Google PageSpeed Insights and found lots of errors. Under suggestion summary [Should fix], I got these message:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 9 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.”
Fortunately, I was online that time and able to help him within 7 minutes. Firstly, I send him the link for inserting CSS codes properly in blogger template and then advice the rest through further conversations. There are lots of other JavaScript related queries in my inbox and here I am just trying to elaborate those in a brief manner for all of you.
To build any webpage on internet there are three most important languages viz. HTML, JavaScript and CSS. JavaScript is one of the most commonly used client-side programming language that may communicate asynchronously (i.e. independently of other processes) to web browser.
If you are using BlogSpot.com blogger blog then you have lots of option to include JavaScript codes. It will depends on where you want to render it and for which purpose you are using that JavaScript files or codes.
1) Add JavaScript codes correctly into Blogger blog Template
Inserting any JavaScript codes into HTML editor of your blog is very tricky. To insert JavaScript codes into blogger template, follow these steps:
Step-1: Login to blogger.com and visit the dashboard of your blog.
Step-2: Now, click on template menu from the left sidebar.
Step-3: From template window, click on Edit HTML.
Step-4: Finally, you have to decide where the JavaScript codes should be inserted. In maximum cases JavaScript codes works fine by adding it within <head> </head> tag.
But, I personally advise you that paste your codes where it will be required and not anywhere as said by any third party. I mean some codes are only useful for a particular static page and therefore it should not be place in the blogger template. To get fast speed of your blog and to prevent rendering unnecessary blocking script resources, you should paste the code in HTML editor of that particular static page itself.
Similarly, if any JavaScript code is necessary for article/post pages then you may insert the script codes within conditional tag as shown below and paste the whole codes just above/before closing </head> tag.
<b:if cond='data:blog.pageType == "item"'>
Paste Your JavaScript Here for post page
</b:if>
The above conditional tag will help to load the script for your blog posts pages only and therefore the other page like home page, label/index page and static page etc. will be fast. Accordingly, you may apply these conditional tags for rendering your JavaScript codes as per requirements.
<b:if cond='data:blog.pageType == "static_page"'>
<!-- Paste Your JavaScript Here for Static Page -->
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Paste Your JavaScript Here for Homepage -->
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<!-- Paste Your JavaScript Here for 404 Error Page -->
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<!-- Paste Your JavaScript Here for Label Page -->
</b:if>
</b:if>
Most of queries generally I got for placing AdSense Unit codes into blogger template. So, if you are getting error while inserting AdSense codes then please read separate tutorial specifically deals with creating and adding AdSense Ad code to blog.
There are another error messages you may see while saving your blogger template:
Error parsing XML, line 646, column 15: Attribute name “async” associated with an element type “script” must be followed by the ‘ = ‘ character.
OR
Error parsing XML, line 2119, column 3: The element type “script” must be terminated by the matching end-tag “</script>”.
I would strongly refer my free online tool for Encoding and Decoding codes that may solve most of your codes related errors. But if you are facing again problem then please try these guidelines:
If you are using third party JavaScript codes then make sure you have copied entire codes properly. Most of cases I found that they miss either the opening <script type='text/javascript'> tag or the closing </script> end-tag or both. As a result of which your all codes will appear on live webpage and shall not work properly.
Sometimes in scripts we use ampersands (&), less-than (<) or greater-than (>) sign, single quote (‘) and double quotes (“) and that results errors like –
Error parsing XML, line 1681, column 18: The content of elements must consist of well-formed character data or markup.
See the following bunch of dummy JavaScript codes for example:
<script type="text/javascript">
function swtJavaErrors(){
document.getElementById("Showeblogin");
var e=document.createElement("script");
e.type="text/javascript";
e.async=false;
(document.getElementsByTagName("SWT");
document.write("<");}
</script>
In the above codes you may notice the last line that contain (“<“) which results error message. Now, simply we place CDATA markers with comments in this JavaScript codes and it will work fine for blogger HTML documents.
<script type="text/javascript">
//<![CDATA[
function swtJavaErrors(){
document.getElementById("Showeblogin");
var e=document.createElement("script");
e.type="text/javascript";
e.async=false;
(document.getElementsByTagName("SWT");
document.write("<");}
//]]>
</script>
Thus, we have added //<![CDATA[ after <script type="text/javascript"> and //]]> just before/above closing </script> tag. Therefore, you should use any third party (all websites or blogs except blogger) JavaScript codes within this standard frame.
<script type='text/javascript'>
//<![CDATA[
Place your JavaScript codes here
//]]>
</script>
If you have external JavaScript file then find </head> tag in HTML editor of your blogger blog template and paste that file just above </head> tag using the following standard format:
<script src='Your-External-JavaScript-File.js' type='text/javascript'/>
2) Add JavaScript codes within widget of blogger blog
Yes, this is very easy and risk free trick because you may add or remove JavaScript codes into your blog without touching blogger template. Follow these simple process to add JavaScript codes or files within a gadget provided by blogger itself.
Step-1: Go to layout of your blogger blog.
Step-2: Click on Add a Gadget text link where you want to appear the result of that JavaScript codes.
Step-3: Now, scroll down and select HTML/JavaScript (Add third-party functionality or other code to your blog).
Step-4: Finally, insert your JavaScript codes into the content field and save it.
If you are facing another problem then please fill free to ask me through making a comment below.