[Tencent cloud front end performance optimization competition] exploration on the optimization of the first screen limit of WordPress

This is the current Lighthouse score , On this basis, explore some details of optimization .

The current situation

The performance is only periodic , Not permanent , As a project iterates , Performance will also change .

To configure

• 1 nucleus 1GB 1Mbps
• System disk ： Ordinary cloud disk
• The Internet ： Basic network

At the same time 6 A container ,Nginx Open the HTTPS

• nginx
• php:fpm
• egg:v1
• cnpmjs.org
• gitea/gitea:latest
• mysql:5.5

The site is based on WordPress Of , So not pure static , Dynamic sites . It is unrealistic to talk about goals without setting aside the environment , On this basis, I try to do some optimization ：

Local test environment ： MacBook Pro 8G + Chrome Traceless mode + Every time you refresh the page disabled cache

Monitoring data

Optimize content

Static resources

The first of the three categories concerns Static resources , There are two optimization directions for resource loading: size and lazy loading , The server is turned on GZIP Compression of the .

problem ：

• main.js No compression , Although with notes, there is only 42 Line code , Volume 1.3K
• jquery Compressed code volume 86K
• lightbox.js 9.3K, The first screen is also loaded
• Article pictures are not lazy to load

Original static resource size

Optimization plan

1. main.js After the compression 281B
2. First screen JQ use , You can reference public CDN The path of , The advantage of this is that the user who visits for the first time has a probability of hitting the version JQ , Thus, the local cache , At the same time, it can also reduce my server bandwidth pressure
3. In view of the fact that the browser version used for group access to blogs is not low , So remove lazyload.js, Use native directly lazyload attribute .Chrome Support ～
4. Article pictures use native lazyload

API Report errors originate Google Adense Advertising module , This one doesn't work , It is a third-party function , Need to be removed as a whole , But after observation, it is found that the loading speed of the home page is not affected , Itself is executed asynchronously .

result

Look at the statistics again after a day , It is found that the first screen access speed has not improved much , From the perspective of resource statistics , There is still the problem that static resource access takes a long time . Most of the pictures here are Pictures of the content of the article , Due to the small number of visits , I want to pay extra for the drawing bed , Therefore, it is directly stored locally . It's not used here CDN Direct optimization , Because this is a foreign thing , You can't optimize because of optimization , It is unwise to operate before finding the optimization point .

In detail, I see that the loading of static resources takes time , The findings are generally concentrated in image resources ：

So I took a link that took a relatively long time to visit in order , It's really long

occasionally TTFB You can achieve 1S above , that TTFB It's an optimization direction . because TTFB It is an important indicator reflecting the response speed of the server , But other static resources are sometimes not that slow .

SSL Connection configuration

Given my low server configuration ,TTFB The value is very high , Referring to the previous waterfall diagram, I think SSL Time consuming takes up a certain proportion , Can be optimized , So the default configuration is adjusted

ssl_session_cache shared:SSL:1m;
ssl_session_timeout 60m;
ssl_session_tickets on;
ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.4.4 8.8.8.8 valid=300s;
resolver_timeout 5s;
ssl_prefer_server_ciphers on;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers "ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:DHE-RSA-AES128-GCM-SHA256:AES256+EDH:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4";
add_header Strict-Transport-Security "max-age=31536000;includeSubDomains;preload";
add_header X-Frame-Options deny;

But according to the results, the feedback is negative …. SSL Connection time increases instead , But the local test data did not extend .

Before optimization ：

After optimization ：

Nginx Time consuming logs

because SSL Configuration has no effect , Therefore, the specific time-consuming links should be viewed in combination with logs

Set log output ：

log_format apm '"$time_local" client=$remote_addr '
'method=$request_method request="$request" '
'request_length=$request_length '
'status=$status bytes_sent=$bytes_sent '
'body_bytes_sent=$body_bytes_sent '
'referer=$http_referer '
'user_agent="$http_user_agent" '
'upstream_addr=$upstream_addr '
'upstream_status=$upstream_status '
'request_time=$request_time '
'upstream_response_time=$upstream_response_time '
'upstream_connect_time=$upstream_connect_time '
'upstream_header_time=$upstream_header_time';

It is worth noting that the following parameters ：

• $upstream_response_time : Time between establish a connection to the upstream server and receiving the last byte of the response body.
• $request_time : This is the Full request time , Starting from , the nginx reading the bytes from the client , till Nginx sends the last byte of the response body to the client.
• $upstream_connect_time : The time spent establishing a connection with the upstream server
• $upstream_header_time : Time between establishing a connection to an upstream server and receiving the first byte of the response header.

Take two logs to observe ：

"28/Dec/2021:14:42:53 +0000" client=114.85.34.238 method=GET request="GET /%e7%ae%97%e6%b3%95-practice-day-1.html HTTP/2.0" request_length=464 status=200 bytes_sent=6306 body_bytes_sent=5886 referer=- user_agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" upstream_addr=unix:/tmp/php7-fpm.sock upstream_status=200 request_time=0.206 upstream_response_time=0.204 upstream_connect_time=0.000 upstream_header_time=0.200
"28/Dec/2021:14:42:53 +0000" client=114.85.34.238 method=GET request="GET /wp-content/themes/neat/ajax-comment/app.css?ver=1.0.0 HTTP/2.0" request_length=140 status=200 bytes_sent=783 body_bytes_sent=520 referer=https://www.noxxxx.com/%e7%ae%97%e6%b3%95-practice-day-1.html user_agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" upstream_addr=- upstream_status=- request_time=0.000 upstream_response_time=- upstream_connect_time=- upstream_header_time=-

The first is that it needs to be implemented PHP Code , So you need to connect php-fpm The container of , You can see upstream_response_time Yes 200ms above .

Access to information ,PHP-FPM There are three working modes ：ondemand,static,dynamic（ Memory first 、 Static pool 、 Service first ）.

I debugged the static and memory first methods , The discovery time can only be at least 200 Up and down , The service first model , At least 140ms Time delay of .

The configuration is as follows ：

pm = dynamic
pm.max_children = 10
pm.start_servers = 2
pm.min_spare_servers = 1
pm.max_spare_servers = 6

Test screenshot ：

However, this mode is a disaster for machines with small memory , Because when I want to close the container, I find that there is not enough memory , Unable to close .

Memory usage soared , Low latency and high processing performance by using memory , But the overall stability of the server will be affected . Default php-fpm Is take the dynamic Pattern

use static Pattern , After testing pm.max_children = 5 about 1G Memory machines are relatively suitable , Test it out , Generally stable at 400 ms Up and down , Maximum not exceeding 1.3s, As low as 207ms, and max_children Set to 5 10 20, There is not much difference in memory usage , However, considering the small traffic access scenario ,5 The time consumption corresponding to the value of is currently acceptable .

PHP Version update

7.3.6 Upgrade to 7.4.27 In terms of results , Not much improvement , If it is 5 => 7 , It was a qualitative change , There are not many performance problems for the small version upgrade , expect 8 The subsequent performance changes brought about by the version of the image .

Nginx cache

I thought about it when I got here , First, static resources are cached , So can we cache dynamic languages ？ That means I avoid every repetition PHP Code to improve the speed of page direct output .

First, in the  /etc/nginx/nginx.conf:  Add the following code , Set up fastcgi Cache path and cache key.

fastcgi_cache_path /etc/nginx-cache levels=1:2 keys_zone=phpcache:100m inactive=60m;
fastcgi_cache_key "$scheme$request_method$host$request_uri";

And then we're dealing with it PHP Add cache configuration to the configuration file of

location ~ [^/]\.php(/|$) {
fastcgi_cache phpcache; # The name of the cache key-zone to use
fastcgi_cache_valid 200 30m; # What to cache: 'Code 200' responses, for half an hour
fastcgi_cache_methods GET HEAD; # What to cache: only GET and HEAD requests (not POST)
add_header X-Fastcgi-Cache $upstream_cache_status; # Add header so we can see if the cache hits or misses
}

The effect is very impressive ：

The inner page speed of the article ：

A drop of 15 times , You just need to configure it Nginx, The earnings are high .

Points that can be optimized in the future ：

Mysql edition , The current use is 5.5, But just like most corporate projects face problems , It is unlikely to upgrade all dependencies , Risk is one of the factors , What's more, I haven't done relevant tests yet , Changes are too expensive , I am not ready to move for the time being .

summary ：

In the case of using memory , Sure Put the previous 300 many ms Down to 150ms Until then 15 ms, You can balance server utilization and website experience on low memory machines .

Another optimization idea is to use language 、 frame 、 rely on 、 The server 、http1.1 ->2 Equal periphery , Try to improve performance through version upgrade , Or replace services with better performance to reduce the first screen time . Some of the costs of this method in real projects will be higher , But the relative benefits are also high , Compared with the pure front-end, it is used to pack, compress and merge resources , It works faster , It's like switching to http2, The importance of the original sprite scheme will be greatly reduced .

But this does not mean that you should not optimize the performance of the front end , It's a trade-off , Instead of ignoring your own problems .

So performance optimization , To some extent, it is still the way of space for time , Faster response through memory consumption , It's just that we need to analyze specific problems , We should combine problems with reality and then make appropriate optimization , At the least cost for the fastest speed , The same thing applies to performance optimization without silver bullets , You can't just grab your eyebrows and moustaches .