»network technique»Make a WordPress website performance optimization example based on a website
Now it is popular to say that Baidu Google has begun to abandon websites with slow opening speed. However, there are many factors affecting the website speed, but the performance of a website is absolute. Generally speaking, a website with fast opening speed may not have good performance, but a website with good performance will not be any worse,Today, I use a website of my friend chain to analyze the problems of website performance optimization.
preface
Gtmetrix.comIt is an online tool to check the performance of websites. This website is officially recommended by WordPress. It only needs to enter your homepage to perform a thorough physical examination of your website. This website uses GooglePageSpeedAnd YahooYslowFor more details about these two tools, you can click Baidu and Google. These two tools have very high authority in the field of website stream energy detection, and Yunluo is often usedGtmetrix.comTo do website performance testing.
rule
As shown in the figure above, the website performance is classified into A/B/C/D/E/F according to the order. A is the best, while the latter is the reverse. Because it is a test server from Canada, we do not look at the loading time, which has no reference value. We mainly look at the pagespeed and yslow tags. The following recommendation items, scores, categories, priorities,Now let's analyze the problems of this website.
PageSpeed analysis
Let's take a look at the specific analysis report of PageSpeed, as shown below Let's begin to analyze and solve each of them.
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 transmission to the browser.
How to check your website for gzip compression? You can try the following website: Station master directly Gzip detection On how to open Gzip, 115 met a very comprehensive article
In addition, Cloud Cloud can 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 caching and client-side caching [that is, browser caching]. Once users open our website, they will download several static resources from our server. We should let the files downloaded to the client's browser cache continue to be used,There is no need to repeatedly download files from the server.
The solution is also very simple. Just add the following code in the server htaccess file [Cloud Cloud for its own use]
##File Cache##<FilesMatch ".(html|gif|jpg|jpeg|png|ico|js|css)$">Header set Cache-Control "max-age=2592000"</FilesMatch>
In fact, this project is very similar to one of Yahoo's projects. Let's talk about it as follows.
Optimize images
This project is very simple. It is just to optimize pictures. Generally, it is jpg and png pictures. If you can't optimize them, you can directly click the image on the rightoptimized version, you can download the compressed version directly.
As for image compression, there are many solutions:
Method 1: Use the local image compression software to batch compress and upload images. Use the following tool to do this
Antelope is a very good, simple image compression software. It supports the compression of jpg and png images. The interface is very small and fresh, and it is relatively [...]
Method 2: Install the image optimization plug-in. Here we recommend the re sumsh it that Cloud is using, which is also the version after cloud modification and optimization
Assigning a size to an image simply saves the browser's trouble. That is, if you assign a size to an image, the browser will directly display the image as you specify. If you do not specify a size, the browser will go back to check the size of the image itself, and then display the image according to the actual situation. This virtually increases the burden on the browser,After all, the main task of the browser is to render the entire page.
Let's take a chestnut:
<img src="xxoo/xxoo.jpg">
This code is a high-speed browser. There is a breakthrough here. The address is xxooxxoo. As for the size is not marked, the browser needs to check the image itself
The following sentence tells the browser that there is a picture here, the address is xxooxxoo, and the size is 250 * 250. Then the browser will display it directly according to the size you specified. This will help the browser to reduce the burden virtually. The version browser reduces the burden, which is to speed up the display of web pages!
Minify JavaScript
Compressing the js file is easy to understand. When many js tutorials teach you how to use it, they often give you the uncompressed version, mainly to facilitate secondary development. But when you are finished developing and put into use, please pay attention to compressing it. Square and normal compression will not affect the use, such as jQuery.
Here is a recommended js compression tool. Of course, after you compress a file, you should check whether 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, which causes the browser to fail to correctly obtain cache verification
In fact, custom css code does not need to be loaded in this way. There is an entry for adding custom css in WordPress's own customization. Of course, if you must use php to load, you can do the same. 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>
Minify CSS
Compressing CSS is the same as compressing js above. Compress useless code, reduce file size, and speed up loading
Similarly, we can also use online tools to compress. Here are recommended:
Remove the query character of the static file. In short, the link of the static file cannot contain ""?Question mark. We will take a two-step look at this site. Step 1: contact the question mark in the thumbnail. Because the timthumb scheme used by the website thumbnail can adopt cloud storage solutions such as Qiniu, Youpai, OSS, etc., which can be solved by image processing+custom image style names. Step 2: For query characters other than thumbnails, we can use the following method:
Enabling HTTP Keep Alive or HTTP persistent connection allows the same TCP connection to send and receive multiple HTTP requests, thus reducing the delay of subsequent requests.For example, do you close the door from the bedroom version to the living room without opening it once, or do you close it after moving things?Actually, it's easy to understand The solution is also simple. It is still an htaccess file
<ifModule mod_headers.c>Header set Connection keep-alive</ifModule>
Defer parsing of JavaScript
Delay loading the js file, which simply means putting the js file at the end of execution, and putting it in WordPress means loading the js file in this way
Yahoo's Yslow analysis results are also very poor, but the problems are relatively concentrated
Add Expires headers
Adding an expired header to a static file is the same as the browser cache previously mentioned. You can also use the above code directly Yunluo can also provide a more complete copy here, which is almost the same
<IfModule mod_expires.c># Enable expirationsExpiresActive On # Default directiveExpiresDefault "access plus 1 month"# My faviconExpiresByType image/x-icon "access plus 1 year"# ImagesExpiresByType image/gif "access plus 1 month"ExpiresByType image/png "access plus 1 month"ExpiresByType image/jpg "access plus 1 month"ExpiresByType image/jpeg "access plus 1 month"# CSSExpiresByType text/css "access plus 1 month"# JavascriptExpiresByType application/javascript "access plus 1 year"</IfModule>
Make fewer HTTP requests
Reduce http requests, simply put some unnecessary static files that exist separately and often run together There are 20 js requests and 9 css requests. Don't forget, there are also several image requests......
Use a Content Delivery Network (CDN)
This is to let you use CDN. In fact, there is a lot of talk about CDN, but people often ask me: Why is it not fast when using XXX, but slow?Is it true to use XXX acceleration?Why didn't you feel it?In short, various problems. As for CDN, I would like to make a simple analogy. Usually I go to the supermarket at the entrance of the community to get soy sauce, and I have to run more than half of the community if I have nothing to do. One day, we opened a small shop downstairs. Now I go directly to the shop downstairs to get soy sauce. Do you think it's faster to go to the supermarket at the entrance or go downstairs to get soy sauce?The reason is obvious.
Use cookie-free domains
To put it simply, some domain names without cookies are used to transfer static files. In fact, it is still a CDN problem, which is solved when CDN is solved.
Reduce the number of DOM elements
There is no good way to reduce the number of DOM elements. You can only start from the WordPress theme, which requires you to have some skills.
Load on demand
Loading on demand is an idea behind the cloud, not a specific method. To put it simply, what is not needed on the current page should be banned from loading. Here's a simple example: First: Picture pop-up window Generally, the image pop-up window will be applied to the article page, and the home page rarely uses this function, so the js and css for the image pop-up window should be arranged to load on the article page, which is simply to dois_single()It's just a judgment. Second: code highlighting As above, generally speaking, code highlighting is also used in the article page, but many code highlighting plug-ins also load relevant js and css files on the home page for compatibility, so they should also be moved to the article page. Third: short code Cloud Cloud likes to use short code, but using short code will also add some code, and not every article will use a short code. If relevant resources are loaded directly, is it a waste?We can load resources by judging whether short code exists.give an example:
Fourth: background resources Many articles have said that the WordPress background is also very jammed. I can check in detail how many resources are loaded in the background. We can generally load some necessary resources according to the current page.
Postscript
After all that talk, someone must ask, how is your blogger?Let me take a picture Of course, if you are a trench player, you can ignore the article and pay more to improve the broadband. Good CDN can solve this problem.
Where are the expired header codes added...Forgive Xiaobai. I checked two B's. One asked me to add the expired header, and the other asked me to add the CDN and browser cache.The browser cache is set according to your method, and it is close to the expiration header. Thank you.
@Learning Notes of Mingyue Climbing the TowerLimited, because this is judged according to the content of the response.Not based on speed. In addition, if CDN is used, some optimizations of the origin site will be invalid. For example, the website mentioned in the article has actually been optimized, but 360 website guards have been added, and the response to the browser is 360, not the origin site
