Yahoo! Team practices: 34 gold codes for website performance optimization (4)-pictures, coockie and mobile apps

Images and coockie are also an indispensable part of our website. In addition, with the popularity of mobile devices, it is also very important to optimize mobile apps. This mainly includes:
Coockie:

1. Reduce cookie volume
2. No coockie domain name is used for page content

Image:

1. Optimize images
2. Optimize CSS spirite
3. Do not scale the image in HTML
4. Favicon. ICO is small and can be cached

Mobile applications:

1. Keep a single content smaller than 25 KB
2. Package components into composite text

27. Reduce cookie volume
HTTP coockie can be used for multiple purposes, such as permission verification and personalized identity. The relevant information in coockie is communicated between the Web server and the browser through the HTTP file header. Therefore, it is important to keep coockie as small as possible to reduce the user response time.
For more information, see tenni Theurer and Patty Chi'sArticle"When the cookie crumbles ". These studies mainly include:

• Remove unnecessary coockie
• Make coockie as small as possible to reduce the impact on user response
• Note: Set coockie on the domain name at the adaptive level so that the subdomain name is not affected.
• Set a reasonable expiration time. Early expire time and do not clear coockie too early will improve the user response time.

28,No coockie domain name is used for page content

When the browser simultaneously requests a static image and sends coockie in the request, the server will not use these coockie in any way. Therefore, they are created only because of some negative factors.
Network transmission. All requests for static content that you should be sure to have no coockie. Create a subdomain name and use it to store all static content.

If your domain name is www.example.org, You can have static content on static.example.org. However, if you are not
On www.example.org, coockie is set on the top-level domain name example.org, so all requests for static.example.org
Both contain coockie. In this case, you can purchase a new domain name to store static content, and keep the domain name free of coockie. Yahoo! Yes
Ymig.com, YouTube uses ytimg.com, Amazon uses images-anazon.com and so on.

Another advantage of using a non-coockie domain name with static content is that some proxies (servers) may refuse to cache coockie content requests. A related suggestion is that if you
To determine whether example.org or www.example.org should be used as your homepage, consider the impact of coockie. If you ignore WWW
Set coockie to * .example.org (* is a wildcard domain name resolution, representing the dudo note for all subdomain translators, therefore, in terms of performance, it is best to use a sub-domain with WWW and set coockie on it.

29,Optimize images
After you design the pages, do not rush to upload them to the Web server. Here, you still need to do a few things:

• You can check whether the number of image colors in your GIF image is the same as that in the color palette. The following command line in ImageMagick is easy to check:
  Identify-verbose image.gif
  If you find that only four colors are used in the image, and the color slot of the 256 colors is displayed in the color palette, there is still space for compression.
• Taste
  Convert the GIF format to PNG to see if it saves space. In most cases, it can be compressed. Due to limited browser support, designers are often reluctant to use images in PNG format.
  It's all about the past. Currently, only one problem is that the alpha channel in the true color PNG format is translucent. However, in the same way, the GIF format does not support translucent. Therefore, GIF can
  PNG (png8) can also be used (in addition to animation ). The following simple command can safely convert the GIF format to PNG format:
  Convert image.gif image.png
  "What we want to say is: Give PNG a chance to show its skills !"
• Run pngcrush (or another PNG optimization tool) on all PNG images ). For example:
  Pngcrush image.png-REM Alla-reduce-brute result.png
• Run unzip Tran on all JPEG images. This tool can perform non-destructive operations such as the appearance of the image at the same time, it can also be used to optimize and clear the comments in the image and other useless information (such as EXIF information ):
  Unzip tran-copy none-optimize-perfect src.jpg dest.jpg

30,Optimize CSS spirite

• Arrange your images horizontally in spirite, and vertical arrangement will slightly increase the file size;
• The combination of closer colors in spirite can reduce the number of colors, ideally less than 256 colors for the png8 format;
• It is easy to move. Do not leave a large gap between spirite images. Although this will not increase the file size, it requires less memory for the user agent to decompress the image into a pixel map. 10 thousand x 1 million is pixels while X is pixels.

31,Do not scale the image in HTML
Do not use an image that is larger than the actual size to set the length and width in HTML. If you need:

Your image (mycat.jpg) should be X pixels rather than a x pixel image.

32,Favicon. ICO is small and can be cached

Favicon. ICO is an image file located in the root directory of the server. It must exist, because even if you don't care whether it is useful or not, the browser will send a request to it, so it is best not to return
Count: 404 Not
Found response. Because it is on the same server, coockie is sent every time it is requested. This image file also affects the download sequence. For example, when you
When an additional file is requested in onload, favicon downloads the additional content before it is loaded.
Therefore, to reduce the disadvantages of favicon. ICO, you must:

• The file size should be as small as possible, preferably less than 1 K
• Set the expires File Header for the file as appropriate (that is, when you do not want to change favicon. ICO again, because it cannot be renamed when you change the file. You can safely set the expires file header to the next few months. You can check the last time that favicon. ICO was edited.

ImageMagick can help you create a small favicon.

33,Keep a single content smaller than 25 KB
This restriction is mainly because the iPhone cannot cache files larger than 25 kb. Note that the size after decompression is used. Since gizp compression alone does not meet requirements, it is very important to streamline files.
For more information, see the file "Performance Research, Part 5: iPhone cacheability-making it stick" in Wayne Shea and tenni Theurer ".

34, package components into composite text
package the page content into composite text as an email with multiple attachments, it allows you to obtain multiple components in an HTTP request (remember: HTTP requests are a luxury ). When using this rule, you must first determine whether the user agent is supported (not supported by the iPhone ).