RWD Podcast 59

This week I talk through the new updates to Filament Group's site. The primary focus is around the HTTP2 and Server Push and what they mean. Unfortunately, a cough gets in the way of a longer explanation, short and sweet this week!

Listen to episode 59

Hey everyone, and welcome to another edition of Responsive Design Weekly. My name is Justin Avery and I am your host and curator of the Responsive Design Weekly Podcast, and the newsletter, a weekly newsletter all about Responsive Design and front end funky stuff. Now this week as you will notice, my throat hasn’t cleared up at all, the kids have kept my cold going and my cough has just got worse. So we’re going to keep this super quick because you don’t want me to be coughing in your ears on your journey to work or while you’re chilling out. So we’re just going to cover one thing this week, and again there’s no guest this week but next week I have two people to chat to which I’m very, very excited about. Yeah, it’s going to be awesome.

So this week, the feature side, the feature article for this week is we’re looking a little bit at an article which Scott Jehl has written from The Filament Group. Scott Jehl for those of you that haven’t heard of Scott, he has been doing wonderful work over the last couple of years on the web and he’s always about practical performance. In fact he wrote a book on just that topic as well. If you go to “A Book Apart”, I’ll type that in and it’s great radio. Here we go with the coughs. So yes, we know of the Responsive Design right? So “A Book Apart” Ethan Marcott wrote his first article on [inaudible 00:01:48] and then he wrote a book called, “Responsive Design” and then it was followed up with “Responsible Responsive Design” from Scott Jehl, and it’s just talking about the responsible ways in which we can approach the booting of websites. Now because Filament Groups stay on top of this stuff, the site is usually pretty darn fast and this latest article though we’re featuring is about them stepping it up, so the title is, “Modernising Our Progressive Enhancement Delivery” and it’s all about taking advantage of some of the newer tools that are available to us today, not across the world, but available to a lot of people.

And namely that is around HTTP/2 and so we can look at the browser support for HTTP/2 and it’s running on IE 11 partially but it’s limited to Windows 10 for IE 11, but Edge runs so 14 and 15 for IE or now Edge. Firefox supports it as of version 36 I think and we’re up to version 50 at the moment. Chrome has supported it since 41 and we’re at 55. Safari? Come on Safari. Safari offered partial support. Safari. Opera supports, iOS Safari does support it, Opera mini does not, but Android browsers and Chrome for Android both support it as well. So that’s from the Browser point of view. So if you send an HTTP/2 across to a Browser that doesn’t support it, it just falls back to HTTP/1.1 in the way that the web works. We always fall back, which is great, and that’s why the web is so awesome.

So the thing with HTTP/2, one of the coolest things, I think I’ve talked about this a little bit in the past as well, it’s just a lot faster. The communication between the server and the browser is done with 1’s and 0’s now, instead of text, so it’s a lot quicker. The compression on the chats is a lot better as well. But the main thing is that there’s no blocking requests. So previously if we requested an HTML page, and that HTML page had CSS and images and JavaScript and the like, it would wait, generally we would have that waterfall, network diagram. So it would request an image and then it wouldn’t request the next image until that image had downloaded and then it would go off and request the other one and the bring that back.

So each time we needed a new HTTP request, which was expensive and made things slower. With HTTP/2 you won’t even need to make a single request, and when the HTML comes back to the Browser, it then looks through it and goes, hey I need all of these files, go and get them. And they all come back at once, which means we don’t need to concatenate files together so much anymore because we’re not using the extra HTTP requests, it’s just all coming back. So instead of seeing this hierarchical, as like waterfall thing, it’s one request, bang everything else comes back. So that’s great.

The other thing that we’ve been doing is critical CSS. So the idea is that we want the first fourteen kilobytes that comes back from the server, we want to render as much of the page as possible within that first fourteen kilobytes because that’s the first trip back. And to do that we need to have all of the CSS that is required to render the visible part of the page within that first fourteen kilobytes. So we used to inline that CSS, called critical CSS. With HTTP/2 now, we’ve got this option of a server push, so that when the request goes out for the webpage, so when you request the Filament Groups homepage, as the server send the HTML back to the browser, you need to wait for the HTML to arrive in the browser, look through the HTML, find the images and the CSS and JavaScript, then request them, and even then they’re going to come back in one whole hit, and it’s one request, there’s still a bit of latency involved with that.

Instead because you know what file is going to be sent back, you can instruct the server to say, hey if someone requests this page, push along that HTML we’re sending back, push all these files because I know that these files are going to be required on that page. So that’s really, really awesome. It means that you don’t have to do that second request and then you don’t actually have to inline your styles anymore, you can just push them down.

Now I can imagine you’re thinking, but hey what if we already have those files, what if we’ve already visited that page once before? Fortunately, Scott has thought of that as well, and they’re using a cookie to check that. So even though the push happens, the browser can actually cancel that at any point. Now there is a couple of occasions where those files will come down and you will get the extra burden on your data plan because you’ve downloaded files that you already had. But for the most part once that cookie is set, then you no longer have to push those files down anymore, which is great. So I highly recommend, check the newsletter out, check the website out on redesign.responsivedesign.is.

Well you’re probably there at the moment, check the show notes of this as well, we’ve got a link to that article, but definitely check it out, browser support is great like we said. HTTP/2 you need to do a little bit of configuration on your server depending on what server you’re running, that will also need to support HTTP/2, but if you’re using something like CloudFlair, which I highly recommend, that actually has HTTP/2 out of the box. Another bonus about it as well is that you have to be on HTTPS, so you have to be serving your site securely to take advantage of HTTP/2. Another good reason to use it because you get all of these benefits along with it.

So that’s it for this very short episode, I’m really hoping that this cough sorts itself by the time we get a guest on. But fortunately, they will be doing more speaking then what I will, hopefully. Either that or I’ll just sit with a bottle of cough medicine and just swig it for every time I’m going to ask a question, another swig and see how we go.

So that’s it for this week, if you’re not already subscribed, head over to responsivedesignweekly.com and subscribe to the weekly newsletter. Check out the new stories going up on redesign.responsivedesign.is every day, and we tweet about them, so you can follow us on Twitter @ResWebDes. See you next week.