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.

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:

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!
Read More »

Removing Blogger's CSS Errors on GTMetrix

Here's instructions on how to remove the official CSS, also compare notes with this set of instructions as well from your blogger blog. Edit at your own risk.

However, it worked for me.

When you have fully and successfully completed removal of the official CSS and reload your blog, and find that it works, you should right click on "View Source," and will find the link:
<link href='https://blogger.com/static/v1/widgets/178992763-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
prominently displayed near the top of the source code. You will need to remove that separately.

Please read over entire article before attempting editing your blogger template! Successful removal of Blogger CSS must be done in several stages which are explained below.

The instructions provided at the link(s) above will get rid of one major chunk of CSS, but not all of it.

is replaced with

and

is replaced with

Just below the modified <b:skin></b:skin> tags, you should paste all CSS code that is between <b:skin></b:skin>:

Of course you should have a copy of the original template backed up in case something goes wrong. If something should go wrong, you can “Select All” and copy from the HTML Editor and paste the original back into the template editor and Save Template, by “Select All” and pasting or CTRL+V.

However, let's assume nothing goes wrong.

Your blog should work, but when you Right-Mouse Button Click... and “View Source” you should find the following code displayed near the top.

The “css_bundle_v2.css” is the CSS file which is notorious for 3 of the ”Expression” errors on GTMetrix.

However, you will not be able to remove it from executing, until you have successfully removed the Variables + CSS section from the top of the Template. To remove Variables must be done with great care, 1 at a time. You will need to carefully read your CSS, and find which code, matches which piece of “$” CSS and fill in the gap.

<EXAMPLE OF THE $VARIABLES SECTION>

</EXAMPLE OF THE $VARIABLES SECTION>

Once replaced, you can erase the “$” Variable line as the CSS variable will be securely defined.

What exactly will you be replacing? A “Group”

<example>

<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#ff9900" value="#a060c3"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#b87209" value="#5c5098"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#ff9900" value="#c790ff"/>
</Group>

</example>

You will search for the applicaable “$”. In this case,

<example>

a:link {text-decoration:none;color: $(link.color);}
a:visited {text-decoration:none;color: $(link.visited.color);}
a:hover {text-decoration:underline;color: $(link.hover.color);}

</example>

is re-written like this:

<example>

a:link {text-decoration:none;color: #a060c3;}
a:visited {text-decoration:none;color: #5c5098;}
a:hover {text-decoration:underline;color: #c790ff;}

</example>

As each piece of applicable code is correctly replaced, you can delete one line at a time from among your “Variables” list until none remain.

If you desire to successfully remove official CSS from your blog to modify it… here are some of the code from one of the headers my blogs as it appears but you should modify your own accordingly. It is unlikely that your template is identical to mine so only use the following code as a summary guideline and nothing more.

Section #1 of <head>

Section #2 of <head>

Section #3 of <head>

When you have successfully replaced those “$” Variables, you may follow the instructions at “Defer loading CSS (official PageSpeed) for Mobile and Desktop for Blogger” and the final touch up, removing the “Expression” error which will show up on GTMetrix.

That is,

When pulling a “View Source” of your newly renovated blog you will find this code:

In your template, you will find it simply written as

Blogger dynamically injects the CSS link:

Therefore, you will want to link to your own copy of the CSS instead of blogger, like this:

On GTMetrix, a total of 4 CSS errors, three "expression" errors are generated from the official Blogger CSS and one inline in the template. (To find the “Expression” error, load the CSS file into an HTML editor, like the one linked on the sidebar of this blog and do a text search for “expression”. You will find 3 in Blogger's official css_bundle_v2). You will have to edit to remove those expressions. Yet another “render blocking” error will persist if simply “linking” to the CSS file:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/178992763-css_bundle_v2.css' />

(See these notes.)

So this Javascript solves this problem altogether.

By following these instructions you will solve

  1. Render blocking CSS issue,
  2. The 3 “expression” errors which register on GTMetrix from blogger's official CSS and (see these notes) as
  3. one inline “expression” error will remain, registering on GTMetrix but my notes explain where to locate it and how to remove it.

Update 02/15/2017.

Eventually I culled down the CSS style sheet from excess code I was certain was not in actual use, to a degree that I felt confident to paste it directly into the blogger template between the <style type="text/css"></style>. After doing so, I utilized this tool to scan for additional unused CSS which further reduced the size of the template making it lighter weight and compact, without external style sheets.

The preceding tool is very useful for identifying unnecessary CSS code which is not directly used by the blog, including external style sheets.

Update 02/16/2017.

During GTMetrix tests, Blogger occasionally creates an annoying error with the default blogger favicon.ico file.

Leverage browser caching
A (97)
 Server  High

Leverage browser caching for the following cacheable resources:

    https://foo-blogspot.com/favicon.ico (1 day)

To that I began the search to find the way to additionally disable their default header information.

This post, How to Remove Default Blogger Asserts is informative and highly recommended to throughly read over instructions, such as which links to manually place in your blog headers after customization is complete. Additionally, javascript that instructs search engines to identify the proper canonical URL.

Though I tried to use the instructions given at the preceding link, Blogger presented numerous parsing errors so I had to perform some tweaks. I posted on that issue at this link: Leverage Browser Cache favicon.ico Blogger error on GTMetrix. The following is the code that ultimately worked. The default blogger favicon.ico is now a footnote of text labled under CSS whilst the actual favicon is coming from our own server.

Happy Coding!

Read More »

.htaccess

This is the .htaccess file compatible with CPanel with all modifications required on GTMetrix. If you have acquired a CDN (Content Delivery Network) such as Cloudflare, a security cookie is generated by Cloudflare and can not be blocked through your domain's .htaccess.

Read More »

More CSS Coding Tricks (Using data-uri in Blogger CSS)

You might face "leverage browser caching" or "use a cookieless domain" issues with image files such as the following which serve as background images in the blogger template:

http://www.blogblog.com/1kt/travel/bg_black_50.png

This image file is the size of a pinpoint.

Once downloaded and hosted on a private server, if your .htaccess on your server has the proper cache control headers, then you will still likely receive errors on GTMetrix for not hosting on a “cookieless domain” or the need of a CDN (Content Delivery Network).

Example of CSS and self-hosted file:
.content-outer .content-cap-top {height: 0; background: transparent url(https://edwardtbabinski.us/blogger/bg_black_50.png) repeat-x scroll top center;}

However, with such a small file it is possible to use another method to transfer the image directly into the template to speed up the blog and improve YSlow score.

Data URI for blogger

Right click on image.

The option is provided to “Inspect Element”

Select that.

Data-URI for Blogger

By clicking to “Copy Data-URI”, you will copy the code to your clipboard:

Example:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEUlEQVQImWNgYGBowIKpLggAfgcMga1HCpIAAAAASUVORK5CYII=

That small string of code can be pasted into your Blogger Template CSS instead of linking to external files.

Here is the revised code:
.content-outer .content-cap-top {height: 0; background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEUlEQVQImWNgYGBowIKpLggAfgcMga1HCpIAAAAASUVORK5CYII=) repeat-x scroll top center;}

By doing so, it relinquished the need to link externally to 2 separate background images which otherwise created a “cookieless domain” error on GTMetrix.

Read More »

Facebook Style Previews for Web pages (No cost)

Hard coding is better than dynamically generated content. Google indexes the former.

Use this form to create Facebook style previews to use on your website or blog. *Right-click on image to “Copy Image Location”

Read More »

Metatags for Blogger; Facebook and Twitter

Paste the following above </head> in your main template on blogger.

Remove the arrows, of course.

*app number which facebook gave you will be necessary for moderation tool to appear on your posts.



Normal HTML website metatags for facebook and twitter would appear like this:

A guide of Facebook related accessories is located at a tool for "Facebook Styled Previews".

Read More »

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.

Read More »