 Well, first of all, thank you all so much for coming here today. I I promise this is This might be one of the better talks. Maybe I don't know It's it's up to you guys to tell me that and so You'll have to forgive me if I'm actually asking you to rate now and then I'll ask you again at the end, but Has everybody rated the other talks that they've been to? Yes. No Well, we're gonna start rating our attendees. So Yes, it's only fair So this is web performance in 2017 First before I go into the discussion I Want to say a super big thanks to the Drupal con team, right? They just they've done an amazing job They they do a great job every year and it's it's really amazing what? How this really works out for us, you know to all get together and congregate meet each other and you know learn more about Drupal and each other are doing But and once again, you know, really a big thanks to you the people that are really attending the conference and coming out and making this A possible three thousand people plus that's no small feat and also thanks for coming to this. I know that It's almost a wrap. I know this after lunch, you know, and I know that it can often be a snoozer So I'm gonna try my best to make that not the case this time around so Please note a couple of things real quick at that This session kind of assumes familiarity with performance and you know making performance a priority in your work You know, I'm gonna be speaking as if you know, you're already into this stuff. So, you know Forgive me if this isn't like really kind of like a novice type of talk You know, it is marked as advanced and you know I will probably speak about things in a very casual way in terms of technology and so if If it doesn't make any sense, please feel free to ask a question or for clarification at any point Also, this session is not exhaustive. I only have an hour I'm not gonna try to talk about everything I'm I just want to talk about the things that that I think are really interesting and you know And really relevant to performance today in terms of you know The main topics that we'll cover here in a moment So here's the plan I'm gonna talk about really kind of four sections right first thing is I really want to talk about measurement and that you know The activity of measurement Next I want to talk a little bit more about networking and how it relates to performance I think that we'll find that that the majority of performance in the web. I find is really at the Comes down to networking and then you know everything else after that We'll cover aspects of UI and so for more of like the front-end engineers and then those those different concerns that you have And then after that we'll talk a little bit more about code and and the impacts and performance stuff like that I do want to have time for Q&A after each section I don't want to wait until the very end if you've got a question to ask me about Measurement, let's talk about it when we're talking about measurement I don't want to make you wait till the end and so and that's really the plan. Is that is that cool? Excellent excellent. Thank you. Okay Measurement so measurement in my mind is performance you can't Tell if your Website is performant if you're not measuring it Does it make sense? And so that's I think that's the real when everybody anybody are actually is going to get into performance That's the first thing you're going to do is they're going to find ways of measuring it They're going to start learning about tooling and they're going to start getting a benchmark of kind of like where they're at And so the big one Everybody is a web page test is every anybody use this before it really show our hands. All right See this is what I'm talking about. I assumed you already knew about it And so it is absolutely free and it is awesome And I was running it on droobl.org last night and some of the slides really kind of include some of that information In fact, they got an amazing. Come on. You got a clap for that. I look at that. That's a Yeah, so they're doing a good job at it, right? Those those association dollars are paying off Okay You know for you know just to talk a little bit more about the tool it does it has the killer waterfall And I think that those are we're gonna talk a little bit about it But I mean that's one of the really the the best features that I want to point out that you really need to know Well when it comes to performance The recording is amazing and I you know It's really good to be able to see what's going on and I want to point out that some of the key metrics Behind you know your results are actually related to the recordings and when you get through the transition between the white page And then the actual rendered content What patient test has a very handy API and I'm going to talk a little bit about how that that API can be leveraged You know for your kind of like long-term strategy related to performance But first I want to talk about some of the you know really kind of talk about the key metrics So the speed index everybody familiar with speed index and no well, it's a calculated metric It's mostly voodoo, right? But the real goal is that you want to target less than a 1,000 and that's actually Kind of tough to do frankly. I haven't seen very few sites actually achieve it or at least it consistently over a series of runs The first paint itself is reported by the browser was so was which is interesting because it's we're actually having to jack into the browser itself and To determine when it when it says that it's actually doing the painting it seems logical But that metric is important because you've also got the start render metric which once again is really based on Content actually showing when it comes to the measurement tool itself You know, we've got the visually complete the end render Which we would call it and that's just when everything all the DOM is parsed everything is loaded and it assumes that everything has actually been been rendered as in particular the below the fold content and then there's of course the document complete Metrics DOM loaded Especially for the JavaScript crowd you're pretty familiar with what this says and then of course there's the fully loaded metrics, which I think are really important because You know your page might load and everything that you intended to load is good But then if you're doing any kind of digital analytics or you're doing any kind of third-party tagging That's part of the fully loaded metric And so you might have this blazing fast sub-second page that loads instantly But then three or four seconds go by for it actually to be fully loaded And so that's that's that's part of it and most of the time the manifestation of fully loaded is going to be the little rotating wheel up on your tab and so Does anybody have that see that on websites? It looks like the website's loaded, but it's just churning That's what that is and it's usually everybody else's fault Okay, so and and we'll and we'll see how that's even happening on Drupal.org is a good example, so There is a full deck Explanation of all the various metrics and kind of how stuff for instance how the speed index is calculated and other things that are available there for their documentation So highly recommend that you take a look Now yes, I've plugged web page test. I don't work for them, but it's great, right? And the point is that that metrics can be monitored okay, and The monitoring can be automated and in this case that would lead to a performance budget And so has anybody here heard of a performance budget before yeah a couple of hands who's actually got a performance budget Yeah, cool. Excellent. Yes. Well then so we came to the right talk so performance budget It's you know you set these constraints and then you get alerting you get something to tell you hey, you know Let's say the number of items that you want on a page can be a constraint the actual You know DOM loaded time right All kinds of different metrics and being able to go and set that criteria and then to be aware of when that criteria is violated Is just extremely helpful especially for the long-term performance impacts, right? And a lot of times so that we just do a lot of work on our websites And we don't know what the impacts are what things might make sense and look really good And especially with the new technologies, but we don't know what kind of impacts we're actually bringing down on our site So you know there's a ton of different options you can do Of course you can set up a private instance and with some good automation of web page test Don't necessarily recommend that unless you've got you know the time and the the dedication to it But you know you've also got other things that this comes back to the API of web page test So there are tools mostly npm packages that will leverage that API to You know run tests report back the metrics and then actually you know Compare it against the thresholds that you set as a configuration of that package that stuff's great especially for the JavaScript folks, but I Can't really say exactly how that would fit into the Drupal ecosystem per se. You know your mileage may vary You have the services right, you know, you've got web performance and Dynatrace And there's just there's all kinds of services out there that you can get and some of them We even do things like compare you against other web pages and see how you stack up in your industry Which is which is pretty cool, and then you know There's definitely a lot more than I'm leaving out right and so there's There's just so much out there in terms of the performance budget as long as you know it really comes down to You know your attitude, you know if you if you're dedicated to performance And you want to make sure that you stay perform at a performance budget is really kind of you know a must-have and I really recommend that you read all about this topic There's just so much out there about how to do it especially from a lot of people in there Well known in the Drupal community and so I highly recommend you take a look at it now Not there is you know of course web page test and there's things like page speed inside stuff like that But I highly recommend that if you're just in your browser And you're in Chrome you can look at something called the audits And it will you can run it on like a fresh load state or you can actually run it when you're on your you know When you're actually loading a page or a fresh load And I'm not going to run it right now because I don't I learned my lesson on live demos Okay, especially on con internet. Mm-hmm not gonna happen. Sorry, so But if there's a couple of cool things if you want some like gotchas want some like meat This one's really fascinating right here of this remove unused CSS rules It's cool about this is this well if you unconsolidate it It will actually expose all of the selectors that are not being used and it will aid you and Identifying what's not being used which is actually kind of tough because you can't know until you actually render your elements And if you're including something like like bootstrap or foundation or any kind of library You know you just get it. It's just coming in that's one of the the great things in terms of the tools and As far as d8 is concerned I am working on a sandbox module for running performance budgets using different plugins and That way it can actually be inside of your ecosystem The idea is that it would run on cron based on a configuration you would set it would you know You give it URL or multiple URLs it will actually run it against the criteria You set in the CMS and then it can jack into something like the status page and status report And so you can get an alert. Hey, you know Sometimes going on and I think that's the surfacing it inside of your site. I think would be good having it External is better than having nothing granted But trying to get as many eyes on the site in in question I think is really kind of the goal and so if I can make it a turn key module you just install Hey, there you go. All right, and so that's really kind of the goal contributions are accepted so Questions for measurement anybody come on. There's just too many people here not to be any questions. Come on No Oh, yeah, please. Yeah, okay So a lot of times when working with clients, you know They want the site to be performant and we say and obviously what you can do depends on a lot of different constraints It may be out of your control so What recommendations do you have we're saying okay? This is the target that we are shooting for that is understandable to a not necessarily technical user That's a that's a great question. So to repeat just to make sure I understand. How do you convey? Some kind of metrics of some kind of target to a non technical person I Don't work for an agency. So I haven't For in a long time and so I haven't Had to interact with clients in a while So I'm not you know forgive me if that's a weak muscle But I would do I would just try as hard as I could and took to convey it and tell them that you know Most people can understand that hey Say for instance most mobile users will leave after three seconds right or some the real popular metrics about you know Why a fast-loading site? You know it is meaningful and I would convey that to them and then I would try to you know Use those metrics to kind of say like you know, we're shooting for three seconds We want to keep you inside of what the industry says is you know the good confines and and then that way that If you need to spend more time Doing development to achieve those things then you at least you can have those Yeah, yeah, you good. Okay. Yeah any more any more No, okay, this talk's gonna go pretty fast so Okay, so next I'm gonna talk a little bit more about networking Related to performance that particularly about HTTP and you know browser technology in and of itself The first HTTP to who's who's got HTTP to ready to rock a Couple yeah, so I have you know what and probably more of you, but you may not actually realize it So who's hosting on say like aquia? Yeah, you've got it who's who's behind especially for behind Akamai who's on a pantheon Yep, you've got it too. And so that's one of the bit the neat things about HTTP is that You don't even know it. It's completely transparent to you yet those things Heavily factor the performance of your website or your sites or your applications So in particular, what is it now that you know? We've introduced it it is binary instead of textual So we are transmitting, you know just bytes not just you know Not just the bytes that represent the text with the actual just raw bytes, which is easier It's easier to parse so about a lot more compact over the wire The connections are fully multiplex and so that means that you open one connection to an origin of some kind And you can download multiple items in parallel instead of like a sequence of connections, which is really nice that way, you know Those when those things are downloaded in parallel. It just it makes a lot more sense and the waterfall is compact as well header compression which is in my mind probably the biggest feature because you know headers Describe the document and really control your page, especially from the browser's perspective. And so in this case The compression itself is nice because Otherwise it would just be raw text this block of text even including things like new lines and all that and you know It's it's not all that efficient So now they've actually made a dedicated compression mechanism to Compress those headers and then everything goes over the wire wire real nicely And and then lastly is a support for for sort of server pushes, right? Which is you know, I think we're all starting to get a little more comfortable with push technology Especially on our mobile devices and and native applications The real goals are about In forming the browser of things that would probably be relevant, you know It's worth caching or worth pre-loading in some way in the background so that you know the Next click or whatever is going to be instantly loaded But it is somewhat experimental and the good practices have not really been identified Because most people aren't even aware that they're on HTTP to let alone taking advantage of it Server pushes could probably be problematic Especially if you get very aggressive with like hey, you know, you really need this this this this and then at that point You're really clogging the lines on your own, right? And so it's That's gonna kind of evolve over time and with with things like like big pipe and you know platforms like Drupal I think that you're gonna see a lot of things done to kind of make it a little bit more of a turnkey out of The box optimized option Next I'm gonna talk a little bit more about those those headers especially when it comes to caching and so You know once again, it does describe the document it tells you what its content type is it tells you what its length is But it all headers are also, you know, where the cache control itself is and in cache control is huge Especially when it comes to to performance, right? Because you want to cache as much as possible. You want to tell that browser, you know This contents is good for how long and give it an idea of you know, how to avoid those network around trips Just as a brief aside Has anybody in here heard of the notion of an offline first experience? Yes, awesome. I'm loving that the more important people are knowing that cash control is critical to this idea of making your website load once and actually run in an offline fashion, right in some kind of like Reduced experience and so these things like cash control are gonna be critical in addition is gonna be the very header Which for systems like Akamai for instance, if you've got a very header and it's got certain values in it It will refuse to cache that request because it's it's variable particularly around say like a cookie Or a user agent it will it will know that hey I'm only supposed to cash this response for a desktop browser or only under certain circumstances like a Response could be Jason right or a response could be HTML depending on encoding type And so that that header is pretty pretty important to to understand and be aware of and to inspect as you guys are developing Next is going to be the e-tag now. It's extremely cryptic what e-tag is but it's really related to identifying uniqueness when The browser is going to make a simple check to say hey like has has content for this changed Especially regardless of how long your TTL is It's still going the browser still want to make a connection out and they want to say hey has has this change You're just gonna change check a couple of headers to see if anything has changed and e-tag is one of those items If you have a server farm or more than one server, I want to point out that e-tag is very tricky because it's unique per server and so It can vary between machines and so if you're not you know You want to try to serve from from your cache Hopefully you have some kind of edge cache where you can help like normalize that value Otherwise you can be prone to getting new requests Next is cookies. Okay. I think we all know about the load of cookies especially when There's a ton of cookies and it is blowing up the size of your headers Right and so that's where h-pack comes in right and so that's where some of this other technology comes into help But you know, I think it's very important to know what's going on with your cookies and to be very aware of how that's affecting performance especially from a caching perspective and then lastly is going to be the link header itself now The link header and the link tag are essentially the same thing but where I want to point it out in terms of headers is that You know out of the box Drupal will give you a short link and it'll give you the canonical URL and pre-populates the link header for you But there's a couple of other very important values namely something like pre-connect or pre-fetch DNS pre-fetch where you can instruct the browser through headers to start obtaining Different items or different resources in advance or to start to establishing those connections right now In anticipation of other items loading in the future. And so it that that one's really pretty critical There's plenty of explanation about this on on the Mozilla network, but I highly recommend you take a close look at that stuff Next is really comes down to to waterfall optimization and And it's important that you know your waterfall. Okay guys And you know, there's a couple of important techniques that I want to talk a little bit about One of the things that Drupal is really good about is you don't see any third-party URLs at the top Right. They're really prioritizing that single connection, especially from HTTP 2's perspective Right and you to see this like everything comes down and you're prioritizing your downloads instead of say If you have images on the CDN or something like that that has a different URL You don't want to mix it in here, right? You want to try to maximize that initial load and then defer Connecting to other origins a little bit later I think it's important that you understand in the waterfall the impacts of things like DNS and SSL Right, which would be these these little bars right here a lot of times SSL itself can Take a hundred milliseconds or more 200 milliseconds And you know, that's just something that you kind of have no control over right But you know if your if your goal is to get a sub second load and your SSL is taking 200 milliseconds, then that's really that's a 20 reduction You have no control over and we haven't even gotten into things like the connection Or DNS for that matter I think it's important to understand the the differences between HTTP 2 and HTTP 1 in terms of the waterfall And I think that when you when you look at this this is a really interesting example of how everything starts really at the same time It's pulling in and that that parallel behavior If you look at more More common waterfalls, especially with the previous version of HTTP It tends to get staggered and and not be quite as linear in this regard right here And so that As you start to work on this just really start to get an understanding of like kind of like how the What that stuff looks like and and and do comparisons There's lots of examples out there that will demonstrate what you can expect in that regard And so I recommend that you look for that I think it's important to understand the impacts of resource hints themselves that I mentioned like a pre connect Where you can't really see that in this example here. Let me jump out and see if I can actually Pull one here we go In this regard You'll notice that this google analytics or I'm sorry this double click item right here You've got the connection But then you've got this big breakout here and that's because on drupal.org they've given a hint to pre connect to that resource As a result of this response up here directly from drupal.org They have done it inside of a link tag and said hey pre connect to this guy down here And that way when it's the connection is already established and done and then when it's ready to be loaded Or the actual items Considered in the dom Boom, it'll hit it You can see where we've got other items over here imagine if all of these Were moved over here You can see how like this request Is forcing everything over here to the right And so a pre connect would effectively shift everything to the left That's why this four second fully loaded time Could be improved by just simply indicating a couple of hints Right to just overcome that and and for drupal.org's perspective there's a couple of hints But they're not necessarily hinting everything and so there's there could be some optimizations made there And and actually i'm gonna go back to this just for a second here the the third party drag I mean drupal.org's done right here, you know Basically about 1.1 seconds right but What's all this? Right it's not drupal.org It's pixel geo perfect. It's pixel perfect stuff right it's it's all these other third parties and you know Digital advertising is a fact of life if you want to get visibility online, right? But what are the impacts of that right? It's you know, you hope you're making more money, but If you can directly link your web performance to your return on investment But they're dragging you down right it's it's these are the things that you know are important to know And this is where the budget comes into play because if you've got the budget Pre-established before you enter into some kind of contractual agreement Then if it violates it you'll know or if you're in the actual You know proof of concept or the initial integration phase. You'll have a clear understanding of how You know this additional resource is making things You know it's dragging on your website And so I think it's important that you understand the nuances Of third party drag, especially if you've optimized it in a way where you know You're expecting everything to be loaded up front real quickly There's a ton of guidance online for optimizing the waterfall and explaining every aspect of this much better than I can And I highly recommend you do some searches for this because that that waterfall is really a great visual tool to understand Where the bottlenecks are where things could be improved and you know kind of the state of the state of things So You don't have to only use web page test. We've got the waterfall itself built into The chrome tab and then you know you can get an idea of how things look over time This one is particularly interesting because You'll notice that the timeline is actually extending past Four seconds right and going into the five and six and seven seconds Which is odd because It just goes to show that there's there's tags There's different things that are being loaded and then it's doing more activity making subsequent requests Which is actually affecting the overall network connection stack and so it's It's interesting if you actually just leave the network tab open Does it keep growing or is it stay fixed right and how does that affect performance? If you're just continuing to connect make connections in the background, you know Especially if they're if they're blocking types requests so d8 highlights for networking I'm plugging my own module again But this is the resource hence module and it is a module. I've got it's an alpha for d8. It's it's already available For d7 and it allows you to specify the different kinds of resource Hence that you want it supports most of the major ones dns prefetch pre connect prefetching pre rendering Pre render is really cool If you can anticipate if you know that you're trying to to drive people like from a landing page to another page You can pre render a whole other web page in the background And then if they actually do navigate to that page it loads instantly So I've got that this module here to help support that Contributions are welcome once again so Q&A for networking So server push Yes, that's going to affect measurement and what it looks like for document complete or page complete As well as for waterfall That's a great point. So I don't I don't think that they would actually factor into the waterfall itself because that's like a You know, you're actually telling the server to make that subsequent connection. Now, um, I haven't seen it Demand I haven't seen the actual push behavior itself demonstrated on a live site to see what that would look like But I would suspect it's probably something not too dissimilar from what I was showing about how Subsequent requests are being made from resources that are loaded All right, and so it would presume what we could be something kind of similar to that Where it just is making push, but I'd have to see what that looks like Now in terms of measurement, I think that that's That's a great question to ask um, I'm Honestly, I haven't dove that that deep into that particular technology but it's uh It's it's something to be considered no doubt about it I think it's kind of comes back to the best practices still being kind of tv determined, but uh, Hopefully, uh, you'll find out and tell me right? Got it, okay Yes, so with the third party origins do some of these tools for Monitoring actually consider the probability that a user agent already has this from some other site Because I guess that's the idea would say Using jQuery cdn versus running it through your own origin um Okay, so to repeat the question, uh, do the third parties Do they leverage the same kind of technology or are you talking about more like anticipation of Yeah, well, so I guess if you want to decide whether to Serve a library through your own origin Or use a third party cdn, which would you know be a Maybe a blocking you know would wait a little bit longer on that kind of waterfall, but maybe the user agent already has it from a different site Yeah, that's that's that's a that's a great. Uh, that's a great question. Yeah, so um Just to repeat it completely Yeah, did you choose to load it from your origin or do you use a third party origin because of some something that they've Already got or in some cases May the browser already even have it preloaded like my understanding is that jQuery is going to be included in chrome Soon and so you would never even loaded it would always be available, right? Um, well In my opinion you want to load every you want to try to control as much as you can Especially because of how you may or may not bundle your requests together, right? Like if you're going to concatenate everything together in one like massive javascript bundle or not um Also, if you're going to be using like an origin pull cdn like like akamai You're gonna you're if you're if all your resources are coming from the closest node You want all of your resources to come from the closest node? And so, um You know it really just kind of depends on your use case, but I would favor Having control over it because what happens if they go down or what if they're not? What if they've got very heavy cookies or what if they've got something or headers? So, you know, what if they're not as dedicated to performance as you are? So thanks. Does that answer your question? Okay. Great. Thank you Any more questions? How's it how's it going so far guys need a break Okay, great. Um, so next up Oh, please Oh, yeah, please. That would be excellent You sign language, so I'm going to use the interpreter to voice for me Good afternoon everyone Um, I noticed that there are several Websites having different approaches some use internal libraries and some use third party libraries for example bootstrap Or j query c k editor So there are several libraries and there are options to use internal libraries or third party libraries So what is your recommendation on that for top optimization? Um Okay, thank you for the question. Um, I I feel like that question is very similar to the previous question. Is that is that fair? Um, when's a good time to go third party? You know, um I would say that it mostly comes down to how you're hosting your site if you're really relying on um, let's say A static site that's out on like a hosted cdn and you don't Necessarily have a lot of control then then third parties might Give you some distinct advantages but You know in terms of ck editor and not to be completely pedantic But ck editor is just going to be slow and impactful anyway, right? So there's nothing you can do Okay, um and same for j query for that matter, okay and bootstrap Yeah, so But uh So, okay, so let's say that I have a large a big pipe Meaning it's better to use an internal library But if I use something like shared hosting, then it's better to use third party Because there's better, um File, you know because of the file size That that that could be part of it. It also I would also say that to consider that Your bandwidth costs might be something to be considered as well If um that that if it is Being loaded from a third party um end point you're not paying for that bandwidth the the client's just connecting and so You know, um, oh, yeah, there you go. There you go. I'd love to say it as a best practice But I think you're it just kind of is a conditional thing You're an excellent question. Thank you Okay, any any more All right moving along All right, so DUI so html tss Everybody's best friends, right All right, so who has less than 10,000 lines of css? Yeah, awesome. There it is. Yeah, so Yeah, you should talk to them after the talk But um, you know those uh that that stuff is seriously important, especially when it comes to paint, right? I mean think about How many different considerations and traversals of the DOM it has to go over when it's interpreting every single rule And you've just got thousands of rules, right? I mean and so That's that brings me straight to the idea of the critical render path And so who's who's heard of the critical render path? Few of us excellent. All right, so who really pays attention to the critical render Excellent excellent a few of us But that's important because it's it's a very nuanced approach to to front-end development that is that is taking performance You know and putting it front and center So, you know, it's the steps that browsers must take to convert your resources into a usable site Okay, and there is a ton of information out there, especially from google and how to really optimize that critical render path, but Um, you know just to talk about it here I think it's I think it's important that you do understand your resources and how they're affecting rendering And or loading right if something is render blocking then it is blocking your path Right and that that render blocking resources Those are those tend to be very easy to add to your site Okay, and you know and you don't even realize you're doing it Um I think it's also important to understand the waterfall right and the order of loading Uh, you know, I had demonstrated how how drupal.org pushes everything to the of theirs to the top of that waterfall And they're really trying to optimize that aspect of their path by not letting third party connections interfere With the the progress of their loading. I mean if you've you know, you need Some other piece of css that has not been loaded or some other piece of a javascript, but yet you're waiting for a third party You know request it's You know that's it's important to understand that they could be affecting your you know, you're rendering um It's I think it's it's it goes without saying but I mean, you know really understanding how to minimize Your resources is is key right? I mean that If you just got 10 different resources or more loading right then that path becomes Difficult, right? I mean imagine it on a map. I mean, what's the shortest distance between two points? You know I'm saying versus this this crazy line, you know and and so I think that really understanding that how You can minimize the different aspects and aggregation is not necessarily minimizing the number of resources right just It just means that you're getting a really big one at some point, right? Um, but also minimizing the number of round trips, you know, if you can if you can load something instantly You can you know and then not do re requests especially from from like Optimizing things like your headers right and really reducing those round trips and the path becomes clearer There is really great article once again from the google folks that really talks about how to optimize And the philosophies and they demonstrate some of the tooling But next thing I want to talk about a little bit more It is the fonts, right? You know and and fonts are the bane of performance. Okay, it's and everybody has to have five of them Okay, and you know and they're and they're pretty right and I'm I'm all for a killer presentation, but What do you do with fonts right once you've got them? They're just they're just kind of on your website Now the entire look is dictated by these fonts, right? You don't know how big they are You don't know how many characters you're not using You know, are you using the internationalized version or not? What about kerning? Okay kerning Right, right if it's got that information But you're not adjusting kerning and css and then is you know, that's just more to load Especially on something like a phone right if a phone has to load this huge font just for you to be able to see the site, you know There are too many formats in my opinion, you know You know, you've got waft waft to eot ttf, right? You know, that's the other question, right? Especially if you're in the business of manufacturing web fonts, right? That's just lovely. Okay, you know You know and google fonts really tries to help on this by Sensing which user agent they're on even looking at things like their connections and trying to send just the font itself that You know should you know the actual file the format And in some cases even the cdn endpoint and so You know it google fonts is is great to to assist in that regard But then again, you're relying on that third party again And then on for any of you that have implemented it You also have to start taking cross origin request, you know security settings into play and so then you're you know When you can't load a font without taking security into consideration then You know what the heck, right? So Another point I want to point out is that you know eot and ttf which tends to be The preference for older browsers, you know, they don't don't come compressed And so it's up to you to figure out how to compress it Which means that you probably have to host it Right, which isn't necessarily a bad thing, but you know It's just one more resource that is going to be added to the stack, right? And so it's I think it's very important to point that out um font redraws um I think everybody here has seen like, you know A regular ugly font and then a really pretty font all of a sudden right and you get that funky flash in that transition and I just you know That demonstrates that the site has loaded and then it's doing what it's supposed to be doing And so it's hard to gauge your performance when things are happening after the fact right and so it's it's a little funny there Sorry if it sounds like I hate fonts. I don't but they're they're you know It's a font and it's it's crazy. Just what it's typography will do to your website You know and then fonts, you know, it does it always blocks because it always has to render and it absolutely affects Your css object model and it does cause those redraws every single time You know, even if it's already rendered it's going to do it again And then it has to take those fonts into consideration For every selector, especially if you've got any kind of type of you know, um, you know text related settings And so, uh, there are There is salvation, you know with a web font optimization and I think that looking into this different criteria is something that you might want to do but Yeah, it's fonts are a kind of a way of life. And so, um, you know try to Take them Into consideration as you're adding them in Next I want to talk a little bit more about, um, like a dynamic or a transformative type styling And the most common one right now is post css, which is really transforming styles with javascript It the majority of the people that consume it it they they use it Kind of in the style of sass or less where it's it's in many ways. It's a preprocessor And the javascript itself allows you to to write poly fills for for like Experimental type technologies or things that are coming in you know in later versions of the css spec but Very much like sass and very much like less You've got to be Very careful about the super selector okay, so css Is read from right to left Okay, is everybody Right, and so if you've got a selector that's this long Right, and it's having to read those items and it's in that specificities It's really I mean and it's so easy when you're doing something like post css or something like less Where you've got this syntactic sugar that it's like, oh, yeah, I'm right and I'm super productive right But the compiled result Are these just really crazy selectors that's just going to kill your performance And then if you start to analyze the critical render path It vastly complicates what that tree looks like Right, and so when it comes to the good practices of trying to maintain like single dimension selectors I mean when you actually start to really analyze that critical rendering render path You're going to develop a real quick appreciation for the simple selector. Okay Next thing I want to talk about though is a To kind of help mitigate some of these problems is css containment, which is a an experimental feature It's been available in chrome since version 52 and Basically what it allows you to do is isolate css down into Just you know an element and then all of its children and any effects that you let's say you do is to You know javascript to modify the DOM within this element It's not going to trigger a redraw outside of that element. It's going to be contained within it And if you the the reading here on this link down here at the bottom Very first thing they show you is how you know by adding containment to an existing page You're able to minimize redraws down to like fractions for the second I like like milliseconds, right? And so it's um those types of things I think are are are very important that you know Especially when you feel productive with your css, you know You know you're thinking you know you're rocking and rolling but that css asking can really kill your performance, right? And Those are the things that I recommend You know just just be weary of Next I want to talk a little bit more about web components and you know essentially the future of performance and and web management You know components are going to be these self-contained building blocks for all of the things And I think that uh, it's important that you understand that you get these You know you can leverage all the latest technology the right the html templates, right? The shadow DOM which is absolutely fascinating um, you know the custom elements and the imports and You can consolidate it down into this bundled item that contains all of its javascript all of its html all of its css And it's not affected by the outside nor does it affect the outside elements And so you can distribute these components in a way that are reusable without affecting it So it would be great if I you know, especially if you're an agency that's doing like say web ads You can build this completely self-contained ready to rock out and you know that you won't hurt anybody's Items right or they can plant it on their site without any kind of effects, right? But you can leverage the html technology instead of having to bake an image Or use flash Which is yeah like a non-starter so Um The other things that I think are really fascinating Especially when it comes to the shadow DOM is that the css scoping which is very similar to containment except that Containment itself is an individual property Versus actually taking like a block of of css scoping it to an element within an element And so it's it's it's real interesting to when you actually get into the process of manufacturing web components How it you know bundling it all and keeping things relevant and scoped that can be extremely helpful Ton of information out there related to it I I believe that web components really are truly the the future of the web especially from from a da perspective I think it's just a matter of time Especially from a decoupled perspective right if you're just loading components in assembled fashion And then something like like big pipe I mean that's what it's really all about right it's just kind of like identifying the components that are cash versus the ones that aren't really bringing them in in parallel so Dev tools for for ui This is the the timeline tab for for chrome and I didn't get too much into it showing it here, but If you're going to analyze you want to actually see your css object model and see how How css is being rendered or how it's being affected by scripting This is really where it's all at and you can really identify exactly what's happening when it's happening and why it's happening For d.o. You can see that in this case The css is pretty optimized, you know not much time spent loading the render time and paint time are virtually nothing Right, but that scripting It's like half a second right and so This uh this tool right here is really good and it's at your fingertips as you're developing So it's one of those things that I would recommend just kind of kind of using as you as you move along And in terms of d8 highlights for ui. There is a module right now That that does bring in components. I I agree right here with this assertion that web components are the future but I haven't used this module and I am not responsible for anything that happens if you download it, okay Um, but it is out there and and people are pretty serious about it And so I recommend you take a look and um, maybe we can get this under version 1.0 and get that get this thing off there Okay Q&A for ui Come on guys Just one I'll take one There we go How do you feel about data ui's and the usage of them? data ui's So that would be Um, how do I feel about data ui's that would so that would be like, um data colon slash slash right Oh, I got you like a basic base 64 encoded in bed. Yeah So I'm a big fan of having that kind of stuff in line without actually making the second request But I think it needs to be Used in a conservative manner so that you're not like have this super bloated file, right? Or um, even from a developer's perspective If I'm like actually in the in my editor and it's it's causing me to have to be able to scroll Infinitely to the right, you know, it's just things like that. Um, but I I think they make a lot of sense and I think if you're really targeting something like mobile Um, it can be a very useful tool. Definitely Yes Okay, I don't know if this will fall into a future section, but Uh, I wondered what your opinion was, um, adopting uh accelerated mobile pages amp So, um, do I uh, uh, uh, adopting amp um My personal website is done in amp. I love it. I think it's great The my my personal whole site, but it's it's a flat side. It's not built in dribble. Don't don't judge me, um, but Uh But but amp for those of you that aren't familiar accelerated mobile pages is a is a is a set of tags and a very opinionated set of conventions For writing html that achieves maximum performance And the coolest thing about it is that when you have a fully amp compliant site Google will cash your website for you on you know without you even knowing and so you get instant load on search results Another great thing that amp does is if you're leveraging it It actually will tell you what you're violating Right, which is extremely helpful because then you just have to follow instructions to make your website fast I mean it couldn't be any easier, right now in terms of d8 There is an amp set up. Yes That's my issue is adopting it where you kind of have like this two sets of content or at least two whole structures for markup At the same time. Well, so the d8 version doesn't To my knowledge as I've as I've played with it They actually are Like transforming your output in real time and so you've got you know, you're just doing things normally And then they're actually rewriting your html on the fly on the way out I don't like that I don't like I don't like people changing something I said was one way and now it's another right like so that that right there is um Even writing a module like that in my mind is extremely bold. Okay, right? Yeah, like yeah, not no you it really should be like this you know, um, but uh, that's That really kind of is pretty standard developer attitude, right? You know, so So i'm not surprised But um, but I think the amp is amazing. I went to amp the first amp conf in new york earlier this year and um, you know I People are doing some really amazing things with it and and then it's really adopting the web component model And so, you know because of the custom elements and so they're promoting a lot of the best of the web And having google back your techniques Is only a good thing And so does that answer your question? Yes. Thank you. Thank you so much This is about fonts Um, so I'm a big fan of icon fonts because I like being able to change the color of my icons on the fly Very simple stuff that I don't necessarily need a and spg4 And that are Visually just enhancements that kind of thing so that We're not going to need um to account for them for screen readers that kind of thing. Um, but with that Uh, you know, I'm I'm making my own and in icomoon and loading it from my own Site, uh, and then I have fonts that I need from typekit Um, and so that's external and so I'm doing some fonts external some internal Um, and then you know, there's the whole You can go and grab them yourself and and load them with google What do you recommend when you're trying to do multiple sources for for fonts? Um Pray No, no, I'm just joking. I'm just kidding. Um, I think I think you're probably you're pretty much on the right track Typekit they have they're serious about fonts, obviously So they're going to give you the best possible performance and experience, right? I mean they're going to optimize it as much as possible so that you continue to Use their service and and generate revenue. So I think you're pretty much on the right track You know, but just if anything just try to be conservative, right? I mean if you're going like five fonts It's like, uh Right, you know, but um, otherwise I I'd say that you're you know, it's probably about as best as it's going to get and then as far as like When you load them So I guess uh in in terms of uh the discussion earlier you would do your Um internal fonts first and then your typekit like way down the line. Um I would I would I would recommend in that case see this is a good example of of no of problem of like, you know invisible Issues where you're actually encouraging requests for fonts, but that request is being Obtained from a css file. So you may not even know that it's coming in, right? Um, I would Leverage something like resource hints to try to say start downloading these in advance Right because it is third party Um, and that way when that request comes in it's it sees that it's already in flight But I would prioritize the external stuff as soon as possible just and leverage Leverage some of the other techniques to try to get it get it up as high as possible. Cool. Thank you very much. Yeah, you got it. Thank you This is just don't leave guys. I'm sorry. Don't leave none. I'm just kidding. This is just one more horror story about fonts I work for a large organization and our security people manage our browser settings and for i.e They've disabled downloadable fonts unless they fall within certain security zones So Most sites that are not our own sites don't Hold on to that security zone so they won't render properly if they're coming in you have to work sitting at our desk Downloading a site they won't render correctly. In fact when we add new sites to our own inventory Unless I think to add Those specifically to a security zone Management will see these things and say why aren't our new sites looking right? Unless they look at them on chrome and most of them all look at them on Some version of i.e. So Something else to take into account when you're dealing with fonts. Absolutely. I think maybe maybe the the the the data URIs might actually help overcome some of that but uh Yeah, yikes. Sorry about that Yeah So I just thought about this and I haven't thought completely through it, but And i'm not sure if this is proper practice or whatever, but in Drupal typically there's scripts in Style sheets put right in the theme file there so If you wanted to instead be doing some sort of Prefetching on those maybe or even on a video file that might change in Drupal Is there an easy way to do that or is there a better way to have your sheets and scripts coming in? that you're aware of So like in the theme you're doing like it's like Drupal ads or something like that, right? Are you talking about like version seven or version eight seven seven? Okay, so Are you talking about like um like actually having like hooks starting to augment The the file set itself Is that Well in the theme file, you know how you could like Lay out what scripts get pulled in right sure sure. I'll get you like with the actual like in the info file Yeah, yeah, oh All right. So so this is actually a really really good question. Um So if you're including resources through the info file, don't do that Don't like don't do that you want to use you actually want to attach it It's like a library and that way you can specify Which group it's going into whether it's going to be like the default group or the theme group Right and that way you get better bundling when you actually activate aggregation otherwise The aggregator is going to is going to use groups and and weights to determine how to aggregate And half the time if you just add them like that, they're just it's just going to be another aggregate file And so that that one's that one's tricky. Yeah, you got to play with that one A little bit more, but I I'd highly recommend that You know, there's like a tutorial out there somewhere There there are some some tutorials out there that talk specifically about how to optimize the aggregate Because of these types of concerns, but I highly really recommend reading the Just the theming guy and it talks a little bit the documentation is there, but it's just not necessarily front and center but um, yeah, you're Drupal will make assumptions for you that may not result in the most performant option. Yeah, cool. Thanks. Yeah, you got it. Thank you Hey, uh, so I had a almost like a comment on the um, like kind of the Like if you need a font from like typekit as well as as google fonts And it's also a question if it's even the right way to go if you've ever tried it. So, uh, Google or typekit can't remember which one has on github like a web bond dot j s Thing where you can where you can kind of pass it an object with, you know At the typekit key and then the and then the google fonts. Yeah Yeah, if you're doing both That's what I use as well. But I don't know. Have you heard of it? Is it um, you know, I haven't um, I haven't heard of that And you know, I think it's compelling. Can we talk about that a little bit more offline? Is that is that cool? Especially because I think now that everybody's leaving it that means that I've actually Almost had time. Um, so thank you all for staying. Um, but uh, one more question. Let's go ahead and let's go for it Okay, my question is about moving to http 2 and um, so Http 1 setup. We have domain sharding. We're using cloud front as a cdn All that caching. What's what's do you know of any gotchas when you go to http 2 should we You know, I hear that's not what you're supposed to be using, you know, like domain sharding and The only real big gotchas are more that um, some of the the optimization that you do in http 1 like like concatenating files together Is actually kind of like an anti pattern in http 2 because it's it's better to leverage that multiplex connection to just download everything in parallel And so there's little gotchas like that and they're documented out there But um, for the most part it's pretty transparent and then you get the header compression And so it's it can only really be better You got it. Um, so the next thing we were supposed to talk about was code But I think everybody wants to figure out where the next con is going to be And I know that everybody would like to have at least a decent seat So I'm going to cruise through real quick because there's one thing I really want to talk about First I want to I want to talk a little bit about performance just some brief thoughts You know you've got low performance and you've got high performance, okay And um, you know performance does challenge you It it will make you get out of your comfort zone because you you know you have to learn more about the tech I mean, you know, you could have the simple shovel or you could have the bulldozer or the backhoe But the backhoe requires you to know about engineering metallurgy hydraulics Okay, I mean, you know everything other than digging a hole Okay, right it challenges you and it's and it's important to get out of your comfort zone If you really want to get to the side of performance Next performance frustrates because you a lot of times, you know, you're you're doing all this work towards performance But you're not actually getting any better performance Right and so just stick with it. I just want to say that you know Hang in there because a lot of times progress comes slow Next performance is rewarding. It validates everything. It means that you really know your your criteria You've got a measurement that proves that you've achieved a certain performance. Everybody's happy with it. And so one more thing Texas camp In a month I highly recommend if you guys can go, please. We'd love to have you. It's going to be really fun Oh, yes. And if you want to put it in a pro a talk you've gotten told tomorrow Sorry for the short notice And that's uh, that's really about it. Thank you