What is a CSS Sprite?

CSS Sprite is a collection of images combined in a single image.
and it is the preferred method for reducing the number of image requests. 

Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
When there are multiple images (icon images,list-images,background-images that are used in), browser will have to request the server for each images separately.  So wherever possible, use CSS Sprites.

What is a Long Running Script ?

Avoid landing page redirects

If you are getting  "Avoid landing page redirects" warning in Google pagespeed, it will look like below .

To speed up page load times for visitors of your site, remove as many landing page redirections as possible, and make any required redirections cacheable if possible.
http://site.com/blog is a non-cacheable redirect to http://site.com/blog/.

What is a bad request?

Bad request are requests that returns 404/410 error. (It will show a 404 not found page)

Why bad requests?

Bad request are often caused by Broken links. Websites and blogs are often change its contents, links,and move its resources from one location to another location.
or you may have deleted resources that are linked in your pages.

What is a character set?

In simple, character set is the set of characters that you can use in webpage.

I should specify charset , but not in meta tag? Why and how can I specify character set then?

It is better to specify a Character set. and it can be set via two primary methods, with meta tags or with headers.

Google dev tools suggest to remove meta tags wherever possible because it will affect information duplication.

and most web servers automatically send content type headers along with the content that is being requested to be downloaded.
And if they already send a Content type header, and if we specify our own, it will be confusing for the browser.

Using @import in external stylesheets will affect your PageSpeed performance.

What is CSS @import?

CSS @import is used to import other stylesheets when specified in an external stylesheet.
For example,
Consider we have two style sheets named first.css and second.css.
In first.css, we can include the second.css file by specifying
@import url("second.css");

Requirements :

• Adobe Photoshop

Steps to make an image progressive.

Open Photoshop.

Press CTRL+O to open image that you want to make progressive.

Select "save for web" option from file menu OR press Alt+Shift+Ctrl+S.



A new window will appear.

Select tab "Optimized" at the top left side of the window.


Now, at the right side of the window, you can configure the output image's settings.

Select output format.(JPG is better).
Set Quality. (60 is better) reducing quality from 100% will also reduce image size.
Set blur, if you want to blur a little.

Click on save.

Now if you upload the image and download it, it will be downloaded in multiple passes.

On 2-7-2013 , +Google AdSense  team announced that they are giving a new option for publishers to load Google adsense ads asynchronously.
As they mentioned in there official Google+ Post, new asynchronous ad code lets Website content load quicker for users when they experience intermittent connection problems.

Why Asynchronous?

<script> tags will block HTML renderer if they are found in between any other elements.
That means if you are loading a huge JavaScript file with a blocking <script>  tag at the top of markup, you will not see any progress on the page as the mentioned script is getting loaded and evaluated.
Here adding async tag will help the performance.
if we tag with a aync, the browser will no longer stop the html renderer process,and it will load and evaluated the script block asynchronously.

How to replace old code with Asynchronous adsense code in blogger blog?

If you have approved by adsense,and enabled that in your blogger powered blog, blogger will automatically show ads in posts and sidebar. and you might have added extra ad codes using blogger template editor or "Add a widget". option in layout tab.

Lets see how to change default adsense code to new one. please not that this is not mandatory. its optional.

• Backup template

Before make any change to your template, Backup your template. if you don't know how, here is an article that will help you to backup your template.

• Check Earnings tab.

Open blog's dashboard, and on left side, click on the tab named "Earnings". Make sure you have set "true" for "Show ads on blog "   option. and save changes.

• Optimize template for new adsense code

Open Template Html editor. and find </head> , if you don't know how to search inside blogger template, here is an article that will help you.

Just before the closing head tag, Add below script
 <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Save this for now

Replace that with your new asynchronous code you copied from "Myads" section in adsense dashboard.

It will look similar to this.

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="yyyyyyyyyy"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>


PLEASE NOTE that you dont have to call  <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
script everywhere.  as +Michael Kleber  said in +Google Developers  blog, only calling on top of document is enough even if you have multiple ads in page .

If you have added other ads manually ,using 'Add a gadget' option in layout tab, Open layout tab, edit gadget contents, and replace the old adsense code with new one.

• Save template. and test your blog.

Troubleshoot

If you are getting error message,  Error parsing XML, line --, column --: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.Make Sure your async is followed by the ="async" property. (async="async").

If you found any other problems setting it up, feel free to start discussion in comments.