Website performance: Graphics and Coockie and optimization of mobile applications

In the previous sections we talked about improving content, servers, JavaScript, and CSS in the site's performance. In addition, pictures and Coockie are also an essential part of our web site, and with the popularity of mobile devices, the optimization of mobile applications is also very important. This mainly includes:
Coockie:

1. Reduce cookie Size
2. Use no Coockie domain name for page content

Image:

1. Optimizing images
2. Optimize CSS Spirite
3. Do not scale images in HTML
4. Favicon.ico to be small and cacheable

Mobile Applications:

1. Keep a single content less than 25K
2. Package components into composite text

27, reduce the volume of cookies

HTTP Coockie can be used for a variety of purposes, such as authorization authentication and personalization. The information within the Coockie is communicated between the Web server and the browser through the HTTP file header. So it is important to keep Coockie as small as possible to reduce the user's response time.
For more information you can view the article "when the Cookie crumbles" Tenni theurer and Patty Chi. These studies mainly include:

• Remove unnecessary coockie
• minimize coockie size To minimize user response
• Note Setting the Coockie on the adaptive level of the domain name so that the subdomain is not affected
• set Reasonable The Expiration time. Early expire time and not too early to clear the Coockie, will improve the user's response time.

28, use a Coockie domain name for page content
      The server does not use any of these coockie when the browser requests a static picture and sends a coockie in the request. So they are just network transmissions created by some negative factors. All you should be sure that a request for static content is a Coockie request. Create a subdomain and use it to store all 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 the www.example.org but at the top-level domain example.org set the Coockie, then all requests for static.example.org contain Coockie. In this case, you can again buy a new domain name to exist static content, and to keep this domain name is not coockie. Yahoo! use is Ymig.com,youtube use is Ytimg.com,amazon use is images-anazon.com and so on. Another benefit of
      using static content with Coockie domain names is that some agents (servers) may refuse to cache content requests for Coockie. A related suggestion is that if you want to make sure that you should use example.org or www.example.org as your homepage, you have to take into account the impact of Coockie. Ignoring the WWW will make you have no choice but to set Coockie to *.example.org (* is a generic domain name resolution, representing all the child domain translator Dudo notes), so for performance reasons it is best to use a subdomain with WWW and set coockie on it.

29, optimizing images
      Designers finish designing the page, Do not rush to upload them to the Web server, there are a few things to do here:

• You can check to see if the number of image colors in your GIF is the same as the palette size. Using the following command line in ImageMagick is easy to check:
  Identify-verbose Image.gif
  If you find that there are only 4 colors in the picture, and the 256 color slots that appear in the palette, then the image has a compressed space.
• Try converting the GIF format to PNG format to see if it saves space. In most cases, it can be compressed. Because of the limited browser support, designers are often less than happy to use PNG format pictures, but this is a thing of the past. There is only one problem with alpha-channel translucency in the true Color PNG format, but again, GIF is not a true color format and does not support translucent. As a result gif can do, PNG (PNG8) also can do (except animation). The following simple command can safely convert the GIF format to PNG format:
  Convert Image.gif image.png
  "What we're saying is: Give PNG a chance to do it!" ”
• Run Pngcrush (or other PNG optimization tools) on all PNG pictures. For example:
  pngcrush image.png-rem alla-reduce-brute result.png
• Run Jpegtran on all JPEG pictures. This tool can do no harm to the jagged appearance in the picture, and it can also be used to optimize and clear the annotations in the picture and other unwanted information (such as EXIF information):
  jpegtran-copy none-optimize-perfect src.jpg dest.jpg

30. Optimize CSS Spirite

• Arrange your picture horizontally in the spirite, and the vertical arrangement will slightly increase the file size;
• In the spirite, the combination of the color is lower, the ideal condition is lower than 256 color in order to apply the PNG8 format;
• Easy to move, do not leave a large gap in the middle of the spirite image. This is unlikely to increase the size of the file but it requires less memory for the user agent to extract the image into a pixel map. 100x100 's picture is 10,000 pixels, and 1000x1000 is 1 million pixels.

31, do not scale the image in the HTML

Do not use a larger picture than you actually need to set the width in HTML. If you need to:

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

32, Favicon.ico to small and can be cached
Favicon.ico is a picture file located in the root directory of the server. It must exist, because even if you do not care if it is useful, the browser will make a request to it, so it is best not to return a 404 Not Found response. Because it is on the same server, it is sent once each time the Coockie is requested. This image file also affects the download order, for example, when you request additional files in the onload in IE, favicon downloads the extra content before it is loaded.
Therefore, in order to reduce the disadvantages brought by Favicon.ico, we should:

• The file is as small as possible, preferably less than 1K
• Set the expires file header for it at the right time (that is, when you don't want to change the favicon.ico, because you can't rename it when you replace the new file). You can safely set the expires file header to the next few months. You can make a judgment by checking the current Favicon.ico's last editing time.

ImageMagick can help you create a small favicon.

33, keep a 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 of the uncompressed solution. Since simple GIZP compression may not be required, it is important to streamline files.
For more information, please refer to the Tenni theurer file "performance, part 5:iphone cacheability-making it Stick".

34, packaging components into composite text
Packaging the content of the page into composite text is like an email with multiple attachments, which allows you to get multiple components in an HTTP request (remember that HTTP requests are extravagant). When you use this rule, you first need to determine whether the user agent is supported (not supported by the iphone).