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

How to “Combine images using CSS sprites”

Combine images using CSS sprites

This is what a sprite sheet looks like:


Sprites

To view the correctly sized Sprite sheet click the image file.

To view the Sprite sheet in action, go to this page.

You can create a sprite sheet and get the correct dimensions for your CSS at Sprite Cow. You can combine all smaller images you regularly use on your blog, both inside the template, and exterior (on widgets or other gadgets) into one compact image file, and then get the dimensions and create the CSS to add into your template.

This is how the code will look in the <head></head> section of your template:

For images used INSIDE the template, in the <body></body> of the blogger template, locate the sources of images and edit the code in this manner:

ORIGINAL CODE

This is the portion of the blogger template that places a “Pencil Icon” on the blog.

EDITED CODE

Many of the items on the sprite collection are not used inside the template, but are used on widgets and exterior of the blog, which are written like this on blogger:

For items without hyperlinks try it like this

The resulting score on GTMetrix:

Combine images using CSS sprites  
A (100)
 Images  High
What's this mean?
You scored 100% on this recommendation - nothing to do here!

To further simplify your Sprite CSS, you can use the following method. Notably, the sprite URL is referenced only once.