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

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.