Immersed in performance

Original author: Steve Souders
  • Transfer


Hi, my name is Steve Souders and I work for Google in a team that "makes the Internet faster." This is incredibly cool. The team has more than 50 people and our task is to make the entire Internet as a whole faster, not just Google services. In addition, I help Airbnb, Twitter, Facebook, just posted a detailed description of Pinterest's performance improvement system. We want to make the global network faster. I mainly write code, create various utilities and analyze what happens on web pages and browsers, and much more. And today I will talk about a lot of what I have already done.

This post is based on a presentation by Steve Souders.


I have a lot of detailed materials on my site. Here I propose to plunge together into an atmosphere of increased productivity.

Useful tools:

Metrics


Let's start by talking about metrics. In the context of performance, this means that we really mean speed. I want web pages, Internet browsers to work faster. So how do we measure this. After all, if we do not track changes, we will not be able to really understand what we are doing, and we will simply do something blindly. Another thing that I constantly repeat: you always need to record indicators in a bad state of affairs. Be sure to do this before you start to correct and measure something, because everything you do should improve the result. People usually get so hung up on the product itself, try to fix something, and ultimately forget to track performance. And from this point of view, they lose a very significant part of all optimization. Also, many are afraid to show their boss bad performance. I recommend then showing them without dynamics. Just fix the minimum, make one or two improvements, and then show how cool it has become and what an excellent job you have done, and then you can ask your bosses for a bonus.

When it comes to performance, we usually measure speed: how quickly certain processes occur, and usually we are focused on the window ... There is one way to get these measurements from real users. It is called RUM - real user monitoring, which just means "user monitoring". Real people, real metrics. We just put Javascript on your page and track the user’s download time.

For about a year now, the Google Analytics tool has been working. At first, such measurements were included only for those who checked the box, and after 6 months of testing, everyone turned on this function. Anyone who has Google Analytics on the site right now can open the settings, go to the “Behavior” block and see information about the site loading speed. By default, the last month is displayed, but you can see the average value. For example, I am interested in the response time of the server, because now I often quarrel with my hosting provider because of this parameter. Here you can also see various graphs, peaks for the last month, response time of an HTML document. With Google Analytics, you can monitor a lot. You don’t even have to select anything or build any special diagrams,

Here you can also see the distribution by country (everyone likes to view world maps with data). You can immediately see in which countries our site loads slowly, and in which quickly. You can see how many exit points have been analyzed. Much, of course, depends on which country the server is in and which user. But sometimes the speed is too low, for unknown reasons.

Now that you know about this presentation of data, it has long been available in your panel in Analytics. You can also track different load times in Google Analytics. For example, you would like to know how long the picture on your site loads. You can add an image and have GA track its loading time.

Of course, Google Analytics is not a panacea, but only one of the options, there are other tools. For example, mPulse from Lognormal, which was acquired by Soasta. Or Insight from Torbit. People get involved in data analysis and performance improvement. And there are many RUM products now. There are those that are embedded in the browser, there are some third-party programs. On my site you can find the Episodes system code, which I did for Relic a couple of years ago. It is open source, so you can download and watch.

Optimization


If I want to make the site faster, then I will try to halve the loading time of the site itself. So first measure the total load time, and then the connection time to the server. And if everything is in order with the server, then start working with the site itself - optimize the database, check Javascript or CSS. After all, something slows down the work of the site.

As tools to help optimize load times, I can recommend:

By the way, there is one subtlety. In Safari, we will not see the total load time or server response time. But the latter is one of the most important parameters. Most often, the server response time is 10% of the total time. If you get it much more, then this is worth focusing on.

I really like statistics from real users. If I have a lot of visitors, then I can check various parameters and find out why in one place or another the user has my site loading longer. I love real data, because this is the behavior of real people, here you can see information about their equipment, connection, geographic location and much more.

Another point. What if the page does not load after clicking on the link? Suppose a user has slow internet when it takes 60 seconds to load a page. In fact, after 20 seconds, usually people leave this page. In any case, it is better to never take into account the worst load times. I set the time for myself to 10 or 20 seconds, all that is more is cut off. True, it’s worth looking at general statistics, because if most users download in 40 seconds, it’s stupid to cut them off with a limit of 20. In general, there is such an approach, but you should not use it thoughtlessly.

Synthetic tests


An alternative to testing on real users is synthetic tests. For example, you are in a laboratory where you use a tool to download pages every minute, or you use a service like Keynote or Compuware. In fact, one of the best synthetic tools to date is WebPagetest. Of course, he does not do everything that is needed, but if I need to give a person advice on where to start, then I will advise you to start with this service. This is an open source project.

You can check your site yourself right now. Everything is quite simple there. It shows the loading time, the number of requests, how much the page weighs, how long it takes to load certain elements, a table with all sources and time for each, etc. A lot of information that may come in handy. This is just a synthetic test, but very convenient.

Useful tools:

Optimization


Another thing I want to talk about. We ’ll open the site www.airbnb.com in Internet Explorer. What will we see here? The site has about 5 scripts and three sets of styles in the document headers. Most likely, these scripts will be applied regardless of which page we are on. And what do you usually do when there is a headline with some of these scripts, links, sets of styles and tags? Just drop them, right? So, if we do this, then some processes will start a little faster. And that is important. In any case, we have a long page, two sets of styles, a script, a couple of pictures, another script, a couple more pictures and so on. There is a kind of blockage that you need to get rid of, and everything will work faster.

Take a look at the same site, but already in Chrome. The large picture loads quite quickly. The download sequence is different here. HTML document, script, style, style, script, script, script, script, image. A completely different download. And after all, the document does not indicate the loading order. This is all the “initiative” of Chrome. Since 2008, we have been working to ensure that sites load faster, thanks to the so-called “speculative loading”. Previously, everything happened like this: when you start downloading a script, nothing else can happen at that moment. If there are three scripts in a row, then the first one will be loaded, executed, then the second, executed and so on. This is all very long, alas. How it is implemented in the above browsers: I start downloading the first script and can continue to parse the document, because the script can do something, which will change the state of the DOM. But what if I do an advanced parsing, very easy, which searches only a few specific tags, for example, IMG, link, IFRAME. And if I see them, then I simply throw out these requests.

And now, in many modern browsers, advanced speculative parsing is presented, so that we can load several things in parallel. Look at all these scripts downloading in parallel, and style sheets and other files. This is all due to speculative, advanced parsing. This technology made it possible to speed up the loading of sites on average by 30%.

Interaction with the page is very important for the user. Without this page, a person simply looks at a funny little form. In IE, it has a request number of 6, and in Chrome 18. Here's how Chrome works: it does not preload any images until the first rendering event. And the output to the screen is blocked when scripts and style sheets are downloaded. Scripts and CSS are preloaded, Chrome already has resources that block rendering, which in turn blocks the start of image loading. So, this image, in accordance with the code, is locked. What we really have to do, and I’ve already spoken with Chrome developers, is to make the system smarter. This is new code, so we learn while we do it. In general, it is quite interesting, it gives a 3% increase in speed. We should consider really big pictures, special backgrounds,

I wrote one useful tool, Cuzillion . He has the great slogan "Because there are zillions of pages to check." Suppose I just need to make a test page because I'm tired of doing a bunch of test pages in PHP. This script is loaded in a couple of seconds, another couple of seconds is spent on loading the picture. Items are loaded in a checkerboard pattern. Of course, it could be done in parallel, but, according to the logic of things, it is nevertheless necessary. The total page load time is, say, 4 seconds.

If we place the image above the script, we get a solution to the problem and make the download faster. But we cannot put the image at the beginning, but we can move the scripts down. You can also create JavaScript scripts here. But if you go this way and write everything in JS, then you can put it over the script. And now, if we create a page, the load will be parallel and the total time will be, for example, 2 seconds instead of 4. Let's say there is an image on the page that sets the tone for the whole page. What can be done with it? Put it dynamically at the very top, to all scripts, and they will be able to put the picture as the IMG value relevant for this page.

Useful links:


I also want to talk about HAR. This is the HPR file format, JSON format. Today it is an industry standard. The main idea of ​​a HAR file is to capture all the information from the chart and provide the ability to recreate the chart from the file. Charts saved to files can be sent by mail, published, and everyone can view them. Those who will make performance analysis systems can also take the HAR file and conduct analysis based on it. That is, HAR is a very useful tool that I would like to draw your attention to, as with its help, you can record what is happening on the sites, including the speed of various processes.

Useful links:


And here is another project, HTTP Archive http://httparchive.org/ . It was launched about two years ago. This is part of the online archive from archive.org, we run it every two weeks. Now there are about 300,000 links. We took the Top 300,000 addresses in the world and analyze them, we get statistics. We even have a mobile version, but it is not very popular. We only have two iPhones, while other phones are much slower than computers, so you can only watch 5000 links. Here you can see statistics, diagrams and all page resources. Two years ago we looked at only 10,000 pages. I hope this will be useful for your tasks.

By the way, I will very briefly touch upon the topic of mobile phones. Everything is very simple: the site is very slow on the phone. How long does it take to download? There was no way to find out. And then I did LoadTimer.

Let's pretend that you launched Loadtimer.org on your phone. You can select different addresses and click Start. It took me an hour to do this thing. It's just an iFrame, it loads your address into itself, measures the time and shows you. There’s nothing complicated and this “browser” can load any page, you can check it on your phone even now. So far, this is perhaps all that can be made interesting in the mobile web segment.

Useful links:

That's all. Thanks.


Also popular now: