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

Leverage Browser Cache favicon.ico Blogger error on GTMetrix

The information contained in this post is last stage of a massive blogger CSS overhaul. Please read this post: Removing Blogger's CSS Errors on GTMetrix first!!! then return to this post.

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.

Numerous times while running a test on GTMetrix a peculiar, annoying error persistently occurs to “Leverage Browser Cache” in regard to blogger's default favicon.ico. I tested several methods from scripts that are designed to replace or remove the item, which blogger seemed impervious to.

My desire is to embed link of proper cache control favicon.ico from our own host/server.

Leverage browser caching
A (97)
 Server  High

Leverage browser caching for the following cacheable resources:

    https://foo-blogspot.com/favicon.ico (1 day)

See this link, How to remove the default Blogger assets.

Instructions are provided there to replace some of the template with the following code:

However, upon doing so there were numerous parsing errors that resulted.

After some tweaking and experimenting I finally was able to get the basic concept to work for our blog using the following code:

The blogger default favicon is now listed as a text statement within CSS, but no longer affecting tests on GTMetrix.

I highly recommend a careful reading over the article How to remove the default Blogger assets, as there are additional issues which must be addressed. For instance, the author provides a script that communicates the proper "canonical URL" with search engines

<script>
(function () {
  var url = document.location.pathname.replace(/\/\//g, '/');
  if (url.indexOf('/search') == -1)
    url = document.location.origin + url
  else
    url = document.location.href;
  var canonical = document.createElement('link');
  canonical.setAttribute('rel', 'canonical');
  canonical.setAttribute('href', url);
  document.querySelector('head').appendChild(canonical);
})();
</script>

as well as various links which are necessary to blog function but must be manually placed back into your headers.