Website performance: Image and Cookie optimization and mobile application optimization

In the previous sections, we discussed aspects of improving website performance, such as content, servers, JavaScript, and CSS. In addition, pictures and cookies are also indispensable components of our website. In addition, with the popularity of mobile devices, optimization of mobile applications is also very important. This mainly includes:
Cookie:

Reduce the size of cookies and use cookie-free domains for page content
picture:

Optimize images Optimize CSS Spirite Don't scale images in HTML Keep favicon.ico small and cacheable
Mobile App:

Keep individual content less than 25K and package components into composite text
27. Reduce the size of cookies
HTTP cookies can be used for a variety of purposes, such as authentication and personalized identity. The information in the cookie is communicated between the web server and the browser through the HTTP file header. Therefore it is important to keep the cookie as small as possible to reduce the user's response time.
For more information, see Tenni Theurer and Patty Chi’s article “When the Cookie Crumbles.” The research mainly includes: removing unnecessary cookies, making the cookie size as small as possible to reduce the impact on user response, and setting cookies on domains at the adaptation level so that subdomains are not affected. Setting a reasonable expiration time. Expire earlier and do not clear cookies too early, both of which will improve user response time.
28. Use cookie-free domains for page content
When the browser requests a static image and sends a cookie in the request, the server does not make any use of the cookie. So they are just network transmissions created because of some negative factors. So you should make sure that requests for static content are cookieless requests. Create a subdomain and use it to store all static content.
If your domain is www.example.org, you can host static content at static.example.org. However, if you set the cookie on the top-level domain example.org instead of www.example.org, then all requests to static.example.org will include the cookie. In this case, you can purchase a new domain name to store static content and keep this domain name cookie-free. Yahoo! uses ymig.com, YouTube uses ytimg.com, Amazon uses images-anazon.com, and so on.
Another benefit of using a cookie-free domain for static content is that some proxies (servers) may refuse to cache cookie content requests. A related suggestion is that if you are trying to decide whether to use example.org or www.example.org as your homepage, you should consider the impact of cookies. Omitting the www leaves you with no choice but to set the cookie to *.example.org, so for performance reasons it is better to use a subdomain with www and set the cookie on it.
29. Optimize images
After the designer has finished designing the pages, don't rush to upload them to the web server. There are a few things to do here: You can check whether the number of image colors in your GIF image is consistent with the palette specifications. This is easily checked 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 color slots of 256 colors are displayed in the palette, then there is still room for compression of this image. Try converting your GIF to PNG to see if that saves space. In most cases it is compressible. Designers were often reluctant to use PNG images due to limited browser support, but that’s all in the past. The only problem now is 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 anything that GIF can do, PNG (PNG8) can do as well (except animation). The following simple command can safely convert GIF to PNG:
convert image.gif image.png
"What we're saying is: give PNG a chance!" Run pngcrush (or another PNG optimization tool) on all your PNG images. For example:
pngcrush image.png -rem alla -reduce -brute result.png Run jpegtran on all JPEG images. This tool can perform lossless operations on jagged edges in images. It can also be used to optimize and remove annotations and other useless information (such as EXIF information) in images:
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
30. Optimize CSS Spirite. Arrange your images horizontally in Spirite. Arranging them vertically will slightly increase the file size. Grouping close colors together in Spirite can reduce the number of colors. Ideally, it should be less than 256 colors to adapt to the PNG8 format. To facilitate movement, do not leave large gaps in the middle of the images in Spirite. This doesn't increase the file size much but it requires less memory for the user agent to decompress the image into a pixel map. A 100x100 image has 10,000 pixels, while a 1000x1000 image has 1 million pixels.
31. Don’t scale images in HTML

Don't use images that are larger than necessary just to set the width and height in HTML. If you need:
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
Then your image (mycat.jpg) should be 100x100 pixels instead of shrinking a 500x500 pixel image.
32. favicon.ico should be small and cacheable
favicon.ico is an image file located in the root directory of the server. It has to exist because the browser will request it even if you don't care whether it is useful or not, so it is best not to return a 404 Not Found response. Since it is on the same server, the cookie will be sent every time it is requested. This image file also affects the download order. For example, in IE when you request additional files in onload, the favicon will be downloaded before these additional contents are loaded.
Therefore, in order to reduce the disadvantages brought by favicon.ico, you should do the following: Make the file as small as possible, preferably less than 1K Set the Expires file header for it at an appropriate time (that is, when you do not plan to change favicon.ico again, because it cannot be renamed when replacing the new file). You can safely set the Expires header to several months in the future. You can tell by checking when the current favicon.ico was last edited.
Imagemagick can help you create small favicons.
33. Keep a single piece of content smaller than 25K
This limitation is mainly because the iPhone cannot cache files larger than 25K. Note that this refers to the decompressed size. Since simple GIF compression may not meet the requirements, it is very important to streamline the files.
For more information, see Wayne Shea and Tenni Theurer's paper "Performance Research, Part 5: iPhone Cacheability - Making it Stick".
34. Packing components into composite text
Packaging page content into composite text is like an email with multiple attachments. It enables you to obtain multiple components in one HTTP request (remember: HTTP requests are very luxurious). When you use this rule, first make sure the user agent supports it (iPhone doesn't).

<<: A brief discussion on the execution details of Mysql multi-table join query

>>: Detailed explanation of vue-router 4 usage examples

Recommend

MySQL performance comprehensive optimization method reference, from CPU, file system selection to mysql.cnf parameter optimization

This article summarizes some common MySQL optimiz...

Website performance: Image and Cookie optimization and mobile application optimization

In-depth analysis of MySQL indexes

Map the mouse position in CSS and control the page elements by moving the mouse (example code)

Vue custom v-has instruction, steps for button permission judgment

How to clear the cache after using keep-alive in vue

MySQL primary key naming strategy related

iframe adaptive size implementation code

Detailed discussion of memory and variable storage in JS

How to compile the Linux kernel

Understanding the MySQL query optimization process

MySQL limit performance analysis and optimization

Recommend

MySQL performance comprehensive optimization method reference, from CPU, file system selection to mysql.cnf parameter optimization

Docker View the Mount Directory Operation of the Container

MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure

Use CSS's clip-path property to display irregular graphics

Solution to 404 error when downloading apk file from IIS server

How to insert pictures into HTML pages and add map index examples

Nginx configuration to achieve multiple server load balancing

Summary of the switching problem and solution of installing multiple JDK versions in win10 64-bit system

Solution to "No such file or directory" in locale after installing glibc-2.14 in CentOS6.5

5 Simple XHTML Web Forms for Web Design

Detailed explanation of the use of the <meta> tag in HTML

Full process record of Nginx reverse proxy configuration

How to configure two or more sites using Apache Web server

A brief introduction to web2.0 products and functions

MySQL 8.0.12 Installation and Configuration Tutorial