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

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!