»network technique»According to a website to do a WordPress website performance optimization example
Now, the popular saying is that Baidu and Google have begun to abandon slow websites. However, there are many factors that affect the speed of websites. However, the performance of a website is absolute. Generally speaking, the performance of websites with fast opening speed is not necessarily good, but the speed of websites with better performance will not be worse,Today, with the help of a website of my friend chain, it classifies and analyzes the problems of website performance optimization.
Gtmetrix.comThis is an online testing tool for website performance. This website is officially recommended by WordPress. You can do a thorough physical examination on your website by inputting the homepage of your website. The website is Google basedPageSpeedAnd YahooYslowTo test the performance of the site, more details about these two tools, you can baidu, Google two, these two tools in the field of website stream can detect a very high authority, cloud is often usedGtmetrix.comTo do website performance testing.
As shown in the figure above, the website performance is divided into a / B / C / D / E / F according to the ranking, and a is the best. On the contrary, because it is a test server from Canada, we don't look at the loading time, which has no reference value. We mainly look at the two Tags: pagespeed and Yslow, and the following items, scores, categories and priorities,Next, we will analyze the problems of this website.
Let's take a look at the specific analysis report of pagespeed, as shown in the figure below
Next, start to analyze and solve each specific problem.
Enable gzip compression
This means that gzip compression needs to be enabled to reduce the size of files sent from the server to increase the speed of transfer to the browser.
In addition, cloud cloud cloud can also add the following code in the wp-config.php file
define( 'ENFORCE_GZIP', true );
Leverage browser caching
This is to enable browser caching. We all know that caching is generally divided into server-side cache and client-side cache (that is, browser cache). Once users open our website, they will download some static resources from our server. We should let the files downloaded to the client browser cache continue to be used,There is no pressure to repeatedly download files from the server.
The solution is also very simple. You just need to add the following code to the htaccess file of the server
##File cache##<FilesMatch ".(html|gif|jpg|jpeg|png|ico|js|css)$">Header set Cache-Control "max-age=2592000"</FilesMatch>
In fact, this project and a project of Yahoo are very similar, the following said again.
This project is very simple, is to optimize the picture just, generally is JPG and PNG picture, if you can't optimize directly click on the rightoptimized versionYou can download the compressed version of.
As for image compression, there are many solutions:
Method one: is to use the local image compression software batch compression and then upload, using the following tool can do
To specify the size of an image is to save the trouble of the browser. That is to say, if you specify the size of an image, the browser will display the image directly according to your specified size. If not, the browser will go back to check the size of the image and then display the image according to the actual situation. This virtually increases the burden of the browser,After all, the main task of the browser is to render the entire page.
Let's take a chestnut
This code is a high-speed browser, there is a breakthrough here, the address xxooxxoo, as for the size is not marked, then the browser needs to check the image itself
The following sentence tells the browser that there is an image, address xxooxxoo, and the size is 250 * 250. Then the browser will display it directly according to your written size. This virtually helps the browser to reduce the burden, and the version browser reduces the burden, which is to speed up the display of web pages!
Compression JS file, this is very easy to understand, many JS tutorials teach you how to use, often give you the uncompressed version, mainly for the convenience of secondary development, but when you complete the development and put into use, please pay attention to the compression, square, normal compression does not affect the use, such as jQuery.
We recommend a JS compression tool. Of course, after you compress a file, you should check whether the related functions are affected. JS online compression
Specify a cache validator
Set a cache verification. Some plug-ins or themes will use. Css.php or js.php to dynamically load static files. This will cause the browser to fail to get the correct cache validation
In fact, the custom CSS code does not need to be loaded like this. There is an entry to add custom CSS in the customization of WordPress. Of course, if you have to use PHP to load, you can also do so. The following code adds htaccess
<IfModule mod_headers.c><FilesMatch ".(php)$">Header set Last-Modified "Tue, 31 Aug 2018 00:00:00 GMT"</FilesMatch></IfModule>
Compression CSS, this principle and the above compression JS, compression useless code, reduce the file size, speed up loading
Similarly, we can also use online tools to compress. Here we recommend:
Remove the query character of the static file. In short, the link of the static file can't contain?Question mark, about this, for this site, we divided into two steps.
Step 1: touch the question mark in the thumbnail. Because of the timthumb solution used in this site's thumbnail, you can use cloud storage solutions such as qiniu, youpai and OSS. You can solve this problem by using image processing and custom image style name. Second, we can use the following method to solve the query characters other than the thumbnail:
Enabling HTTP keep alive or HTTP persistent connections allows the same TCP connection to send and receive multiple HTTP requests, thereby reducing the latency of subsequent requests.For example, from the bedroom version of a pile of things to the living room, do you close the door without opening it once, or do you close the door after moving things?It's easy to understand The solution is simple, or htaccess file
<ifModule mod_headers.c>Header set Connection keep-alive</ifModule>
To delay loading JS files, simply put JS files in the last execution, and putting them into WordPress means that they need to be executed when loading JS files
Yahoo's Yslow analysis results are also very poor, but the problem is more concentrated
Add Expires headers
Add expiration headers to static files. In fact, this problem is the same as the browser cache mentioned before. You can also use the above code directly
Yunluo can also provide a more complete one here. In fact, they are almost the same
Make fewer HTTP requests
Reduce HTTP requests by simply merging static files that don't need to exist alone, often run together
There are 20 JS requests and 9 CSS requests. Don't forget, there are also a number of image requests......
Use a Content Delivery Network (CDN)
This is for you to use CDN. In fact, there are a lot of things about CDN, but I am often asked: how can I feel slow when I use XXX?Is it true to use XXX acceleration?Why didn't you feel it?All in all, all kinds of problems.
As for CDN, I'd like to make a simple analogy here. I usually go to the supermarket at the gate of the community when I go to get soy sauce. When I have nothing to do, I have to run half of the community. Suddenly, one day, we opened a small shop downstairs. Now I go directly to the small shop downstairs to get soy sauce. Do you say, is it faster to go to the supermarket at the gate or go downstairs to get soy sauce?The reason is obvious.
Use cookie-free domains
To put it simply, it is necessary to use domain names without cookies to transfer static files. In fact, it is still a CDN problem. If you solve the CDN problem, you can solve this problem.
Reduce the number of DOM elements
There is no good way to reduce the number of DOM elements. You can only start with the WordPress theme, which requires you to have certain technology.
Load on demand
Loading on demand is an idea rather than a specific method. To put it simply, what is not needed on the current page should be forbidden to load. Here are some simple examples: First: picture pop-up window Generally speaking, the picture pop-up window will be applied to the article page, and this function is rarely used on the home page. Therefore, JS and CSS of image pop-up window should be arranged to load on the article page. In short, it is to do ais_single()It's just a judgment. Second: Code highlight As above, generally speaking, code highlighting is also used in the article page. However, many code highlighting plug-ins also load relevant JS and CSS files on the front page for compatibility, so they should also be moved to the article page. Third: short code Yunluo likes to use short code, but it will be added to some code when using short code, and not every article will use a short code. If the relevant resources are loaded directly, is it a bit wasteful?We can load resources by judging whether short code exists.give an example:
Fourth: background resources Many articles have said that WordPress background is also very card. I can see in detail how many resources are loaded in the background. We can generally load some necessary resources according to the current page.
Having said so much, someone must have asked, how about you, blogger?Let me cut a picture
Of course, if it is a trench player, then you can ignore the article, add money to improve broadband, good CDN can be solved.