When we obtain resources, the browser needs to send HTTP requests to notify the server, so we need to build TCP connections. If each request corresponds to a TCP connection, it is not cost-effective in terms of server and time. Therefore, the first point is to reuse TCP connections
- Enable keep-alive TCP connection multiplexing
If the server is sending us a lot of files, which means a lot of files, it’s a good idea for the server to compress the files and send them to the browser, and then unzip them
- Gzip is enabled on the server
When the browser gets the file, it renders it, parses the HTML, CSS, JS, and then builds the rendering tree, and then draws it, so we have to make sure that the CSS and JS files are in the order of the HTML, make sure that the CSS is loaded first, then the HTML is parsed, and then the JS is executed, so that the white screen time is reduced, It also prevents blocking, and if js comes first, remember to defer
- Ensure the loading sequence of CSS and JS files and speed up the rendering of the first screen
There must be a lot of components and static resources on the page. If you load them all at the beginning, the rendering speed will be slow, and the components and images that the user does not see and use will be lazily loaded
- Lazy loading of components and images
Preload the next page of the page-turning component to prevent the user from clicking and getting stuck
- Preloading a specific resource
The second time we visit a website, it is much faster because some files have HTTP caching, such as those with cache-control max-age, so we don’t need to request again the next time we visit the site
Cache-control takes precedence over Expires
- For resources that do not change often, set up strong caching to reduce unnecessary requests
There is a need to update very often resources, such as the CSS file, if we later released a new CSS file, so how to update, a good way is to set up consultative cache, in response to the resources for the first time, the server will give resources coupled with a unique identifier, would be a bunch of repetitive characters, each request header will bring the corresponding field, If it matches the latest identifier, the response is the new resource and identifier, otherwise 304 is returned and the browser uses the local cache, but if the strong cache hits, this step does not exist
- For resources that change frequently, set negotiation cache to update resources efficiently
There are two ways to load CSS files: link and @import. @import can only import stylesheets, while Link can also define RSS and REL. Link synchronously loads CSS, while @import requests CSS, which will prolong the construction time of the rendering tree. So use @import less
- Use @import less to introduce CSS
conclusion
Start GZIP on the server, reuse TCP connection, rationally use cache to reduce HTTP requests, use lazy loading or preloading processing for components, it’s better not to put JS files in the header, and add defer if you have to put them. It’s better to use Link to introduce CSS