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.

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.

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.