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

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.