Optimize Website Design (): Make the favicon. ICO file as small as possible and Cache

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, see Best practices for speeding up your web site (http://developer.yahoo.com/performance/rules.html), they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects. In the next period of time, I will combine the ASP. NET development platform and use a seriesArticleTo help you better understand and use these principles.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

I will discuss 32nd principles in this article: Make favicon. ICO small and cacheable (make the favicon. ICO file as small as possible and cache it ).

In the article "optimize Website Design (22nd): Avoid 404 errors", I mentioned the favicon. ICO file, but it is not detailed. Generally, each website should have this file, which is mainly used to display in the address bar of a browser or to add icons to favorites, as shown in.

For more information about this file, see http://zh.wikipedia.org/zh-cn/favicon:

1. Each website should have this file. when accessing any page, the browser will always try to request this file (if there is no local file ).
2. This file should usually be named favicon. ICO. If you want to use another name or format (for example, PNG), you need to define the reference in the header of the page (the first sentence in the following two sentences is required)

• <LINK rel = "shortcut icon" href = "http://example.com/favicon.ico" type = "image/vnd. Microsoft. Icon">
• <LINK rel = "icon" href = "http://example.com/favicon.ico" type = "image/vnd. Microsoft. Icon">

This file can be directly stored in the root directory of the website, but it can also be stored on another host or any location you want. If it is not in the default root directory, you also need to define it through the reference method mentioned above.

 

Due to these features of this file, we have three optimization suggestions.

1. Make it around 1kb as much as possible. To compare other formats (PNG, GIF, etc.), the default format of this file is ico. This type of file is usually small and is strongly recommended. To create the favicon. ICO file, I recommend that you use the free online services provided by http://www.favicon.cc.
2. So that it can be cached. because this file is frequently used, cache is very important. for more information, see optimize website design. (3) add Cache Control for resources. for this file, you can set never to expire (or the expiration time is longer ).
3. Put the file in a separate host, such as images.mydomain.com. this prevents sending cookies when a file is requested. for more information, see optimize Website Design (24): reduce cookie usage by using different hosts

We can look at a comprehensive example, taking the blog Park as an example.

1. They use the favicon. ICO file format. The current size is 5430 bytes, which is about 5 kb. There is room for optimization.
2. They set a cache policy for the file: cache-control: Max-age = 2592000, which is equivalent to 30 days (approximately one month ). In fact, this file has a very small chance of modification, and the cache time should be longer.
3. They put the file in static.cnblogs.com to avoid sending cookies.