Key to impacting web page rendering

Often have stationmaster, developer, Operation Dimension doubts: Why our backstage server is very quick, but the user wants to see the content of the webpage to take a long time? We in the previous article "Monster Battle: Analysis of the reasons for the slow opening of the Web site" briefly introduced the impact of the website opening speed of a few indicators, interested students can read it again. Today we are mainly talking about what factors are slowing down our first screen load time, that is, the time the user waits to see the content on the page.

Use of ONEAPM readers of this picture is certainly not unfamiliar, generally speaking, if the server quickly, the computer room is very fast, then affect the user to see the main time of the Web content, is the last two time stage: DOM processing and web rendering, in these two stages, The browser needs to parse the various resources in the Web page and render them, eventually forming the user page. Whether this process is smooth, directly affects the time users need to wait, from a deeper level, will directly affect the end user experience, now we generally accept the idea that "delay is a failure", so you need to pay attention to the loading speed of the site.

Create a lightweight resource path – critical rendering path

The most important concept in page load speed is the critical rendering path. If you can understand this concept, it does allow users to see the content of the page more quickly.

Lightweight resources and paths can shorten the construction and rendering time of complex web pages even faster than simple Web pages! Because most Web pages contain many different components, removing only a subset of the resources does not guarantee a faster loading speed. If you've ever thought: "What else can I do to improve the speed of Web page loading?" "or" Sina, QQ, NetEase is how to do in a second load so many Web content? "Then the concept of critical rendering paths is exactly what you need to know."

What is a critical render path?

For clarity, let's first define some concepts:

Key: Absolutely necessary
Rendering: Display or display (in our context, the page is rendered before it is rendered to the user)
Path: A series of events that make our web pages appear in the browser
First screen: Is the part that the user can see before scrolling the page.

So, in other words, the render path is a series of events that make your Web page appear in the browser. The key rendering path is those that are required to render the first screen of the Web page. Because almost all Web sites contain unnecessary steps when rendering Web pages, reducing these unnecessary paths can make your page load faster for a few seconds, which is the quickest way to improve your Web page speed.

Path

In order to display a Web page, the browser must obtain all the resources needed for the page. A simple example: a webpage needs a picture, a CSS file, a JavaScript file.

Let's take a look at the path that this page went through before it was shown:

1. Browser Download HTML file
2. The browser reads the HTML file and discovers that it involves a CSS file, a JavaScript file, and a picture
3. The browser starts to download this picture
4. Browser found unable to display Web page without getting CSS and JavaScript files
5. The browser downloads the CSS file and reads it to ensure that no other files need to be accessed
6. Browser does not get JavaScript files or cannot display Web pages
7. The browser downloads the JavaScript file and reads it to ensure that no other files need to be accessed
8. Browser discovery can now display Web pages.

The path above is the loading process for a simple Web page. Now, imagine your Web page loading path. You will likely have several interactive buttons, several CSS and JavaScript files, lots of pictures and widgets, and possibly even audio or video files. This means that your rendering path is likely to be like a big maze. The rendering path for most Web sites is extremely complex because there are too many files that the browser needs to load before displaying the Web page. This is where you can surpass others. If you get your page to load faster than your competitors, you'll get the visitor's favor (Baidu likes developers like that), such as the path to Sina Weibo:

Rendering process

Among the many resources required to display a Web page, there are some resources that block the rendering process of the Web page. The two most common types of resources are CSS files and JavaScript files. No matter how many files you need, the browser must download and parse the files one by one before presenting the content to the user. Let's look at one of the most common scenarios:

WordPress Blog uses themes. Almost every WordPress theme contains multiple CSS files.

Many of the topics contain six or seven CSS files. All CSS files can be merged into one file, but when you add a theme, it contains multiple CSS files. So, before your blog shows even a word, the browser has to go through six or seven times to interact with the server, the files are downloaded down one by one, and analyze the read, before they start to display.

During the loading process, visitors will only see a blank screen. Because only when the critical steps are finished, something will show up.

However, even after downloading these CSS files, your blog will not be able to complete the rendering. Because WordPress themes also require several JavaScript files.

Therefore, rendering a typical WordPress blog page, requires the browser to interact with the server about 20 times before the main CSS and JavaScript files are downloaded. But, wait, now you also need interactive buttons, widgets ... Oh, no, for each of these parts, you also need to download several css,javascript files.

You may have to download dozens of files to make your blog appear in front of users. That's a problem! (Check your Web page to load what files, you can use the ONEAPM sessiontrace function to see the page load resources at the user's speed)

But the thing is not limited to WordPress, this article just take it as an example. The initial view of creating a Web page is usually a lot of resources, so multiple requests are generated.

The essential

At the moment I'm just painting a very hazy blueprint. The good news is: You can ask for your page for a
Millions of resources, including 12000 images and 200 JavaScript files, which can be loaded within a second.

How is this implemented?

As long as you understand the key steps required to display the content of the first screen for your site, you can do so.

The most optimized rendering path, in fact, only focuses on three things:

Minimizing the number of critical resources
Minimizing the number of critical bytes
Minimizing the length of a critical path

Measures to understand page loading speed

When Baidu talks about page loading speed, they don't mean the total time it takes to load a Web page. They say the time it takes for the user to see the first screen, and the time it takes for the user to start interacting with the page content.

Baidu began to use page loading speed as a factor of influence, based on their user satisfaction. When users use Baidu Search, they are taken to a page that takes a long time to load, which is undoubtedly a bad experience.

People complained to Baidu, they said: "Why take me to a load so slow page?" "Obviously, people perceive the difference in speed.

This is a bad experience if a user wants to stare at a blank page for 10 seconds and wait for it to load content. Baidu does not want to appear in their results such a page. If that page can display content in 1 seconds, this is an excellent user experience, which is what Baidu wants.

When we discuss the speed of the Web page, the most concern is to display the first screen content as early as possible to the user. The ONEAPM sessiontrace feature allows you to see how quickly each resource is loaded and to easily adjust the policies for loading resources, such as

Subsequent:

In fact, optimize the page rendering road there are a lot of tips, plugins, methods to wait, in the future we will be in the next article one by one and everyone to share.

This article is compiled and collated by ONEAPM engineers. ONEAPM is the emerging leader in China's basic software industry, helping enterprise users and developers easily implement slow program code and real-time crawling of SQL statements. To read more technical articles, please visit the ONEAPM Official technology blog.

Key to impacting web page rendering