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 »

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

Blogger and GTMetrix: The Best Score Possible for Blogspot and Blogger?

Answer: The best possible score on Blogger is 98%-99% on YSlow unless the blog author uses a CDN which does not include cookies with visits which might be possible to reach 100% on Pagespeed and 100% on Yslow. (a "cookie-free" CDN" costs money and cloudflare is free. So for the time being, we are using Cloudflare.)

Update 02/03/2017

We finally brought our blog(s) up to Pagespeed 100%/ Yslow 100% by obtaining and implementing a cookie-free CDN. We are still using Cloudflare but created a separate sub-domain to serve cookie-free image files from through an alternative CDN.

Update 01/25/2017

Most recently the score is now up to 99% Yslow/100% PageSpeed on GTMetrix. Only remaining error is the need for a “Cookieless CDN” which currently I can not do much about beyond getting an install of a CDN on Godaddy, such as that provided by SiteLock. Otherwise the average score on my other blog is 100% on Google PageSpeed and 99% on YSlow, with an average speed for Chrome between 0.2 and 0.6 second and on Firefox, 0.5 second page load time.

I performed some additional tweaks. The tiny transparent *.png files used on the blog, I changed into data-uri and inserted them into the template which improved the score regarding the"cookieless domain" error. Then I culled down blogger's CSS and inserted it directly into the template. By removing those two external files it improved the cookieless domain by at least 10 points, and boosted the score up to 99% on YSlow.


Past (Outdated) Ramblings...

Currently, I have the following score from GTMetrix on this blog:

GTMetrix and Blogger

The following recommendations from Pagespeed:

Pagespeed Recommendation

The following recommendations from YSlow:

Yslow Recommendation

The GTMetrix Score with the “AddToAny” social media gadget removed from my blog's template:

This is the resulting Score for Pagespeed

No Script Included and Highest possible Score

And the resulting Score for YSlow:

YSlow, Blogger and No Scripts

However, the remaining errors are not unlike a catch 22.

#1 Use cookie-free domains.

If you use a "cookieless domain" GTMetrix will recommend using a CDN to speed up your web site. (I chose cloudflare) and the CDN will create cookies. The question was asked on Cloudflare and cookieless domains. One added benefit of using a CDN such as Cloudflare is that SSL (https) is automatic. For those who use personal web hosting to complement their blog it is hassle free to create https:// links for images and other files, where there's no conflict with Blogger's https policy. It is convenient to embed iframes, images, and any other files that must utilize secure protocol.

#2 Minify HTML.

Short of coding in strict HTML5 on a personal server, there's not really a possibility of "Minimizing" the HTML of a web page that is generated on blogger partially in xml and php. If somebody knows a way to do that, please let me know!

To bring the score up to 98%

Defer the Social Media Widget. Instructions and javascript located here.

Pages on this blog have an average GTmetrix score of Pagespeed 100% and Yslow: 97% to 98%.

Read More »

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!

Read More »

Leverage Browser Cache favicon.ico Blogger error on GTMetrix

The information contained in this post is last stage of a massive blogger CSS overhaul. Please read this post: Removing Blogger's CSS Errors on GTMetrix first!!! then return to this post.

Numerous times while running a test on GTMetrix a peculiar, annoying error persistently occurs to “Leverage Browser Cache” in regard to blogger's default favicon.ico. I tested several methods from scripts that are designed to replace or remove the item, which blogger seemed impervious to.

My desire is to embed link of proper cache control favicon.ico from our own host/server.

Leverage browser caching
A (97)
 Server  High

Leverage browser caching for the following cacheable resources:

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

See this link, How to remove the default Blogger assets.

Instructions are provided there to replace some of the template with the following code:

However, upon doing so there were numerous parsing errors that resulted.

After some tweaking and experimenting I finally was able to get the basic concept to work for our blog using the following code:

The blogger default favicon is now listed as a text statement within CSS, but no longer affecting tests on GTMetrix.

I highly recommend a careful reading over the article How to remove the default Blogger assets, as there are additional issues which must be addressed. For instance, the author provides a script that communicates the proper "canonical URL" with search engines

<script>
(function () {
  var url = document.location.pathname.replace(/\/\//g, '/');
  if (url.indexOf('/search') == -1)
    url = document.location.origin + url
  else
    url = document.location.href;
  var canonical = document.createElement('link');
  canonical.setAttribute('rel', 'canonical');
  canonical.setAttribute('href', url);
  document.querySelector('head').appendChild(canonical);
})();
</script>

as well as various links which are necessary to blog function but must be manually placed back into your headers.

Read More »