According to a website to do a WordPress website performance optimization example

» 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.






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.

Pagespeed analysis

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.


How to check your website for gzip compression? You can use the following website to try:
Direct gzip detection by stationmaster
About how to open gzip, 115 met a very comprehensive article

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.

Optimize images

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 right optimized version You can download the compressed version of.


As for image compression, there are many solutions:

Antelope: an excellent image compression tool

Antelope is a very good, simple image compression software, support compression JPG, PNG format images, the interface is very small and fresh, and comparison [...]

Baidu network disk

Specify image dimensions

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

 <img src="xxoo/xxoo.jpg">

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

 <img width="250px" height="250px"  src="xxoo/xxoo.jpg">

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!

Minify JavaScript

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

 <IfModule mod_ headers.c> <FilesMatch ".(php)$"> Header set Last-Modified "Tue, 31 Aug 2018 00:00:00 GMT" </FilesMatch> </IfModule>

Minify CSS

Compression CSS, this principle and the above compression JS, compression useless code, reduce the file size, speed up loading


Online compression CSS tool

Remove query strings from static resources

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:

WordPress Optimization: disable static resource version query

To optimize WordPress, disable the version query of WordPress static resources. Remove query stri [...]

Specify a Vary: Accept-Encoding header

This is still the problem of the head. It mainly says whether I can compress it. It's not a big problem. It doesn't matter if it's not set

 <IfModule mod_ headers.c> <FilesMatch ".(js|css|xml|gz|html)$"> Header append Vary: Accept-Encoding </FilesMatch> </IfModule>

Enable Keep-Alive

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>

Defer parsing of JavaScript

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

 wp_ register_ script('default', get_ template_ directory_ uri() . '/assets/js/global.js', false, '1.0', true );// Bottom loading wp_ enqueue_ script('default');

Yslow analysis

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

 <IfModule mod_ expires.c> # Enable expirations ExpiresActive On  # Default directive ExpiresDefault "access plus 1 month" # My favicon ExpiresByType image/x-icon "access plus 1 year" # Images ExpiresByType 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" # CSS ExpiresByType text/css "access plus 1 month" # Javascript ExpiresByType application/javascript "access plus 1 year" </IfModule>

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 a is_ 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:

 function secret_ css() { global $post; if ( has_ shortcode( $post->post_ content, 'secret') || has_ shortcode( $post->post_ content, 'vip')  ){ echo '<style type="text/css">.wxpic{ float:left; width:18% }.wxtips{color:#32B9B5; float:left; width:72%; padding- left:5%; padding- top:0; font- size:20px; line- height:150%; text- align:left; font- family:Microsoft YaHei }.yzts{margin-left: 40px}@media (max- width:600px ){.yzts{margin- left:5px }.wxpic{ float:left }.wxbox #verifycode{ width:35% }.wxbox #verifybtn{ width:22% }.wxpic,.wxtips{ width:100% }.wxtips{font- size:15px; padding:2px }}</style>';}} add_ action('wp_ head', 'secret_ css');

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.

Related links

Gtmetrix Cloud detection report Reports for sample sites



Your email address will not be disclosed. Required item used * tagging

11 replicates to "make a WordPress website performance optimization example based on a website"

  1. Where do I put the expired header code... Forgive Xiaobai. I checked two B's, one let me add expiration header, the other let me add CDN and browser cache. The browser cache is set according to your method, and it's almost expired. Thank you.

    1. @ Notes on the moon climbing the building Limited, because this is based on the content of the response. It's not based on the speed. In addition, if you use CDN, some optimization of the origin site will be invalid. For example, the website mentioned in the article has actually done the optimization settings, but the 360 website guard is added, and the response to the browser is 360 instead of the origin site