Web Performance for Everyone

Welcome to Cloudflare TV. You're watching Web Performance for Everyone. I'm your host Alvin Lin.

I'm on the marketing team here at Cloudflare and we're joined here today by Suzanne Aldrich, Leader of Field Solutions Engineering in West and Central.

Suzanne, how are you today?

I'm doing really great, Alvin. It's a real big pleasure to be here.

It's a great opportunity to have this platform to present on with you today.

Awesome. It's great to have you. So we'd like to give you, our viewers, a proper introduction to Web Performance for Everyone and what we hope you can take away from it.

So the heart and soul of this segment is to help you build great things using Cloudflare while learning about the underlying technology you're using in a conversational way.

We'll talk about the performance benefits of features we've already enabled for you that helps you get a head start and cover some features that you can activate with just one click under the Speed tab.

We want to help you build great things. We want to help build a better Internet with you and for you and we believe we can do that 1% of the time.

And performance is something that everyone can take advantage of.

We'll also be taking your questions live today.

So email us at livestudio at Cloudflare.tv and we'll do our best to get to them during this segment.

Now let's get to know Suzanne.

You're one of the best and brightest at Cloudflare and I've known you for a while now.

What's your story? Thank you so much, Alvin. You're too kind. I've been at Cloudflare for about five years now and I'm a field solutions engineer manager, which means that I lead a team of solutions engineers here at Cloudflare in the central and west region.

And what we do is we work with customers and people who are interested in using Cloudflare, solve some of the hairiest performance and security problems that we see today on the Internet.

And I'm very, very proud to work with just a great crew there and going to be celebrating my five years at Cloudflare coming up here in July.

Wow, congrats. Yeah, thank you very much. It's a really big honor to be able to work for a company.

And, you know, just to give a little background on myself.

I am a northern California person, grew up around the redwood trees, developed an interest in Internet technologies pretty early on and ended up going to Stanford and studying computer science there where I was able to at one point be the webmaster for the smallest web server in the world at the time.

Yeah, it was called the Matchbox server. So what we were doing there was really fun.

We were actually publishing the website for the wearables group on the web server that was the smallest web server in the world.

And so I'm really proud of that.

And then I ended up actually going out, you know, this is kind of a little personal history, but going out into the real world and just having regular jobs outside of tech.

And, you know, there's a long, long history for that.

But long story short, I ended up really getting kind of a big interest in how social movements and protests and revolutions, in fact, were being aided by buying technology.

And with that newfound interest and really being informed by how the world works, I actually went back to Stanford and was able to study under the science, technology and society program there, which is a really fascinating program.

And if any of you ever get a chance to study it, it's all about how technology and society really are a part of a kind of a continuum and they affect each other.

And the technologies that we're making really have an influence on the societies that they're introduced to and vice versa, that the kinds of a kind of world that you grew up in really influences the tools that we as technologists are building.

And so that's a study that's really informed what I look for in a career and was very interested in seeing how it is that we can learn how to be more ethical in the way that we build technology and consider the ways that it's going to affect the people.

And in addition, also to, you know, be careful and consider the kinds of biases that we should correct for because all of us are influenced by a lot of factors.

And it's really interesting. I ended up being able to get back into technology and it was a little bit of a journey.

But what really brought me to Cloudflare in a lot of ways was the impressive scale and the superior architecture that really enables the world to benefit from the kinds of performance and security that previously wasn't available.

For regular people. And I've seen Cloudflare protect and accelerate all kinds of groups over the years and very, very proud to be part of some of the projects that we engage in like Project Athenian and Project Galileo.

So if you get a chance to learn a little bit more about some of these activities, I really recommend digging in.

Thanks, Suzanne. So you've done quite a bit.

And it sounds like you've landed in the right place at the right company.

We're doing a lot of those good things where society and technology meet.

Let's talk about the current events of 2020. It's been quite a year.

A lot has changed, is changing and will change. And there's no sign that change will slow down, you know, at this day and age.

And, you know, from a global pandemic causing shutdowns worldwide to avoid its spread to nationwide civil unrest triggered by police killing of George Floyd.

And really the deeper underlying problem is systemic racism.

We've sort of entered into this new territory with regard to rapidly changing conditions that are forcing us to adapt quickly with whatever tools we have.

And maybe we can address COVID-19 first because this is obvious for everyone.

It's dramatically changed the way we live, interact with one another, and the way we do business, both as customers and for small businesses and companies of all sizes.

Suzanne, how has 2020 impacted you overall?

Yeah, I mean, it's a tough question. I can't really recall too many times in my life that have ever been as, you know, eventful and transformative and really life changing for all of us.

It's affected us all personally. It's affecting a lot of different aspects of our society.

And for me, I know, just getting used to being stuck in a house and trying to work.

And, you know, I feel really blessed that I have work and that I'm able to come to it every day.

And it's also, you know, so there's a little silver lining for that.

But on the other hand, it's been difficult to maintain, you know, work life balance and also trying to turn everything that we were doing before in real life face to face into some kind of analog that we can perform online.

Since really that's been the really only safe way to interact with those around us at work, at home.

I have children and having to adjust to a life with them in the house with me while I'm trying to work is really challenging for our family.

And, you know, I'm really breathing a sigh of relief as today's last day of school for my eldest.

Phew! It's been really tough. And, you know, and on top of that, just considering how, what is it that we can do, you know, I said what drives me, I really want to be involved in technologies that help the world out.

And what is it that we can do to help make it easier for the kinds of, you know, activities that people need to do online now and they're being forced to, whether that be stores that have to put up a storefront online that they didn't necessarily rely on before to small business people.

One of my best friends is now selling custom clothing online and, you know, doing really well with that.

And that's all enabled with Internet technology.

So it's been really interesting watching how life is transforming for me and my friends and family.

And I think we're all going to be affected by this for some time. That's great.

For me, I think I would add, you know, I've gone through simple emotions like, hey, I'm just going to buy all the cookware that I possibly can from meaningful, meaningless things really to really reflecting deeply on things that matter, you know, like the racial movement.

And I think we have something to share today about how performance affects activists in this day.

There's a video that we'd like to share called Built for Us, or Built for This.

And Suzanne, you have a few words sort of about this whole movement of where the Internet is heading and why Cloudflare is positioned perfectly for this time.

Can you share a little bit more about that?

Yeah, absolutely. The world, as I mentioned, is really becoming much more dependent upon networking technologies, whether it be businesses, whether it be movements trying to communicate, get their message out.

Trying to make this happen faster is really, really important for all of these different use cases.

And what's really happened is that the network has become very important and needs to be able to support a very much increased amount of traffic.

And we've really been seeing dramatic increases of usage across the Internet.

And these usages are really needing anything that you can to improve the performance.

And at Cloudflare and at Internet companies around the world, we're working to keep the infrastructure up and running and reliable for you so that you're able to conduct all the kinds of communications that are vital, they're critical.

Keep the infrastructure, the critical infrastructure of our country, its economic activity running, and its ability to keep up a communication with all of the members of society in this very altered time.

Yeah, yeah. And we're working to scale out our network.

And as I said, it's something where everybody's really needing to pitch in.

And luckily, one of the big good pieces of news is that the Internet, you know, it was built for this.

It was really designed at the core, you know, little history, it was essentially designed to withstand up to a nuclear attack, so that we could essentially operate, you know, different parts of the Internet independently of each other if it wasn't overly centralized.

And so that's one of the reasons why it's very interesting to watch the current events and see how the innate architecture of the Internet and also the way that Cloudflare works is something that I think is really supportive of the kinds of very vital activities that we're seeing that need to be intermediated by this.

Yeah, that's great. Suzanne, let's show the video. And then we can talk about it for a little bit.

Yeah.

That's, it's everything.

Every time I watch that video, I just, I don't know, it's just something that everything is, you know, all different now than it used to be.

I was gonna say it gets me every time. And, you know, it sort of reminds me again, you know, sort of before we move on to performance features, I just want to hang on this just for a sec, right?

Again, the way that the world works has transformed dramatically and businesses are now moving online, content, events, conferences, employees are now working online more than ever before.

Everything we once experienced is now virtual, right?

It's not just companies that are experiencing this.

We as people that work at companies are experiencing this, right? At the time, when sort of COVID was announced, the president announced a state of emergency, there was already a 20% increase in Internet traffic shortly after.

So I want to just bring this home for the viewers, right? As someone who is hearing this, our viewers, what does this mean for me?

How do we make sense of these changes where Cloudflare fits into the picture, which you've put so eloquently?

And how does it enable me to adapt to changing times?

Again, just hitting the personas that matter, right?

As a small business owner, as a developer, as an activist that needs a platform to amplify a message to get the right message out to the world.

What does this mean for the customer? Yes, I think one of the most important takeaways is that you need to have a network that's going to work for you.

That's going to do everything that it can to bring the kinds of performance that's really necessary to enable the experiences that we are now needing to mediate over this particular technology.

Before, the ability to go to a meeting from a remote location was more of a nice to have, and now it's a must have.

Before, the ability to interact with your colleagues and get things done didn't necessarily require anything more but booking a meeting space in a conference room.

And now all of our conference rooms are empty and we have to make them in these kinds of spaces.

And then the example of having a business where before you had a storefront, now you're going to have to have a digital version of that.

And what it's causing is a greater acceleration towards that digital transformation movement, which we already saw was a really big driver of the movement to cloud-based technologies and just computing in general.

People have been gradually moving away from that analog world for many, many years.

It's been a long process and ends up happening that you have something like this, and it's very important that the experiences that we provide have as little latency as possible.

So having a network that works for you means having a network that is very broad and wide and is able to route around the problems that we're able to.

And we're able to introduce the kinds of optimizations that really make the user's experience a lot nicer, a lot more pleasant.

They're more likely to continue to read your information and to interact with your platform when they feel like the interface is responsive.

And that really relates back to a very fundamental user experience science, which essentially states that basically the ability of a user to put up with an interface is related to how much time it takes for that interface to react to what it is that they're trying to get done.

And we need to make those interactions more and more efficient also because now that more and more traffic is coming in, you're needing to handle more of it.

So in addition to wanting to have a really great experience with the front end for your web application, it's important that you do everything that you can to minimize the bandwidth and offload as much of the CPU onto Cloudflare and the rest of your cloud infrastructure as possible.

That's fantastic. So let's now watch a short intro video as we sort of transition into performance features.

We've looked at the macro of what the underlying forces are right now.

As a customer, I'm interested in knowing what I can do.

How can I put my hands on my dashboard and make changes? Suzanne, you and I put this video together with the help of our creative marketing team in our attempt to try to walk customers through one-click enablements, really low-hanging fruit for them to transform the way that their site performs in really simple ways.

Let's take a look at this video and then dig deeper into it. This is called caching.

Then, when someone visits your site, we serve the resource from the nearest data center so it loads as quickly as possible.

When you've signed up for Cloudflare, we automatically enabled caching for your site, so you should already be experiencing better performance.

Click on DNS in your dashboard to make sure there's an orange cloud next to the DNS records for web traffic.

Optimize delivery of your JavaScript, CSS, HTML, and images in just a few clicks using the Cloudflare Speed tab.

Let's explore these features. First is to minify your website's source code for data that doesn't need to be there, like extra spaces and developer comments.

With these bits removed, there are fewer to push around.

We recommend you check all three boxes for JavaScript, CSS, and HTML. Make your site load faster using Cloudflare's steady-of-the-art compression algorithm, Brotli.

Compression takes data and makes it smaller without losing any information.

When you enable Brotli, Cloudflare compresses your site wherever it can.

Polish is a one-click performance booster for pro and business domains. It lets you compress your images with two quality options, lossless and lossy, that will improve your site's load time.

Our lossless option removes some extra information about an image, also known as metadata, while keeping the essential data, enabling smaller file sizes.

Lossy image compression reduces the file size of an image with an almost imperceptible loss of detail.

This can lead to major bandwidth savings and load time improvements.

And for sites where images aren't a main focus, your visitors likely won't notice anything except for your site's increased performance.

Finally, with WebP, we can automatically deliver this new state-of-the-art, highly efficient image file format to any capable browser and reduce the transmission time to the minimum possible.

We recommend turning it on.

It's an easy performance win. By leveraging the many features and optimizations offered by Cloudflare, you can make a big difference to your site's performance.

This means you're ensuring higher conversions, improved engagement, and reduced costs.

Head to your Cloudflare dashboard today to enable all these features and more.

Awesome.

If you're seeing this video for the first time, you can head on over to our Welcome Center, which is under the Resources tab on our Cloudflare.com home site, or our Knowledge Base article where you can find more videos like this.

That was a lot of information, Suzanne.

I also want to remind our audience that we're taking questions as well as we kind of talk through this, so please email us at livestudio at Cloudflare.tv, and we'll do our best to get to them during this segment.

Suzanne, help us break down what the top recommendations are to boost performance under the Cache and Speed tab for users.

I think we're going to talk through this with a what is it.

Help us understand what's an analogy that can help some of us grapple and grasp the concept.

How does it make life easier for developers working on the site?

How does it make life easier for the visitor? And what's the business value in any of these features?

We're going to walk through a few of these features, and I'm really just going to hand the wheel to you for you to drive.

We're going to start with optimizing Cache. Awesome. I think it's always good to back up and talk a little bit about the Cloudflare network itself to help develop a good conceptual model of how this is all working.

Again, this is one of the more interesting parts of Cloudflare's architecture.

It's just that you can think of Cloudflare as a massive network.

At this point, your video is out of date, Alvin.

You said 180. Now we're over 200 locations around the world, and these locations we've picked out to sit close to your website's visitors so that you know that when you're using Cloudflare, our servers are going to be within just a matter of milliseconds of the eyeballs, essentially, of the people who are trying to look at the things that you want to show them.

When you're using Cloudflare, whenever someone is clicking a link to load your site, our fast and reliable DNS, which you might recall is the domain name system, is guiding the visitors to the closest Cloudflare location.

Our servers are waiting there to help accelerate all these requests coming in, and they're storing copies of your site's images, the scripts, the styles.

Just to know that when computers are storing copies of files for a specified period of time that they can be considered valid, that's what's known as caching.

Caching really helps make a website faster because having copies of these files close to the visitors makes it so that it doesn't take as long to fulfill another request.

If another visitor comes along, they'll be able to take advantage of that.

Let's talk a little bit about when you signed up for Cloudflare.

Even on the free plan, we offer this for everybody. We're giving you all the necessary settings to speed up your site using this global CDN caching.

You don't really have to do anything at all to enable this. There's not much to walk through except to talk about you need to put what we call an orange cloud on your website's records.

That orange cloud is how you know that you're good to go.

The caching that happens on any CDN, there's a few different fundamental concepts that I think are worth talking about.

First off, browser TTL.

The TTL is the time to live because when you're making a copy of something, you want to know how long that that copy can be considered a legitimate copy and how long you can keep serving it before it's considered invalid.

The next time if a visitor requests that file and it's beyond the expiration date, then the browser or in this case, the CDN, our caching system is going to know to re -fetch that information from your website.

There are many parts of a website that can be cached.

It could be your company's logo. Believe me, you want that cached. The pictures of the products that you're trying to sell.

The information that you're trying to display around events around the world.

That's really important to get close to the user.

The next part that I think is very important is going to be the style sheets.

Those set the look and the feel of the website. Finally, another really important element is the scripts because that defines the behavior of the page when people are interacting with it.

One of the reasons why it's so important to have all these elements cached is because that's exactly what helps make your website feel more interactive when somebody comes and loads it up.

Knowing that, most of the time these files, they don't change that often. If that's the case for you, what I recommend for people to do and how Cloudflare can make this easy for you as a developer is that you can increase the time for these to expire to a really high value.

Maybe about the time that it would take for you to update your site or even a little longer that, you can pretty much max it out.

We're using the setting to specify how long that we store these files for you in our caches.

If your website tells us to cache something for even longer than our default, we're going to basically go and take the longer of those two values to decide on how long that will serve that for you.

It's to your advantage to tune these up as high as it makes sense for your site.

The higher that you can get what is known as cache hit ratio, then the more that you're going to not end up in a situation where you're having to retrieve these files back from your origin.

That's important for makers of websites because you're going to have a smaller bandwidth cost if you're not retrieving these files from your origin all the time.

Let Cloudflare serve that for you.

It's also going to reduce the CPU load on your website, which means that your origin can spend more time doing things like calculating carts or displaying listings of products than having to worry about images and style sheets and serving all that.

That's a very important element to understand about why it can be helpful to have these settings optimized and really bring a lot of those performance benefits of the latency reduction to the end user.

One other really interesting pro tip that I can give out for this for tuning is if you go to the cache tab, there's a cache level setting.

We have this ability to essentially look at every asset by its key, which is its URL or the uniform resource locator.

If you use a little query string at the end of that, which is essentially if you've ever looked at one of those real closely and there's a question mark and a bunch of little kind of parameters, name equals value this and name equals value that, those things sometimes they might have an effect on the content that is going to be served.

However, there might be situations where they actually don't really vary at all.

If that's the case for your website, which it often is, you can choose to ignore the query string.

What that means is that if you have a lot of social sharing, a lot of those requests will come in with their own separate query string indicating that this content was shared via Twitter or via Facebook.

If it doesn't really matter which of those sources in terms of how the content looks, then you can just ignore that and get a higher cache hit ratio for your website.

That's going to basically help improve that cache hit ratio. I think finally, the last important thing to understand about caching and how Cloudflare can help is that it does come to a point when you need to update the files.

You change a product image, maybe you added some detail and you improved your marketing, you're going to change your theme, then that's when you need to have an ability to what they call purge.

All that means is erase it from Cloudflare.

One really neat feature that we have is when you select purge, you can purge everything or you can purge individual files.

Maybe you just changed your logo, you can just purge your logo.

Once you make that command on our dashboard, or even through our API, you're able to get that change propagated throughout all of our data centers around the world in less than 30 seconds.

That's really helpful because as I mentioned, what's one of the hallmarks of today?

It's change and transformation and we need to be able to keep up with those as quickly as our customers are making them.

Now, Suzanne, is there a downside to purging my cache?

There is a downside to purging the cache, which is why I recommend that you do it when you're ready to take a little bit more load.

If you're going to purge your cache and choose to purge everything, that means that you're indicating that for all the subsequent requests that Cloudflare gets, we're going to reach back to your origin for that particular file or all the files that the people are requesting.

You really want to do that when you're done with your updates and use it sparingly.

Otherwise, try to use the individual file purge. We also have a couple options for our enterprise plan, like purging by host name or purging by tag.

That's really appropriate for the large e-commerce stores that need that kind of functionality.

Got it. So that's one of the main important benefits of using Cloudflare is that we're a CDN and we use caching to get files closer to the users.

But our performance optimizations don't stop there because whenever there's an opportunity to make a site faster, we're going to take it.

We can automatically minify all the HTML, CSS, or JavaScript files that are served to your visitors.

We can also do things like compress files with state-of-the-art Brotli compression and we can optimize image delivery with technologies we've invented like Polish and take advantage of great new standards like WebP.

There's even more, so let's do a deep dive into each of these features as far as we can make it here, Alvin, with the time that we've got.

And I'll try to leave some time to answer questions. And I'm also going to be answering some of these questions in line we've started receiving for this presentation.

Fantastic. I think we have one actually about WebP, so when you get to Polish, we can stop on that one.

That's great. Great. Thank you. So one of the really easy quick wins that you can make is to essentially use autominify.

And I'm so sorry.

I just realized I have the wrong image in here. So my apologies. This is the image for Polish.

But what autominify does is that it can strip out all these unimportant characters that are just not really necessary for the final rendering of the website.

And these can include things like extra spaces that are in comments or developer code that's not necessary for the actual rendering or the functionality of the site.

And these comments and these spaces are actually really important for readability for developers.

And I want people to leave those in.

They shouldn't necessarily strip that out. It makes it hard to have a website if you don't have indenting and comments.

But, you know, it's helpful for us, for developers and for website owners to be able to get that off of the actual finished product for them so that when that request is made for that sort of information that we can benefit for from autominify, including HTML and CSS and JavaScript, then what we can do is we can just go ahead and they can just post their files and then went across.

And then whatever request is made will just dynamically strip that information out and that they don't you don't have to worry about that anymore.

I know some developers do this do this automatically but you know on during their continuous integration pipeline they might perform some auto minification and and that's that's good.

And I encourage that just this is great for catching those last little bits that maybe you didn't catch so every little bit counts and a really good analogy I think for how does how does it automate if I relate to the real world is you know when you go to CVS, and you get a receipt.

And when it when when you, you know, but they printed out it takes about 10 seconds for the full thing to print out.

And it's about this long maybe longer. And you might have seen their, their, their tick tock videos about this people making fun of it, because when you look at it, it's mostly advertisements, and a lot of blank space, and there's really very little information there that's important about the transaction.

But if you were to cut off all of those little bits and snippet you in kind of paste together the parts that are important, you would end up with, with only the information that that matters to you.

And I think that's a really good analogy for what our auto minification does for people it just takes something that otherwise would have been about two feet long and makes it about about four inches long.

And that basically is spelling increased efficiency, every little bit that you strip off matters and, you know, again, it might not seem like much what's what's one little bit going to do for me Suzanne, but you add all these things up and eventually you you know you're talking about real, real, real dollars and cents here and that can that can mean a lot.

So, to segue into the next feature I'd like to talk about this is this is broadly compression.

And it's a it's a real fancy word for a pretty, pretty simple idea ultimately but there's there's a couple little bits that I'd like to go into some detail of and make a make an analogy for you to help our, our viewers understand.

So, you know, after cutting out all these bits and caching files closer.

What's, what's left to, you know, optimize and what Kloffler has done is we've implemented a state of the art data compression algorithm.

It's called broadly.

And this helps me or your content loading, even faster. It means that we're starting with a certain amount of data, and we're shrinking it smaller, while still retaining the same amount of information.

And I know that that kind of might be a little bit to wrap your heads around, but let me let me give you an idea of what that might be like.

And I love that the animation that we came up with in in the video often I think that was really nice to our viewers review that but essentially you can imagine what if you had a sentence, and I'll just name a really ridiculous example of it but you all know that rhyme about woodchucks How much wood could a woodchuck chuck if a woodchuck could chuck wood.

Well, there's a lot of repeating of the word would and chuck in the sentence.

And wouldn't it be neat if we could find a way to represent some of these some of these words with maybe just a kind of an index essentially and essentially have a dictionary, and be able to refer to the dictionary so you can stand in what the word is with with essentially we can think of a kind of like a variable or an index.

And when it comes time to recreate the sentence you can refer to the index and not have to have all these words printed out over and over again when it's really quite unnecessary.

So, think of it a lot of like putting an appendix at the end of a document and having all these duplicated words removed really, really causes it to shrink down a lot.

But if you think about it, you're not losing any information because we can reconstruct all that.

And that's really I think the important part that I want to get across about compression, it's like saying the same thing with fewer words.

And with this feature on and it's as simple as this click of button, your site's going to take even less time to reach your viewers.

So, if your views are using older browsers that don't support Brotli, have no fear, we still support gzip, which is still fine and also helps.

And that's going to be used for all the times when the browsers don't indicate that they can support Brotli compression.

And it's that simple.

That's fantastic. It truly is. So, I think we might have had a few questions coming in about Polish and WebP.

So, if you want to interrupt me, I don't mind, Alvin, but I sure will.

Yeah. Yeah, totally. Polish is a feature that's available for customers on our pro plan.

And what it allows is for you to deliver faster images.

And what exactly do I mean by that? What is image compression and how is that useful for people?

Well, you know, when you're making a website, it can be difficult to work on all of the different images that are part of it.

There's catalog images.

There's photographs. And there are many occasions when you get a large volume of them, you're going to have to implement some kind of process for making sure that they're small.

On the other hand, you still might want to retain originals to be able to have different versions.

And this is becoming more important as responsive design is becoming more and more prevalent.

So, one thing that Cloudflare can do that's pretty automatic for developers is that we can use this image compression technologies that are out there to automatically, on the fly, convert your image using less information while still retaining enough of its visual acuity to really not be anything that's noticeable by the end users.

And we also have some other facilities that don't impact the actual compression of the image, but just remove metadata.

So, let's go through that one by one.

First, with lossless, this image compression, all this is doing is it's removing extra information about the image.

But it's, you know, leaving the data that defines the image itself alone.

And so, by stripping away this extra information, it's contributing to that effect of every little bit that we can strip off is helpful in this case.

And it's a lot like file minification in a way.

You think about it, it's extra. Maybe it's the photography or some particular little bits of dates or the creator, the editor.

It's information that might be valuable on the original for you, but as far as the end user is concerned, it's nothing that's related to the actual rendering of the image.

So, in the effort of trying to get every bit of bang for your buck, we're taking that off.

And continuing in that tradition, more bang for your buck, the lossy option, which is displayed here, actually cuts away some of the information, but in a way that doesn't leave it such that the image quality is perceptibly different.

So, your visitors don't really know that you're polishing your website's images, even when you're using lossy compression.

And suddenly, every image-laden page is faster. That's a real win.

It's a set-it-and-forget-it kind of setting that's extremely helpful. And this is available for our ProPlan users.

Then, finally, you'll notice a little checkbox called WebP.

And this is a great state-of-the-art image format. It's a very efficient file format that really is good for modern browsers.

And this helps to also reduce the transmission time to the minimum possible and improves the rendering time on the browser for these image types that support it.

So, you know, one thing I want to note about image compression is just that it's a little different than normal file compression.

People can tolerate a little bit of granularity or pixelation, if you will, while still being able to recognize the subject of the image.

So, you know, we can get creative. We can cut out even more bits to leave the user with the fastest downloading experience.

And that means they're not going to go away and visit another site while they're waiting for images to load.

And that means for you, you're going to have people that are going to be engaging more and they're going to be clicking more.

And I think that's why it's important for our users and why we wanted to make it really easy for them.

Yeah.

Suzanne, I have a question for you. Then we have a question from one of our viewers really quick.

When I'm enabling, you know, lossy versus lossless and even thinking about using Polish, is it right for me to look at what kind of content I have in my site to your point?

Do I have mainly images? Do I have mainly text? Am I at an advantage if I turn it on anyway?

Do I look at mixed content? What are your thoughts about that?

You know, it doesn't hurt to have it on. It's one of those things where, you know, even if you have a site that was really a lot of textual content, it may be the page that you have that there's a popular page that you have that does have an image on it.

And you want to do everything that you can support lowering speed at any time, especially when it doesn't have any kind of negative impact.

So, you know, why not try it out and see. It might end up getting you some more clicks on those few pages that you didn't think were actually going to be able to get more traffic than they are.

Right. That's great. Okay, so here's a question from Henry Helvetica.

Are you converting all raster images to WebP? I'm imagining PNGs or JPEGs only.

Yeah. That's his first question. Yeah, that's a great question, Henry.

We're working with, I believe, PNGs and JPEGs only. And so if you want to see if an image that's been served over Cloudflare has been polished, one thing that I really recommend for all you developers out there is go check out Cloudflare's response headers.

Go into your developer panel, look at the network tab, and check out the response headers.

Cloudflare has some response headers that start off with the letter CF, and then we have a few that are actually related to the operation of polish in our image optimization.

And if you dig in a little, it'll actually give you an indication of what we actually did in this request, how much it was optimized, and if polish happened.

And again, for any of these image file formats that we're polishing that a browser says that it can take as a WebP, then we're doing the WebP conversion for it.

Gotcha. All right, Suzanne. We will get back to Henry Helvetica via email, because we still have just a few items to cover.

So let's move on to Mirage, if you're done with polish. Awesome.

So the Mirage system is very, very interesting, because it's something that's applicable for those of us who are trying to publish websites and web applications that might be picked up in network environments that are really poor.

And especially for those who are using any kind of mobile devices, it's so important to try to deliver the best experience.

One of the bottlenecks has been trying to get high fidelity images to fill in.

And one of the things that Mirage does is it helps essentially to pipeline, provide essentially a placeholder that's low resolution and pipeline the images such that they fill in once they've actually downloaded to the handset.

And so that really improves the visual fidelity of the site, especially for those kinds of users.

And I think that's important for those who are trying to make sure that people in areas that might not have the best cell coverage, or people who might not have access to laptop computers, that we consider the mobile experience.

Gotcha.

Perfect. Now we have Rocket Loader, I believe. Rocket Loader seems to be something that a lot of people don't understand.

I think it's been something that you and I have discussed several times, but I've never really explored too deeply into this one.

So I'm very interested in hearing a little bit more about Rocket Loader.

Yeah, Rocket Loader is a really great technology, because, you know, we were talking a little bit earlier about how it's very important for websites to be not only to just visually show up, but also to be something that you can interact with as soon as possible.

And one of the challenges, you know, that we've seen for web publishing is making sure that you are loading your JavaScript in such a way that it's not blocking.

So what that really means is that we want to be able to make sure that we can get the JavaScript loaded up and not block on anything else.

And then once it's loaded up, it becomes interactive a bit faster. And this is, again, another of the building blocks for making a very performance site.

You want to pay attention to all the little pieces that you can.

Every little bit of performance that you can implement is going to be a little bit more to shave off.

So once you've implemented Rocket Loader, you're going to essentially improve the time to interactive of your websites and make sure that the user is going to be able to immediately start interacting with them and not have to wait a long time for third party JavaScripts to load.

Gotcha, gotcha. Now we have improving HTTPS performance via TLS 1.3, 0RTT.

That is a mouthful. Can you help break down what each thing sort of means?

Like, very briefly, I know if we talk about TLS, we can go pretty deep into it.

Same with 0RTT. How would you break this down?

How do you improve HTTPS performance via TLS 1.3 using 0RTT? I think this is a really exciting part about being at Cloudflare is that we have this philosophy of implementing performance without having an impact on the security and vice versa.

We really think that it's important to be able to deliver both in the same package.

And an exciting thing that's come out in the last year is the TLS 1.3 implementation, which allows for websites to create secure connections with less latency involved.

It essentially makes it more efficient and it's also very secure.

Then on top of that, there's this really interesting extension called 0RTT. And I think it really lends itself to rolling off the tip of the tongue.

And the best part about it is that it's just a single click.

What you're doing is you're essentially allowing the visitors who've already established secure connections to your website to be able to make another connection without having to go through the entire rigmarole of setting up another TLS handshake.

So it's essentially a way of establishing a secure connection with zero round trip time.

And that's what the 0RTT means.

It means that we're not imposing an additional burden. Remember, every single time that you're going back and forth on the Internet, it takes time and it's limited by the speed of light and the networks.

So this is one of those things that it adds up and you'll end up having a very snappy and secure website when you implement this particular chat box.

That's fantastic. We have enhanced HTTP to prioritization and this one is unique as a, I believe it's pre-enabled on a pro plan and above, all paid plans.

Tell us more about that one. I'd love to. So HTTP2 is a really exciting technology that we could probably do a whole television show about.

One of the things that's been really interesting about working at Clawflare is being in a position where we're able to be at the forefront of releasing these technologies.

It's a little bit of a chicken and the egg scenario.

You can have a server that supports it and browsers that don't and vice versa.

So how do you really get started with that? And I think one really great way is to put a proxy like Clawflare in front of your website that implements HTTP2.

This is essentially a big time change over the original HTTP1 and 1.1. They hadn't been altered in a long time.

When HTTP2 came out, there is an opportunity for browsers to essentially be much smarter about requesting resources and the server and the browser can essentially pass all these requests through a single TCP connection.

And they can also prioritize the requests. It could be very helpful for making web applications that really feel extremely low latency if you were able to essentially give hints about what kinds of resources should be loaded for and essentially kind of push these elements through.

So with all these great technologies, sometimes browsers take a little bit of time to work out all the kinks.

And with this particular essentially easy to use feature because it's just on, we're taking care of the work of helping these browsers develop better priorities for requesting the resources that are needed to really deliver fast web performances.

Got it, got it.

Now we have a feature called Always Online that I think is unique to Clawflare, right?

I think this has a lot to do with caching as well, right? Things that are already, well, I'll let you talk about it.

So we have Always Online and once we've now, we've almost walked through most of these speed features, we want to run a speed test.

So we want to talk about that next. I think that the speed test is one of my favorite things to come lately because what it is that you're able to do is essentially evaluate for yourself how fast is my site with Clawflare and how fast would it have been if I weren't using Clawflare once you're on us.

And this is a feature that also helps make recommendations. If you haven't turned on Polish, if you haven't turned on Mirage or any of these other things that we offer a chat box or a toggle to turn on, it'll invite you to do so and give you an idea of the kinds of speed improvements that your users could see if it were implemented.

So that's been very helpful for getting more visibility and us to be able to really enable our customers to get those great experiences out to their customers.

And then on top of that, the Always Online feature, what that does is helps preserve all of these great pages that you've pushed out there in case of a catastrophe.

What if your origin web server goes completely down? Clawflare can actually cache full of web pages that we've actually gone out and crawled of your website.

So we're able to preserve your top pages in a cache and your visitors will see this particular stored version and a banner inviting them to retry your origin website when it does come back up.

And when as a customer, well, as a user, if I've done all these things, I can sort of assume that, hey, I'm in a much better position than I was before all these enablements.

Would you recommend running the speed test? If so, what are some advantages to that insight?

And what are some disclaimers that you might say about it?

Yes, I would absolutely recommend trying the speed test out. It's worth it to take some of the recommendations I've spoken about today and then go ahead and take the speed test and then see if there's anything else that you didn't try out to give you an idea of what kinds of performance improvements it might bring.

And in addition to that, I would say that there are opportunities to do further tuning and optimization.

I would look into our page rule system, which allows you to finally tune a lot of these features against the particular URL.

So if there's parts of your website that you want to increase the caching on or parts where you want to try out a polish and see exactly how these might work out for you and test it, then that's something that you can also try out and is going to be helpful for you to understand what the benefits are before actually implementing for your users.

That's fantastic. Suzanne, thank you so much. Is there anything else that you'd like to tell our viewers about performance before we serve in?

Oh, that's such a great question.

And I probably should have put more thought into it. But it's just, again, it's such a great honor to be able to talk to you all today and to have this wonderful platform where we can share the kinds of insights and experiences that we've garnered.

And I hope that some of this has been valuable for you here today and for those of you who are watching and watching in the future.

And I hope that everyone learned a little something. Thank you, Suzanne. Well, Suzanne, thank you so much for your time to our viewers.

Again, we hope you found web performance for everyone to be helpful, informative.

Performance is for everyone.

And it can literally be as easy as one click to make site performance better for you.

So head on over to the Cloudflare dashboard and explore and enable those today.

Don't go anywhere. Up next is interview with Mask A Hero NY with Rita Kosloff.

Stay tuned. Thank you, everybody. Thank you. Thank you.

Thank you.