HSTS Can Reduce Your TTFB

0:00Introduction To HSTS

I have a video for you about HSTS. We just posted this, the post is live on our website, and it was actually in the newsletter several months ago. It's about enabling HSTS, which can reduce your time to first byte. This is a really simple optimization, and it will also improve the security of your website.

HSTS is a type of server header which basically tells the browser that the site can only be loaded over HTTPS, so only secure. That helps secure the site. It protects the site against some basic cookie-type attacks and a few other security threats. If you're using any sort of security tools to test your website, you'll get scored lower if you don't have HSTS enabled, so enabling it will improve your security score in those tools. If security is important and you're storing sensitive customer data, it would generally be considered best practice to have this enabled as well.

1:04How HSTS Improves TTFB

How it improves time to first byte: it will improve this particularly for second visits to the website. It won't necessarily help on the first visit, but definitely for repeat visitors it will help. So WooCommerce sites, membership sites, and any sites where people are coming back a lot, it'll speed things up. Basically it forces the browser to talk to the website over HTTPS.

I'm here on our website, on the actual post. If I just typed wpspeedfix.com like this into my browser, on most browsers the browser tries to load that URL over HTTP, so not secure, and that's going to be slow. If you're using HTTP as opposed to HTTPS, the browser can only use the older HTTP version 1.1 protocol. If you're using HTTPS it will use version 2 or version 3 of that protocol, so it's much faster. It also eliminates redirects. Without HSTS you have to wait for a redirect from the not secure to the secure URL, whereas with it the browser will automatically try and load the site over HTTPS. So it reduces a lot of that latency, particularly when people are not typing in the full address, for example when they are not typing HTTPS in front of it.

Not all browsers do this, and some default to secure mode, but basically when I just type in wpspeedfix.com the browser tries to load http://wpspeedfix.com, and that triggers redirects. With this header enabled, the second time I come to the site the browser will automatically start to load it over HTTPS like this, so it's much faster. Faster protocol, fewer redirects, more secure. It's a really simple optimization, so it's well worth doing.

2:46Enabling HSTS In Cloudflare

Let me show you how to do it in Cloudflare. All the sites we optimize, we set them up on Cloudflare. There are a bunch of reasons why: fast hosting, it's got a firewall, and it's a good content delivery network. I've got a customer site here. This one actually doesn't have HSTS enabled. It's an old client from years ago that we're just doing some work for now.

I'm inside the Cloudflare account, and under SSL, under Edge Certificates, is where you turn it on. You can turn it on in hosting as well if you're using hosting that supports it, but this is an easy way to do it at the Cloudflare layer. Go in here and you'll see HTTP Strict Transport Security (HSTS), and you just click enable. It tells you some stuff here. There is one thing, not a problem but something to be aware of when you're enabling it: the browser will not load the site over HTTP once you've enabled this. So if your SSL certificate is broken or there's a problem with it, this might make the site inaccessible. Just keep that in mind. It'll take some fiddling to fix if something goes wrong with your security certificate. There's a whole bunch of notes there, but anyway, I've clicked "I understand" and I click next.

Now you want to set this to 6 months. If you're not setting it to 6 months, generally browsers won't cache this data. So click to enable it and set it to six months. I don't want to apply it to subdomains, so just be careful with this. You don't want to turn this on because it will affect all the subdomains in the account. You only want to enable it if you know what you're doing, or if you're sure all the subdomains actually support it.

Preload as well. For little websites this is not going to do anything, but turn it on and that may get you on a list. Common browsers have a list of HSTS sites and they download that in advance, so they know a site is HSTS. Leave that on. This is a security header, so just be careful with turning it on. It's probably worth turning on, but it might break things. For the purposes of this video we're not going to turn it on, because we don't want to break things on this website. So basically hit the save button and we're good to go, it's enabled.

5:04Verifying The Implementation

You'll see on this post, and we'll link it in the video notes, there is a tool from DomSignal where you can test it. I'm going to test this one here, just this customer site. The session expired, so let me try again. I have to reload the page, just like this. There you go, the HSTS header was found, so we're all good.

5:32SEO Benefits And Final Considerations

We've seen on some sites as well that there are SEO benefits to enabling this. Not always, but we think that it may fix some canonical issues. If you have an older site that has canonical issues, where a version of the site existed or was indexed back when HTTPS wasn't really a thing, it may help improve Google rankings. There are also a bunch of edge cases where it may help, for example if you've got a lot of links pointing to HTTP, it seems to help as well. It doesn't help in every case, but it does seem to be a positive signal for Google. So: speed improvement potential, SEO improvement potential and definitely a security improvement, and it's a free optimization. You saw how quick it was to set up.

Just remember that if you enable this, you cannot go back to HTTP. It won't work. The browser would reject the connection and throw an error saying it was told not to load the site over an insecure connection.

6:31Resources And Conclusion

That's it for this video, pretty straightforward. If you want more site speed stuff, check out our website, wpspeedfix.com. We have some tools here, and under the free stuff menu you'll see a free SEO audit, a free Core Web Vitals report and a free WordPress site speed test. All of these take 60 to 90 seconds. There's no opt-in required, so you can use them without providing your email address, and they provide detailed insights on site speed, SEO and Core Web Vitals.

If you want help with your website, site speed help, technical SEO help, go to the homepage and you can request a free audit. We can help you with all sorts of things: site speed related, WooCommerce speed related, Core Web Vitals, and technical and on-page SEO. If you have any other questions, just post in the comments and I'm happy to come back to you. Cheers.