All about coding methods to obtain the highest possible score on Blogger with GTMetrix (Pagespeed and YSlow).


The primary blog of interest for this experiment and optimization is (located here).

UPDATED 5/10/17 On the evening of 5/9/2017 while testing posts yet another set of errors began manifesting clearly due to a blogger technician configuring the system to override the customized template code I had created which removed 100% of Blogger's CSS. This new and unwanted forceful insertion of blogger's external (and unnecessary CSS) has also misconfigured our blog's layout at top and bottom. Specifically, these two NEW inserted files are the culprit:

I'm sure that a technician is getting a chuckle out of this.

1) <link type='text/css' rel=stylesheet href=''/>

2) <link href='' rel=stylesheet />

After many months of customizing our blog, which required thousands of hours of study and work to achieve 100% Pagespeed and 99% YSlow, only to have this high score sabotaged I no longer feel blogger is the right place for our blog since I value speed, quality and visitor experience. We will still use blogger for composition of posts, but transfer them to a private server. I have also disposed of any and all high bandwidth draining tracking devices.

On last count, two external CSS files are being injected into the blogger template, reducing Pagespeed scores from 100% to 99%... YSlow has declined to 96%, in spite of customized code which had removed those external css generated errors. Both injected css files are absolutely unnecessary. 100% Pagespeed/99% YSlow is what our blog was getting prior to this... unnecessary configuration.

No 👣 tracking social sharing

How to “Combine images using CSS sprites”

Combine images using CSS sprites

This is what a sprite sheet looks like:


To view the correctly sized Sprite sheet click the image file.

To view the Sprite sheet in action, go to this page.

You can create a sprite sheet and get the correct dimensions for your CSS at Sprite Cow. You can combine all smaller images you regularly use on your blog, both inside the template, and exterior (on widgets or other gadgets) into one compact image file, and then get the dimensions and create the CSS to add into your template.

This is how the code will look in the <head></head> section of your template:

For images used INSIDE the template, in the <body></body> of the blogger template, locate the sources of images and edit the code in this manner:


This is the portion of the blogger template that places a “Pencil Icon” on the blog.


Many of the items on the sprite collection are not used inside the template, but are used on widgets and exterior of the blog, which are written like this on blogger:

For items without hyperlinks try it like this

The resulting score on GTMetrix:

Combine images using CSS sprites  
A (100)
 Images  High
What's this mean?
You scored 100% on this recommendation - nothing to do here!

To further simplify your Sprite CSS, you can use the following method. Notably, the sprite URL is referenced only once.

Read More »

Removing Blogger's CSS Errors on GTMetrix

Here's instructions on how to remove the official CSS, also compare notes with this set of instructions as well from your blogger blog. Edit at your own risk.

However, it worked for me.

When you have fully and successfully completed removal of the official CSS and reload your blog, and find that it works, you should right click on "View Source," and will find the link:
<link href='' rel='stylesheet' type='text/css'/>
prominently displayed near the top of the source code. You will need to remove that separately.

Please read over entire article before attempting editing your blogger template! Successful removal of Blogger CSS must be done in several stages which are explained below.

The instructions provided at the link(s) above will get rid of one major chunk of CSS, but not all of it.

is replaced with


is replaced with

Just below the modified <b:skin></b:skin> tags, you should paste all CSS code that is between <b:skin></b:skin>:

Of course you should have a copy of the original template backed up in case something goes wrong. If something should go wrong, you can “Select All” and copy from the HTML Editor and paste the original back into the template editor and Save Template, by “Select All” and pasting or CTRL+V.

However, let's assume nothing goes wrong.

Your blog should work, but when you Right-Mouse Button Click... and “View Source” you should find the following code displayed near the top.

The “css_bundle_v2.css” is the CSS file which is notorious for 3 of the ”Expression” errors on GTMetrix.

However, you will not be able to remove it from executing, until you have successfully removed the Variables + CSS section from the top of the Template. To remove Variables must be done with great care, 1 at a time. You will need to carefully read your CSS, and find which code, matches which piece of “$” CSS and fill in the gap.



Once replaced, you can erase the “$” Variable line as the CSS variable will be securely defined.

What exactly will you be replacing? A “Group”


<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#ff9900" value="#a060c3"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#b87209" value="#5c5098"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#ff9900" value="#c790ff"/>


You will search for the applicaable “$”. In this case,


a:link {text-decoration:none;color: $(link.color);}
a:visited {text-decoration:none;color: $(link.visited.color);}
a:hover {text-decoration:underline;color: $(link.hover.color);}


is re-written like this:


a:link {text-decoration:none;color: #a060c3;}
a:visited {text-decoration:none;color: #5c5098;}
a:hover {text-decoration:underline;color: #c790ff;}


As each piece of applicable code is correctly replaced, you can delete one line at a time from among your “Variables” list until none remain.

If you desire to successfully remove official CSS from your blog to modify it… here are some of the code from one of the headers my blogs as it appears but you should modify your own accordingly. It is unlikely that your template is identical to mine so only use the following code as a summary guideline and nothing more.

Section #1 of <head>

Section #2 of <head>

Section #3 of <head>

When you have successfully replaced those “$” Variables, you may follow the instructions at “Defer loading CSS (official PageSpeed) for Mobile and Desktop for Blogger” and the final touch up, removing the “Expression” error which will show up on GTMetrix.

That is,

When pulling a “View Source” of your newly renovated blog you will find this code:

In your template, you will find it simply written as

Blogger dynamically injects the CSS link:

Therefore, you will want to link to your own copy of the CSS instead of blogger, like this:

On GTMetrix, a total of 4 CSS errors, three "expression" errors are generated from the official Blogger CSS and one inline in the template. (To find the “Expression” error, load the CSS file into an HTML editor, like the one linked on the sidebar of this blog and do a text search for “expression”. You will find 3 in Blogger's official css_bundle_v2). You will have to edit to remove those expressions. Yet another “render blocking” error will persist if simply “linking” to the CSS file:

<link type='text/css' rel='stylesheet' href='' />

(See these notes.)

So this Javascript solves this problem altogether.

By following these instructions you will solve

  1. Render blocking CSS issue,
  2. The 3 “expression” errors which register on GTMetrix from blogger's official CSS and (see these notes) as
  3. one inline “expression” error will remain, registering on GTMetrix but my notes explain where to locate it and how to remove it.

Update 02/15/2017.

Eventually I culled down the CSS style sheet from excess code I was certain was not in actual use, to a degree that I felt confident to paste it directly into the blogger template between the <style type="text/css"></style>. After doing so, I utilized this tool to scan for additional unused CSS which further reduced the size of the template making it lighter weight and compact, without external style sheets.

The preceding tool is very useful for identifying unnecessary CSS code which is not directly used by the blog, including external style sheets.

Update 02/16/2017.

During GTMetrix tests, Blogger occasionally creates an annoying error with the default blogger favicon.ico file.

Leverage browser caching
A (97)
 Server  High

Leverage browser caching for the following cacheable resources: (1 day)

To that I began the search to find the way to additionally disable their default header information.

This post, How to Remove Default Blogger Asserts is informative and highly recommended to throughly read over instructions, such as which links to manually place in your blog headers after customization is complete. Additionally, javascript that instructs search engines to identify the proper canonical URL.

Though I tried to use the instructions given at the preceding link, Blogger presented numerous parsing errors so I had to perform some tweaks. I posted on that issue at this link: Leverage Browser Cache favicon.ico Blogger error on GTMetrix. The following is the code that ultimately worked. The default blogger favicon.ico is now a footnote of text labled under CSS whilst the actual favicon is coming from our own server.

Just a head's up if you decide to disable your Blogger default assets and use your own self-hosted favicon, etc., then it can be done though I am grateful I saved a copy of the blog template on my hard-drive, because after disabling the blogger assets as instructed, sure, the Pagespeed score was increased to 100% on “Leverage Browser Cache”, however, when scanning posts in the Facebook debugger, it no longer “read” the images from the post to create a preview. Facebook Share Debugger instead called upon the blog's default thumbnail image. For that reason I set the template back to its prior code, and though Blogger's template still creates a favicon.ico “Leverage Browser Cache” (97% score), it's not enough to interfere with the entire post scoring 100% Pagespeed. In my opinion, the downside of disabling Blogger Assets outweighs the benefit that may be gained.

Happy Coding!

Read More »


This is the .htaccess file compatible with CPanel with all modifications required on GTMetrix. If you have acquired a CDN (Content Delivery Network) such as Cloudflare, a security cookie is generated by Cloudflare and can not be blocked through your domain's .htaccess.

Read More »

More CSS Coding Tricks (Using data-uri in Blogger CSS)

You might face "leverage browser caching" or "use a cookieless domain" issues with image files such as the following which serve as background images in the blogger template:

This image file is the size of a pinpoint.

Once downloaded and hosted on a private server, if your .htaccess on your server has the proper cache control headers, then you will still likely receive errors on GTMetrix for not hosting on a “cookieless domain” or the need of a CDN (Content Delivery Network).

Example of CSS and self-hosted file:
.content-outer .content-cap-top {height: 0; background: transparent url( repeat-x scroll top center;}

However, with such a small file it is possible to use another method to transfer the image directly into the template to speed up the blog and improve YSlow score.

Data URI for blogger

Right click on image.

The option is provided to “Inspect Element”

Select that.

Data-URI for Blogger

By clicking to “Copy Data-URI”, you will copy the code to your clipboard:


That small string of code can be pasted into your Blogger Template CSS instead of linking to external files.

Here is the revised code:
.content-outer .content-cap-top {height: 0; background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEUlEQVQImWNgYGBowIKpLggAfgcMga1HCpIAAAAASUVORK5CYII=) repeat-x scroll top center;}

By doing so, it relinquished the need to link externally to 2 separate background images which otherwise created a “cookieless domain” error on GTMetrix.

Read More »

Facebook Style Previews for Web pages (No cost)

Hard coding is better than dynamically generated content. Google indexes the former.

Use this form to create Facebook style previews to use on your website or blog. *Right-click on image to “Copy Image Location”

Read More »

Metatags for Blogger; Facebook and Twitter

Paste the following above </head> in your main template on blogger.

Remove the arrows, of course.

*app number which facebook gave you will be necessary for moderation tool to appear on your posts.

Normal HTML website metatags for facebook and twitter would appear like this:

A guide of Facebook related accessories is located at a tool for "Facebook Styled Previews".

Read More »

Deferring Iframe with Facebook, AddToAny, Statcounter Code, etc (GTMetrix)

Our blogspot has an embedded iframe coming off of personal server with Facebook code embedded within the frames.

To properly defer the facebook app from executing and affecting scores on GTMetrix/Pagespeed/YSlow:

This code is placed in the headers of blogger template. (That is, somewhere before </head>).

Note:* I have purposely set the code where it contains &lt; instead of < which would result in a parsing error if pasted into blogger's template.

The code for iframe is embedded within the individual posts, at the bottom.

On the embed code, simply change src to data-src.

This cool solution was discovered at “Deferring”.

Prior errors that were located on GTMetrix with Facebook :

Defer parsing of JavaScript  
A (100)
 JS  High
What's this mean?
You scored 100% on this recommendation - nothing to do here!

To defer loading of images, in this case statcounter, the same source provides another code to defer image loading

The following goes in the body of document:

To defer loading of AddToAny Social Media Widget

The normal code appears like this:

The adjusted code will appear like this:

goes above </head>

goes in the body

Thanks again to the designer at Varvy for this wonderful script too.

Varvy's code will defer parsing of Javascript until the Onload event fires, allowing the page to render in a timely manner. However, if you want to postpone the loading of certain iframes containing code such as Facebook comments for 5 or 10 seconds after “Onload Time” or even delayed after “Fully Loaded Time” to improve Pagespeed/Yslow score, then this an example of what I use. Facebook is delayed to load, 10 seconds after Onload Time. I use Varvy's defer javascript to prevent the iframe from loading until achieving “Onload Time.” This small file loads into the iframe at Onload. It instructs the blog to load the actual facebook containing html file into the post, after 10 seconds. Here is the HTML5 iframe code which is embedded directly into the blog post:

Once fully loaded, if the visitor clicks on the browser back button, the user is carried back to where they came from before the embedded redirect was loaded. During GTMetrix testing the “Fully Loaded Time” was decreased from 2.5 seconds average to between 1.1 and 1.5 second on average with Pagespeed score of 99% and YSlow score of 98%.

10000 = 10 seconds.

Read More »