Page speed is important for user experience and how they eventually engage with a site's content. It's also said that it's an (or going to be) a ranking factor. With this in mind, it's important to optimize one's blog for faster loading.
With Blogger one has limited control over what they can optimize. Still, that's not to say there is nothing one can do. A quick test of your blog with Google's PageSpeed Insight and other tools such as GTMetrix and Varvy can give you insights on what may be slowing down your blog.
One common problem with Blogger sites as reported by the PageSpeed tool are Render Blocking Scripts. These external scripts delay the rendering of your webpage as they get loaded especially on mobile sites. One such script in Blogger is the Comment Iframe Script (comment_from_post_iframe.js) that loads the default comment form.
Pagespeed recommends one either defer or load render blocking scripts asynchronously. In the case of the latter, this resolves this issue with little difficulty as you only need to add "async" to the affected scripts. For example:
That little piece of code will work with most external scripts that you may have in your Blogger Template. With the Comment Iframe Script however, things are a bit complicated since the script is not called in the usual way as shown in the example above.
If you check your template's you may instead notice the following line of code:
The xxxxx part is a unique token that's generated from one's account. You can find the specific token by looking at the source of your blog in your browser.
To do that on Firefox or Chrome, press CTRL+U then search for:
You should find the code in multiple instances. Copy the series of numbers just before -comment_from_post_iframe.js then complete your link so that it looks something like this with the token added:
Copy this link in your browser's address bar and load it.
A piece of code should be loaded (it's quite long hence my reservations of posting it here and the reason for the above steps). Copy the code as it is and save it somewhere.
Now go test your blog again in Varvy or PageSpeed and you shouldn't get the render blocking warning from this particular script. If you have any other render blocking scripts make sure to load them asynchronously as shown earlier. Cheers!
With Blogger one has limited control over what they can optimize. Still, that's not to say there is nothing one can do. A quick test of your blog with Google's PageSpeed Insight and other tools such as GTMetrix and Varvy can give you insights on what may be slowing down your blog.
One common problem with Blogger sites as reported by the PageSpeed tool are Render Blocking Scripts. These external scripts delay the rendering of your webpage as they get loaded especially on mobile sites. One such script in Blogger is the Comment Iframe Script (comment_from_post_iframe.js) that loads the default comment form.
The Render Blocking Comment Iframe
 |
| Render Blocking Comment Form JavaScript |
Pagespeed recommends one either defer or load render blocking scripts asynchronously. In the case of the latter, this resolves this issue with little difficulty as you only need to add "async" to the affected scripts. For example:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
That little piece of code will work with most external scripts that you may have in your Blogger Template. With the Comment Iframe Script however, things are a bit complicated since the script is not called in the usual way as shown in the example above.
If you check your template's you may instead notice the following line of code:
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>Removing the Render Blocking Comment Iframe
Since we cannot load the script asynchronously an alternative means would be to include the script right in the template, that is, make the script inline. To do that we need to obtain the script's code in its entirety and replace the "calling script" above with it.Step 1: Get the JavaScript Code
The script is loaded from the following location:https://www.blogger.com/static/v1/jsbin/xxxxxxxxxx-comment_from_post_iframe.js
The xxxxx part is a unique token that's generated from one's account. You can find the specific token by looking at the source of your blog in your browser.
To do that on Firefox or Chrome, press CTRL+U then search for:
https://www.blogger.com/static/v1/jsbin/
You should find the code in multiple instances. Copy the series of numbers just before -comment_from_post_iframe.js then complete your link so that it looks something like this with the token added:
https://www.blogger.com/static/v1/jsbin/1234567890-comment_from_post_iframe.js
Copy this link in your browser's address bar and load it.
A piece of code should be loaded (it's quite long hence my reservations of posting it here and the reason for the above steps). Copy the code as it is and save it somewhere.
Step 2: Make the Script Inline
- TIP: Consider backing up your template before doing the next steps.
// <! [CDATA [
SCRIPT CODE HERE
//]]> </ script>
// <! [CDATA [
(function(){var e="function" ...
... .call(this);
//]]> </ script>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
Step 3: Add the Script to your Blogger Template
Open your template in an editor or within Blogger and find the following line:<data:post.cmtfpIframe/>Delete that line and replace it with the script we have just made. Save your template and that's it.
Now go test your blog again in Varvy or PageSpeed and you shouldn't get the render blocking warning from this particular script. If you have any other render blocking scripts make sure to load them asynchronously as shown earlier. Cheers!
