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

inline <style> tag #3 (1 expression)

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 step in modification, edit at your own discretion. 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. Read my notes on complete removal and overhaul of Blogger CSS as well as the information from Google's official Pagespeed and CSS Render-Blocking & correct javascript to prevent this error.

If you are running GTMetrix on your blogspot as I do, then perhaps you've came up on this error:

Avoid CSS expressions
B (82)
CSS Low
What's this mean?

There is a total of 4 expressions

https://www.blogger.com/static/v1/widgets/178992763-css_bundle_v2.css
inline <style> tag #3 (1 expression)

I downloaded the official CSS for blogger, and uploaded to a private server, which works fine (after some major edits to the main blogger template) which I explain in a later post.

However, after you've got the first three removed from Blogger's CSS. You are left with one remaining and a score of 83 and a question of where the remaining expression is located. That explanation is located here:

YSlow claims that you have an inline style, so at least it is not from a css file. If you can't find the <style> in your own html, something else is adding this to your code.
This could maybe an external JavaScript, or maybe it comes from an browser extension you added, e.g a developer tool.
In your browser debug console type document.getElementsByTagName("style") to list all <style> in your generated document”

Avoid CSS expressions
B (88)
CSS Low
What's this mean?

There is a total of 1 expression

inline <style> tag #3 (1 expression)

The source of the error is this piece of code located in the main template:

<b:template-skin>

[...]

here--> _width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');<--here

I removed all of the code below, that's underlined in light blue.

inline <style> tag #3 (1 expression)

Yslow explains the problem with CSS Expressions.

Now I get:

Avoid CSS expressions
A (100)
CSS Low
What's this mean?
You scored 100% on this recommendation - nothing to do here!