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

Defer loading CSS (official PageSpeed) for Mobile and Desktop for Blogger

This script applies specifically to blogger templates which have been heavily modified. In this case, we have our own web hosting service. If this is the case with your blog, and you've reached this far in the stages of modification, edit at your own discretion. (See these notes on complete removal and overhaul of Blogger CSS). This step in modification came after removal of some of the main template's CSS and the ability to link to the widget CSS file directly.

You run Google's official Pagespeed test and get a near-failing grade on the CSS on Mobile web sites:

Mobile Score

And not the greatest score on the Desktop version:

Pagespeed Rules for Desktop

If you recognize this in your template's modified code:

Pagespeed CSS Link Defer Rule

Then this is what is needed to replace it with:

Page Speed for CSS Defer

Here is the score result when testing for Mobile

Pagespeed for CSS Defer

Here is the score result when testing for Desktop

Pagespeed CSS Defer Rule