Name: Cloudflare Application Performance Demo
Uploaded: 2025-05-26T10:01:11.788Z
Duration: 27 min 4 s
Description: Cloudflare Application Performance Demo

Transcript for "Cloudflare Application Performance Demo": Cloudflare's connectivity cloud puts you back in control, making your world infinitely more productive Oh, hello. My name is Daria, and I'm a virtual solution engineer here at Glasser. And today, we will be covering on how to boost your website performance. And the agenda for the next, thirty minutes, circa, is about what are the most common application performance challenges and why you should choose, Cloudflare in order to improve your website performance. And, additionally, I will showcase you, a demo through Cloudflare dashboard. And so let's start from the beginning. And, as you probably, know, in the nowadays, environment, with the big diffusion of the, Internet. There are many different ways in order to access content. Right? Access and delivering content as well. And users, can use Internet through their phone, through their computer, their tablet, and they can access through APIs, through our browsers or through an application. So there's really different ways, in order to access, information. And in this type of ecosystem, it's more difficult to have a performance and reliant website and application as well. In fact, some of the downsides that might happen is, the user can face, latency or they have, poor user experience. Right? And in worst case scenario, there might be some downtime on the origin as well. Well, thankfully, Cloudflare is here, to help. In fact, Cloudflare is on a mission to help to build a better Internet. And the way we do it is by relying on our Bluffer Anycast network. Currently, we have over 300, 30 of presence, across the globe, and this number keep increasing. And we do are blessed to deliver, the the content as close as possible to the end users, of course. And all of our different services, run in every single location available. So that's why, we are able to, provide a great performance. And something that we will be covering today specifically is the application, performance portfolio. As you can see, we have a lot of different products. And the ones that I will be covering today are specifically DNS. We'll be talking about caching. We will be, talking a bit about load balancing, and then I will show you some tips on how to boost, your performance, to the next level. And in order to have a more clear understanding on how you can do it, I will be using a dev environment which is, Frame Memories studio. This is not a real company. It's just, an example, of course. And Frame Memories is a photography agency that has different users and photographers distributed across the globe. In fact, they have four different origins, in four different, continents as you can see here from this image. And, in order to have a more clear, vision of this, I will be presenting a demo from an admin point of view. And some of the topics, I'll be touching on, as I mentioned, will be DNS. We will cover in caching, load balancing, and also some other resources in terms of optimizations. So let me just, share my screen, and it will be easier for you, to understand what I'm talking about. So you should be able to see it within a couple minutes seconds, actually. Yes. So welcome to familymemories.net. This is our, website, our, photography agency website. As you can see, it has domain page. It has some images. For instance, it has, some sections where maybe we can contact the agency in order to reach out some of the photographers. And our main domain for the case is, framememories.net. In fact, if you have, your domain, creating and onboarding a call for is really easy because, from the moment that you create your your own account, you can simply click, add a domain and insert your domain here. Follow a couple steps in order to set the DNS. And within couple minutes, you should be able, to have your website fully onboarded on Clover. As example of today, as I mentioned, I will be using framememories.net, which is already, fully onboarded on CloudFront. As you can see, the status is active. And I can also see the, the plan, which is, in my case, is enterprise. So if I try to click on it, I will be redirected to a general overview of what is going on on the website. And at a glance, I can see, the total number of the requests happening in the past, twenty four hours or, for example, how much, data is being served. And, of course, if I want to learn more, I can, filter by past seven days or past, thirty days. And what if I want to have more information regarding, the analytics? I can simply navigate on the left panel and click, for instance, to HTTP traffic, for example. And here, I can see the total number of requests again in the past twenty four hours, or I can simply, focus, let's say, the past thirty minutes and trying to see what was going on on my website. I can also see, from where, those requests are coming from. And, for example, what are the paths that are being hit the most. And here I have few, more aspects of analytics, that I invite you to explore. But, going back to the initial setup, something that I mentioned is you will be required to decide, your DNS in if you want to use cover as your primary DNS or if you want to use it as your secondary DNS and handle your, primary DNS somewhere else. Well, in order to have a clear vision of, what is your DNS setup, you can simply navigate to DNS and records. And here you can see, in my case, the DNS setup is, on full. This means that I'm using, Cloudflare as my primary DNS. At at glance, I have full visibility of all the different records that I have available. Adding a record is really easy. I can simply click, the record and insert, different fields based on my needs. And as you can see, I will be able to read the type of the, record, all of the content. But the most important, I will be able to see the proxy status, which in this case, if it's proxied, and it it's indicated like this with an orange cloud, it means that it's benefiting from Cloudflare network while if it's DNS only, so it's, not proxied through Cloudflare. So it's like, this, gray cloud, it means that it's not benefiting from Cloudflare network speed. And this is really important, of course, because, let's try to compare. So in this case, I have, one record which is, direct. And as you can see as a result, this is DNS only, so it means it's not being, proxied. What if I try to compare it to a proxy one? As you can see, proxy it. So in order to, compare them, I already run a test within the terminal. I I I'm gonna share it with you on my other screen. And, basically, what I did here, I simply run 100 requests, for each of the subdomains, and I calculated how much time, it will take to resolve. So as you can observe, proxy from memories.net, which is being served by Cloudflare, the time that it took in order to resolve, 100 request is around one, second point eight. In comparison to direct, so this is it means it goes directly to the origin. In fact, as you can see, server is nginx. The time we took for the test, we can observe it here, it's around four seconds. So as you can see, it's a really, really big, difference. More than two seconds of difference. And I know that this might feel not a lot, what are two seconds. But in reality, imagine a customer that trying to, visit, a website, like, making maybe a purchase or open a page, with a product, to learn more about it. And it might be really frustrating, in case the page is not loading properly. Right? The the visitor might just lose interest and close the page. And that indicates some of, core user experience. So I know that maybe, two seconds might not feel a lot, but in reality, it's it's a lot of time. So going back to, show dashboards, I would like to add your attention to the fact that in order to make edits, it's really, really easy. In fact, if I decide to edit, I can just toggle or untoggle this section here, and it will change color, it which will indicate you if it's props it and then unprops it. And the propagation happens within just couple minutes, so it's really pretty straightforward. So it's really, really easy to make any changes. In fact, there's a lot of different type of customizations that you will be able to do, within, the Cloud for dashboard. And if you're curious to improve even more, like, specifically the performance of your website or, the performance of your application, you might be interested to caching. In fact, something that, I was mentioning before is Cloudflare is in a mission to, build a better Internet, and we rely a lot on our network. And we do our best to deliver content as closer as possible to our users. And in the caching section, you will be able to see, where, whether the content of your website is being cached, properly. So for instance, it's hit, and, like, all the different status available of the cache as well. And you can also see the different content of the website that, is being cached. But, what does it mean? So if I try to navigate, to, again, my website and try to learn if the content of this page is being cached properly, I can simply inspect and go to network. Let me just reload this aspect. If I try to click here, I can simply see that, the cache status. So in this case, I simply click on a JPEG, and it means this is an image element of the page. I can see that the cache status is, hit, and this means that the image is being cached correctly. But I can also see something else. So as you can observe here, Liz, it it means that, this content is being served from Lisbon. And, personally, I'm based in Lisbon, so it means it's being served from the point of presence, the closer that is to me. Right? So maybe if you're based in another city, which can be Amsterdam, London, or any, other city across the world, you might be able to see, the name of your city here. And this is really important because this is what how, we we increase the the performance, of the website as well. And together with the caching let me just close this in order to go back, to the to the dashboard. Together with the caching, you will be able to see some of the analytics. So you will be able to see what is being served from Kafka or what is being served, from, from the origin. And, imagine, the moment that you onboard, your domain and your website on Cloudflare, you basically kinda have access to all of our data centers. And within the entire caching, you will be able to kinda organize on how your own orgies connect to platform data centers. In fact, in within the tiered caching, we kinda enable you to, have, kinda categorize have to categorize the different type of, data center rights. And as you can see here, by default, I selected smart tier caching, which basically means, that, we will be splitting, in the data centers into different types. When we talk about, upper tier, the the upper tier are the data centers, the only ones that are allowed to search content directly from your, website's origin servers. And then they will pass down to the low tier. And, the low tier data centers are the only ones that are able to deliver content to the end users. So this will also reduce the Egress fee as well. And, of course, if you're interested, you can, add, a mid tier, which is in this case, it's a regional tier. So now you might be wondering, okay. I have, set my DNS. I configure the different, caching, and I can also see if it's, being cached properly. What else can I do in order to, improve the performance of my website? What, if maybe there's a lot of congestion of traffic within the network? What can happen? Well, in order to address that problem, something that we have is, Argo smart traffic, smart routing. And, this specific features basically will analyze the congestion of the traffic within the network, in that moment. And then it would help you to find the best route to or data center for your origin server. So, basically, thanks to smart routing, you will be able to benefit from a more efficient, bandwidth usage, but also you will reduce the, connection errors, which is in this case, as you can see, the reduction was by 27%. And I can also see that the optimization, of requests to the origin was, by 89.4, point four, percent as well. So, this, it's a really big improvement. Right? And you might be wondering, okay. I I can enable this, but what if I, want to have maybe more visibility, on on the, on my origins and maybe kinda do something more in order to address latency? Well, you can, for example, use our load balancing. And, here, the load balancer would be a sort of a middleman between, the end users and your, origins. In fact, here, as you can see, we distribute traffic among, four different pools, which are four different regions, America, Asia, Africa, and Europe. And each of the pool have, one origin available. By default, I, define it just one, but, of course, you can create more than one. And here, you can also select a a fallback pool as well in case, the other pools are failing. In this case, of course, you can also see the health and the status of the pool, which is, thankfully, is healthy in green. If there was something wrong happening, it will be, more likely in red. And you can also see the status of being proxied, so which in this case, it's, proxied. It's orange, and it means that, it's benefiting from, Cloudflare network speed. So, as I mentioned before, here, we are serving, it's a photography agency. Right? So we are serving different, users across, different countries. And what if I want to make sure that my website is resolving correctly in in a location that maybe I'm not sure, if I can reach customers there, where in order to verify the performance of your website, you can simply navigate to speed. And here, you can run a test, that basically will analyze your website. And by default, I inserted, primary.net, but, of course, you can also insert a subdomain. And here, there are different locations from where you can run the test, and you can decide if you want to run it once or, if you maybe want to run it on a daily cadence. And once you have run the test, it's gonna take just couple minutes. You will be able to open it, and you will be see if there any, problem, happening. In this case, my result is, 37, which is low. It means that I maybe, might have some problem with the image resizing. In fact, as you can see, one of the challenging point is larger content painful and total blocking time. So probably there are some really big images that are blocking, resolving of the of the page. And based on these results, if I scroll a bit my page, I will be giving some recommendations, and, they will be, shown with a red triangle as you can see here. In fact, the red triangle is next to probably size, images. And this is this means, again, as I mentioned, that, the images on my website are not being resized correctly. So, going back to the the full list, for example, another aspect as you can see, maybe I can minimize the third party usage, which can be addressed with RAS In case, my, website is dependent on many, many third party tools, Zara's can help with that. And I can also see if that product is being able or enabled. So in this case, for instance, we might we're mentioning Argo earlier. As you can see, it's enabled. But then the rest, it's a new product, so, it's not enabled here. And if I want to see a more rich recommendation list, I can simply navigate to optimization. And here, I will be redirected to a full list of the different products that I can enable, dissolve, on our website. And a glance, as you can see, there are a few that are already enabled and they show in green, and a few that are disabled and they will show this, gray panel. I mentioned earlier, image optimization. So, of course, there's a whole section dedicated on how to improve the image format and how, they can be adopted, properly to the different devices. And together with the image optimization, we can also optimize the content. So for instance, you can optimize, like, different elements or the loading time. Or, for example, in case your website has a lot of, JavaScript loading, you might use, RocketLoader, that it can, improve that aspect as well. So going back, to the traffic, something, I would like to bring your attention as well, is waiting room. So because, so far, I I called, many different products. But, of course, in case, your website is facing, really high peaks of of traffic. And, for example, during the Christmas season, sales season, Black Friday, where it's really common that, people, visit the website in order to do purchases. Right? In order to avoid that the website, go down, some something else that you can do, together with all of what I already explained is enable waiting room, which is a specific, feature that basically will create a virtual, waiting room where the visitor can wait, and they will be able to see also the the time, in order to access to the website or access that specific page. So as you can see again, it's really easy. I toggle and toggle, in order to set up, and it will benefit a lot, on your website. So, going back to the slides, let me just, share back what I was presenting. So, some of the solution that, Cloudflare brings to the table is making sure that all of the content is being served as close as possible to the end users. In fact, when I was showing, the caching, the content of the page, they were cached, and resolving in Lisbon. And, personally, I am based in Lisbon. And, of course, you can create, virtual queues, by using, waiting room, but you also can improve, the congestion of the traffic by analyzing the, the best path available through Argo. And together with that, you can take care of the third party tools, in case you don't have clear visibility on them, improve the user experience, thanks to ZERAS. And you can also optimize your, different type of content. It can be dynamic or the different, elements of the page. So now I would like to invite you. So, start to create your own, Cloudflare account, and feel free to explore our different products and learn more about our portfolio. Today, I've been talking a lot about performance, but, of course, we offer a really rich range of products that can improve your security and different aspects of your business. And, of course, if you have any questions or any curiosities, feel free to reach out, to our experts, and we were more than happy to help you. So, I invite you to, contact, platform.com contact in order to be able to talk to our SEs. So thank you so much for your attention, and, I will be closing this, presentation.