All about coding methods to obtain the highest possible score on Blogger with GTMetrix (Pagespeed and YSlow).


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.

No 👣 tracking social sharing

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:

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( 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:


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.