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.

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.

Just a head's up if you decide to disable your Blogger default assets and use your own self-hosted favicon, etc., then it can be done though I am grateful I saved a copy of the blog template on my hard-drive, because after disabling the blogger assets as instructed, sure, the Pagespeed score was increased to 100% on “Leverage Browser Cache”, however, when scanning posts in the Facebook debugger, it no longer “read” the images from the post to create a preview. Facebook Share Debugger instead called upon the blog's default thumbnail image. For that reason I set the template back to its prior code, and though Blogger's template still creates a favicon.ico “Leverage Browser Cache” (97% score), it's not enough to interfere with the entire post scoring 100% Pagespeed. In my opinion, the downside of disabling Blogger Assets outweighs the benefit that may be gained.

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.


Varvy's code will defer parsing of Javascript until the Onload event fires, allowing the page to render in a timely manner. However, if you want to postpone the loading of certain iframes containing code such as Facebook comments for 5 or 10 seconds after “Onload Time” or even delayed after “Fully Loaded Time” to improve Pagespeed/Yslow score, then this an example of what I use. Facebook is delayed to load, 10 seconds after Onload Time. I use Varvy's defer javascript to prevent the iframe from loading until achieving “Onload Time.” This small file loads into the iframe at Onload. It instructs the blog to load the actual facebook containing html file into the post, after 10 seconds. Here is the HTML5 iframe code which is embedded directly into the blog post:

Once fully loaded, if the visitor clicks on the browser back button, the user is carried back to where they came from before the embedded redirect was loaded. During GTMetrix testing the “Fully Loaded Time” was decreased from 2.5 seconds average to between 1.1 and 1.5 second on average with Pagespeed score of 99% and YSlow score of 98%.

10000 = 10 seconds.

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.

Just a head's up if you decide to disable your Blogger default assets and use your own self-hosted favicon, etc., then it can be done though I am grateful I saved a copy of the blog template on my hard-drive, because after disabling the blogger assets as instructed, sure, the Pagespeed score was increased to 100% on “Leverage Browser Cache”, however, when scanning posts in the Facebook debugger, it no longer “read” the images from the post to create a preview. Facebook Share Debugger instead called upon the blog's default thumbnail image. For that reason I set the template back to its prior code, and though Blogger's template still creates a favicon.ico “Leverage Browser Cache” (97% score), it's not enough to interfere with the entire post scoring 100% Pagespeed. In my opinion, the downside of disabling Blogger Assets outweighs the benefit that may be gained.

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 »

Alternative to AddToAny, AddThis, No Analytics Tracking Easy Install Social Media Sharing Buttons Which Automatically Detect URL (Javascript) Alternative

See the Social Media Sharing application at top of blog.


Sample #1 (Using Sprite Sheet) Pagespeed:100% and YSlow:99%



Sample #2 (Using Data-URI instead of Image Files) Pagespeed:100% and YSlow:100%



Sample #3 (Standard HTML Code) Pagespeed:93% and YSlow:98%


See the GTMetrix PDF test results for standard coding. That is, linking via individual images for each link. The test file is located at this link.

Here is what standard code might look like:


Except for the Pagespeed and YSlow scores, both samples look identical, don't they? Well, they aren't. Scroll down to find out why.

I discovered a popular social media sharing app we were using contained Google Analytics which was bringing down the Pagespeed Score on GTMetrix and Google Pagespeed Insights to 99%. Now that it has been removed the blog I maintain scores 100% on Google's Pagespeed Insights. (See the result) and the GTMetrix PDF (Now, it takes around 1 to 1.5 second to reach “Fully Loaded Time” and 100% Pagespeed/99% YSlow). In hopes of finding a social media sharing gadget that doesn't negatively impact my pagespeed score, I have spent some time sifting through various scripts and web sites and alternatives to some of the popular script-heavy plugins and the one I came away with that is functional, lightweight, easy to install, and does not affect Pagespeed/YSlow scores on GTMetrix including, an additional benefit: It requires no outside css or js files which add to http requests, but most importantly: No tracking or analytic codes are embedded and it is designed to detect the URL of page it is embedded in making sharing your URL easy.

Initially, I found the fundamental scripts at this site: simplesharingbuttons.com/ but tweaked their code quite a bit to require only sprites, instead of external image files. By doing so, it cuts down on server requests which improve your Pagespeed score and load time. You can see a working example at the top of this blog!

Feel welcomed to download the sprite image which is being used to create the script:

https://cdn.edwardtbabinski.us/social-media-icons.png

I went to Sprite Cow which is one of the best ways to get exact measurements for Sprite CSS. This is the code as it should be pasted into Blogger's style headers for this particular sprite. Also, I rely on Dan's Tools for Beautifying and Minifying CSS. The following would be placed between the <head></head> of the document or template.

Here's the minified version of the CSS which should be placed between <head></head> tags

Another script which I felt useful to integrate into the script is from Dynamic Drive, “Modeless Window”. This script, when hyperlinked and clicked on produces a small, lightweight pop up window for the URL to load instead of opening a new tab or full page window.

To see the Modeless Window by Dynamic Drive in action, go to top of this page and click on one of the media icons. A 550x550 pixel window will pop up with the sharer page displayed in it.

So to get the benefits of the Modeless Window you can download at Dynamic Drive or copy the code below and paste it before the </head> tag.

And between the <body></body> tags, under normal circumstances, the code is used to alter any hyperlink in this manner:

When clicked, a small lightweight window pops up that measures 425 pixels x 550pixels, or whatever custom size you may choose to use.

However, in this case I am altering it for use in this social media button sharing application as follows:

The following code goes between the <body></body>

This is approximately what an HTML5 document would look like when implementing a working copy of these Social Media Sharing buttons. (Approximately 5 kb).

To create the same social media button sharing without implementing the tiny javascript window rather, for the social media referral page to open in a new browser tab, see example below:

If you have questions concerning what this script will do to your web site in regard to speed or other concerns, I have provided a GTMetrix final report from a test page with code from the Modeless Window version embedded. I performed a couple “Onload Time” tests,

Onload Time: 201ms-250ms
Pagespeed Score: (100%)
YSlow Score: (99%) due to hosting the social media image sprite on a normal hosting server like Godaddy instead of over a global Content Delivery Network, which are expensive.
See the PDF test results for Onload Time.

Fully Loaded Time: 262ms or 0.262 second
Pagespeed Score: (100%)
YSlow Score: (99%) due to hosting the social media image sprite on a normal hosting server like Godaddy instead of over a global Content Delivery Network, which are expensive.
See the PDF test results for Fully Loaded Time.


Pagespeed 100% / YSlow 100%


Here's also an alternative version which helps avoid the http request for the Sprite image which boosts Pagespeed and YSlow up to 100%/100%. Instead of image files, the Social Media icons are translated into data (uniform resource identifier (URI)) and no external file requests are needed. For more information on Sprites and Data-URI, I posted “More CSS Coding Tricks (Using data-uri in Blogger CSS)” and another post about CSS Sprites and Blogger, “How to ‘Combine images using CSS sprites’”. Here is the example page which I've tested on GTMetrix.

Onload Time: 167ms or 0.167 second
Pagespeed Score: (100%)
YSlow Score: (100%)
See the PDF test results for Onload Time.

Fully Loaded Time: 251ms or 0.251 second
Pagespeed Score: (100%)
YSlow Score: (100%)
See the PDF test results for Fully Loaded Time.

Here is a minified version of the “No External HTTP Requests” (21 kilobytes):

In any of the examples provided simply replace any “blogulated.blogspot.com” with your own domain name.

Read More »