Β Cloudflare TV

πŸš€ WordPress Optimization β€” Launch Day @Birthday Week

Presented by Sumit Bahl, Garrett Galow
Originally aired onΒ 

Join leading product experts as they share the new products being launched each day of the week as part of Cloudflare's 10th Birthday Week celebrations. Watch product demos, and submit your questions live on the air.

English
Birthday Week
Product Launch

Transcript (Beta)

Hello, everyone. Thank you for joining us on this Cloudflare TV segment on automatic platform optimization starting with WordPress.

My name is Sumit Bahl. I'm with security product marketing team here at Cloudflare based out of San Francisco.

Hey, everyone.

My name is Garrett Galow. I'm a director of product here at Cloudflare.

Hey, hi, Garrett. So as most of you guys would know, this year Cloudflare turned 10 and this is our birthday.

So as you would have seen throughout the week, we have launched multiple products.

On Monday, we launched Cron Trigger, which is Cron job scheduler for workers along with edge storage for workers platform.

On Tuesday, we launched privacy focused web analytics tool. Wednesday was all about Radar, a public facing platform to provide visibility into traffic and security trends.

Thursday, we launched API protection solution. And Friday, today, we are launching automatic platform optimization for WordPress.

Garrett, to me, this automatic platform optimization for WordPress sounds like a magic button to improve the performance of WordPress sites, but you are the expert.

So can you provide us more details on what exactly is automatic platform optimization for WordPress?

And more importantly, why did Cloudflare build this? What problem are we trying to solve for the WordPress users?

Yeah, absolutely. I mean, I think the magic button idea is sort of a goal here, right?

If you think about other products we've launched like Argo, that was sort of one click and you see immediate benefit to your service running through Cloudflare.

So automatic platform optimizations is really a focused effort on how do we make customers hosting websites on traditional platforms, CMS platforms, a lot better.

And so what is it?

What is the automatic part of it? If you think about a typical CDN like Cloudflare, another one, right?

We'll cache static content for you. So images, JavaScript, those sorts of things, we'll hold it on our edge.

So if customers go to your site, that content's loaded much closer to them.

There's a lot of content that doesn't get cached on our edge, HTML, certain fonts and other kinds of things.

And so what we wanted to do with this service is we wanted to be able to basically take an entire website, entire WordPress site, put it into our edge and serve it all out of cache.

And so there's a lot of things you have to do to make sure that you don't serve stale content.

Things get updated. If you make a change on your WordPress site, if you update one of your posts, make sure we serve that updated content.

So really the effort there was how can we make all of that basically seamless and do it for you?

So as the customer, you don't have to worry about, oh, I made some changes.

Am I serving stale content to my customers? Are they going to see the latest and greatest thing?

When if I have logged in customers, are they going to see, you know, someone going to see someone else's stuff?

All of that stuff is sort of managed for us.

You know, sort of why we built a lot of this is, you know, we've participated, we've had to work, you know, work with WordPress, the system for a long time, we've maintained a plugin.

And, you know, it's been 38% or so of all sites on the Internet.

So it's a huge platform. And a ton of our customers use it.

And, you know, customers don't, you know, want to spend all their time thinking about performance and security for, you know, their site, right?

They're focused on the business they're running, the blog they're running, right?

And so, you know, it was really important for us to say, you know, hey, focus on, you know, what's important for your business.

Let us handle, you know, the hard stuff like security and performance.

And so, you know, we've always had, I think, really, really good security on the WordPress side.

You know, we provide with our firewall, a ton of WordPress specific firewall rules to help keep, you know, your WordPress site safe.

I think this sort of represents that next step for performance for us, where we can take, you know, sort of what we've learned over the past couple of years about WordPress and content hosting and really bring it to customers in a very simple to use sort of one click button action.

Thanks for sharing that.

And you kind of mentioned we used to provide security and now this automatic platform optimization is all about performance enhancement.

So, I believe we tested in-house with almost 500 customers website that run on WordPress.

So, if you could walk us through some of the results that we have seen so far.

Yeah. So, right. With anything we say, we're going to, you know, help your site be faster, more performant, right?

What's the evidence, right? How do we actually do that?

And so, one of the things we did when we built the service was we said, okay, we think we know what it's going to do, but let's go figure out how it's going to help a customer site.

So, we sort of tested a random sample of around 500 people's websites that use Cloudflare today.

And we looked at, okay, if we run APO on their site, what kind of benefits do we see?

And we sort of focused on three specific metrics.

So, the first is time to first byte. You know, that's from the moment you make a request to go to a website, how long does it take to get the first byte of data back?

Usually, this is like the HTML of the page. This can be, you know, slow for a lot of reasons, right?

This typically with Cloudflare, we don't catch this content.

And so, you have to go all the way to the origin. If you're having issues on your origin, if there's heavy load on your origin, if maybe you have plugins that maybe don't perform very well, but are in sort of the blocking path to generate HTML, all of these things can sort of delay that first byte arriving.

And so, here we see that, you know, we look at sort of, we try and look at like best and worst case.

So, in the 90th percentile, which is, you know, the 10% slowest sites that we tested, right, we can see that we can basically reduce time to first byte by over 70%.

And if you notice, you know, at the 10th percentile, which is like the 10% fastest sites, right, you know, minus 2%, right, it's seven milliseconds, right?

It's sort of par for the course, right? Like, if your site is super, super fast to get in the first byte, you know, possibly these tests from where we ran them, right, they're right by where the origins are.

And so, like, you know, if your site is really, really fast, you know, this is going to have a little bit lesser effect.

First Contentful Paint is a really important user metric, right?

So, 10 first byte is nice, but it's not, you know, sometimes people overfocus on it, right?

One of the really important things is when do your visitors start to see the content painted on the screen?

Paint means, you know, rendering or drawing the content, right?

So, First Contentful Paint is when's the first time is a significant amount of the content that you'd see on the page painted.

It can be sort of like the first major image, it can be the first big block of text, something like that, that, you know, the user sees, okay, content's being loaded, I know the website's going to load, and they can potentially start at least, like, seeing something interacting with it, right?

Here we see, you know, you know, the 90th percentile, right, we're able to do 22% reduction in this First Contentful Paint.

And even in the best, you know, the 10% case, right, we're able to, you know, still do over 10%, right?

And so, you know, whether your site's heavily optimized or not, right, we're able to provide, you know, strong benefits here.

And the last speed index, which is a little less commonly known metric, but it basically tries to give a number to how quickly does most of the content load.

Usually, you can see it as a graph.

And so, it's like, over time, and how much of the content has loaded.

And so, the faster content loads, the more content populates earlier, the better the speed score.

So, you want this number to be as low as possible.

And so, in our cases, right, we can, you know, bring these numbers down, right, this often, you know, this is like, kind of the amalgamation of a lot of things, like, how long does it take to process things on the client side?

So, there's a lot of different pieces here, right?

But we consistently get both the worst and the best side improvements here.

Yeah, I mean, we've been, you know, really impressed so far to see what this can do.

I think the name of the game here is it brings a lot of consistency to a lot of the performance on a WordPress site.

So, you know, you know, maybe your best case is, you know, closer to the 10th percentile here.

But sometimes you do have worst cases, because of load or things happening on your WordPress server, it might be running background jobs.

And so, APL allows you to get much more consistent performance profile out of your site, because we heavily reduce the amount of times we have to have to request content from your origin.

These are really great numbers, actually, even if you look at the mid mid ground, if it is around the 50th percentile, then it's definitely some amount of improvement that is going to happen for people who are using those WordPress sites.

Yeah, and I think, you know, I think one of the important things, right, is, you know, there's a ton of solutions out there on the market.

You know, people were trying to do, sort of spin their own variants of this on Cloudflare themselves.

You know, I didn't mention before, but this work actually came from some exploratory work done by Pat Meenan, who used to be at Cloudflare.

He's the person who started webpagetest .org, if you're familiar with that service.

And, you know, he did a lot of exploratory work, we talked about some of that on our blog, we even have a few customers that, you know, went and took sort of the proof of concept code that he wrote and added into their to their sites.

And that's great, right?

There's certain people that have the technical know-how, have the time, you know, at all to do that.

It also actually, you know, it requires you to run workers on your site, which has, you know, a cost component to it.

And so, we looked at all of that and said, you know, I think we can package this all together, like this really simple and, you know, one click, it provides these benefits and, you know, compared to a lot of other plugins or solutions on the market, it requires, you know, much less maintenance and configuration in order to do.

Absolutely makes sense. One click button just to improve the performance of WordPress site.

What else can you expect? That's great. So, just moving on to our next slide.

So, I believe this was also tested with one of our customers, Kinsta, and they saw huge performance improvement, around 70 to 300% improvement for the WordPress sites.

Could you provide us some more details on what sort of testing was done, methodology and some results from there?

Yeah. So, Kinsta is, for those maybe not familiar, Kinsta, you know, sort of is a managed WordPress provider.

So, they're, you know, they're experts in managing WordPress and how to make it work well.

So, we had them try out APO to see, you know, what the benefits might be. And so, they sort of ran some tests for us.

They basically hosted a website in Tokyo, in Japan, and then they ran tests from six locations all around the world to see.

They measure just page load, just to see what's the absolute time it would take to load the site.

And so, they tested it kind of over three variants. One is, you know, just on their platform, pure vanilla Kinsta.

Kinsta with TCDN, which is a CDN partner of theirs.

And then last, Kinsta with Cloudflare APO enabled. And if you notice, you can see, like, you know, it's not that surprising that loading a site from Hong Kong to Tokyo, you know, 1.2 seconds is a lot faster than trying to go from Mumbai to Tokyo, right?

Speed of, you know, speed of light, distance you have to travel around trip is going to make a difference when you're requesting assets.

But you notice, obviously, each kind of step function, it goes down.

But I think what the, you know, the really important message here is, you know, with APO, you see a much greater consistency in the page load speeds, right?

The variation goes from only 0.6 to 0.9 seconds versus, you know, 1.2 to, you know, 3.7.

That's because in the case of using APO, you know, we can basically serve your entire website out of Cloudflare's edge network.

And so, you know, if you're requesting that site in Sydney, you're going to our nearest pop, which is, you know, going to be in Sydney or nearby, right?

And so you don't have to go back to Tokyo in this case to, you know, fetch, you know, have the HTML generated, have it fetched and have other assets, you know, generated and sent back to you, right?

So now you're just talking, you know, in much, all your requests happening much closer to the eyeball to the customer.

And so they get a better and more consistent experience for that reason.

These are really great numbers. And I believe they're super happy and excited with the testing so far.

And just for our audience, we have been talking about APO.

So that's the short form for automatic platform optimization. If now we kind of talked about some of the great benefits, the performance enhancements.

Now if our customers are interested, our prospects are interested in using this feature, how do they go about enabling this?

Can you, can you take us a level deeper and show us if possible, how it works?

Because I'm sure the audience would be interested in knowing the secret sauce behind this magic.

Yeah, yeah, I can actually, I can actually show you.

So make sure you can see this is my WordPress site.

It's a test site. It's not a, I'm not running any major workloads on this, but this is the WordPress admin panel.

And so if you're familiar with WordPress, WordPress has a plugin ecosystem.

Cloudflare has maintained a plugin in WordPress for quite a long time.

We've recently updated it. And so if you search for WordPress or for Cloudflare in the plugin ecosystem, you'll be able to find the plugin.

You can install it and activate it. Switches and asks me to re -login.

So if you are trying to use a service, you're going to want a version 3 .8.2 of the plugin, the latest version in case you're watching rerun later, as of right now, that's the latest version available in the market.

So you're going to want to download that.

And then in settings, you'll see a section for Cloudflare.

And if you have never used the plugin, if you've, if you're updating the plugin and you're already, you know, logged in, you won't see this, but if you've never used Cloudflare before, or if it's the first time with the plugin, we're going to ask you to, you know, authenticate.

We need to make sure that we can talk securely between WordPress and Cloudflare.

And so if you don't have an account, you can create one.

If you do have one, you can sign in. And actually, this is a good place to show, you know, one of the changes we've made recently in the WordPress plugin is security is really important.

And so it used to be that you had to authenticate with an API key and that was fine.

But the problem with the API key is it basically gave WordPress access to everything you had in Cloudflare, which is obviously not desirable, right?

You know, WordPress is on a single site.

You only want that domain to be active. And so actually now with API tokens, we support the ability to basically say, I want to generate a token that's only for, you know, a specific zone.

So here I have the zone that I'm using.

I can grant that token access to only the resources needed for WordPress. We actually have a template available.

So you don't have to worry about picking all the settings.

You just use the template. It gives you exactly what you need. So I'm going to get my API token for this.

So that way we can log in. And the other thing is, right, someone might say, oh, I just showed everyone my API token.

If someone screencapped that, like they're going to get my account. What we actually support is things like TTLs on tokens.

So I've actually set a TTL. So there's not really anything you can really do with this token.

It's the test zone. Not much you can do with it.

But even if someone does screencap this and take the token tonight at the end of the day, the token's actually going to expire.

And so I don't have to worry about, you know, oh, it's, you know, one of this token leaks, like it has the TTL, it will be, you know, removed if necessary.

So once you've authenticated as a plugin, you see a view, you see cards kind of similar to how our dashboard looks.

There's a lot of things, you know, good things in the plugin that you should go through and look at.

One of the things we have is we can, you know, apply recommended settings for the plugin.

So sets a bunch of performance and security setting defaults that are kind of best for WordPress when you're using Cloudflare.

But the star of the show here is automatic platform optimization. So we have a new card here.

And this is, I mean, it truly is just a toggle switch. I will say if you, if you are a free customer, this costs a few bucks a month.

And so you'll see here a purchase button and it will take you to the Cloudflare dashboard.

You can purchase the product and so on and so forth.

But in the case of myself, I've already purchased the product earlier today.

I did actually purchase it for real.

Hit on switch and there we go. We're off to the races. And so, yeah, it's that easy, right?

Those three, you know, install the plugin, sign up for Cloudflare or log in with Cloudflare and then flip the button.

I will do a quick PSA. You're trying to test, is it working?

You might go load your website to see if it's caching like the HTML and things like that.

We do things intelligently, like if you're logged in as an admin to WordPress, we will bypass cache because we don't want to be caching administrative pages or your administrative view of your website.

So you'll want to use, you'll either want to log out of WordPress before you go and check your site, or you'll want to use incognito browser or something like that.

So that way you get the view of a visitor and not, you know, you the admin viewing your site.

Obviously it would be bad if we started caching sort of your administrative view of the site.

Cool.

Thank you for sharing that. And just on the same line, like what's the sequence source in behind, like you mentioned about the request not going to origin anymore, and it's kind of coming so from an edge.

Yeah. So, you know, the thing that we're really using here is we're using the power of Cloudflare Workers and workers key value or KV.

And so, you know, typically when you make a request to a site that uses Cloudflare, you know, we'll cache static assets, we'll cache, you know, JavaScript or images that gets sort of put into our cache in a given data center.

And then, you know, it lives for a certain time before it's evicted for some reason or refreshed otherwise.

You know, that works fine. And, you know, for static content, it's not such a big deal, right?

If you want to cache something like HTML, one of the things you have to be really careful about is like, oh, what if I change it, right?

If it changes, I need to make sure that I'm not serving stale versions of that.

So what we do is we basically run in a worker some code that looks at WordPress that actually can communicate back and forth with the WordPress plugin.

So if you have a post on WordPress and you update that post, for example, the WordPress plugin will see a hook from WordPress server and say, oh, this post has been updated.

You know, this is the content that's changed. It actually sends an event to our edge, the worker that's running for that, for the service will actually say, okay, here's the new content.

And so what it will do is it will load that content into cache.

And what it really does is it loads it into our key value store.

And so when a request is made to Cloudflare's edge, you know, when a visitor is visiting your site, you know, we'll also, we also have the same worker running and when it does that, it looks at the request and says, okay, well, is it in the cache already?

It's already in the cache, whether it's static or dynamic, we'll serve it from the cache.

If it's not in our typical cache, what we'll do is we'll look at the copy of the content we have in KB.

And we'll say, okay, instead of going to the origin, we know this content and KB is fresh.

It's still valid. And so we'll put it into the regular cache.

And then we'll use that to respond to the request.

So basically workers is doing the job here of deciding should I should not, you know, serve this content.

And if it does get an event, and if it knows something's invalid, it can then go refresh from origin before and make sure that content is updated back to the customer correctly.

And so I sort of talked earlier about, you know, the POC work that was done around this.

And, you know, if you wanted to use it at that time, you had to take a specific version of a plugin, and you had to install a worker script yourself.

And that's a lot that customers have to manage.

And so with this service, you know, we do all of that for you.

We're not deploying a worker on your behalf in your account or anything that we use thing called first party workers.

So we run it behind the scenes. So you know, you don't have to worry about the worker, you don't have to worry about any of that stuff.

We're not even charging you for the usage of the worker, the compute of it, that's all included in, in the system.

And so it's really this power of the computability of workers and storage of KB that allows us to do this.

And then do the extra things like, oh, well, if it's, you know, a logged in user, an administrative user will bypass cache, because we can see that cookie.

And we'll know not to, you know, cache any of that content or served cache content, because we know, oh, the admins should see, you know, whatever the most up to date thing is, because they're probably trying to make sure that that stuff is working correctly.

If you're a longtime user of Cloudflare, and WordPress, you know, you may have seen stuff about, oh, I could like write a page rule to cache everything.

And then if I was on the business plan, I could bypass cache by cookie.

And I'd set the WordPress, you know, typical WordPress cookies, and sort of that kind of gave you some of this functionality.

You know, this sort of represents like an X version of that we're sort of do it all for you.

We'll keep things up to date.

And it doesn't necessarily require you to be on the business plan, which is not something that, you know, many of our customers using WordPress really can afford to do, or it doesn't make sense for their for their needs.

So this really, really trying to democratize a lot of these advanced performance benefits that, you know, you might not be able to, for either, you know, for any sort of reason, might not be able to do yourself.

Got it. So it looks like a lot of work happening in the background.

And from user perspective, it's just that click of button, and the magic happens.

Yeah. And the beauty of that, right, because it's a managed service in this regard is, you know, we can keep, you know, providing updates to the service, right?

We find, you know, more optimizations we can make, we find better things we can do.

Right, we can make those changes.

You know, we, Cloudflare is always, you know, keeping up to date with what's happening in WordPress.

You know, typically for customers, what that's looked like is when we hear about, you know, security vulnerabilities, right?

That's when we can, you know, add things to our WAF to protect customer sites, you know, as soon as, you know, the, you know, it's found out almost.

So this is sort of providing that same level of managed service benefit on the performance side, right?

If we discover new optimizations, we can make better ways that we can do things in, for WordPress customers, right?

We can take advantage of that and do those things without, you know, a customer having to worry about like, oh, do I need to update some code?

You know, do I need to update this?

Things like that, you know, the most you might have to do is update the plugin. Got it.

No, absolutely makes sense. And since we named it as automatic platform optimization, and we starting with WordPress and I believe in future we'll be adding more platforms to this.

Yeah. So I talk a little bit about in the announcement, you know, main blog post we had today, but some of my colleagues wrote a technical blog post that follows along and actually go into more detail around this, but none of the things we did here are, you know, truly only can be done with WordPress.

These kinds of things can be done with any sort of system, like CMS type system that you run a website from.

There's obviously, you know, the specific headers you need to worry about, the specific cookies you need to look for are WordPress specific.

But, you know, we know that this can be applied to more platforms.

So while today we're launching this specifically for WordPress, we do plan to make this available to other platforms.

So, you know, one of the things I'm really looking for is to better understand, you know, what are the other platforms our customers use the most?

We obviously like, we'll be looking at data we have about people running behind Cloudflare of what kind of platforms are they using.

But, you know, really looking to know, you know, what other platforms would be most useful on what customers, you know, would like to see us move to, or if, you know, you're a platform provider yourself watching this and, you know, you think you want to make this widely available to a lot of your customers, right?

That's another thing that we're absolutely excited about the opportunity to do.

Got it. Absolutely makes sense. And we did talk about from a pricing perspective, this, if you go to the next slide, this is, it would be available for our free customer customers who are on a free plan for $5 a month.

But for any customer who are on a professional business or enterprise plan, this is included at no cost.

So kind of really good for even free plan users, just that they are using WordPress and then have their businesses running using his WordPress site to definitely go and do that upgrade.

Yeah, I mean, I think the real important thing here is, you know, a lot of those benefits, you couldn't get on Cloudflare without paying us a pretty substantial amount of money.

And even then you were kind of having to do it yourself.

And so we've sort of taken out some of those barriers, we've taken out all the management aspect.

And, and, you know, we're using things like workers behind the scene.

But, you know, that's not a cost that we're, you know, pushing to the end customer, right?

We're sort of saying, like, it's going to be a flat rate, predictable pricing, you know, what you're getting yourself into, you understand, you know, if you're a free customer, what you're paying for, don't worry about, you know, how many requests, tracking how many requests you make.

And then obviously, you know, if you're on any of our paid plans, right, we want you to just be able to get these benefits, we want you to have, you know, a great experience using WordPress on the platform.

Absolutely makes sense. I believe you have a webinar coming on the same line with Kinsta sometime on 21st of October.

Yeah, so it so happened that Kinsta sort of reached out wanting to do a webinar with Cloudflare.

Because, you know, we've been involved in WordPress for so long, and they're, they're obviously big in WordPress community.

So, you know, we sort of let them on that this was coming.

So sort of, you know, worked out really well.

So yeah, I'm going to be chatting with Brian over at Kinsta come October 21st, be talking about all things WordPress performance, a little bit of this, but but other things as well.

So definitely tune into that if you're interested.

That's great. Thank you for letting us know. And I believe we already have the technical and the business blog post out.

So definitely a good read over there as well.

For people who want to kind of understand what this WordPress optimization solution is.

Absolutely. Cool. Any last thoughts? Anything that you would like to add?

Yeah, I mean, I think, you know, obviously, if you've seen this, and you know, you're using WordPress, and it sounds interesting to you, we'd love for you to try this.

You know, I think, you know, if you if you're using, like, if you're willing to go to the pro plan, right, that's going to get you all the security and performance you could want between all of our services.

If you're not convinced yet, try it on the free plan for a small fee a month.

If you run into issues, please reach out either on the community site, or to support directly.

Myself and other people are, you know, standing alongside the support team to make sure that, you know, everything works great for customers.

And if you are looking for, you know, other platforms that you want us to run, run on, please let us know as well.

On Twitter, I'm at G to the G so you can find me there. But yeah, we're really excited about this.

It's really cool to finally get this out in the in the hands of all of you and see see how this works for all of y'all.

And this is really amazing, just because we the initial results, what it shows and at the same time, some of our customers testing it.

So really positive response so far.

So as Gareth mentioned, please go ahead and try it. And do let us know. That's all from our side.

Right now on this WordPress optimization. Thank you. Thanks, everyone.