November 4, 2015
A big thank you to our sponsors WP Ninjas, who are working on a new version of Ninja Forms 3.0 which looks awesome. Building a form with keyboard shortcuts is amazing. It’s a great functionality improvement, we can’t wait to check it out.
Welcome to Apply Filters, Episode 51. Today, we’re talking HTP2, what it is, the benefits, when you can start using it and how to optimize a site for it.
First, a minor clarification from our last episode. Thanks to Jeremy Jacobs for pointing out the difference in error handling in PHP7. Thanks Jeremy.
Pippins update:
- Big update pushed out for Paypal pro and Express extension
- Add support for In Context checkout
- Restricted Content Pro 2.4 is getting pushed out
- WP Approve Users plug in is done
- Identified and tackling top ten pain points whatever it is
Brad’s update
- Pushed out a minor release of WP Offload S3 with tons of fixes – nothing shiny, but gargantuan
- Added three new add-ons: WPML Integration, Meta Slider and Enabled Media Replace
- Attended a local design and development conference
- Check out the blog for the newest posts
Both Pippin and Brad will be attending Word Camp US and the Community Summit.
Today we’re digging into HTTP2 and what it may mean to us as WordPress developers. Specifically we go through:
- Http1.1 vs Http2
- Google Speedy
- Why Http2?
- Benefits of Http2
- Akamia Demo
- Support
- Optimization
Recommended Reading:
High Performance Browser Networking
If you’re enjoying the show we sure would appreciate a Review in iTunes. Thanks!
INTRO: Welcome to Apply Filters, the podcast all about WordPress development. Now here’s your hosts, Pippin Williamson and Brad Touesnard.
BRAD: Welcome to Episode 51. This time Pippin and I will be diving into HPPT2, what it is, the benefits, when you can start using it, and how to optimize a site for it.
First, I want to give a shout out to our sponsors, the WP Ninjas. They’re working on a new version of Ninja Forms, Ninja Forms 3.0; that looks super cool. Did you see the video, Pippin?
PIPPIN: I did. It was really awesome. I think James shared it out on their Twitter account.
BRAD: Yeah, and it’s got the keyboard shortcuts to build a form with just your keyboard.
PIPPIN: That, to me, is one of the coolest features I’ve seen in a while. I definitely recommend go watching the video so you can see an example of it. You can find it on their Twitter account, but building a form with keyboard shortcuts is amazing.
I know Kevin just does a quick example of how you can add fields, set up settings, etc., completely from the keyboard without ever touching the mouse. If you’ve ever built a–
BRAD: Yeah, isn’t it like three seconds or something?
PIPPIN: If not less.
BRAD: Yeah.
PIPPIN: Yeah, the speed at which you can add fields to a form was pretty amazing. I think it was a really important functionality improvement for anybody that’s built massively sized forms. If you’ve ever built a form that has 100+ fields, or even 20 or 30 fields, it’s so much easier. Not just the keyboards, but also just the way that the UI itself works now. So, definitely go check it out.
BRAD: Yeah, for sure. One quick thing before we get going is a correction from last episode about PHP7. I believe we made the mistake of saying that any error exception would get caught by the usual try/catch blocks that you would put in previous versions of your code that weren’t necessarily optimized for PHP7. That was wrong. Error exceptions, so there’s a new class called “error.” Those won’t get caught up if you’re catching the exceptions, so classes of the type exception. That’s kind of a subtle thing, but yeah, if you’re wondering.
PIPPIN: Yeah. Thanks to the listener that pointed that out to us.
BRAD: Oh, yeah. Who was that? Do you remember?
PIPPIN: I’d have to dig up the email and, unfortunately, I don’t have it in front of me. Now, whoever you are, anonymous listener, thank you very much.
BRAD: Yeah. What have you been up to, Pippin?
PIPPIN: This last two weeks has actually been super slow for me. We haven’t done a whole lot. Mostly, I mean, the teams have been busy. They’ve all been working on things, but I’ve been pretty much out of commission for the last week.
We had two things go on. One, I had a whole bunch of family in town. We decided to celebrate my dad’s 60th birthday, and surprise him by having all the family come home. That was fun.
The downside to that was I got sick and have been battling a cold for about a week and a half now. Today, I’m finally feeling better, so kind of put a monkey wrench in productivity, but you know it happens. It definitely made me appreciate the team that works with me. They kept everything running smoothly while I was pretty much nonfunctional.
BRAD: Yeah, you can kind of relax a little more and focus on getting better rather than worrying more and staying sick.
PIPPIN: Yeah, for sure.
BRAD: That’s nice.
PIPPIN: There are a couple of things that we did get done, though, or that are being worked on. One, we got a big update pushed out for our PayPal Pro and Express extension today, which is our payment gateway for EDD that connects your EDD store to either your PayPal Website Payments Pro or your PayPal Express accounts.
There are two big things in this. One is we added inline refund processing, so you can process a refund directly from inside EDD if you use either of those gateways, which just makes things a little bit easier when you need to just store managements better. And then, two, we added support for In Context Checkout.
This is not me that did this. This is all Benjamin Rojas, the developer that’s done all of these. He did all the work, and then we did the review process and released, and things like that.
In Context Checkout is really cool because it’s PayPal Express except that you never leave the standard; you never leave the website. When you click “submit” on a checkout screen, instead of going to PayPal, then signing in and stuff like that, it just opens up a little popup window. Then you sign in directly from there and either use your PayPal account or use a credit or debit card. It’s much faster. It works really well on mobile, which is a big deal, and you never leave the site, so it’s a pretty nice improvement.
It’s one of those things like, the faster you can get someone through the checkout process and the fewer changes you give them to abandon a checkout, the more likely they are to succeed.
BRAD: Right.
PIPPIN: So not redirecting is a big deal.
BRAD: I’ve been having problems with PayPal recently. I was just trying to buy a couple gifts this morning and got internal server errors.
PIPPIN: Oh, no!
BRAD: And I ended up just abandoning my purchase.
PIPPIN: They did go down, like 100%, late last week. They were down for about an hour or two, to the point like you couldn’t log into accounts. No one could process payments.
It was kind of funny. We actually got a support ticket for Affiliate WP right when it happened is how we discovered it because they said, “Hey. We’re trying to purchase.” Excuse my language, but, “Your checkout fucking sucks.”
We were like, “Huh? What happened?” Oh, it turns out PayPal was down, and so they were really mad at us, but you know it’s the nature of using a third party API and service. Sometimes it happens.
Real quick: There are just two things. One is Restrict Content Pro 2.4 is getting pushed out the door. It hasn’t gone out yet, but I’m hoping to actually push it out the door later today. There are two big things in that.
One is 2Checkout integration for processing payments and subscriptions. 2Checkout.com is pretty popular around the world as a global payment processor.
Then the other one is I’ve added an integration with a core plugin written by Konstantin Obenland, which is called WP Approve Users, which lets site admins manually approve or deny user registrations. It’s been a big feature request for Restrict Content Pro since the very beginning, and so I finally built it in. But it built it as an integration with an existing plugin that works really well, so that was fun.
Then, this is has been actually an ongoing project for the last several weeks and still ongoing is not necessarily battling, but starting to take on, head first, pain points. Any time you have a product, you’re going to have pain points, whether it’s a pain point on your website or a feature in the product, your documentation, whatever it is. There’s going to be pain points.
Two weeks ago, the team and I sat down and said, “Okay. Let’s identify 10 to 15 pain points that we have throughout the ecosystem. My task for the next several weeks is to just tackle those and see what we can do.” If that means updating documentation, okay. If that means fixing bugs in code, okay. If that means changing UI, that’s fine. It doesn’t matter what it is. Let’s see what we can do.”
And so we kind of identified the top ten or so pain points and have been kind of pounding through those to try and make an improvement. It’s still ongoing, as really any project is.
BRAD: Yep.
PIPPIN: Okay. That was enough about me. How about you?
BRAD: We got a minor release. Oh, before I start — it was Timothy Jacobs that gave us that tip about PHP7, so thank you, Timothy.
Yeah, so we’ve been working on or we pushed out a minor release of WP Offload S3 with tons of fixes in it. It’s just one of those releases that is gargantuan, but nothing new and shiny in it, so it still has to get the minor release number. But we pushed out three new add-ons for it as well:
- WPML Integration.
- Meta Slider, which is a really popular free slider on .org.
- Enable Media Replace, which a lot of people use that as well.
PIPPIN: That’s a super nice plugin, which actually I believe is halfway deprecated now, isn’t it? Not really deprecated, but some of the functionality has been moved into core, hasn’t it?
BRAD: No.
PIPPIN: You can now replace a media file.
BRAD: Not that I’m aware of. Really? How do you replace a media file?
PIPPIN: Let me open up a media manager because I’m pretty sure there’s a way to do it now. It’s not the same way that that plugin does. That plugin does it in a different way that’s super awesome.
BRAD: Right.
PIPPIN: But I swear there’s a way to do it.
BRAD: Right. Huh. Yeah, anyway. Anyway, Offload S3 works with those now. You have to install those add-ons. But one thing we overlooked when we did this release and we actually just put out another release. It’s going out today, the day we’re recording this, November 2nd. So it will be out by the time this podcast is published, but we forgot to alert people.
Say they have WPML installed. We forgot to alert them that they need to install the plugin, this extra add-on for it to be compatible. We kind of just assumed that they would look for it or something, but I wouldn’t look for it. I wouldn’t know that I needed extra things. Yeah, so we’re fixing that right away.
PIPPIN: I just looked, and I think I’m wrong about being able to replace a media file.
BRAD: Yeah. It should be. It seems like it should be a core feature.
PIPPIN: It’s a super nice feature that I would love to see in core.
BRAD: Yeah.
PIPPIN: I swear it was there, but apparently — apparently not.
BRAD: Yeah. I attended a little conference, a local conference that’s kind of like design and development. It’s kind of like a 50/50 conference. It’s kind of cool to swim in a different pond, I guess, or meet different people. Hardly anyone there was in the WordPress space, so it was kind of nice to get out of that thing. WordCamps are great, but if that’s all you attend. It’s nice to get another perspective, you know.
PIPPIN: Definitely.
BRAD: That was cool. One thing I found with local conferences, I’ve never enjoyed local conferences as much as when I go abroad. The reason: I figured it out. Local conferences, like 90% of the attendees are local. Pretty much just the speakers are from away.
I find, when I go to conferences elsewhere, the attendees tend to be from out of town. It’s kind of the flip. It’s kind of like 10% are local and the rest are from away. So you get different perspectives from different places.
PIPPIN: By local, you mean local to your area.
BRAD: Yeah, yeah, geographically local.
PIPPIN: Yes.
BRAD: Yeah.
PIPPIN: I wonder if it’s more of not necessarily being local to wherever you live or where I live. It’s more about, based on your location, it’s not as much of — okay, so neither of us live in a major city that’s kind of a destination for events.
BRAD: Right. Yeah, yeah.
PIPPIN: And so, if I was to go to a conference here where I live, it would be all local.
BRAD: Right.
PIPPIN: Whereas, if we go to, say, WordCamp Miami, there are a lot of people that traveled there.
BRAD: Yeah. I think that’s why. I think, because those are destinations, people from wherever go to those because they want to go to Miami. Yeah, so it’s just different, I guess. But it’s interesting, like when you’re looking for people.
I was still, like, an hour away, so I stayed at a hotel and stuff. It was hard to find someone to hang out with for dinner and stuff, you know, because everyone is local, right? They just go home. Yeah, it’s just a different, very, very different vibe to a conference like that.
Anyway, just a few other things: We’ve been producing some pretty sweet blog posts. We’ve got one coming out.
PIPPIN: You guys are cranking those out.
BRAD: Yeah.
PIPPIN: Awesome.
BRAD: Yeah, we’ve got one coming out called Unit Testing Ajax and API Requests in WordPress Plugins. That’s Ian, the U.K. Ian, Ian Poulson that wrote that. It’s pretty cool. I learned quite a bit from that post.
PIPPIN: That’s a tricky area to unit test, for sure.
BRAD: Yeah. It’s some weird stuff that you have to do. You’re kind of just spoofing things and stuff. Anyways, I won’t get into it, but check it out.
Ashley wrote a cool post, How to Set Up MaxCDN with S3, so if for some reason you don’t like CloudFront, which is Amazon’s CDN, you could set up MaxCDN with an S3 bucket, so it’s kind of neat.
And Jeff played around with Amazon Simple Notification Services to send himself SMS reminders, daily reminders. We got some flack from people saying, like, “Ah, this is a ridiculous use case,” or whatever. He was like, “Whatever, man. It helps me, so whatever.”
PIPPIN: To each their own.
BRAD: Yeah. Exactly. But, yeah, it was a cool post about how you can send text messages using an API. It’s pretty cool. I think it’s U.S. only. I think someone said that. I think you can only send text messages within the U.S., and maybe Canada too. I’m not sure.
PIPPIN: I know that’s pretty common for a lot of the SMS services.
BRAD: Yeah. I think Twilio does a lot of different countries.
PIPPIN: Yeah, I believe you’re right.
BRAD: Anyhoo. Are you going to WordCamp U.S.?
PIPPIN: I am.
BRAD: And the communities?
PIPPIN: I will be going to that and the Community Summit, so I’ll be there for about a whole week.
BRAD: Cool. So will I.
PIPPIN: Excellent. I know at least one of the EDD team members, besides myself, is also going, and I expect to see maybe one or two others there, if not from the core team, from the overall community.
BRAD: Nice.
PIPPIN: Yeah, it should be a good time. Are you at the summit as well, or just the conference?
BRAD: Yeah, both.
PIPPIN: Awesome.
BRAD: I’m going to go to both, yeah.
PIPPIN: Yeah, I’m looking forward to it. I mean aside from — well, I guess for you it’s not as big of a deal. I don’t like the idea of Philadelphia in the winter, but for you it should be like spring, right?
BRAD: That’s an upgrade for me.
PIPPIN: I bet. Yeah, it’s definitely a downgrade for me.
BRAD: It should be a few degrees warmer, probably.
PIPPIN: Yeah, but it should be fun, regardless.
BRAD: Yeah.
PIPPIN: Yeah, I’m staying in an Airbnb with some other guys.
BRAD: Oh, yeah. So am I. I’m staying with Jason Coleman and I can’t remember – some other people.
PIPPIN: Awesome. Well, it should be good.
BRAD: Yeah.
PIPPIN: All right, should we jump into our main topic?
BRAD: I think we should.
PIPPIN: Okay. I want to give a quick disclaimer here. We’re going to talk about HTTP2, and there are a lot of really cool things in this. But, the disclaimer is that this is definitely not my area of expertise, even remotely. Most everything I know about HTTP, HTTP2, etc. is just from playing around with servers on my own a little bit, mostly breaking them, and then, two, doing some research in preparation for this episode.
Brad knows far more than I do. Just the nature of your guys’ business interacts a lot more with servers, so it’s kind of a requirement. And, I think, just in general, you know more.
We might be doing this mostly where I’m going to ask Brad questions, and I’m going to provide a little bit of feedback. But, if I get anything wrong, here’s the disclaimer that says I’m sorry.
BRAD: Yeah. I will say I’m not a sys admin, so also most of my information is from the research I did for this episode.
PIPPIN: Yeah. In other words, take everything we say with a grain of salt.
BRAD: Yes.
PIPPIN: You should probably take that always, any time, anyway.
BRAD: Yeah.
PIPPIN: We’ll do what we can.
BRAD: One thing we should share that we were talking about before we started the show is how interesting this topic was. We were both kind of feeling, eh, it’s kind of like–I don’t know–it wasn’t too exciting to get into this. But once I started doing research, I was super excited about some of the features and stuff.
PIPPIN: Definitely. There’s a blog post that we’ll link up from Moz.com; I will put in the show notes. I went into it just really quickly, just didn’t really know what I was getting myself into. I’ll tell you that in the first, like, first three paragraphs, I realized that this was super interesting and read all the way through, and then went back over it a couple times. Actually, it’s a pretty interesting topic.
First of all, Brad, why don’t you give us a quick overview of HTTP2? What is it? Why do we care? What’s different? What is HTTP2 versus HTTP1, and such?
BRAD: HTTP 1.1. is kind of what most websites are serving right now. That’s the protocol that’s being used. That was released in 1999.
PIPPIN: Whoo! That is a long time ago.
BRAD: And started to be adopted in 1999.
PIPPIN: I was ten years old.
BRAD: Yeah, so it’s old.
PIPPIN: Especially in Internet terms, it’s ancient.
BRAD: One thing that I should be clear about, it sounds like this is a new version of the protocol, but the protocol really hasn’t changed much. It’s kind of like stuff that has been layered on top of it, and so it’s backwards compatible. If your server is running an HTTP2 server, if you’re running an old browser that doesn’t support it, it’ll still work. Your server will still serve the page to that browser, so that’s not a concern.
Also, something that’s interesting is most people have heard of Google SPDY [sounds like speedy], which is something they introduced into Chrome. I think it was like 2008 or something. It was quite a while ago. Then other browsers started adopting it as well.
Then –I don’t know what the organization is that does these specifications. I can’t remember–the I.E.-something or other, they saw what was happening with SPDY and said, “Well, let’s develop a specification around this.”
PIPPIN: It’s the Internet Engineering Taskforce.
BRAD: There you go.
PIPPIN: IET.
BRAD: IETF, yes. SPDY was being developed kind of alongside. I run SPDY on our server. Pretty much all the major browsers out there, they support SPDY.
PIPPIN: Real quick, to clarify: SPDY is really just this protocol that Google developed specifically for Google Chrome to make HTTP requests faster.
BRAD: Yes.
PIPPIN: Is that basically correct?
BRAD: Yes, and HTTP2 is all about performance as well. That’s what it is. They’re not changing the protocol.
PIPPIN: SPDY was developed by Google, and then it has basically been merged. It’s become HTTP2. What was SPDY is now HTTP2.
BRAD: Yes, pretty much.
PIPPIN: More or less.
BRAD: What’s really cool is, traditionally what’s happened with specifications if they’ve just developed them on paper, right? Then they kind of deliver them or publish them as final drafts or whatever. Then the browser vendors get them, and they start implementing them, and all hell breaks loose because some browsers interpret things one way, and others interpret them the other way.
What’s interesting about this, though, is that HTTP2 was based on SPDY, so the basis was, they used SPDY’s specification as the basis. So, all of the current implementations that were out there being used already was kind of the foundation of the HTTP2 spec. You could argue that HTTP2 has been very well tested up to this point because a lot of it has been in use for years. That’s pretty cool.
PIPPIN: Overall, what is the purpose of HTTP2? What’s its main goal? Performance?
BRAD: The main goal is performance, yeah.
PIPPIN: Okay, so real quick. Can I get you to give maybe a quick example of what’s the performance issue that it solves? Everything really is around performance. We always want to do things to make things better, faster, and more efficient. But what is the main performance bottleneck that HTTP 1.1 has that 2 is solving?
BRAD: Right. In HTTP 1.1, you could only download kind of like two assets at a time. That was kind of how it started. I think Chrome, the latest version of Chrome, if you’re accessing a server over HTTP 1.1, it’ll download six assets at a time. With HTTP2, if you’re accessing the server with Chrome, a server that has HTTP2 with Chrome, it’ll download as many kind of assets as it can concurrently.
There’s a thing called multiplexing. Have you looked into that, the multiplexing thing?
PIPPIN: I have looked at it a little bit. It’s really pretty cool. This is where the demo comes into play that we have. There’s this really cool demo that we’re going to link up in the show notes. It’s from Akamia.com. Actually, there are two of them.
Basically, they show a comparison between HTTP 1.1 and HTTP2 using the same image, and it is astounding, the difference. It’s absolutely amazing the difference that it makes.
BRAD: Just to describe the demo, the demo loads 378 image tiles, so little images, kind of, that make up a larger image, so these 378 tiles. On the left, you have the image or the image tiles being loaded over HTTP 1.1. They load in. Then, right after they’re done, on the right, it loads in the same tiles, but over HTTP2.
For me, the difference was five times faster – the HTTP2 tiles came in. I got 3.81 seconds on the left and 0.67 seconds on the right. Did you get similar results?
PIPPIN: I did. Yeah.
BRAD: Yeah.
PIPPIN: Super impressive.
BRAD: That just shows how much faster it is when you can start downloading all of those tiles at once.
PIPPIN: I’m going to try and give a quick example. I hope I don’t butcher this, but to kind of give an idea of how this works and the main issue that it solves for anybody who is not super well versed in this. Have you ever loaded a Web page and there’s a giant image on it, and the entire page just stops loading until that image loads? Then, once it finishes loading, then you see the rest of the page load. Or, another is let’s say that you are loading a resource, whether it’s JavaScript, CSS, or images from an external server, and that external server goes down. Your Web page doesn’t load at all until either that request times out, it finally resolves it, or whatever happens.
That problem doesn’t exist in HTTP2, which is pretty cool and amazing. In HTTP 1.1, you start loading a file and, when that file finally loads, it goes back to the client. Then it starts loading another one. Finishes. Then loads another one. Finishes. Then loads another one.
Whereas with HTTP2, we can do a whole bunch of concurrent requests, and so, let’s say we have five images and a bunch of CSS files to load. We can send all the requests and get back pieces, even out of order. And so, a large file will not prevent; a large file that takes a while to load will not prevent other files from loading. They’ll all load concurrently.
BRAD: Right. There are a lot of inefficiencies in HTTP 1.1. I think you need to open a new PCP connection to the server for each asset, whereas this, HTTP2, it keeps the first connection open to the server and just keeps making requests over that same connection. You don’t have to reestablish a connection and do a handshake every time you request an asset. That’s pretty cool.
Some other benefits: The headers are compressed in HTTP2, which doesn’t sound like a big deal because you’re thinking headers can be pretty small. But don’t forget about the cookie header.
PIPPIN: Right. Those can actually get pretty large.
BRAD: Yeah, they can. And so, in the past, what people used to do to avoid that, they would put their assets on a separate domain that they wouldn’t be setting cookies on. When the browser would request an asset from your separate domain, there would be no cookies set there, so it wouldn’t suffer that load.
What else? Server push, that’s pretty cool.
PIPPIN: That’s a huge one that’s super cool. Basically, a server push, if I understood this right, allows a browser to basically say, “Load this file before it’s even been requested,” which, I’ll be honest. I don’t really understand how that technically works, but it’s really cool.
Before you even get to the point in the Web page where a file is supposed to be loaded, that file has already been loaded because it’s included. I believe it’s included in the headers that say, “Hey, I need this file. I need it later on, so go ahead and load it.”
BRAD: Yep, exactly. It just loads it into the cache so that when the browser eventually gets to parsing your document, the head part of the document and sees that asset, it’s already in the cache, so it doesn’t have to make a request for it. That’s pretty neat that the server can actually send the assets in advance before it even gets to the head part of the document.
PIPPIN: Which could really make a site load almost instantaneously in terms of the field.
BRAD: One technique people have been using is that in-lining CSS. I can’t remember what it’s called. It’s like the Essential CSS to load, to render the top part of the document. Do you know what I’m talking about? It’s kind of like the most important CSS styles.
PIPPIN: Like your main structure or something?
BRAD: Yeah.
PIPPIN: I’ve not actually seen that practiced, but I don’t pay that much attention to CSS practices, to be honest.
BRAD: Right. Anyway, you put that inline so that when the page comes back in that request, you have those styles right away, and you don’t have to wait for the CSS file to be requested and then returned and downloaded and read and rendered. It just does it right there because it’s inline.
Well, that practice is no longer necessary. The server can fetch the CSS in advance of rendering. That’s pretty cool.
What’s super important that we didn’t talk about yet is: Could we use this yet?
PIPPIN: Ahh, yes.
BRAD: I would have tuned out a while ago because I would have just assumed this is all fancy, shiny stuff that no one can use. But, it’s incredible. I was shocked, when I started researching this, how many browsers support it already.
PIPPIN: It’s almost across the board in all major browsers.
BRAD: Yeah. Yeah. I was a little disappointed to see Safari 8 doesn’t have it, but the latest–
PIPPIN: I was also a little bit surprised to see the latest Android browser does not have it.
BRAD: Yeah, but I don’t know. How many people use that? I’m looking at CanIuse.com right now, and it says 0% global usage.
PIPPIN: Okay. Well, there you go.
BRAD: Yeah, I think most people use Chrome for Android if they’re on Android. Yeah, 15.92% global usage, so yeah, not too many people use the Android, but it’s pretty junky anyway. But, yeah, like iOS, Safari has support for HTTP2. It’s across the board, like you said.
PIPPIN: Yeah. In terms of getting it enabled, what’s really involved here? Is this just need to contact your server, your hosting company, or if you manage your server yourself and just ask them to enable it?
BRAD: Yeah, I don’t know if they’re going to go for that, but you could try.
PIPPIN: Yeah, it’ll probably really depend on who your hosting company is.
BRAD: Yeah, and it also depends what their strategy is for rolling this out. Like shared hosting companies, they might have some newer servers that they’re setting it up with HTTP2.
PIPPIN: Right. I really suspect that this will not be something that we’ll see on some of the common shared hosts for a long time, unfortunately.
BRAD: Yeah, maybe.
PIPPIN: Now, a long time might be a year. It might be two years. But, if sites are going to have it today and in the very near future, it’ll be the ones that are providing VPSs, dedicated servers, etc.
BRAD: It could actually help them quite a bit in terms of load as well because the requests will be less because it only uses one TCP connection.
PIPPIN: Right.
BRAD: It’s not constantly making requests.
PIPPIN: But there’s one big problem with it on shared hosts.
BRAD: What’s that?
PIPPIN: HTTP, more or less, requires HTTPS.
BRAD: HTTP2 requires HTTPS, yes.
PIPPIN: Right, so it can only be used on sites that already have SSL certificates set up, which, on a lot of shared hosts, is not going to be the case for the sites that are on them.
BRAD: That’s a good point – very good point. Yeah. I forgot about that.
PIPPIN: That does not mean that they can’t enable it for customers that have it.
BRAD: Yeah.
PIPPIN: Well, okay. Well, they would have to put everybody who has an HTTPS on certain servers, so that would get messy.
BRAD: Yeah. I don’t know what their strategy is. I’m not even going to try to guess. I’m sure, for every company it’ll be different. But, what was interesting to me as well is that this was very recent that this specification was finalized, the HTTP2 spec. And, NGINX already released HTTP2 built into its release on September 22nd, so a month ago now. Apache has a module for HTTP2 as well. It’s still “experimental.”
PIPPIN: Right. I think they consider it in alpha stage.
BRAD: I don’t know about that. There’s a warning, anyway, on their documentation page that says it’s experimental, but I don’t know. That one was released October 13th. But, I think most people, if they’re running Apache, I don’t know about most people. We’re not running Apache public. It’s not publicly. We’re running Apache, but it’s behind NGINX.
PIPPIN: Right, which that’s how mine is set up too.
BRAD: Yeah.
PIPPIN: I’ll be honest. I don’t even understand how it remotely works.
BRAD: Yeah.
PIPPIN: Its’ beyond me.
BRAD: Yeah, it’s not that complicated.
PIPPIN: We’ve looked at it a little bit. We’ve looked at some examples of why this is really cool, why it’s something that we’ll want, that everybody should want to use in the near future. Now, what does it mean for WordPress? Is there anything that WordPress needs to keep in mind for this, anybody who is running a WordPress site needs to keep in mind? Or, does it just work?
BRAD: Yeah, it just works. Don’t worry about it. It will just work.
PIPPIN: Great! That’s what I like to hear.
BRAD: BUT, there is definitely — this was kind of a shock to me, actually, too, because there are a bunch of things that we’ve been doing to optimize our sites that HTTP2 kind of fixes, so you don’t need to do them anymore. Actually, if you do them, it actually makes things worse if the person browsing is on HTTP2.
PIPPIN: What is an example of that?
BRAD: For example, concatenating all of your CSS into one giant file or all your JS into one giant file. That used to make sense, right, because that would just be one request. So, you’d be cutting down on all these different requests if you had a bunch of different CSS and JS files. So you’d be sending headers. There was a lot of overhead with making a request for each file, so it just made sense to put them all in one. Well, not anymore. HTTP2 is much better at dealing with multiple files now.
PIPPIN: Because of the multiplex and concurrent requests, do you think I’m right to say that the reason that we won’t want to concatenate files anymore is because, since we can say, “Load five files simultaneously,” it’s actually more efficient to load five small files at once than to load one big file?
BRAD: It is. It is, AND you also have to remember: If you put all of your CSS files in one CSS file — I’m saying that because that’s how we have things set up, but some people just put all their CSS in one giant file in development. If you do that, how many of those styles are actually being used on the page that’s being loaded?
PIPPIN: Maybe a quarter, if that.
BRAD: Exactly. You’re loading all of this stuff that you don’t need necessarily on that one page, so we can start splitting up our CSS and actually loading them into the page much more intelligently from now on. Like if you have the “About Us” page. Why load those styles on the homepage? That doesn’t make any sense, right?
PIPPIN: Right.
BRAD: It never made sense to me.
PIPPIN: If you have a global CSS file that does all your global styling and then, for any page specific, load that in a separate file.
BRAD: Yeah. It make sense in the past to put it all in one file because it was actually lower to make the extra request for the extra files, but now not so much.
PIPPIN: That’s one of these improvements that’s just awesome because it actually makes our job as developers significantly easier. We can focus on organization and making nicer files and not worry about, okay, we need to get everything jammed into one big file because we don’t want those extra requests.
BRAD: Yeah.
PIPPIN: That’s super awesome.
BRAD: Yeah, I mean they were essentially hacks, right? We were essentially kind of hacking HTTP 1.1, and now we don’t have to do that anymore, so that’s pretty cool.
I’m saying now we don’t have to do that anymore because, like we just said, you can use HTTP2 now, right? But, if you’re on a server that doesn’t support it yet, then you shouldn’t be doing this stuff yet.
PIPPIN: Right. Something you’ve got to keep in mind as well is that let’s say your server supports HTTP2, but if a client’s browser doesn’t, they’re still going to get everything served over HTTP1.
BRAD: Yeah.
PIPPIN: One thing that you could do–
BRAD: That’s probably a lot less likely though because, like we just said, it’s pretty much across the board support.
PIPPIN: Right.
BRAD: They’d have to be on–
PIPPIN: One of the things that you could do: Go into your Google Analytics and analyze. If this is something that you seriously want to do, go to your Analytics and analyze your main user platforms and figure out are the majority of my users on browsers that support HTTP2. If for whatever reason your audience are using really much older browsers that don’t support it, then this is something you’re going to want to avoid for a little bit.
BRAD: Yeah, absolutely. That’s the same thing with Internet Explorer.
PIPPIN: Right.
BRAD: When can you stop supporting IE7? Yeah, you really just have to look at your stats.
Another thing is image spriting. I remember gmail. I remember seeing image spriting. I think gmail was the first example of it that I saw that they had this one image that had all these little bits and pieces of UI elements in it. They were using some crazy mappings.
PIPPIN: CSS positioning.
BRAD: Yeah, it’s CSS positioning and to display.
PIPPIN: No more!
BRAD: Yeah, you don’t need to do that anymore. You just cut up all your images. I’m wondering, though, like with buttons. It’s very typical to have a button and then rollover in the same image. I think that’s probably still just more convenient just to do it that way, right?
PIPPIN: Yeah, I would think so. Also, the size of that as one image versus two is going to be extremely minimal. Now, to be fair, that’s probably a case where you shouldn’t be using an image anyway anymore.
BRAD: Oh, yeah, probably not. It depends on the button. I guess it could be pretty graphic heavy, right? Then domain sharding, which is a term I didn’t even–
PIPPIN: I still don’t know what this is.
BRAD: Domain sharding: I knew what it was. I had to look up what people were calling it. What you used to is remember I was saying you’d put your assets on a separate domain name to avoid the cookies so that your requests were smaller. A similar kind of thing, but you’d actually put your assets across several different domains. You’d have assets1, assets2, assets3.deliciousbrains.com, or whatever.
The reason you would do that is, because each of them are on a separate domain, the browser will try to download them concurrently. The browser restricts concurrent downloads per domain. For example, Chrome, if you’re on HTTP1, will only download six assets at a time from the same domain. But, let’s say you had your assets spread out across a bunch of different domains. Then it would download six from each of those domains. You could get your assets loaded much faster by splitting them up. That’s what all the domain sharding means.
Now, there’s no point of doing that. There’s really no point because it’ll just download them all concurrently anyway. Yeah, I think that’s about it.
Oh, yeah, one other thing that I thought of about optimization was Google Web Fonts, CDNJS.com, so you can load these, load fonts and JavaScript from these third party servers, right? The benefit is supposed to be that, well, if the user has visited another site with that asset, it’s cached in their browser, so it’s available instantly when they visit your site.
I guess you have to balance what is the likelihood that that’s actually true. It’s probably true for jQuery. Maybe that one would make sense to continue to load from wherever, from Google’s CDN or whatever. But, if it’s something more obscure like a Web font from Google that is not that commonly used, then it might actually be faster to host that font yourself on your server because the TCP connection will already be open to your server, and it can download that font pretty fast over that one, that HTTP2 connection, whereas if the font is on Google’s servers, it has to open a separate TCP connection to get that font.
PIPPIN: Right. Now one thing to keep in mind, though, is that if it’s on your server, that’s your bandwidth.
BRAD: It is. Yeah, but, eh.
PIPPIN: It’s not necessarily a problem. It’s just something to be aware of.
BRAD: Yeah. All the other assets will be on your server.
PIPPIN: Right.
BRAD: Really, if it’s about performance, and it’s an obscure font that no one else is using, you probably do want to load that from your own server. Now, if you’re subscribing to something like what’s that font service? Text something. It’s owned by Adobe. Anyway, if you’re using something like that, I don’t think you have a choice. I think it’s built in, like the licensing is built into their service, so I don’t think there’s much choice.
Anyway, I think there are definitely some considerations to be made there. I’m not saying that you should stop loading assets from third party servers, but you should definitely consider the performance.
PIPPIN: It is very cool to think about how all of these changes and maybe what we’d consider best practices for a while are going to change and adapt over the next couple of years as HTTP2 becomes commonplace.
BRAD: Yeah, it’s pretty cool. Like we said: HPPT2 is supported by all the major browsers, so if you don’t care about older browsers, you can be using these things today.
PIPPIN: Use it.
BRAD: Yeah. And you have a server that supports HTTP2, which you should.
PIPPIN: Yeah.
BRAD: If you’re running the newest software, you can have this stuff.
PIPPIN: Super cool.
BRAD: Yeah, I like this stuff.
PIPPIN: All right, let’s see. Anything else before we kind of finish up here? There are a couple of good resources that we’ll put into the show notes. There are a couple specific to WordPress.
There’s a post on Make.WordPress.org from Zach Tollman, which is a really good one to go look at. It just kind of shows a bunch of the things that are going to be considered in WordPress, like making it run better on HTTP2, and it’s mostly more of HTTPS than HTTP2 for WordPress. Then there are some other good blog posts as well. So if this interests you, definitely go check it out. If it doesn’t interest you, go check it out.
BRAD: Probably the best resource that I read was chapter 12 of the book, High Performance Browser Networking, by Ilya Grigorik. That was just really well detailed, all the stuff about HTTP2. It’s not a free book. You can buy that book, but it is available to read online right now–
PIPPIN: Awesome.
BRAD: –for free because it’s sponsored by a conference or something. Anyway, it’s an O’Reilly book, you know, high quality stuff, so check that out. Should we wrap it up?
PIPPIN: Yeah. I would say if you have any questions about HTTP2, any thoughts or feedback, or if we got anything blatantly wrong, mostly if I got anything blatantly wrong, drop us a comment, send us an email. You know how to get in touch.
BRAD: All right, thanks, everybody.
PIPPIN: Thanks for listening.
Leave a Reply