Best Practices for Web Program Optimization: Cookies, pictures, and mobile apps

The "Editor's note" from Yahoo! 's exceptional Performance Team has brought us a best-practice solution for improving Web performance. To this end, they conducted a series of experiments, developed a variety of tools, wrote a large number of articles and blogs and participated in the discussion at various conferences. The core of best practice is to improve website performance. Through various efforts, xcetional Performance Team summed up a series of ways to improve the speed of the site. Can be divided into 7 major categories 34. Includes seven parts, including content, servers, cookies, CSS, JavaScript, pictures, mobile apps, and more.

Extended reading:

• Best Practices for Web program optimization (website content)
• Best Practices for Web Program Optimization (server article)
• Best Practices for Web Program optimization: JavaScript and CSS Articles

This article is for the content of cookies, pictures and mobile apps.

Images and Coockie are also an almost indispensable part of our site, and as mobile devices are popular, optimization for mobile applications is also important. This mainly includes the following sections.

Coockie:

1. Reduce cookie Volume

2. Use no Coockie domain name for page content

Image:

3. Optimize the image

4. Optimize CSS Spirite

5. Do not scale the image in HTML

6. Favicon.ico is small and cacheable

Mobile apps:

7. Keep single content less than 25K

8. Packaging components into compound text

1. Reduce cookie Volume

HTTP Coockie can be used for a variety of purposes, such as permission authentication and personalization. The information inside the Coockie is communicated between the Web server and the browser via the HTTP file header. It is therefore important to keep the coockie as small as possible to reduce the user's response time.

For more information, you can view Tenni Theurer and Patty Chi's article "when the Cookie crumbles".

The main findings of this study include:

• Removal of unnecessary coockie

• Minimize the impact on user response by minimizing the Coockie volume

• Be careful to set Coockie on the domain name of the adaptive level so that the subdomain is not affected

• Set a reasonable expiration time. Expire time earlier and not removing Coockie prematurely will improve user response time.

2. Use no Coockie domain name for page content

When the browser requests a static picture and sends Coockie in the request, the server does not use any of these coockie. So they just create network transmissions because of some negative factors. All you should be sure is that requests for static content are non-Coockie requests. Create a subdomain and use it to store all of the static content.

If your domain name is www.example.org, you can have static content on the static.example.org. However, if you are not on www.example.org but have set up Coockie on the top-level domain example.org, all requests for static.example.org include Coockie. In this case, you can re-purchase a new domain name to have static content, and to keep the domain name is not coockie. Yahoo! uses Ymig.com,youtube to use Ytimg.com,amazon images-anazon.com and so on.

Another benefit of having static content with a Coockie domain name is that some proxies (servers) may deny caching of Coockie content requests. A related suggestion is that if you want to be sure that you should use example.org or www.example.org as your home page, you have to take into account the impact of Coockie. Ignore the WWW will make you in addition to the Coockie set to *.example.org (* is the pan domain name resolution, representing all sub-domain translator Dudo Note) There is no other choice, so for performance reasons it is best to use a subdomain with WWW and set coockie on it.

3. Optimize the image

After the designers have finished designing the pages, don't rush to upload them to the Web server, there are a few things to do:

• You can check whether the number of image colors in your GIF image matches the palette specifications. It is easy to check using the following command line in ImageMagick:

Identify-verbose Image.gif

If you find that only 4 colors are used in the image, and the 256-color color slots are displayed in the palette, then this picture has a compressed space.

• Try converting the GIF format to PNG format to see if space is saved. In most cases, it can be compressed. Because of the limited browser support, designers are often reluctant to use PNG-formatted images, but this is a thing of the past. There is only one problem with the alpha channel translucency problem in the true Color PNG format, but again, GIF is not a true color format and does not support translucency. So GIF can do that, and PNG (PNG8) can do the same (except animations). 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 play!" "

• Run Pngcrush (or other PNG optimization tools) on all PNG images. For example:

Pngcrush Image.png-rem Alla-reduce-brute Result.png

• Run Jpegtran on all JPEG images. This tool can do lossless operations on the appearance of aliasing in a picture, and it can also be used to optimize and erase annotations and other useless information (such as EXIF information) in a picture:

Jpegtran-copy None-optimize-perfect src.jpg dest.jpg

4. Optimize CSS Spirite

• Arrange your images horizontally in the spirite, and the vertical arrangement will slightly increase the file size;

Spirite The combination of the color closer together can reduce the number of colors, the ideal condition is less than 256 colors in order to apply the PNG8 format;

• Easy to move, do not leave a large gap in the middle of the spirite image. While this is unlikely to increase the file size, it requires less memory for the user agent to decompress the image into a pixel map.

100x100 's picture is 10,000 pixels, while 1000x1000 is 1 million pixels.

5. Do not scale the image in HTML

Don't use a larger picture than you actually need to set the length and width in HTML. If you need:

then your picture (mycat.jpg) should be 100x100 pixels instead of reducing the use of a 500x500 pixel image.

6, Favicon.ico to be small and cacheable

Favicon.ico is a picture file located in the root directory of the server. It must exist, because even if you don't care if it's useful, the browser makes a request for it, so it's best not to return a 404 Not Found response. Because it is on the same server, it is sent once every time Coockie is requested. This image file also affects the download order, for example, in IE when you request additional files in onload, Favicon will download the additional content before it is loaded.

Therefore, in order to reduce the favicon.ico caused by the drawbacks, to do:

• File as small as possible, preferably less than 1K

• Set the Expires file header for a new file when it is appropriate (that is, you do not want to rename it when you change the Favicon.ico). You can safely set the Expires file header to the next few months. You can make a judgment by checking the last editing time of the current favicon.ico.

ImageMagick can help you create a small favicon.

7. Keep single content less than 25K

This limitation is mainly because the iphone cannot cache files larger than 25K. Note that this refers to the size after decompression. Because simple GIZP compression may not be required, it is important to streamline files. For more information, see the files for Wayne Shea and Tenni Theurer, "performance Research,part 5:iphone cacheability–making it Stick".

8. Packaging components into compound text

Wrapping page content into compound text is like an Email with multiple attachments, which enables you to get multiple components in an HTTP request (remember: HTTP requests are extravagant). When you use this rule, first make sure that the user

Whether the agent is supported (IPhone is not supported).

Best Practices for Web Program Optimization: Cookies, images, and mobile apps