https://www.debugbear.com/assets/js/9368a70d.bbb191c5.js

1"use strict";(self.webpackChunkdebugbear_docusauruss=self.webpackChunkdebugbear_docusauruss||[]).push([[2469],{17830:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>h,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>o,toc:()=>d});var r=n(74848),t=n(28453),a=n(80687);const i={title:"Caching on a Content Delivery Network (CDN)",date:new Date("2024-12-11T00:00:00.000Z"),description:"Learn about the basics of CDN caching, how it differs from browser caching, and how it can improve your website's performance.",image:"https://www.debugbear.com/dimg/e09ff653df2d0682da3d91e011e7ed5d.png",authors:"umarhansa"},c=void 0,o={permalink:"/blog/cdn-cache",source:"@site/blog/cdn-cache.md",title:"Caching on a Content Delivery Network (CDN)",description:"Learn about the basics of CDN caching, how it differs from browser caching, and how it can improve your website's performance.",date:"2024-12-11T00:00:00.000Z",tags:[],readingTime:9.245,hasTruncateMarker:!0,authors:[{name:"Umar Hansa",title:"Web Performance Advocate at DebugBear",url:"https://x.com/umaar",imageURL:"https://www.debugbear.com/dimg/4c1ee9bf3cee9ad027dc68961a65ea9c.jpg",key:"umarhansa"}],frontMatter:{title:"Caching on a Content Delivery Network (CDN)",date:"2024-12-11T00:00:00.000Z",description:"Learn about the basics of CDN caching, how it differs from browser caching, and how it can improve your website's performance.",image:"https://www.debugbear.com/dimg/e09ff653df2d0682da3d91e011e7ed5d.png",authors:"umarhansa"},unlisted:!1,lastUpdatedAt:1769532441e3,prevItem:{title:"2024 In Review: What\u2019s New In Web Performance?",permalink:"/blog/2024-in-web-performance"},nextItem:{title:"Fix Your LCP Score By Reducing Resource Load Delay",permalink:"/blog/lcp-resource-load-delay"}},h={authorsImageUrls:[void 0]},d=[{value:"What is CDN caching?",id:"what-is-cdn-caching",level:2},{value:"Benefits of CDN caching and how it compares to browser caching",id:"benefits-of-cdn-caching-and-how-it-compares-to-browser-caching",level:2},{value:"Speed improvements with CDN caching",id:"speed-improvements-with-cdn-caching",level:2},{value:"CDN and Core Web Vitals",id:"cdn-and-core-web-vitals",level:2},{value:"CDN edge nodes",id:"cdn-edge-nodes",level:2},{value:"When does caching on the CDN happen?",id:"when-does-caching-on-the-cdn-happen",level:2},{value:"Cache reserve",id:"cache-reserve",level:2},{value:"CDN cache headers",id:"cdn-cache-headers",level:2},{value:"CDN cache rules",id:"cdn-cache-rules",level:2},{value:"Purging a CDN cache",id:"purging-a-cdn-cache",level:2},{value:"Enable caching on Cloudflare",id:"enable-caching-on-cloudflare",level:2},{value:"How to check if CDN caching is working",id:"how-to-check-if-cdn-caching-is-working",level:2},{value:"CDN caching information in DebugBear",id:"cdn-caching-information-in-debugbear",level:2}];function l(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",mermaid:"mermaid",p:"p",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"/blog/cdn",children:"Content Delivery Networks (CDNs)"})," are a key part of modern web infrastructure, helping to speed up the delivery of content to users around the world."]}),"\n",(0,r.jsx)(s.p,{children:"This post looks at the basics of caching on a CDN, how it differs from browser caching, and how it can improve your website's performance."}),"\n",(0,r.jsx)(s.h2,{id:"what-is-cdn-caching",children:"What is CDN caching?"}),"\n",(0,r.jsx)(s.p,{children:"CDN caching is the process of storing copies of your website's content on servers located around the world. When a user requests a file from your website, the CDN will serve the file from the server that is closest to the user, reducing latency and speeding up the delivery of content."}),"\n",(0,r.jsx)(s.p,{children:"Without a CDN, your website's files are typically served from a single server (though some websites that require high availability may use multiple servers). If the server is congested or located far away from the user, it can take a long time for the file to load."}

1),"\n",(0,r.jsx)(s.h2,{id:"benefits-of-cdn-caching-and-how-it-compares-to-browser-caching",children:"Benefits of CDN caching and how it compares to browser caching"}),"\n",(0,r.jsxs)(s.p,{children:["CDN caching is similar, but not the same as ",(0,r.jsx)(s.a,{href:"/blog/browser-caching",children:"browser caching"}),". It differs in the following ways:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Scope"}),": Browser caching stores files on the user's device, while CDN caching stores files on servers located around the world."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Privacy"}),": Browser caching is private to the user, while CDN caching is shared among all users of the CDN."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Control"}),": With CDN caching, you have more control over how long files are cached and where they are stored."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Speed"}),": Both types of caching can be used together to improve performance. There is one common scenario where CDN caching is faster than browser caching: when a website is hit for the first time by a user: the CDN can serve the file from the CDN cache, while the browser cache would not have the file."]}),"\n"]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["CDN usage can be nuanced! For the average user and for the average website, CDN caching is a great way to speed up your website. However, there are some scenarios where CDN caching can be slower than no CDN at all. ",(0,r.jsx)(s.a,{href:"pathname:///real-user-monitoring",children:"Real User Monitoring"})," is the correct tool to use to understand how your website is performing with a CDN, for real users."]})}),"\n",(0,r.jsx)(s.h2,{id:"speed-improvements-with-cdn-caching",children:"Speed improvements with CDN caching"}),"\n",(0,r.jsxs)(s.p,{children:["Following on from the previous note about ",(0,r.jsx)(s.strong,{children:"speed"}),", it's useful to understand the different types of speed characteristics involved in this topic:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Browser to in-memory browser cache"}),": This doesn't have to involve a CDN at all, and can be instantaneous (depending on the caching strategy)."]}),"\n",(0,r.jsx)(s.p,{children:"The following graphic displays browser developer tools showing the network request + response size, for a given resource. Since the resource is considered fresh and was in the browser cache, the browser did not have to make a network request to the server."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/fd5fe8a6ef5643a2dadd5b3c6c22e757.png",alt:"Browser to in-memory browser cache"})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Browser to origin server"}),": This happens when a CDN is not used. This can be slow, depending on the distance between the user and the server."]}),"\n",(0,r.jsx)(s.p,{children:"The following graphic shows latency between various locations around the world, to a server in London, UK. Note the high variance in latency, this is to be expected as each location varies in distance from the server."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/81949757f7b35bb519ab96af4cbbe5cb.png",alt:"Browser to origin server"})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Browser to CDN, and then to origin server"}),": This is the slowest, as it involves an extra hop to the origin server. This happens when the file is not in the CDN cache, or when the CDN cache is stale."]}),"\n",(0,r.jsx)(s.mermaid,{value:"flowchart LR\n\tB[Browser]\n\tC[CDN]\n\tO[Origin Server]\n\n\tB --\x3e|1. Request| C\n\tC --\x3e|2. Cache Miss| O\n\tO --\x3e|3. Response| C\n\tC --\x3e|4. Response| B"}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Browser to CDN"}),": If a network request must be made, this is typically the fastest, as the file is served directly from the CDN cache without needing to go to the origin server."]}),"\n",(0,r.jsx)(s.mermaid,{value:"flowchart LR\n\tB[Browser]\n\tC[CDN]\n\n\tB --\x3e|1. Request| C\n\tC --\x3e|2. Response| B"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"cdn-and-core-web-vitals",children:"CDN and Core Web Vitals"}

1),"\n",(0,r.jsxs)(s.p,{children:["CDN caching can help improve your website's ",(0,r.jsx)(s.a,{href:"/docs/metrics/core-web-vitals",children:"Core Web Vitals"})," by reducing the time it takes to load content."]}),"\n",(0,r.jsxs)(s.p,{children:["When a user requests a file from your website, the CDN serves the file from the server that is closest to the user, reducing latency and speeding up the delivery of content. This first improves ",(0,r.jsx)(s.a,{href:"/docs/metrics/time-to-first-byte",children:"TTFB (Time to First Byte)"}),", which typically has a positive impact on ",(0,r.jsx)(s.a,{href:"/docs/metrics/largest-contentful-paint",children:"Largest Contentful Paint (LCP)"}),"."]}),"\n",(0,r.jsx)(s.h2,{id:"cdn-edge-nodes",children:"CDN edge nodes"}),"\n",(0,r.jsx)(s.p,{children:"As previously mentioned, CDNs store copies of your website's content on servers located around the world. These servers are known as edge nodes, and they are strategically placed in locations that are close to users to reduce latency."}),"\n",(0,r.jsx)(s.p,{children:"Without a CDN, a user in Australia might have to wait for a file to be served from a server in the US. With a CDN, the file can be served from a server in Australia, reducing the time it takes to load the content."}),"\n",(0,r.jsx)(s.p,{children:"Once a CDN is able to access your website, the CDN deals with the replication of files across these edge nodes themselves."}),"\n",(0,r.jsx)(s.p,{children:"The following graphic shows the same single resource being served from a variety of CDN edge nodes around the world. Even though there's a large geographical distance between Japan and Canada, the same file takes around 0.1s to load in both locations."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/af991b5c5bb8e383bc660cd8f0846601.png",alt:"CDN edge nodes"})}),"\n",(0,r.jsx)(s.h2,{id:"when-does-caching-on-the-cdn-happen",children:"When does caching on the CDN happen?"}),"\n",(0,r.jsx)(s.p,{children:"The two primary scenarios for when caching happens on a CDN are:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"When a user requests a file that is not in the cache."}),"\n",(0,r.jsx)(s.li,{children:"When you explicitly tell the CDN to cache a file."}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Most CDN providers specify whether a file was served from the cache or not in the response headers. For example, Cloudflare uses the ",(0,r.jsx)(s.a,{href:"/docs/cf-cache-status",children:(0,r.jsx)(s.code,{children:"CF-Cache-Status"})})," header to indicate whether a file was ",(0,r.jsx)(s.a,{href:"/docs/metrics/cache-hit-rate",children:"served from the cache or not"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/847c36facf703ab49316c95e9e200743.png",alt:"Cloudflare cache status"})}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["Vercel uses the ",(0,r.jsx)(s.code,{children:"x-vercel-cache"})," header to indicate whether a file was served from the cache or not."]})}),"\n",(0,r.jsx)(s.h2,{id:"cache-reserve",children:"Cache reserve"}),"\n",(0,r.jsxs)(s.p,{children:['While "Cache reserve" appears to be a ',(0,r.jsx)(s.a,{href:"https://developers.cloudflare.com/cache/advanced-configuration/cache-reserve",children:"Cloudflare-branded term"}),", it describes the concept well. It's the ability to dump files manually into the CDN cache, even without any users having previously requested them."]}),"\n",(0,r.jsx)(s.p,{children:"Regardless of a user requesting a file or not, you pre-cache the file in the CDN cache, so that it's available immediately when a user requests it."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/ab2c2adfeaadc0b9f3e8f99abda8afcc.webp",alt:"Cloudflare cache reserve"})}),"\n",(0,r.jsxs)("small",{children:["Source of graphic: ",(0,r.jsx)(s.a,{href:"https://developers.cloudflare.com/cache/advanced-configuration/cache-reserve/",children:"https://developers.cloudflare.com/cache/advanced-configuration/cache-reserve/"})," "]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(s.p,{children:"This can be useful for a website that's going live for the first time, or when you're updating a file that you know 

1will be requested frequently."}),"\n",(0,r.jsx)(s.h2,{id:"cdn-cache-headers",children:"CDN cache headers"}),"\n",(0,r.jsxs)(s.p,{children:["A full explanation of ",(0,r.jsxs)(s.a,{href:"/docs/http-cache-control-header",children:[(0,r.jsx)(s.code,{children:"cache-control"})," headers"]})," is out of scope for this post, but here are some common ",(0,r.jsx)(s.code,{children:"cache-control"})," header directives that you might use when working with a CDN:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"cache-control: public"})," - the file can be cached by the CDN. This is useful for ",(0,r.jsx)(s.a,{href:"/blog/serve-static-assets-with-an-efficient-cache-policy",children:"static assets"})," that are the same for all users."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"cache-control: private"})," - the file can be cached by the browser, but not by the CDN. This is useful for a file that may contain sensitive information."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"cache-control: no-store"})," - the file cannot be cached by the browser or the CDN. This is useful for files that should not be stored anywhere."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"cache-control: no-cache"})," - the file can be cached, but must be revalidated before being served. This is useful for files that may change frequently."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"cache-control: max-age=10"})," - the file can be cached for 10 seconds. This is useful for files that are updated frequently. How the file is cached/revalidated after 10 seconds is dependent on the CDN, but also other directives in the ",(0,r.jsx)(s.code,{children:"cache-control"})," header."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"cache-control: s-maxage=10"})," - the file can be cached by the CDN for 10 seconds. ",(0,r.jsx)(s.code,{children:"s-maxage"})," is a directive that is only used by shared caches, like CDNs. ",(0,r.jsx)(s.code,{children:"s-maxage"})," takes precedence over ",(0,r.jsx)(s.code,{children:"max-age"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"cache-control: proxy-revalidate"})," - the file must be revalidated by the CDN before being served. This is useful for files that may change frequently."]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"cdn-cache-rules",children:"CDN cache rules"}),"\n",(0,r.jsxs)(s.p,{children:["When dealing with browser-only caching, you'll primarily be working with the ",(0,r.jsx)(s.code,{children:"cache-control"})," header. However, when you're working with a CDN, you have more control over how files are cached and where they are stored."]}),"\n",(0,r.jsx)(s.p,{children:"CDN providers typically allow you to set cache rules that define how files are cached and for how long. Example use cases include:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Cache Everything"})," - Force caching of all content, including content that wouldn't normally be cached by default"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Cache by Device Type"})," - Store and serve different cached versions based on whether visitors are using mobile, desktop, or tablet devices"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Edge Cache TTL"})," - Specify how long content should be cached at Cloudflare's edge servers before requiring revalidation"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Query String Sort"})," - Normalize cache keys by sorting URL query parameters, ensuring consistent caching regardless of parameter order"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"As an example, Cloudflare offers an interactive UI to set cache rules for your website. You can define rules based on URL patterns, query strings, and other criteria to control how content is cached."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/c6a585691d5bbb335cbf1b6c1f79445b.png",alt:"Cloudflare cache rules"})}),"\n",(0,r.jsx)(s.h2,{id:"purging-a-cdn-cache",children:"Purging a CDN cache"}),"\n",(0,r.jsxs)(s.p,{children:["There are times when you need to quickly remove a file from the CDN cache. This is known as ",(0,r.jsx)(s.a,{href:"https://developers.cloudflare.com/cache/how-to/purge-cache/",children:"purging the cache"}),". You might need to do this when you update a file and want to make sure that users see the latest version."]}),"\n",(0,r.jsx)(s.p,{children:"In addition to purging a single file, most CDNs allow you to purge the entire cache. This is useful in circumstances where buggy content has been cached, or a previous cache strategy has led to files being cached for too long."}),"\n",(0,r.jsx)(s.h2,{id:"enable-caching-on-cloudflare",children:"Enable caching on Cloudflare"}),"\n",(0,r.jsxs)(s.p,{children:["Configuring caching on specific CDNs is out of scope for this post, but you can get started with Cloudflare by following ",(0,r.jsx)(s.a,{href:"https://developers.cloudflare.com/learning-paths/get-started/",children:"their guides"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/1939f6e67a0016ecf157e159e615d48e.png",alt:"Cloudflare cache control"})}),"\n",(0,r.jsxs)(s.p,{children:["Common use cases work out of the box, assuming you've set up your website and ",(0,r.jsx)(s.code,{children:"cache-control"})," headers correctly."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["You can learn more about ",(0,r.jsx)(s.code,{children:"Cache-Control"})," headers in ",(0,r.jsx)(s.a,{href:"https://developers.cloudflare.com/cache/concepts/cache-control/#examples",children:"Cloudflare's documentation"}),"."]})}),"\n",(0,r.jsx)(s.h2,{id:"how-to-check-if-cdn-caching-is-working",children:"How to check if CDN caching is working"}),"\n",(0,r.jsxs)(s.p,{children:["Use our ",(0,r.jsx)(s.a,{href:"pathname:///test/cdn-performance",children:"CDN performance testing tool"})," to check the cache status of CDN responses across different regions."]}),"\n",(0,r.jsx)(s.p,{children:"You'll be able to see how quickly responses are served and whether the CDN edge node is reporting a cache miss or a cache hit."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/f13f6c7ed99dbc33bd3bb5aa85803003.png",alt:"Global CDN performance with cache hit statuses"})}),"\n",(0,r.jsx)(s.h2,{id:"cdn-caching-information-in-debugbear",children:"CDN caching information in DebugBear"}),"\n",(0,r.jsxs)(s.p,{children:["DebugBear lets you run free website speed tests to see how your website performs with CDN caching. The ",(0,r.jsx)(s.a,{href:"/docs/filmstrip",children:"filmstrip and video recording"})," feature offers an intuitive way to see how your website loads, and the ",(0,r.jsx)(s.a,{href:"/docs/waterfall",children:"waterfall chart"})," provides detailed information about how each file is loaded."]}),"\n",(0,r.jsx)(s.p,{children:"When you inspect a resource on a waterfall chart, you can see whether the file was served from a CDN like Cloudflare, and whether it was served from their cache."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{src:"https://www.debugbear.com/dimg/0dc62c5a87aba99771a4442e867ddcd7.png",alt:"DebugBear CDN cache information"})}),"\n",(0,r.jsxs)(s.p,{children:["You can also run tests from ",(0,r.jsx)(s.a,{href:"/docs/server-locations",children:"different locations"})," around the world to see how CDN caching affects load times in different regions."]}),"\n",(0,r.jsxs)(s.p,{children:["You could even perform advanced performance testing of your website by ",(0,r.jsx)(s.a,{href:"/docs/compare",children:"comparing test results"}),", for example: you can capture the ",(0,r.jsx)(s.a,{href:"/docs/page-load-time",children:"page load"})," experience with and without CDN caching."]}),"\n","\n",(0,r.jsx)(a.V,{})]})}function u(e={}){const{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},80687:(e,s,n)=>{n.d(s,{V:()=>i});n(96540);var r=n(13152),t=n(75205),a=n(74848);function i(){return(0,a.jsx)("div",{className:t.A.cta,children:(0,a.jsxs)("div",{className:t.A.ctaContainer,children:[(0,a.jsx)("div",{className:t.A.ctaImage,children:(0,a.jsx)(r.A,{alt:"Illustration of a website speed test report",sources:{light:"https://www.debugbear.com/dimg/366f42cc0187f2f23f5610ca486e6f60.png",dark:"https://www.debugbear.com/dimg/366f42cc0187f2f23f5610ca486e6f60.png"}})}),(0,a.jsxs)("div",{className:t.A.ctaContent,children:[(0,a.jsx)("h2",{children:"Run A Free Page Speed Test"}),(0,a.jsxs)("div",{className:t.A.ctaBenefits,children:[(0,a.jsx)("h3",{children:"Test Your Website:"}),(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:"Automated Recommendations"}),(0,a.jsx)("li",{children:"Detailed Request Waterfall"}),(0,a.jsx)("li",{children:"Web Vitals Assessment"})]})]}),(0,a.jsx)("div",{children:(0,a.jsx)("a",{href:"/test/website-speed",className:t.A.ctaButton,onClick:()=>{plausible&&plausible("DocsCtaClick_freeTest")},children:(0,a.jsx)("span",{children:"Test My Website"})})})]})]})})}},75205:(e,s,n)=>{n.d(s,{A:()=>r});const r={cta:"cta_Vy7l",ctaContainer:"ctaContainer_dzq8",ctaContent:"ctaContent_VgWi",ctaImage:"ctaImage_MZ5b",ctaBenefits:"ctaBenefits_OYw7",ctaButton:"ctaButton_Uos9"}},28453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>c});var r=n(96540);const t={},a=r.createContext(t);function i(e){const s=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(a.Provider,{value:s},e.children)}}}]);