Book Image

Instant PageSpeed Optimization

By : Sanjeev Jaiswal
Book Image

Instant PageSpeed Optimization

By: Sanjeev Jaiswal

Overview of this book

PageSpeed is an important aspect of web design and site management. It is a Google measure of how well the site performs to technical measurements. PageSpeed can be measured using Google's own tool or a browser plugin. It is used to score sites in indices, and is important from a UI view as it forms a large part of the success of your site.Instant PageSpeed Optimization is a practical, hands-on guide that provides you with a number of clear, step-by-step exercises, which will help you to take advantage of the real power that is behind web optimization techniques, and give you a good grounding in using it in your websites.The book explores topics like HTML standards used for optimization, minifying scripts, and taking care of images, and solves the common errors that users do unknowingly. It will take you through a number of clear, practical recipes that will help you to take advantage of all the possible technologies to make your websitess efficient, fast, and accurate. You will not only learn basic standards to optimize your websites, but you will also learn some advanced level methods such as Apache handling, Flush methods, making AJAX cacheable, setting up browser caches, and reducing image size using CSS sprites. If you want to take advantage of all the necessary methods to make your website faster and efficient, then this book is a must-have.
Table of Contents (7 chapters)

Making favicon.ico small and cacheable (Simple)


An icon that you see over the top of the browser at the left corner is called favicon, that is, favorite icon.

If you carefully observe the root directory of your website, you will find that favicon.ico is residing there by default. If it's not there, it would always throw an error to the server that favicon.ico was not found with the HTTP status code 404, which we don't want to happen. So, either handle such status code or better have one small favicon in your root directory. We need it anyhow because modern browsers always look for it.

How to do it...

  1. Your hosting service provider would provide one by default, else you can create your own by using any icon generator tool or the freely available online icon generator (http://tools.dynamicdrive.com/favicon/).

  2. When you open the preceding link, you will see the following screenshot:

  3. Click on Browse... as shown in the preceding screenshot to create an icon. You can click on those Optional checkboxes, else it will be 16 x 16 pixels by default.

  4. Then click on Create Icon. You will see the Download FavIcon button, as shown in the following screenshot:

  5. Click on the Download FavIcon button to download the favicon.ico file, as shown in the following screenshot:

  6. Now, click on OK to save it; upload the file on the website under the root directory, and you are done.

    Note

    Make sure it is of 16 x 16 or 32 x 32 or 48 x 48 or 64 x 64 pixels and very small in size, say less than 1 KB. Most of the websites use 16 x 16 pixels to display favicon, so better use the same for your website too.

How it works...

Whenever you hit the page, it sends requests to the server, and all the files get downloaded either from the server or cache depending upon the expires header. By default, favicon will always get downloaded whenever you are making a request to the server, so as to avoid any delay and its interference with downloading other files from the server.

Try to have the favicon in the root directory with a size less than 1 KB and try to have it in the .ico format, and set the expires header to a future date. If you are going to change the extension of your favicon, be sure to use the <link> tag in HTML. For example:

<link rel = "shortcut icon" href = "/images/favicon.gif" type = "image/x-icon" />

This following screenshot shows the grade of the favicon image in a website using the YSlow plugin in Firefox:

There's more...

YSlow suggests that one should manually create a cacheable favicon, so let's always do it. Almost every modern browser (tested on Firefox 9, IE9, and Opera10) requests a favicon.ico by default, unless and until you are not mentioning your own customized shortcut icon via the <link> tag. So, it's a good idea to always have the favicon.ico file in your root directory, to avoid a File not found error.