We optimize the web with Vitaly Friedman: download speed, memory, CPU

 3r? 3569. 3r3-31. This is the second post about all sorts of tricks in front-end development. It addresses the issue of optimizing the site, its download speed on devices with insufficient RAM and a slow CPU. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. A separate conversation about the tools that will help speed up and monitor the work of the site and third-party applications that are connected to it. Plus a story about the features of the layout of email-mailings, which will surprise you a lot. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. We optimize the web with Vitaly Friedman: download speed, memory, CPU . 3r? 3551.  3r? 3569. We optimize the web with Vitali Friedman, - compression, images, fonts, HTTP /2 features and Resource Hints . 3r? 3551.  3r? 3569. The second part: 3r33551.  3r? 3569. 3r? 3551.  3r? 3569. 3r3331.
3r3333. 3r3334. 3r3335. 3r33565. 3r33565. 3r33565. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33545. Mustard and slow devices
3r? 3551.  3r? 3569. This part is about performance. How to increase it? For a while, we used the Cutting the mustard technique. Its essence is to find out with the help of a snippet whether we are dealing with an old or new browser. Depending on this, it was determined which script and styles to load, so as not to load them with unnecessary functionality. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569.
browser.  3r? 3569. 3r? 3551.  3r? 3569.
3r361. 3r33565. 3r? 3551.  3r? 3569. Then it became possible to replace the sequence from the querySelector, localStorage and addEventListener with the visibility state API - and that was basically what was done in small projects. But there was a problem with this technique - the same thing that happens with all other technicians, including those that you use. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. The problem is that when we want to give beautiful styles to a new browser, we don’t know how well it will draw them, because it depends on the device on which it is running. The fact is that there are devices from the low-end segment (for example, Motorola Moto G4), which have little RAM and a weak processor. Nevertheless, they installed a new browser that supports all (or almost all) technologies that we have. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Therefore, to use this technique today is no longer possible. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33545. In the footsteps of Google with Moto G4 in your pocket 3r33546. 3r? 3551.  3r? 3569. Why not make it so that the responsive layout is displayed only on those devices that "pull" it in terms of hardware resources? For this we can use the Device Memory API. If this API is not available, you can roll back to "cutting the mustard". 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. And here is the Moto G4:
 3r? 3569. 3r? 3551.  3r? 3569.
3r? 3551.  3r? 3569. Yellow indicates the parsing time of page 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. In fact, this is a very big problem. In order to parse 1 megabyte of scripts, Moto G4 takes 35 seconds. Considering that the majority of sites use only 40% of the entire script on the site, you can try to find a way out of this situation in order to reduce the time for parsing. Gmail, for example, commented on all the code and sent it as a text variable, and then, when this code was required, eval was made of this variable. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Google recommendations state that there is a so-called Time to Interactive Budget, a period of time during which most users wait for the opportunity to interact with the site - and this is only 5 seconds. Considering that 1.6 seconds are spent on networking, we only have 3.4 seconds left - that is, if we take an average connection speed of 400kbps, during this time we can send a maximum of 170KB of data. This is a bit to send something suitable for immediate use. Given that this includes frameworks, utilities, critical path, js, css, html, such a volume of data is very, very small. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r3124. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. How to fit the core application in 170 KB? Google recommends a lot of different metrics that you can use, they divide the download into stages by time: time-to first byte (navigation begins) - before sending the first byte, first paint - before loading the first picture, first contentful paint - before navigation on the site , first meaningful paint - when almost everything is ready for the content, visualy ready - before loading the entire page, time to interactive - before being able to interact with the page, fully loaded - when the page is completely ready. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. You can also use the jаvascript Bundle Auditing. If you use any third libraries, you can remove them from runtime using, for example, webpack-libs-optimizations. And, of course, you need to abandon gif. If you can give up the video, since the parsing of the video container itself also takes a long time. If you don’t get rid of the video, use 3r3162 to place it. img src > container. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Even if you have responsive images on the page, you can use the Responsive Image Breakpoints Generator. It will help to generate an image from the image you have uploaded or a group of images for responsive layout. You can specify how many kilobytes you need a picture with the help of generator engines. In addition, the tool generates the markup itself on the site. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r3172. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. If there is any important part in your picture, for example, a face or an object, it will make cropping the way you need it, which is very convenient. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Suppose you have a lot of pictures. Then you can resort to using LazySizes. This is a library that does everything the same as the previous tool, but only with jаvascript. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r3185. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. You can see where the time goes when parsing occurs. 3r? 3551.  3r? 3569. An interesting tool is Priority hints - in it you can ask the browser what is important to download earlier and what later. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. But what to do with critical CSS? It is not necessary if you have a good server and CDN, browsers try to open another connection if it is HTTP /1. And if it is HTTP /? they are trying to “guess” which CSS is needed and which is not. Therefore it is worth testing how the version with critical CSS works and how - if critical CSS is saved as a separate file as root. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33545. Guess.js
3r? 3551.  3r? 3569. Yes, we have a webpack, bundling, chunks. But what if there is a tool that with the help of prediction and machine learning algorithms helps to predict which chunks will be needed at the next iteration of user interaction? Guess.js using predictive analysis, based on google-analytics data, can understand what the next action the user will take, and download exactly that piece of code that is needed for this interaction. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. For webpack there is a Guess plugin that you can try. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Another tip: carefully choose a framework for development. Suppose we need to consider the following things: network transfer, parse /compile, runtime cost. Of course, there are tools for this, for example, you can test how your application will work in different data networks: 2G, 3G, Wi-Fi. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. The problem is that HTTP /2 is, of course, a good new standard, but it is always faster than HTTP /? and secondly, it is much slower on slow connections, especially if it is a mobile device. Another problem that it has is server push: if there is a server push, this would be an ideal replacement for critical CSS. In this case, the user, inquiring about index.html, would receive it in the appendage of critical.css. But as soon as we request a page from the server, the latter does not always know if it is already in the cache. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Therefore, a mechanism called cache-digest is being developed: if we go to the page for the first time, a server push occurs, and if no push - no repeat. If this is not the first entry on the page, the server will still push. This is a problem that Google decided to fix with QUIC. This is an add-on over HTTP, which will make the mechanism more thoughtful, it works instead of TCP on the UDP protocol. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. How to create a service worker? You can use PWA Builder, it will even generate an icon and manifest for you to make your application more progressive. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Then you can parse the data through the terminal: 3r33551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33337. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. And get the code that needs to be inserted into the block web page test, and then measure what the difference in performance between the application with a third-party scriptwithout them. The difference will be obvious. This does not mean that they need to be deleted. We just need to understand how to optimize them. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. As usual, there are also tools for this. You can insert this CSV into Excel and get a fairly detailed overview of what third-party applications you have, how much they weigh, how much they load. And it will be even more interesting to try a blackhole server, its IP: 3r33551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33350. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. To find out how your application will behave in case all third-party applications go into a timeout, add this ip to the hosts file and see what happens to your application. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Use the service worker to block or delete a third-party script if it hangs. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. With the help of Intersection Observer, you can see if the ad is displayed when it is next to Viewport. This allows you to load ad units when the user is viewing a page near the ad unit. The distance to the ad unit can be specified even in pixels. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. You can read about this in the articles by Denis Mishunov, "Now You See Me,", Harry Roberts “It’s My (Third) Party, and I’ll Cry If I Want To” , Yoav Weiss, "Taking back control over third-party content". 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33545. Responsive email
3r? 3551.  3r? 3569. The layout of email-mailing has its own features and rules. Img tags for clients without displaying pictures in letters need to be changed for something, so the alt and other black magic attributes are used. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33395. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. For normal layout of letters, table-header-group, table-footer-group and other table attributes are used. But what if you want something new, such as media queries: they are still supported in some browsers, but things are worse with mobile versions of email clients. What if to use:
 3r? 3569. 3r? 3551.  3r? 3569.
3r3405. 3r33565. 3r? 3551.  3r? 3569. Here is example 3r33557. such magic:
 3r? 3569. 3r? 3551.  3r? 3569.
3r31616. 3r33565. 3r? 3551.  3r? 3569. What is the total value of the box class? Depends on the situation, according to the specification we read as follows: if the width value is greater than the max-width, the max-width is in priority. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. But if min-width is greater than width or max-width, then min-width is applied. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. This can be used when media queries are not supported. Here is an example: how to make two out of four columns on a mobile? The answer: 3r33551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33432. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Roughly speaking, the width value determines whether max or min-width will win. This is a gorgeous hack! 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. How to make an interactive letter? For example, add live twitter feed there. Yes it is possible! There is a picture with all the tweets that are generated on the server every 2 seconds, we just animate it and that's it. So much for the solution. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. How to make an interactive email in which you can carry out the entire order and product selection? Look at the image and you will understand: 3r33551.  3r? 3569. 3r? 3551.  3r? 3569.  3r? 3569. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Laurence Penney gave a useful talk on this topic, necessarily
See 3r33557. .
3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Here is a comment from Hakon Wium Lie, one of those who wrote the font specification:
 3r? 3569. 3r? 3551.  3r? 3569.
3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. It is enough for the designer to create two character outlines — very thick, for a value of 100? and very thin, for a value of 1. All other styles are created automatically when needed. But this is true not only for the width axis, it also works with height. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33518. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Another surprise: we can create axes ourselves without much difficulty. To use for this in CSS you need the font-variation-settings property. It sets values ​​for high-level properties, such as font-weight, font-stretch, and others. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33535. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. Here is an example of setting the desired font by the font designer: 3r33551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33536. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. And what if this is not supported somewhere? You need to use some kind of font format, take care of rollback for older versions of browsers, and think about responsive behavior - set values ​​correctly for different screens. Thus, we use the WOFF2 format for fonts, it is more progressive. For older versions, the browser will select the font itself, however, this means some lack of control over the style. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33545. We summarize
3r? 3551.  3r? 3569. Summarizing, we can say that the specifications are accepted much faster than before. It takes two months and there are new standards, approaches, application. But this is normal, and it should be, this is a reason to develop further. 3r? 3551.  3r? 3569. 3r? 3551.  3r? 3569. 3r33553. If you like the report, pay attention: a new 3-353554 will take place on November 24-25 in Moscow. HolyJS
, and there will also be a lot of interesting things. Already known information about the program - on the website, and 3r33556. tickets 3r33557. can be purchased there. 3r33558. 3r33565. 3r? 3569. 3r? 3569. 3r? 3562. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d! ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r33535. 3r? 3569. 3r33565. 3r? 3569. 3r? 3569. 3r? 3569. 3r? 3569.
+ 0 -

Add comment