Hey everyone and welcome to Developer Tea name is Jonathan Cutrell and today is the second part of my interview with Scott Jehl If you missed the first episode with Scott you may want to go back and listen to that first We lay some of the groundwork for the second part of the episode We talk about tooling in this one. We talk a little bit about static design files and what to do about that kind of problem just a lot of useful information coming from Scott And hey while you're listening to this part of the interview Take a minute and go into whatever app it is that you listen to podcasts in and click subscribe that way you won't miss in your future episodes And that will be easily delivered to you if you don't listen to podcasts in an app and then you can easily Subscribe to the rss feed on DeveloperTea.com Once again, thanks so much to Scott and we'll go to the second part of the interview now Very few clients Especially for most agencies unless your client is is particularly forward thinking and understands the web At which point they're hiring you because you are an absolute expert A lot of clients don't understand why they don't understand this at all they don't understand A progressive enhancement until you describe it to them right and it's and it's a very hard thing to describe Yeah, it can be but I think you know there are a lot of easily relatable Parts to progressive enhancement that don't need to be so technical you know just the idea that Things don't need to look the same on any given browser or any two browsers As long as you know your your service is being delivered to someone in a really fast Accessible manner that's you know that's priority one And I think a lot of business owners, you know would easily agree with that so Yeah, absolutely. Yeah, and then you know the technical how of that You know follows and I think you know it's our job to To you know teach our clients sure about this stuff But it's also you know, I think the the why of it all is the most important part to to teach and then you know as much as you can Get into the technical layering you know as much as they're they're interested. That's great too Yeah, I mean and ultimately we're talking about We're talking about making Things that work for the most number of people in the best way possible that's that's what this is about and so my my biggest takeaway from Or I guess my biggest Desire when I'm creating a project when I'm thinking about progressive enhancement There's kind of two Categories that I'm thinking in one can it be accessed by any device Kind of through the filter of the most important devices but also Can it be accessed by a very I don't know an old device or one that is less capable That for instance a kindle like how does it access my My content on the web Sure and then the flip side of that is how fast is it right and that's the one that I think a lot of people are getting wrong right now and Even if you go back to like the basics of Web development if you're building with tables you can make that relatively easily you can make that viewable on On most devices But if you stick a if you stick a big picture in there and try to size it down like that's gonna cause some major problems And and we aren't just talking about simple speed problems. We're also talking about the fact that you know There's people who are actually paying for their data and you are costing them money like sure There's a lot of things to think about here. So You mentioned the 14k number And it's a pretty common number and can you explain a little bit about About critical CSS 14k that first round trip and how you can get that perceived Speed on that first load especially on a home page sure Yeah, so I think in the last year or two we've We've come to terms with some practices in In delivering Web pages as fast as possible that At least for me sort of contradicted What I thought to be best practices for quite a while So You know that the idea of even progressive enhancements original Definition was this idea of you know separating your You're Your concerns so you have your HTML your CSS your JavaScript and these are all separate things that sort of unimpulsively Communicate with each other and layer in and if one fails that's fine and you don't mix them right and Exactly and more recently we've been Wow, that's still you know absolutely You know a development practice A usable idea yeah, yeah, and it's absolutely the way we we still build websites from a delivery perspective More and more we've been trying to optimize for the first round trip that we make across the Across the web and back to Between the server and the browser So when you say first round trip let me interrupt you there and ask you are you referring? I'm assuming that you're referring to not just the page load but the actual like packet round trip right? Yeah, so we're talking about you know you're you type of URL into your browser and it goes out to DNS and it resolves and gives you Gives your browser an IP that it can go go off and fetch the first Whatever the index of that particular site happens to be Or whatever page you happen to be requesting and then it goes out and back right and in that In that first request in response there's a limited amount of Of code of data that can be transferred from the server back to your browser and that tends to be 14 kilobytes according to people who know a whole lot more about this than I do But you know knowing that and knowing that we have a rough idea of How much How much data we're working with there we can start to think about okay? Well, what what's the most critical portion of our Of our page that we can sort of cram into that that first round trip and If we think about it that way as sort of okay, what what parts of this this web page for example Are needed to start rendering the the top portion of the page the most the first part that you see As a user well, you need you know you need to mark up the HTML for However much content is gonna cover the first screen full of our first scroll full of content which you know varies across Devices, but you can kind of Aim a little high on the viewport size You'll need some CSS for Stiling the layout for that that portion of the of the content and you might need a little JavaScript as well depending on how you're using JavaScript to Qualify the enhanced layout of your of your initial Page view sure so so thinking about okay, well, you know In an HTML document and that's that's all that's coming back in that first round trip because anything else like an external style sheet That you would reference from that that HTML anything like that is is going to require Another request once the once the HTML reaches the browser, right? And it begins to parse it and says oh, there's a reference to a style sheet. Let me go get that And by then you're already making a new round trip so we're trying to think about okay Could be fit some CSS in line could be fit some some very very critical JavaScript in line along with that that first delivery of markup and sort of optimize for that first round trip And it turns out it's really really really powerful it kind of blew me away When I first saw this in action Because it it sort of guarantees that You can deliver a page and under a second which wow is At least on a reasonable connection speed and you know, that's that's great, right? I mean Yeah, we're used to much much slower Page loading times that are so especially on mobile devices And you know that that time varies like if you're on 3G then Typically a really fast site would maybe take two seconds Which is down from Whatever the the eight to ten that's kind of the average that you'd see on on 3G these days Yeah, so so yeah, you know, it it sounds sort of Simple and concept but but when you have a live code base And you're starting to think about well, okay, I can see What portions of the content comprise the the top portion of this page How do I you know isolate that code? Right that's that's a much harder problem and thankfully we we're getting better tools now that sort of do that for us So we don't have to you know write our style sheets in ways that we have like a you know inlined Group of CSS files and then a separate group and have to manage that all on our own Right, and yeah, it's what is the filament groups? Critical CSS, right? Yeah, I mean that's that's one of several that are several tools that are out there Adia's money and then the rest of the Google Chrome DevRel folks kind of at least For me they were the first people that I started hearing Talk about this stuff and and they started building bookmarklets and and tasks and things like that and And we started experimenting with those and we're like well this this This idea is really great. We need it to do a couple other things to work with some of the code bases that we Typically have for clients which are tend to be live generated on the server kind of Code bases so yeah, so we built our own tool as well the one you mentioned grant critical CSS And it's a node JS task as well critical CSS but what it does is You set up a configuration file That lists out all of the unique templates in your code base. So you might have your your home page and you're about Template and your blog template things like that Unique page templates not necessarily unique URLs that use those templates, but you know generally you have I don't know less than 10 on an average site unique templates and then You pass those to this tool and it actually Opens an example page of each template in Phantom which is this webkit. Yeah headless browser, right? Yeah So this is running on the command line. You don't actually see if you're looking at your computer screen you wouldn't see The pages open in in a browser, but they're opening and It resizes to a particular vport that you specify 1200 by 900 say and it starts to analyze Which portions of the CSS are necessary to render the layout in just that region in the page and it isolates those styles and writes them to a file and so you end up with a subset of your overall style sheet that's Critical so to speak And that can become the thing that you in line in the in the top of of each Unique template sure yeah, and then you just sort of load the there's a Style sheet loader Workflow that we have that you can load the full CSS in a way that doesn't block rendering Yeah, I was gonna ask you about that two questions One are you then kind of repeating the styles in in the secondary load? Yeah, absolutely, okay, it's the negligible Right well, yeah, it's also loaded in a way that It's not blocking rendering. It's just sort of coming out and coming in at its own convenience, right? So okay, yes, there's overlap between the two, but it's actually intentional because You can configure your site to Only use this inlining workflow on the first page visit and then after that you've got the full style sheet and it's cast In browser cache. Yeah, so you can reference it normally from From the head of the page and not have to deal with that whole inlining workflow anymore. So in the end You know it it spins up the initial view very quickly and then Buying the scenes loads the CSS that will be needed to render the rest of the page that's below the viewport size When you first open it, but also to render the rest of the site or at least you know the Section of the site that you happen to consider unique enough to make a style sheet for Sometimes we'll have a client that You know if it's e-commerce maybe there's Buyer side templates and seller side templates or you know different audiences using this code base and Those those are situations where you might break out your your full style sheets into yeah, but for the most part You know sites like like we worked on the Lego store Last year it's kind of an ongoing project and sure that was fun. Oh, man dream client. Yeah It's just it's a really fun site. They've the talent there is amazing But even something like that, you know e-commerce you most of the site runs off one style sheet and then yeah, yeah So I think it's doable especially with you know smart use of You know the cascade and trying to minimize how much CSS you're writing and and gizip of course Transferring all your files with good compression So and would you put the actual just references to the style sheets inside of like a no script tag then? Yeah, I mean we definitely do that for the For the the use case For the user that wouldn't have JavaScript enabled or Available to the browser sure And then for anyone else where we're using a utility that I wrote called loads CSS Which basically just you know injects a link element into the page Referencing whatever style sheet you need and it does it in a way that ensures that it's not going to block rendering because by default any Reference to like if you have a link element in your in the head of your page that you delivered to the browser and it references external style sheet the browser will actually just stop and it's tracks Yeah, I wouldn't request that thing parse it and then begin rendering again, and you know that's a Potential single point of failure at at best and at worst you know or the average use case is just slowing down that initial render every time so yeah Yeah, so trying to avoid that As we can it's sort of like this in line the critical stuff and then load the rest at a Ligerly pace yeah, yeah because most most devices now can cache pretty pretty heavily and pretty quickly and And then accessing things is just stupid fast so you once it's cached there's no there's not a worry so much about it So if you can get the that initial load I'm talking to the listeners at this point Try to get the initial load of your site under a second It's it's I mean it's on a regular Connection right so like a five megabits per second yeah connection or on like a LTE connection or whatever you would consider regular I know down in Florida you said on a web ahead that you have a edge sometimes down there. Yeah, thankfully it's T-mo will kept promising me that we're gonna upgrade the towers around here and they finally did But you know it's not to the world. Yeah So to speak it's you know the tower is no closer to my house so Then it then it was before so it's LTE capable, but I'm still getting a really you know poor connection speed Yeah, I mean it teaches me to be honest I think I've mentioned on the show before I'm up in Chattanooga and we have the gig here and And the I say the gig like everybody knows whether it is a gig a bit internet connection and it is incredible And it's not through Google it's actually through a company here called the EPB and they are like government sanctioned and and It's just fantastic service and it's like the dream land for development So there's my like little pitch for and he put any developers looking to move to Chattanooga that internet here's awesome You have a desk in your garage? You're welcome to come work Anytime you want to the whiteboard office appreciate that anyhow awesome well Scott you've got a couple of Speaking of traveling you've got a couple of conferences coming up and they aren't anywhere near Chattanooga two of them are in Australia Yeah, yeah next month. I'll be in Sydney for web directions Respond conference it's called Really excited about that and then a Week or so later I'll be in Melbourne for CSS Conf Australia. So nice. Yeah, it's very cool And and people find out more I guess they can Google it or what what's a good link for them to go and find out about those For the conferences themselves Yeah, hmm I would I would Google web directions respond I'll throw it in the show notes. How about that? Yeah cool When CSS Conf is and then you've got one in Germany as well. Yeah beyond Tellerund that's in May and In docile Dorf so yeah Exciting about spring coming up talking about responsible responsive. Yeah, yeah, I think a lot of the things that That we sort of talked about on the call on on this interview today, so yeah, perfect Well, if you guys want to hear if you want to hear more from Scott obviously those are great opportunities for you to check out but also Scott Jehl calm and And of course filament group is always posting wonderful things on their site So so there's just a lot of content out there and I mean just Google Scott Jehl Hey, he's all over the place, so Thank you Scott so much for joining me. I appreciate the time. Yeah, thanks for having me Jonathan We'll talk soon. All right. Thank you Thanks to Scott once again for being on the show I know that I gained a lot of valuable insight from Scott and I will continue to do so Over the years in the past as well as in this interview So make sure you follow Scott online on on the various places that he is tweeting and posting etc I will post those links in the show notes for you which you can always find at developertea.com Also make sure you leave a comment if you have some thoughts on this show you can always reach me at at Developer Teaon Twitter But you can also reach me in the comments thread on developertea.com You can email me at developertea@gmail.com and if you're enjoying this show Please consider supporting the show by going to developertea.com front slash donate Thanks again for listening and until next time enjoy your tea