Last time, we talked about the performance optimization strategy. According to the hierarchical architecture of the website, it can be roughly divided into three categories: Web front-end performance optimization, application server performance optimization, and storage server performance optimization

Generally speaking, the Web front-end is the part before the application server processes, including browser rendering, loading, front-end view model, picture and video resources, CDN service, etc. The main optimization method is to optimize the browser access rendering process, use reverse proxy, use CDN service, etc

Browser access to render optimization

Reduce the number of HTTP requests

HTTP is a stateless application layer protocol. Each HTTP request establishes a new communication link, and on the server side, each HTTP connection starts a separate thread to process the request, which incurs additional overhead

The main method is to merge and compress CSS, JavaScript, image files, and merge the required CSS, JavaScript, and image resources to reduce the number of connection requests

At the same time, HTTP keep-alive is used for connection reuse to reduce the number of ESTABLISHED HTTP connections and improve access performance

Enable compression

File compression is performed on the server to reduce the amount of data during communication transmission

For text files, the compression rate can reach more than 80%, so enabling Gzip compression on the server is a good choice. However, enabling gZIP compression also brings extra overhead to the server, so it needs to be analyzed on a case-by-case basis

CSS, JavaScript code optimization

  • CSS code optimization:

    • Try to use external styles and load them at the top of the page so that you can render in a timely manner and avoid blocking the rendering with certain styles

    • Compressing and merging CSS files reduces the amount of data to be transmitted and the number of connections to be requested

  • JavaScript code optimization:

    • Because JavaScript code is parsed as it loads, parsing blocks browser rendering, loading JavaScript code at the bottom of the page

    • The same compression merge JavaScript files, as far as possible to simplify the file, reduce the amount of communication transmission data and request connections

    • Write high performance JavaScript code

Using browser caching

Generally speaking, static resources that do not change often in a website are updated at a low frequency. Therefore, caching these resources in the browser can improve performance

Set the browser Cache time by setting cache-Control and Expires attributes in the HTTP header

There are also caches for Etags and Opcode, depending on your situation

The CDN to accelerate

The essence of CDN also belongs to cache, content distribution network, which caches data near users so that users can obtain data as soon as possible

For CDN are deployed in the network operator’s room, the operator and provide network services to customers at the same time, so the user request routing will reach the CDN server first, if there is a request of resources, return directly, the shortest path returns a response, speed up the user access speed, and can also provide room reduce stress

CDN is generally used to cache static resources, CSS, Script scripts, static pages, pictures and so on. These contents have a low frequency of modification but a high frequency of access requests. Therefore, CDN can greatly improve access speed

The reverse proxy

The traditional proxy server is when you can not request the requested resources, the proxy server for you to request, you know who the final server you request, a typical example is VPN, through the proxy server to request the world outside the wall

The reverse proxy is when you request an address, you request a reverse proxy server, and then the reverse proxy server requests other servers to get the content, and you don’t know which server you’re going to get the data from

The reverse proxy Web server receives the HTTP request, forwards the request, retrives the content and returns it to you. You only know that the reverse proxy server gave you the data, not which server the data source ultimately came from

The reverse proxy server protects all Internet requests, creating a barrier between Web servers

In addition to security, static resources can be cached on the reverse proxy server to improve access speed and reduce the load on the application server

Of course, some dynamic resource can be cached in a proxy server, such as hot entry, posts, blogs, etc., these resources may request quantity is very, very big, if every time go again process can cause a lot of pressure, at the same time, when the dynamic content changes, will inform the reverse proxy server cache invalidation. The proxy server recaches dynamic resources

In addition, the reverse proxy server can also be used as a load balancer to build a server cluster to improve the overall processing capacity of the system and improve the capacity of the server to handle high concurrency

PS: Using Ajax is also a great way to improve the user experience, but Ajax is not SEO friendly, so you should consider using Ajax where you need TO use SEO

Okay, so that’s it for web front-end optimization, and next time I’ll write about application server performance optimization, storage server performance optimization

Technical architecture of large Websites (1) Technical architecture of large Websites (2) : Architectural Elements and High-performance Architecture Technical architecture of large websites (3) : Optimization of WEB front-end performance