Front-end performance optimization checklist:

Front-end optimization term The optimized content note
The first screen First screen optimized to0.5 2 s, front-end optimization preferred. Optimize the cut point, target < 2S
content Images, JS, Script, Flash and other elements are the main components of pages and applications, and also the focus of front-end optimization. Too many web elements
request The number of page elements, the number of loaded files, and the size of the page determine the load time and efficiency of the page. Optimize and circumvent requests. Number and resolution of domain names
CSS Page style, animation implementation, special effects implementation, determine the appearance of the page and interaction. Static page layout
JavaScript JS serial loading and other particularities, is one of the main reasons affecting page performance, and more important, regardless of size, logic, quantity need to be strictly controlled. Performance killer
The picture More than 60% of the requests and sizes on a page are made up of images, which determine how fast or slow a page loads. Cost optimization

First screen optimization principles

Above the fold: The name given to the front page of a newspaper, originally referring to the page that remains visible after the paper is folded. The Web only sees all the information the user sees after the site loads without scrolling through the screen.

  1. First screen minimization: keep the HTML on the first screen as small as possible, control the number of DOM nodes, requests and external links, and display the visual area as soon as possible.
  2. Element optimization Optimizes the performance and structure of elements that fall within the first screen, including base pages, element requests, images, JS, whether to call third party content, hierarchy, etc.
  3. Static page The first screen contains the basic page time (first request), the total DNS resolution time of elements in the screen, connection establishment time, SSL handshake time, request sending time, redirection time, content download time, etc.
  4. Base page optimizations are stored as static pages, and user-related data, such as login information, relies on Ajax. By default, the user is not logged in. The user data is asynchronously obtained and updated.
  5. The focus of first-screen advertisement optimization is to reduce the download times of ADVERTISEMENT JS, reduce the status reporting times and avoid IFrame. At the same time, the processing script is placed at the bottom of the page, and the loading order of the advertisement is modified to avoid affecting the page display.
  6. The front screen loads the hidden TAB page on demand, using asynchronous loading mode, only pulling when the user is looking at the content.
  7. Merge materials Independently Compress and merge source files released on behalf of the company to reduce the number of files and minimize the number of authorization requests.
  8. Statistical code optimizationStatistical codes for user behavior are as follows:CNZZ, Baidu statistics, etc.), to remove the redundancy, unified on the first screen after loading.