React homepage slow loading problem performance optimization case detailed explanation

After studying React for a while, I want to put it into practice. So I restructured my personal blog website. It took about a week to rebuild the website successfully. However, once it was online, the access speed was really slow, so slow that I couldn't stand it. It was such a small website with only a few articles, and it was so slow that it was unacceptable. I'm not a perfectionist, but this won't do. I spent some time later on performance research. I found out there was a reason for the slowness.

Frameworks like React?

The current mainstream front-end frameworks React, Vue, and Angular all use client-side rendering (server-side rendering is not within the scope of this article). This of course greatly reduces the pressure on the server. The relative pressure on the browser has increased. This means that a large number of js files need to be run locally. And it takes time to download these large js files from the server. It takes time to run these js again. This is the fundamental reason why the homepage loads slowly. Of course, it is only the home page, because of the subsequent cache, it is relatively fast. So how to increase the speed? There are two ways to start

• Improve the speed of downloading static resources
• Optimize code to improve running speed

Before the specific optimization, let me talk about the server configuration of my blog website.

• Alibaba Cloud Server ECS
• System: Ubuntu 16.04
• CPU: 1 core
• Memory: 1GB
• MYSQL database
• Nginx version 1.16.1

The test environment uses Firefox browser, and the access speed before optimization is as follows

Isn’t it very slow? So slow that it makes me doubt my life. It takes 6 seconds to load a blog post of more than 2,000 words. Let’s optimize it step by step based on my own blog.

Improve the speed of downloading static resources

There are many ways to increase the speed of downloading static resources. Upgrading HTTP1.1 to HTTP2.0, enabling gzip data compression, using CDN, etc., are the most effective ways to increase the speed. My own website is also mainly optimized from these aspects one by one to improve the speed.

Upgrading HTTP1.1 to HTTP2

It was like this before the upgrade

After upgrading to HTTP2.0, it looks like this

So how to upgrade? Upgrading also requires conditions.

• openssl 1.0.2+ (OpenSSL 1.0.2 supports ALPN)
• Nginx 1.9.5+

I don't know if the nginx and openssl versions can be passed
nginx -V
Check, if the above conditions are met, it is simple, just add http2 in the nginx configuration file

server {
   listen 443 ssl http2
   .
   .
   .
}

That’s it. Isn’t it very simple? Then restart the nginx server. (This upgrade will not significantly improve access speed.)

Enable gzip data compression

As can be seen from the above figure, the data in the transfer column and the size column are equal, that is, the size of the file is the same as the size of the file, and there is no compression at all. For large files such as 1.4M, compression is very necessary. What's more, this is just a simple blog site. This is one of the main culprits that slows things down. So it is necessary for us to perform gzip compression. So how do we turn on gzip? Is it very difficult? In fact, it is very simple. Nginx already supports it, and we only need a simple configuration. Modify the nginx configuration file in the same way

server {
    listen 443 ssl http2
    #...many gzip on are omitted in the middle;
    gzip_buffers 32 4k;
    gzip_comp_level 6;
    gzip_min_length 200;
    gzip_types text/css text/xml application/javascript application/json;
}

in

• gzip on means gzip compression is enabled.
• gzip_buffers 32 4k indicates the number and size of buffers used to process request compression. You do not need to set this parameter and just use the default value.
• gzip_comp_level gzip compression level. After level 6, it is difficult to increase.
• gzip_min_length will use gzip compression only when the returned content is larger than this value, in K. When the value is 0, all pages are compressed
• gzip_types compression type

Similarly, restart the nginx server.

As can be seen from the figure, the speed is greatly improved. Looking at the Transfer and Size columns, the difference in size is huge. After completing these two steps, the speed has been reduced from 6 seconds to about 2 seconds.
(This upgrade has the greatest impact on access speed.)

Note: Of course a better way is to use CDN acceleration. CDN the static resources. Can greatly improve the speed.

Optimize code to improve running speed

In multiple request testing. We found that there are still many small files, but they are quite time-consuming to run. Of course, this is related to operations such as React creating a DOM tree. However, we can still see if there is any other room for optimization in the code. It was too slow for such a small website. I thought the code I wrote must have some time-consuming operations, and it turned out to be the case. This code in the website

const markdownHtml = marked(content_mark || '');

It takes some time to convert markdown to html. If the article is very large, this time cannot be ignored.
I tested this JS array to string implementation method to parse an article with a lot of words, and it took me more than 100ms, which is intolerable according to convention.

In this case, when saving markdown, we can directly save two copies of data, one is the original markdown data, and the other is the data after the markdown is converted to HTML. When the page is rendered, the converted HTML code is directly obtained, which saves conversion time.

We can also take advantage of React's懶加載to split the code when packaging with webpack to reduce the size of the first screen loading.

Of course, improving user experience during the loading process is also an important part. Although it cannot effectively increase the running speed, it can make users more happy. As the saying goes, time flies by when you are happy.

This is the end of this article about the detailed explanation of the performance optimization case of the slow loading problem of the React homepage. For more relevant content on the performance optimization of the slow loading problem of the React homepage, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!