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

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.