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

Home

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='https://www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css'/>

2) <link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=28300773&zx=71ea89df-0fe4-4b55-bbc4-0115c3e35696' 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

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='https://blogger.com/static/v1/widgets/178992763-css_bundle_v2.css' 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

and

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.

<EXAMPLE OF THE $VARIABLES SECTION>

</EXAMPLE OF THE $VARIABLES SECTION>

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

What exactly will you be replacing? A “Group”

<example>

<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"/>
</Group>

</example>

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

<example>

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);}

</example>

is re-written like this:

<example>

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

</example>

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='https://www.blogger.com/static/v1/widgets/178992763-css_bundle_v2.css' />

(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:

    https://foo-blogspot.com/favicon.ico (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!