Details of PHP improving website performance

This article mainly shares with you the details of PHP improving website performance, hoping to help everyone.

First, reduce the number of HTTP requests as much as possible (Make Fewer HTTP Requests)

http requests are expensive, and finding ways to reduce the number of requests can naturally increase the speed of the web page. Commonly used methods include merging css, js (merging css and js files in one page respectively), image maps and css sprites, etc. Of course, perhaps splitting css and js files into multiple files is due to considerations such as css structure and sharing. Alibaba's Chinese website approach at that time was to develop it separately, and then merge js and css in the background. This way it was still one request for the browser, but it could still be restored into multiple ones during development, which facilitated management and repeated references. . Yahoo even recommends writing the css and js of the homepage directly into the page file instead of external references. Because the number of visits to the homepage is too large, this can also reduce the number of requests by two. In fact, many domestic portals do this.

Css sprites only use the background images on the page to be merged into one, and then use the value defined by the background-position property of css to get its background. Taobao and Alibaba Chinese sites currently do this. If you are interested, you can take a look at the background images of Taobao and Alibaba.

http://www.csssprites.com/ This is a tool website that can automatically merge the images you upload and give the corresponding background-position coordinates. And output the results in png and gif format.

Second, Use a Content Delivery Network: Use a Content Delivery Network

To be honest, I don’t know much about CDN. To put it simply, through existing A new layer of network architecture is added to the Internet to publish website content to the cache server closest to the user. Through DNS load balancing technology, the source of the user is determined and the cache server is nearby to obtain the required content. Users in Hangzhou visit the cache server nearby. The content on the Hangzhou server, Beijing's access is close to the content on the Beijing server. This can effectively reduce the time for data transmission on the network and increase the speed. For more detailed information, you can refer to the explanation of CDN on Baidu Encyclopedia. Yahoo! distributes static content to a CDN and reduces user impact time by 20% or more.

Article 3. Add an Expires Header: Add an Expires Header

Now more and more pictures, scripts, css, and flash are embedded into the page. When we visit They are bound to make many http requests. In fact, we can cache these files by setting the Expires header. Expire actually specifies the cache time of a specific type of file in the browser through the header message. Most of the pictures in flash do not need to be modified frequently after they are released. After caching, the browser will not need to download these files from the server in the future but will read them directly from the cache, which will speed up accessing the page again. will be greatly accelerated. The header information returned by a typical HTTP 1.1 protocol:

HTTP/1.1 200 OK   
Date: Fri, 30 Oct 1998 13:19:41 GMT   
Server: Apache/1.3.3 (Unix)   
Cache-Control: max-age=3600, must-revalidate   
Expires: Fri, 30 Oct 1998 14:19:41 GMT   
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT   
ETag: “3e86-410-3596fbbc”   
Content-Length: 1040   
Content-Type: text/html

This can be accomplished by setting Cache-Control and Expires through server-side scripts.

For example, setting the expiration date after 30 days in php

＜!--pHeader("Cache-Control: must-revalidate");   
$offset = 60 * 60 * 24 * 30;   
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";   
Header($ExpStr);-->

can also be done by configuring the server itself. These are not very clear, haha. Friends who want to know more can refer to http://www.web-caching.com/

As far as I know, the current Expires expiration time of Alibaba Chinese website is 30 days. However, there have been problems during the period, especially the setting of script expiration time should be carefully considered, otherwise it may take a long time for the client to "perceive" such changes after the corresponding script function is updated. I have encountered this problem before when I was working on [suggest project]. Therefore, what should be cached and what should not be cached should be carefully considered.

Article 4. Enable Gzip compression: Gzip Components

The idea of ​​Gzip is to compress the file on the server side first and then transmit it. This can significantly reduce the size of file transfers. After the transmission is completed, the browser will decompress the compressed content again and execute it. All current browsers support gzip "well". Not only can browsers recognize it, but also major "crawlers" can also recognize it. SEOers can rest assured. Moreover, the compression ratio of gzip is very large, and the general compression ratio is 85%. This means that a 100K page on the server side can be compressed to about 25K before being sent to the client. For the specific Gzip compression principle, you can refer to the article "Gzip Compression Algorithm" on csdn. Yahoo particularly emphasizes that all text content should be gzip compressed: html (php), js, css, xml, txt... Our website has done a good job in this regard, and it is an A. In the past, our homepage was not A, because there were many js placed by advertising codes on the homepage. The js of the website of the owner of these advertising codes had not been gzip compressed, which would also drag down our website.

Most of the above three points belong to server-side content, and I only have a superficial understanding of them. Please correct me if I am wrong.

Article 5. Put the css at the top of the page (Put Stylesheets at the Top)

Place css at the top of the page. Why? Because browsers such as IE and Firefox will not render anything until all the CSS is transmitted. The reason is as simple as what Brother Ma said. css, the full name is Cascading Style Sheets (cascading style sheets). Cascading means that the following css can cover the previous css, and higher-level css can cover lower-level css. In [css! important] This hierarchical relationship was briefly mentioned at the bottom of this article. Here we only need to know that css can be overridden. Since the previous one can be overwritten, it is undoubtedly reasonable for the browser to render it after it is completely loaded. In many browsers, such as IE, the problem with placing the style sheet at the bottom of the page is that it prohibits the sequential display of web content. The browser blocks display to avoid redrawing page elements, and the user only sees a blank page. Firefox does not block display, but this means that some page elements may need to be repainted after the stylesheet is downloaded, which causes flickering issues. So we should let the css be loaded as soon as possible

Following this meaning, if we look into it more carefully, there are actually areas that can be optimized. For example, the two css files included on this site,

Article 7. Avoid using Expressions in CSS (Avoid CSS Expressions)

But this adds two layers of meaningless nesting, which is definitely not good. A better way is needed.

Article 8. Put JavaScript and CSS in external files (Make JavaScript and CSS External)

I think this is easy to understand. This is not only done from the perspective of performance optimization, but also from the perspective of ease of code maintenance. Writing css and js in the page content can reduce 2 requests, but it also increases the size of the page. If the css and js have been cached, there will be no extra http requests. Of course, as I said before, some special page developers will still choose inline css and js files.

Article 9. Reduce DNS Lookups

On the Internet, there is a one-to-one correspondence between domain names and IP addresses. The domain name (kuqin.com) is easy to remember, but Computers don't know each other, and the "recognition" between computers has to be converted into IP addresses. Each computer on the network corresponds to an independent IP address. The conversion between domain names and IP addresses is called domain name resolution, also known as DNS query. A DNS resolution process will take 20-120 milliseconds. Before the DNS query is completed, the browser will not download anything under the domain name. Therefore, reducing the time of DNS query can speed up the loading speed of the page. Yahoo recommends that the number of domain names contained in a page should be limited to 2-4. This requires a good planning for the page as a whole. At present, we are not doing well in this regard, and many advertising delivery systems are dragging us down.

Article 10. Compress JavaScript and CSS (Minify JavaScript)

The effect of compressing js and css is obviously to reduce the number of bytes on the page. Pages with small capacity will naturally load faster. In addition to reducing the volume, compression can also provide some protection. We do this well. Commonly used compression tools include JsMin, YUI compressor, etc. In addition, http://dean.edwards.name/packer/ also provides us with a very convenient online compression tool. You can see the difference in capacity between compressed js files and uncompressed js files on the jQuery web page:

Of course, one of the disadvantages of compression is that the readability of the code is lost. I believe many front-end friends have encountered this problem: the effect of looking at Google is cool, but looking at its source code is a lot of characters squeezed together, and even the function names have been replaced. It’s so sweaty! Wouldn't it be very inconvenient to maintain your own code like this? The current approach adopted by all Alibaba Chinese websites is to compress js and css on the server side when they are released. This makes it very convenient for us to maintain our own code.

Article 11. Avoid Redirects

I saw the article "Internet Explorer and Connection Limits" on ieblog not long ago. For example, when you enter http:/ /www.enet.com.cn/eschool/, the server will automatically generate a 301 server redirection to http://www.enet.com.cn/eschool/, you can see it by looking at the address bar of the browser. This kind of redirection naturally takes time. Of course, this is just an example, and there are many reasons for redirection, but what remains the same is that every additional redirection will increase a web request, so it should be reduced as much as possible.

Article 12. Remove Duplicate Scripts

I know this without even saying it, not only from the perspective of performance, but also from the perspective of code specifications. But we have to admit that many times we will add some code that may be repeated because the picture is so fast. Perhaps a unified css framework and js framework can better solve our problems. Xiaozhu's point of view is right. Not only should it not be repeated, but it should also be reusable.

Article 13. Configure Entity Tags (ETags) (Configure ETags)

I don’t understand this either, haha. I found a more detailed explanation on inforQ "Using ETags to Reduce Web Application Bandwidth and Load". Interested students can check it out.

Article 14. Make AJAX Cacheable

Ajax still needs to be cached? When making an ajax request, a timestamp is often added to avoid caching. It’s important to remember that “asynchronous” does not imply “instantaneous”. Remember, even if AJAX messages are generated dynamically and only affect one user, they can still be cached.

Related recommendations:

10 Tips to Improve Website Performance Development

The above is the detailed content of Details of PHP improving website performance. For more information, please follow other related articles on the PHP Chinese website!