Developers should understand Web performance

What is the difference between the website of the website?

Is there a correct answer?

No, very unfortunate, not yet. The reason is that the website has many factors, and each factor is likely to slow down the website. Therefore, this article will not give you a list of needs, but intend to explain it clearly, how certain factors slow down, and what you can do accordingly.

As the proverb said:

Take people fish, it is better to teach it; it is only to save people with fish, and the people can solve their lives with fishing.

In addition to adding the “Async” tab to the script, or in the layout page, I also intend to explain the differences brought about by these modifications. This way, you can toss your application and confirm which modifications are useful.

By the way, these tips come from a wonderful conversation with Ilya Grigorik.

Introduction to Ilya Grigorik, he is the joint chairman of W3C Web Performance Working Group, Google’s Web Performance Engineer. Well, he is very visible to performance.

“One thing everyone should do is to speed up page load”

As I mentioned, there is no such thing. Web is some unexpectedly complicated. Make the phenomenon where the page is loaded in speed, for you, perhaps you can’t be a focus! (Let’s talk later)

However, some considerable factors often bring obvious differences. You have met before, but perhaps not understand why they are important.

Compression

Use GZIP compression to transmit HTML, CSS, and JavaScript, reduce the number of bytes that need to flow through the cable. This can significantly reduce the time of downloading resources. The browser renders the page, in which you are inseparable from HTML and CSS, so we want to download these resources as soon as possible.

2. Optimize pictures

I have a friend, and he builds a WordPress website for the customer. There are many websites often upload a lot of pictures, I have recently talked with him once. He encountered a problem, customers directly uploaded pictures in their websites.

The photo taken by the mobile phone exceeds 1MB. Even if you adjust the size with CSS, you still need to download this very large picture through the cable. Users with slow network speed needs to wait for a long time to open.

Fortunately, there is a way to pay. I have segment programs and optimized images. If you haven’t seen it yet, I highly recommend it to you.

3. Don’t transfer unnecessary stuff

Check out the scripts and CSS files in different pages, ask questions, these files are not true for the page. You are likely to find some files, and they have not been removed after they have been added.

The performance of the plugin in this area is really bad. A considerable part of the ebordpress website I have contained in a lot of CSS files, half of which is not used at some pages! Many non-WordPress websites have similar phenomena. When I examine some pages on ScaleYourcode.com, I also found that they are loaded into an unnecessary script.

Clearing scripts or style sheets will be scared. If it is really necessary for that page, just don’t remember, what should I do? Some tools can help us confirm, recommend devTools (under audits).

Can you see the commonality between these optimization measures? They all have reduced the number of bytes we need to transmit.

Progressive rendering

You need to give the HTML bytes to your browser as soon as possible.

For example: a request comes in, (ideal) Your data is cached, so the server can get quickly. Then, the browser starts parsing the data and presents it on the screen.

I just mentioned that the page load time may not be a performance standard you need to focus, which is grateful to progressive rendering.

Gradual rendering (source)

The page can be huge, but, as long as you present some content to the user in a short time (preferably less than 1 second), they still feel that the load is very fast.

Amazon is doing well in this regard:

Amazon progressive rendering

For this WebPageTest, you get the first screen in 1.5 seconds, but you can see that it does not contain all content. The content it contains is enough to let you start browse the page, or check the holiday transaction.

Then, to 3.5 seconds, the other part loads more transactions. To 6.5 seconds, some things are still loaded! In fact, the completion of the entire page will last until 18 seconds. Can you wait for a long time? I said doubts!

If Amazon is focused on the slowest page, then someone is anger. They focus on sending the most important bytes in the earliest packet. Further, they may be filled with the most important bytes in the first packet. I bet, they also focus on sending those bytes as soon as possible.

This is the origin of TTFB (TIME TO First Byte) Note 1. When the browser initiates a page request, it is in the state of waiting for a response. TTFB represents the byte that it takes to receive the first response. This time not only represents the time required for your server to generate responses, but also means that the time required to pass the cable transmission.

This picture has very fast TTFB. If you go online, you can see different TTFBs. What you see is similar to the figure below:

Why is this situation, how should we minimize this time? Should you focus on it? Nice question, I have prepared more information.

If you are interested in learn more, please refer to the wonderful speech of Steve Souders, talk about performance standards used to measure. Page load time is not always the best standard.

Can I make other factors that make content presented?

Since we have a faster TTFB, will each place will be rapidly presented? Not necessarily, let’s take a look at the key presence path.

The key rendering path is the step order of the steps that the browser is built to obtain HTML, build DOM, obtain style information, execute critical JavaScript, and draw contents.

God, there is a lot of work to do.

This is why we need to treat it with caution. The more HTML, CSS and JavaScript, the longer it takes. When you load a JavaScript file, add an Async tab because it is here.

When the browser encounters JavaScript, it may not know if the JS here is to change the DOM. So it has to assume that it will change, then it prevents rendering until JavaScript completed the execution process. If an ASYNC tag is added, it is equivalent to the browser, the JS is not critical to the page, so the browser can continue to render without waiting for JS execution.

If you touch the script of the modified page, do you mean that you should not be asynchronous? possible. Despite this, even if you asynchronously modify the script of the page, you will be practical from the user’s perspective. Users can see content and start interaction. Indeed, some places may not be presented, or you may need to wait a while. Of course, this depends on your app, so try it, see if you meet your needs.

The key path is so important to receive bytes as quickly as possible. The earlier you can start processing the entire process, and you can complete it. For optimizing the key rendering path, please refer to here.

How do you measure asynchronous (or other optimized ways) Good and bad for applications?

There is a good measuring tool, webpagetest. You can get a variety of useful information, including slide views. The slide view is the visualization process I just used to show the Amazon page. You can use it on your website and there is no difference in asynchronous differences.

Until recently, DevTools implemented its own slide view.

Open Chrome DevTools, click Timeline -> to open Screenshots -> Reload page.

You can see the screenshot of the page load. Not bad right?

Now you can:

Switch your network speed (remember, not everyone has a super fast internet)

View slide view

Change the script to asynchronous (or make other adjustments)

Contrast slide

You can adjust the network speed in DevTools

Another tool is SpeedCurve, this is my recent unintentional discovery. It developed by two smart guys: Mark Zeman and Steve Souders, it looks very helpful.

DevTools is very excellent, how can we better understand its usage?

The difficult point is to increase the side effects caused by too many features.

In addition to watching the above example, what is the better way we start learning and practice? For how to use devTools in the actual website, Paul Lewis and others have experienced. Here is an excellent example of repairing the problem of rolling performance.

More

This article is only a short summary of the entire interview process. We have deeply entered a lot of details in interviews, covering more important topics (such as what is different from HTTP / 2, and whether we still need minimization and string).

You can read all summary or listen to an interview here. If you need, please refer to the following video: https: //youtu.be/aayh2faygqc