Web Performance optimization

Common Methods

Compress source and picture
JavaScript File Source code: can be used to confuse compression, CSS file source code for ordinary compression, JPG images can be compressed according to the specific quality of 50% to 70%,png can use some open source compression software to compress, such as 24 color into 8 colors, remove some PNG format information.
Choose the appropriate picture format: If the image color more than the use of JPG format, if the number of pictures with less color to use the PNG format, if the server-side to determine the browser support WEBP, then use the WEBP format and SVG format.
Merging static resources
Includes CSS, JavaScript, and small images to reduce HTTP requests.
Turn on server-side gzip compression
This is very effective for text resources, but not so much compression ratio for picture resources.
Use a CDN or some public libraries to use static resource addresses provided by third parties
　　such as jquery, Normalize.css. Increase concurrent downloads On the one hand, and share caches with other sites on the other.
Extend static resource cache time

Visitors who visit the site frequently will be able to access it more quickly. However, this is done by modifying the file name to ensure that the user pulls up the latest content when the resource is updated.

CSS references are placed on the page header and JavaScript references are placed at the bottom of the page

This does not block page rendering, which makes the page appear blank for a long time.

performance optimization for front-end engineers

The basic optimization methods are:

• Minimize the number of HTTP requests under the same domain
• As well as minimizing the volume of each resource

Browsers often limit the number of concurrent connections that originate on the same domain name. The design rules for E6/7 and Firefox2 are that only two concurrent connections can be initiated on a single domain. The new browser is set to a general limit of 4 to 8.

Placing static resources under a non-primary domain, in addition to increasing browser concurrency, has the advantage of reducing unnecessary cookie data that is carried in HTTP requests. Cookies are data that some websites store in the user's browser in order to identify the user's identity. The scope of the cookie is the entire domain name, which means that if a cookie is stored under the google.com Domain name, all HTTP request headers under the google.com domain name will be brought with cookie data.

If Google puts all its resources under Google.com, all requests for resources will be brought with cookie data. This is unnecessary for static resources because it has an impact on bandwidth and link speed.
The optimizations that front-end engineers often do are to merge resources under the same domain name, such as merging multiple CSS into a single CSS, or combining them into CSS maps, and some optimizations that eliminate unnecessary HTTP requests, such as embedding small CSS, embedding small JavaScript, setting up caches, and reduce redirects. These practices are different, but if you understand the process of HTTP requests, you know that the ultimate goal of these optimization methods is to maximize the use of a limited number of requests.
　　A basic topic is "What are the common picture formats and what are their usage scenarios". The sensitivity of the image reflects the engineers ' relentless pursuit of bandwidth and speed. For larger text resources, gzip compression must be turned on.
The request for a CSS resource takes time (two details):
This CSS resource request volume is 36.4KB (this is gzip compressed volume), after decompression, the CSS content is actually 263KB, you can calculate the volume after compression is the original 13.8%.
The establishment of the entire connection took 30% of the time, making the request to wait for the first byte reply to take 20% of the time, downloading the contents of the CSS resource took 50% of the time.

performance optimization for background engineers

The concern for HTTP is to have the server respond to requests as quickly as possible, and to reduce the cost of requests to the server
1, improve the server's request processing capacity : Apache through a modular design to adapt to a variety of environments, one of which is called the Multi-processing module (MPM), specifically to handle the situation of multiple requests. When Apache installs on different systems, it calls different default MPM, and we don't have to worry about specifics, just know that the default MPM on Unix is prefork. For optimization, we can change to worker mode.
The biggest difference between prefork and worker patterns is that a process in prefork maintains a connection, while a worker thread maintains a connection. So the prefork is more stable but the memory consumption is larger and the worker is less stable because many connected threads share a process, and when a thread crashes, the entire process and all the threads die together. However, the worker's memory usage is much lower than prefork, so it is suitable for use on servers with high HTTP requests.

Apache and Nginx:
In the case of high-connection concurrency, Nginx is a good substitute for Apache Server or supplement: On the one hand, Nginx is more lightweight, consumes less resources and memory, on the other hand, the Nginx processing request is asynchronous non-blocking, and Apache is blocking type, in high concurrency under the Nginx Keep low resources, lower consumption and high performance. -Due to the advantages of Apache and nginx, so often collocation is nginx processing front-end concurrency, Apache processing background requests. Rookie node. JS also uses event-based asynchronous non-blocking to process requests, so there is a natural advantage in handling high concurrent requests.
2, high-performance website key : Cache
In a Web site, its data flows from the server side to the browser side, where the cache can be used to optimize:

• Server cache
• Database Cache

Basic database query caching-enable MySQL query caching to increase speed and reduce system stress

MySQL does not turn on query caching by default, but we can set the query cache by modifying the My.ini in the MySQL installation directory. You can configure the buffer size, the buffer size of a single query, and so on according to the actual situation.

If you want to optimize the query performance and speed of your MySQL server, you can add these two items to your MySQL configuration:

1. Query_cache_size=size size refers to how much space is opened up for the query cache. The default is 0, which is to disable query caching.
2. Query_cache_type=option set the type of query cache, the optional values are the following three kinds.
   • 0: Set the type of query cache, the optional value has the following three kinds.
   • 1: All cached results are cached unless the query command starts with select S_no_cache.
   • 2: Query results are cached only for query commands starting with select Sql_cache.

-The problem is "cache hit rate is not high", so the first thing after configuring the cache is the query hit rate, if the hit rate is low, do not cache. A design principle of database query cache: Its cache invalidation design is very rough-guaranteed real-time can sacrifice hit rate??

　　Extending the Database Cache :memcached
Memcached, which is a high-performance distributed memory object caching system, is used to reduce database load. It improves the speed of dynamic, database-driven Web sites by caching data and objects in memory to reduce the number of times a database is read. Memcached can be used in conjunction with database query caching. Memcached's design principle is: Time expires, that is, only set the time to update the data, improve the hit rate, but it may be "not fresh."

Web Performance optimization