GFM2019-Web-Making the web fast, even on 2G-Jake Archibald
Hello everyone, how's, it going good. Ha okay. So. The. Slippers are over there I'm just in my socks for now yeah so oh. My, it's the uniform, okay kiss disconnects oh oh okay. I can, pick it up from see so early, this year fewers, went on a fact-finding, mission to India to see how, folks here use the Internet, and one thing stood out to us yeah and that is that feature phones are back yep. The future phone market, doubled. In 2018, in India and the six sale of the smartphone flattened, a current, lates 400. Million, feature phones will be sold in India this year yes. And whoever's. Controlling the speaker if you could make the music stop coming out of it because I feel like I'm on a really weird music video right now, thank. You that's good okay, so. These phones they're pretty different from. Smart phones right yep but, your phone for instance is 400, 240. Pixel, wide display, single. Density no, touchscreen, the processor, is awful. But, they're relatively cheap right we all know that your phone is very cheap and it's getting millions of people online, for the first time who couldn't afford it before yes. Also the geophone is a web-based phone is running iOS which, is a fork, of Firefox OS so it's running well, Firefox of 48, we've seen some running 42 48. I. Think. Kai OS 2.5, is running for Firefox, 48, and, a lot of companies India here are produced, a web app for these phones such as z5 but, we wanted to see if by ourself - how far, we could put these, tiny, devices yeah. I'm gonna see if I can get my clicker working again here we go. Hahaha. No yeah, well do you know it's, good redundancy, that we have two clickers yes because, you can take over so, yes a little team of us got together consisting, of America, yep, and Jake and. Sama. He's. In England yeah, yeah he's in England it glints that way I think works out well yeah maybe that way I don't know if you go far enough I think you could go both ways yeah.
And The fonts both have these thinner, lines meaning, they, are setting up connections this. Is because the CSS is on another, server from Google. Pio so calm so it has to start near connection, for new domain and, however if we look inside the CSS as well we, can see the fonts they come from, another. Server Fahnestock, G static comm so that's yet, another connection hmm, so a quick fix here is to copy the CSS and the font onto our own server then, the way you can. Hardly be, used the existing, collection, for the index.html, and in theory, that should improve things by a second, wait you, can't just do that fonts. Are protected, by various intellectual. Property, laws including trademarks, copyrights, and design patents copy them to your server may violate, the policy of the rights holder but. Why. Our studies may be true for many font providers, it doesn't, apply to google, fonts. So. You allow, to host, and them, on your CSS, and on your servers Oh disaster. Averted, I for one will be able to sleep at night it's great. In. Fact this, is so small we may as well just inline. It in our HTML what. About these fonts right the browser tries to be smart when it comes to font downloading it won't download the fonts until it finds something on the page that actually needs them and that means it has to wait for the CSS to download and it has to wait for an element to appear on the page that contains text, that, needs that font and, this is good in some ways because it means the browser can avoid downloading fonts, that it doesn't actually need on the page but in this case we know it, needs those fonts yes so the answer here is link, rel Pluto attacks in the header of the document this tells the browser to download that phone file the particular thing, that you want to use and then hold it in memory until. It's needed and with, those small changes we should see, this yellow line shrink, when, we next passes, through the web page test well, at least that's the theory anyway but. We have to get this working with, our built tools so, here's, the create HTML, plugin that we that we created earlier what. We're trying to do here is going to inline CSS for the fonts and add, a preload tag for each of them I'm not going to go through it step by step because we only have 40 minutes here it looks a little like this there, it goes just. A few seconds yep at, the start of the build we use the low-lux emit a set method. To bring our, fonts, into our build and then mean this, means rule that will handle that file name hashing, for us then when it comes to generate our HTML. In this plug-in we, passed that the into, your template. So. Where this helper gives us the final URL for, the font exactly. So now we can use this data in our template so what I'm gonna do here is iterate, through the the, font data that we put into the template and we're gonna output a style tag that defines the font and that's just using the data that we passed, in via, the plug-in and.
That's, What we did we. Created to build one for users and one for puppeteer, so let's, take a look this. Is an entire plug, in the plugging only does something, when the import start with Const, and if. You find such an import it generates, a curve containing, a default, export on the fly, but. It that's, all. Yes, I use this plug-in everywhere okay. So here's the comparable, webpack plugin to, do the same thing, if. You want to benefit from the dead code, elimination side, of things as well again this is not something that I would feel comfortable hacking, around in now, it you might feel that we are giving, webpack a bit of a beating here. It's. Because we kind of are but late the honest truth is that the difference between working on a project with webpack and working on a project with roll-up has been night, and day for us they weave roll-up not only did we feel that we understood what was happening but we felt capable of changing what was happening if we needed to yeah especially with, lestrade and past like making, workers on, the integral, part of our architecture it, was invaluable, yes, absolutely, so now we have this optimize, server render what do we win what is the real world impact well here we go we've, pushed that read nothing render time right back we've cut almost, two seconds, of white screen on 3G, three, seconds, on 2g this, is a massive, improvement to, the perception, of performance, yeah so the yellow earlier, the present time that we've Leonard, but up isn't, yet interactive, because the Jas hasn't, lured it but at least the user is seeing some progress, on the screen it's not the white page so, what's, next, looking. At the network waterfall the, symbolic, at the start of the connection, setup it's, a setup and, the thick block is everything, between the liquid starting, to the final, bite of the responsive, being received yes. And there's another feature that we can look at here that says a feature that's also in a, web. Page test and also chrome dev tools we, can look at the time to first byte and this is how it tends, to represent, it this is the time taken up by the request and waiting, for the server to start sending, the response yeah, as you can see there's, a pretty big gap between the, receiving, the HTML, and getting, the first byte of those important, assets it's about 400 milliseconds. On 3G and a second, on 2g, yeah there are two solutions to this number. One is HTTP, to server push no, no. No. A stupor. It's, incredibly. Hard to get right we've, seen teams of a good number of experts, trying to use it and they, barely, break even on the performance, side okay, so that leaves the alternative, which is inlining we take these assets and we put them straight into our HTML yep. So first up our fonts, so in lining both our fonts are at least twenty kilobyte remember each bold, and the normal is ten kilobyte each to. Our HTML which is kind, a lot yeah, so I took a look, inside these fonts and I, found some interesting stuff, here I think. Three-quarters. Upside. Down question, mark. Surprised. Face. Once. Again don't know what that is this is for cases where you need a P and a B at the same time we've. All been there and, this one this is like I know this looks like a sort of elephant that's sitting. Something. Something like that does that make sense yeah. So. The point is none. Of these characters, are in this, set the set of characters, that we, are using on, this. Opening, screen right all of the characters so we figured we'd just enlightened, that you. Know kind, of like a tree seeking for the code in. The phone people. Call it sub setting they are command line tools for this but, most, of those phone tools use Python, and I don't need any like Python so. There's. A little-known feature in google, fonts the. URL, for the font CSS. Can include, a text, poem I like. Places. If. You include the text plum the font in the style sheet will be subset, it just include those character, Jake for. Those summaries characters, so we, use that to subset our fonts and then went, into the style sheets to download the result yes. And then we use our build script to to open these files and spit them into the template as base64. URLs, and this added only 4.5, K, to the HTML, like much less than the 20k, for the full fonts and we still load the, full fonts we, load them lazily in the background because we need them for future. Parts of the game like the main part of the game the screen things like that but we don't need them for that very first render right so let's look at how we do this here's, our create HTML.
You From making like simple, changes like editing HTML to. Help that users, um get, a better, build tools yep. Thank. You very much.