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).
Leave comments or questions about optimizing Blogger and GTMetrix. I typically check messages daily.

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

(function () {
  var url = document.location.pathname.replace(/\/\//g, '/');
  if (url.indexOf('/search') == -1)
    url = document.location.origin + url
    url = document.location.href;
  var canonical = document.createElement('link');
  canonical.setAttribute('rel', 'canonical');
  canonical.setAttribute('href', url);

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