After reading this article, I will know how to increase the speed of opening a website!

As we all know, the optimization of the website is related to many factors. In addition to the content that is king, you must pay attention to the speed at which the website is opened. How can we increase the website opening speed?
Websites with rich content are meaningless if they are too slow to be accessible. Seo is a good website, and it is useless if the search spider cannot catch it. ue is designed to be a user-friendly website, it is also empty talk if the user cannot even see it.
Therefore, the efficiency of web pages is definitely the most noteworthy aspect. How can we improve the efficiency of a webpage?
Article 1: make fewer HTTP requests to minimize the number of HTTP request requests.
80% of user response time is wasted on the frontend. These times are mainly caused by downloading images, style sheets, JavaScript scripts, flash and other files. Reducing the number of request requests for these resource files will be the key to improving the webpage display efficiency.
There seems to be a conflict here, that is, if the orchid network reduces a lot of images, styles, scripts or flash, then the web page will not be bald, that is ugly? This is a misunderstanding. The orchid net only tries to reduce it as much as possible, and does not mean it is completely unusable. There are also some tips and suggestions for reducing the number of request requests for these files:
1. Use a large image to replace multiple small images.
This is indeed somewhat Revolutionizing Traditional thinking. In the past, some people thought that the download speed of multiple small images would be lower than that of a large image. However, the analysis results of multiple pages using the httpwatch tool show that this is not the case.
The total time consumption of a K large image is definitely greater than the total time consumption of four 25 k small images. The main difference is that the blocked time of four small images is definitely greater than the blocked time of one large image.
Therefore, if you want to use large images instead of too many trivial pictures. This is why the efficiency of turning the door is higher than that of the sliding door implemented by image replacement.
However, please note that too many images cannot be used, because this will affect the user experience. For example, it is definitely not a good idea to use a few megabytes of background images.
2: Merge your CSS files.
According to the "Minimize the number of HTTP request requests" principle, you will know that to facilitate the organization and planning of style sheets, the style sheet files for different purposes are separated, form different CSS files, and then reference multiple CSS files as needed on the page. This is indeed unreasonable, because it will generate more HTTP request requests. This reduces the efficiency of web pages. Therefore, from the perspective of improving the web page efficiency, the orchid net should still write all CSS in the same CSS file. But the problem comes again. So how can we organize and plan style sheets well? This is indeed a contradiction. The practice of Orchid net is to use two sets of versions. Edit and release editions. The Edit version still uses multiple CSS files for planning and organization. At the time of release, multiple CSS files will be merged into one file to reduce the number of httprequest requests.
3: Merge your JavaScript files.
The reason and solution are the same as above.
Article 2: Use a content delivery network to use CDN
This looks very esoteric, but it is not hard to understand as long as it integrates the network characteristics of China. "North server", "Southern server", "Telecom server", "Netcom server "...... These words sound so familiar and depressing. If a telecom user in Beijing tries to open a webpage similar to wallpaper collection from Guangdong's Netcom server, you will be able to have a deep understanding.
As this is not the principle that orchid network developers can do, we will not talk about it here.
Article 3: add an Expires header to add a periodic Header
This is not controlled by developers, but the responsibility of the website server administrator. Therefore, it does not matter if you do not understand it as a developer. Tell the website server administrator about this rule.
Article 4: gzip components enabling gzip Compression
You should be familiar with this. The idea of Gzip is to first compress the file on the server and then transmit it. This has special effects on large text files. As this is not a developer, but the work scope of the website server administrator, I will not explain it in detail here. If you are interested in this, you can information your company's website server administrator.
Article 5: Put CSS at the top place the CSS style above the page.
Both HTML, XHTML, and CSS are interpreted languages, rather than compiled languages. So when CSS is above, the browser can parse the structure and render the page. In this way, the page structure will not appear, the page structure will be bald first, then CSS rendering, the page will suddenly become gorgeous, so it is too "dramatic" Page browsing experience.
Article 6: Move scripts to the bottom to put the script at the bottom
The reason is the same as that in article 5. Scripts are generally used for user interaction. Therefore, if the page is not displayed and the user does not even know what the page looks like, talking about interaction is nothing more than a conversation. Therefore, the script and CSS are the opposite. The script should be placed at the bottom of the page.
Article 7: Avoid CSS expression_r_rs avoid using expression_r_rs in CSS
Expression_r_rs in CSS is actually an if judgment. First, it is necessary to explain what CSS expression_r_r_rs is. In fact, it is like if... in other languages ...... Else ...... Statement. In this way, you can make a simple logical judgment in CSS, and CSS can use different styles in different situations. However, the cost of expression_r_r_rs in CSS is extremely high. When your page needs to be rendered with many elements based on judgment, your browser will remain in the suspended state for a long time, thus bringing users a very poor user experience.
Article 8: Make JavaScript and CSS external separate JavaScript and CSS into external files
This article seems to be in conflict with the first article. Indeed, in terms of the number of HTTP request requests, this is indeed a reduction in efficiency. But the reason for doing so is another important factor-caching. Because external reference files will be cached by the browser, if Javascript and CSS are large, the orchid net will separate them into external files. In this way, as long as the user browses the file once, these large JS and CSS files can be cached, thus greatly improving the efficiency of the user's re-access.
Article 9: Reduce DNS lookups reduces DNS queries
DNS domain name resolution system. We all know that we can remember so many URLs because we remember words, not the detailed mathematical IP addresses, DNS is used to associate the words with such IP addresses. So what is the true guiding significance of this article for the orchid net? There are actually two:
1: If not required, do not put the website on two servers.
2: images, CSS files, JS files, Flash files, and so on the webpage should not be too scattered in different network spaces. This is why the post that sends only one wallpaper image on a website is much faster than the post display of wallpaper images from different websites.
Article 10: Minify JavaScript and CSS reduces the size of JavaScript and CSS files
This is easy to understand. Remove unnecessary blank lines, spaces, and comments in your final release. Obviously, manual processing is too inefficient. Fortunately, tools are everywhere on the Internet to compress these things. Compress Javascript Code The volume of tools can be seen everywhere, and the orchid net will no longer list them.
Article 3: Avoid redirects avoids redirection
This article is interpreted only from the perspective of Web developers. So what can the orchid net interpret? 2 --
1: "This domain name has expired, 5 seconds later, the page will jump to the http://www.sanyalanhua.com page", this sentence looks very familiar. But that's strange. Why not directly link to that page?
2: write some link addresses more clearly. For example, you can write http://www.sanyalanhua.com/into http://www.sanyalanhua.com (note the last "/" symbol ). Indeed, both websites can access the blogs of the orchid network, but in fact they are different. The result of the http://www.sanyalanhua.com is a 301 response, which is directed back to the http://www.sanyalanhua.com /. However, it is obvious that it is a waste of time.
12th remove duplicate scripts
Say "No!" to the repeat !"
The principle of this rule is simple, but in my work, many people are "too busy", "Too tired", and "not well planned at the beginning "...... Such a reason has passed. You can find a lot of reasons not to deal with the redundant script code, if your website does not require higher efficiency and later maintenance.
This is also the point. The Orchid net reminds you that some JavaScript frameworks and JavaScript packages must be used with caution. At least let's have a question: how much convenience does this JS kit provide to the Orchid net and how much efficiency is improved. Then, compare it with the negative effects of redundant and repetitive code.
Article 3: Configure etags configure your object tag
First, let's talk about etag. Etag (entity tags) entity tag. This tag is a little different from the tag cloud that you often see on the Internet. This etag is not used for users, but for browser cache. Etag is a mechanism used by the server to tell the browser whether the cached content has changed. Through etag, the browser can know whether the content in the current cache is up-to-date and does not need to be re-downloaded from the server. This is similar to the concept of "last-modified. Unfortunately, Web developers cannot do anything about this. He is still a website server employee. If you are interested in this, you can consult your company's website server administrator.
Article 3: Make Ajax cacheable rules apply to Ajax
Ajax needs to be used properly. The current Ajax seems to be a bit mythical. It seems that as long as the webpage is Ajax, there will be no efficiency problems. In fact, this is a misunderstanding. Poor use of Ajax will not make your webpage more efficient, but will reduce your webpage efficiency. Ajax is indeed a good thing, but never overdo it. When using Ajax, consider the above principles.