• notice
  • Congratulations on the launch of the Sought Tech site

Front-end performance optimization guidelines

What is the purpose of front-end optimization?

From the user's point of view, optimization can make pages load faster, respond to user operations in a more timely manner, and provide users with a more user-friendly experience.

From the perspective of service providers, optimization can reduce the number of page requests or reduce the bandwidth occupied by requests, which can save considerable resources.

In conclusion, proper optimization can not only improve the user experience of the site but also save considerable resource utilization.

1. Content section

  • Minimize HTTP requests (each request needs to establish a tcp connection, and the establishment of a tcp connection requires a three-way handshake, which requires resource consumption and time consumption)

  • Reduce DNS lookups

  • Avoid jumps (avoid redirects)

  • Cache Ajax

  • lazy loading

  • early loading

  • Reduce the number of DOM elements

  • Divide page content by domain name

  • Minimize the number of frames

  • Avoid 404 errors

  1. Merging files is a way to reduce HTTP requests by putting all scripts into one file.

  2. CSS Sprites are an effective way to reduce image requests.

  3. Caching DNS lookups can improve page performance.

  4. Jumps are implemented using 301 and 302 codes (but keep in mind that jumps degrade the user experience). Each redirection of the page will prolong the waiting delay for the page content to return. A redirection takes about 200 milliseconds of time overhead (no caching). In order to ensure that users can see the page content as soon as possible, page redirection should be avoided as much as possible. ==Add a backslash to the end of the URL==: The meaning of the backslash is whether the url points to a file or a directory, for example: https://github.com/xuexueq/blog points to the root directory of the website The next file named blog; https://github.com/xuexueq/blog/ points to a directory named blog in the root directory of the website. Adding a backslash at the end of the URL can speed up the loading of the website, because adding a backslash at the end of the URL will directly inform the browser that it is now pointing to a directory, and the browser can directly read the directory such as index or home, etc. Default file. When the backslash is not added, the browser will first try to read a file in the root directory. If there is no such file, it will look for a directory with the same name as the file, and finally read the default file in the directory. Adding backslashes like this will make your site load faster. For the server where the website is located, if the URL does not add a backslash, it will add a process to the server to find out whether there is a file with the same name, which will obviously increase the burden on the server. Of course, this impact will not be great, but if your website directly If the traffic is large, adding a backslash at the end of the url can greatly reduce the burden on the server.

  5. To improve performance, it is important to optimize Ajax responses. The most important way to improve Ajxa performance is to make responses cacheable.

  6. You can take a close look at your web page and ask yourself "What content must be loaded first for the page to render? What content and structure can be loaded later? Preloading and postloading may seem like opposites, but in fact preloading Loading is to achieve another goal. Preloading is to request page content (such as images, style sheets, and scripts) that may be used in the future when the browser is idle. Using this method, when the user wants to visit the next page, Most of the content in the page has already been loaded into the cache, so it can greatly improve the access speed.

  7. A complex page means more data needs to be downloaded, but also means slower JavaScript traversal of the DOM. For example, looping through 500 and 5000 DOM elements is definitely not the same when you add an event handler.

  8. Dividing page content into sections allows you to maximize parallel downloads. Use static resource sub-domain storage to increase the number of parallel downloads. The number of parallel downloads that browsers request files from the same domain name at the same time is limited, so hosts of multiple domain names can be used to store different static resources and increase page loading. The number of parallel downloads of resources at the same time shortens the time for page resource loading. JavaScript, CSS, and image files are usually stored separately under multiple domain names.

  9. To minimize the number of iframes, the ifrmae element can insert a new HTML document within the parent document. It's important to understand how an iframe works so that you can use it more effectively.

  10. HTTP request time consumption is very large, so using HTTP request to get a useless response (such as 404 page not found) is completely unnecessary, it will only degrade the user experience without any benefit.

2. Server part

  • Use a Content Delivery Network

  • Specify Expires or Cache-Control for the header

  • Gzip compressed file content

  • Configure ETag

  • Flush the output buffer as early as possible

  • Use GET to complete AJAX requests

  • Avoid empty image sources

Utilize the CDN network to speed up the response download speed of repeated static resource files in the same geographic area, and shorten the resource request time.

3. CSS section

  • Put the style sheet at the top

  • Avoid CSS expressions()

  • use ... to replace@import

  • Avoid using filters

  • try to avoid using <table>,<iframe>

  1. Avoid using CSS import references to load CSS: @import in CSS can import styles from another style file, but this usage should be avoided because it increases the length of the critical path for CSS resource loading. CSS styles with @import require Serial parsing in CSS file to@importThe additional CSS files will be loaded only when the CSS rendering is completed, which greatly delays the completion time of CSS rendering.

  2. Try to avoid adding wildcards at the end of selectors: The process of CSS parsing and matching to the render tree is reversed from right to left, and adding wildcards at the end of selectors will at least double the amount of computation.

  3. <table>The content rendering is to generate all the DOM rendering tree of the table and draw it to the page at one time, so it is very performance-intensive when rendering a long table, you should try to avoid using it, you can consider using the list element

    • replace. Try to use an asynchronous method to dynamically add iframes, because the download process of the resources in the iframe will block the download of the static resources of the parent page and the parsing of CSS and HTML DOM.

4. JavaScript part

  • Place scripts at the bottom of the page (async JavaScript resources are recommended)

  • Use external JavaScript and CSS

  • Cut JavaScript and CSS

  • Eliminate duplicate scripts

  • Reduce DOM access

  • Develop smart event handlers

  1. Asynchronous JavaScript resources do not block document parsing, so allow the page to be rendered first in the browser, and the execution of loaded scripts to be delayed. For example, JavaScript references can be set to defer or async, or they can be implemented using the modular loading mechanism. When using async, the process of loading and rendering subsequent document elements is parallel to the loading and execution of main.js. When using defer, the process of loading subsequent document elements and the loading of main.js are parallel, but the execution of main.js will not start until all elements of the page are parsed.

  2. Referencing external resources in HTML files can effectively take advantage of the browser's static resource cache;

  3. Eliminate rendering-blocking CSS and JavaScript: For CSS or JavaScript files that take too long to load in the page, reasonable splitting or delaying of loading is required to ensure that resources in the critical path can be loaded quickly.

  4. Reduce the number and depth of DOM elements: The more tag elements in HTML, the deeper the level of tags, the longer it takes for the browser to parse the DOM and draw it into the browser, so keep the DOM elements as simple and low-level as possible .

  5. Minimize the use of JS animations: JS directly manipulates the DOM, which can easily cause page reflow

5. Cookie section (reduce cookie size and cookie isolation)

  • Reduce cookie size

  • Use a cookie-free domain name for page content

  1. Cookies are communicated between web servers and browsers through HTTP headers. Remove unnecessary cookies, make the size of cookies as small as possible to reduce the impact on user response, pay attention to setting cookies on adaptive-level domain names so that subdomains are not affected; set a reasonable expiration time. Expire time early and not clearing cookies too early will improve user response time.

  2. Use a non-coockie domain name for page content. When the browser requests a static image and sends a cookie in the request, the server will not use any of these cookies. So they are just network transfers created because of some negative factor. All you should make sure that requests for static content are coockie-free requests. Create a subdomain and use it to host all static content.

6. Image section

  • Optimize images

  • Optimize CSS Spirite

  • Don't scale images in HTML

  • favicon.ico is small and cacheable

Directly zooming the image in HTML will cause the page content to be rearranged and redrawn, which may cause other operations in the page to freeze. Therefore, it is necessary to minimize direct image zooming in the page.

7. Mobile Section

  • Keep a single content smaller than 25K

  • Pack components into compound text

  • The first screen data is requested in advance to avoid requesting data after the JavaScript file is loaded

  • Above-the-fold loading and on-demand loading, scrolling loading of non-folding content, to ensure that the content above the fold is minimized

  • meta dns prefetch Set DNS pre-resolution

  • Resource preload

In order to further improve the page loading speed, you can consider requesting the data of the page as early as possible to avoid requesting data after the JavaScript is loaded. Usually, the data request is the longest part of the critical path in page content rendering, and it cannot be parallelized. Therefore, if the data request can be advanced, the rendering completion time of the page content can be greatly shortened.


Technical otaku

Sought technology together

Related Topic


Leave a Reply