1. Minimize HTTP Requests Reduce HTTP requests Pictures, css, script, flash, etc. will increase the number of http requests. Reducing the number of these elements can reduce the response time. Write multiple JS and CSS into one file if possible. It is also a bad practice to write images directly into the page. You should write them into CSS and use CSS
sprites Use the background to position the small pictures after piecing them together. 2. Use a Content Delivery Network Using CDN technology CDN is indeed a good thing, but the server provider generally charges a fee for this service. 3.Add an Expires or a Cache-Control Header Set header file expiration or static cache The browser will use caching to reduce the number of http requests to speed up the page loading time. If the page header adds a very With a long expiration time, the browser will keep caching the elements in the page. However, if something on the page changes, the name will need to be changed, otherwise the client will not actively refresh. It depends on your own measurement~ This can be achieved by modifying the .htaccess file. 4.Gzip Components Gzip Compression Gzip format is a very common compression technology. Almost all browsers have the ability to decompress the Gzip format, and the compression ratio it can compress is very large. The general compression rate 85% 5. Put Stylesheets at the Top Put CSS at the top so that visitors can see the complete style of the website as early as possible. 6. Put Scripts at the Bottom Put JS at the bottom After the website is rendered, you can set the functions. Of course, these JS must not affect the content performance during your loading process. 7.Avoid CSS Expressions CSS expressions are terrible. This thing that is only supported by IE requires a very large amount of calculations when executed. It will be recalculated every time you move the mouse. 8.Make JavaScript and CSS External Link JS and CSS I talked about caching earlier. For some more common JS and CSS, we can use external links. For example, I use external links from Google. For the linked Jquery file, if my visitor has downloaded and cached this file when browsing other websites that use this external link file, then he does not need to download it when browsing my website! ~ 9.Reduce DNS Lookups Reduce DNS lookups It seems to be to reduce the website’s call of external resources. My Google analysis and picasa’s external link pictures are included in it. 10.Minify JavaScript and CSS Reduce the size of JS and CSS There are skills in writing JS and CSS. Use the least code to achieve the same function, reduce white space, enhance logic, and use abbreviations. Wait, of course there are many tools that can help you achieve this. 11. Avoid Redirects Avoid redirects When writing the link, although "http://www.today-s-ooxx.
com" and "http://www.today-s-ooxx.
com/" only has one final "/" difference, but the results are different. The server needs to spend time redirecting the former to the latter and then jump. You need to pay attention to this. You can also use Alias or mod_rewrite in Apache. Or use DirectorySlash to solve it. 12. Remove Duplicate Scripts The browser will not recognize and ignore the code that is called repeatedly, but will calculate it again, which is of course a big waste. 13. Configure ETags Configure ETags I don’t know what happened, anyway, I deleted it in . htaccess 14. Make Ajax Cacheable Cache Ajax Before the browser receives new data, the old data is cached, which can better improve efficiency 15. Flush the Buffer Early Release the buffer as early as possible When the user makes a page request, the server The end needs to spend 200 to 500 milliseconds to assemble the HTML and write it between the head and the body to release the buffer. This way, the file header can be sent first and then the file content can be sent to improve efficiency 16. Use GET. for AJAX Requests Use GET method to make AJAX requests The Get method only interacts with the server once (sending data), while Post requires two times (sending headers and then sending data). 17. Post-load Components Delay Loading components Load the necessary components first to initialize the page, and then load others, YUI
Image Loader
is a good example. 18. Preload components Preload components Loading things that may be used later does not conflict with lazy loading. Its purpose is to provide a faster response to subsequent requests, see CSS on the Google homepage sprites application. 19. Reduce the Number of DOM Elements Reduce the number of DOM elements Complex page structure means longer download and response time, more reasonable and efficient use of tags to structure the page, which is a good front-end Prerequisites. 20. Split Components Across Domains Multiple sources of page components can increase your parallel downloads, but be careful not to have too many. More than 2-4 domain names will cause the above mentioned DNS lookup waste. 21. Minimize the Number of iframes Reduce the number of iframes Need to use ifames more effectively. iframe advantages: good for downloading slow third-party content such as ads, security sandbox, parallel download scripts iframe disadvantages: even if it is empty, it will consume a lot of resources, will prevent the onload of the page, non-semantic 22. No 404s Do not have 404 pages 404 pages appear on the site itself (not search results). Meaningless 404 pages will affect the user experience and consume server resources. 23. Reduce Cookie Size Reduce Cookie Cookies are exchanged through file headers between the server and the browser, reducing the cookie size as much as possible and setting a reasonable expiration time, which can greatly improve efficiency. .
The above introduces the WEB project optimization skills (must know), including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
