{"id":5447674,"date":"2023-04-11T12:36:54","date_gmt":"2023-04-11T10:36:54","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=caching_hub&#038;p=5447674"},"modified":"2023-05-10T15:38:47","modified_gmt":"2023-05-10T13:38:47","slug":"cache-dynamic-content-wordpress","status":"publish","type":"caching_hub","link":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/","title":{"rendered":"How to Cache Dynamic Content in WordPress"},"content":{"rendered":"<p>Caching is crucial for WordPress. It\u2019s one of the primary ways to make WordPress sites load as fast as possible. Caching is what WP Rocket excels at. However, it\u2019s not that easy to cache highly dynamic WordPress sites, especially those that display personalized pages to every user. But it\u2019s possible to cache dynamic content with the right techniques and technology.<\/p><p>In this article you\u2019ll learn what\u2019s dynamic content, how dynamic content caching works, its various benefits, and the multiple ways you can implement it across different server configurations.<\/p><p>Let\u2019s get started!<\/p><h2 class=\"wp-block-heading\">Static Content vs Dynamic Content<\/h2><p>Static content remains the same on webpages for all users. The website owner can update it, but after that the new content will still be static for all users. Static content includes files such as HTML, CSS, JavaScript, images, and videos.<\/p><p>An example of static content is this very blog post you\u2019re reading. Since static content doesn\u2019t often change (or not at all), caching and delivering it is super easy.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"249\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png\" alt=\"\" class=\"wp-image-5447678\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example-310x96.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example-768x239.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example-190x60.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example-289x90.png 289w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Static content is the same for all users<\/figcaption><\/figure><p>Dynamic content isn\u2019t the same on webpages for all users. It\u2019s customized to every user based on several factors such as location, device, time of day, user profile settings, etc. Dynamic webpages can also change on-the-fly based on user input. This makes websites more interactive, engaging, and personalized for every user.<\/p><p>An example of dynamic content is your social media feed or shopping cart. Since it\u2019s unique for every user, caching and delivering it is not that simple.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"249\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Content-Example.png\" alt=\"Dynamic content is personalized for every user\" class=\"wp-image-5447703\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Content-Example.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Content-Example-310x96.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Content-Example-768x239.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Content-Example-190x60.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Content-Example-289x90.png 289w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Dynamic content is personalized for every user<\/figcaption><\/figure><p>Most modern websites are dynamic to some extent. They use server-side scripts to generate all the assets required for rendering a webpage. The browser compiles these assets to show unique, personalized content to every user.<\/p><h2 class=\"wp-block-heading\">Dynamic Content vs Event-Driven Content&nbsp;<\/h2><p>There\u2019s also content that falls between static and dynamic content. It\u2019s referred to as \u201c<a href=\"https:\/\/www.fastly.com\/blog\/rise-event-driven-content-or-how-cache-more-edge\">Event-Driven Content<\/a>\u201d by some industry professionals.<\/p><p>A few examples of event-driven content include:<\/p><ul class=\"wp-block-list\"><li>Stock prices change rapidly while the markets are open and then remain static after the markets close.<\/li>\n\n<li>Comments on an old news article (it doesn\u2019t attract much attention) versus a new trending story (it attracts tons of comments).<\/li>\n\n<li>If a news website is serving personalized content to users based on their locations, for many users from the same location, the content is static, but it\u2019s dynamic if the users are from unique areas.<\/li><\/ul><p>Since you cannot predict with certainty whether a particular content is event-driven or dynamic, most event-driven content is classified as dynamic content.&nbsp;<\/p><p>To keep things simple, I will treat event-driven content as dynamic content in this article. Once you\u2019ve understood how dynamic content caching works, you can explore this topic further.<\/p><figure class=\"wp-block-table\"><table><tbody><tr><td>\ud83d\udca1 We wrote an in-depth article on <a href=\"https:\/\/wp-rocket.me\/blog\/cache-control-http-headers\/\">Cache-Control HTTP Headers<\/a>. Check it out!<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\">How Does Dynamic Content Caching Work in WordPress?<\/h2><p>Most WordPress sites are simple blogs or small business sites. The content on these sites is usually static.<\/p><p>As WordPress is a CMS that uses PHP scripts and database queries to generate all the site pages dynamically, each incoming request generates a new response from the server. Such responses aren\u2019t necessary for most websites as it leads to a server crunch when the traffic shoots upwards.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"373\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/How-WordPress-Dynamic-Requests-Content-Works.png\" alt=\"WordPress generates unique page outputs dynamically\" class=\"wp-image-5447711\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/How-WordPress-Dynamic-Requests-Content-Works.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/How-WordPress-Dynamic-Requests-Content-Works-310x145.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/How-WordPress-Dynamic-Requests-Content-Works-768x358.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/How-WordPress-Dynamic-Requests-Content-Works-129x60.png 129w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/How-WordPress-Dynamic-Requests-Content-Works-193x90.png 193w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WordPress generates unique page outputs dynamically<\/figcaption><\/figure><p>A cache can store these page outputs the first time they\u2019re generated, so that it can serve subsequent requests from the cache instead of from the server. This speeds up page load significantly.<\/p><p>While this works perfectly for static content, since dynamic content is unique for each user, you cannot cache it using regular caching techniques.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"289\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Event-Driven-Dynamic-Content-Caching.png\" alt=\"Caching difficulty timeline for distinct types of content\" class=\"wp-image-5447719\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Event-Driven-Dynamic-Content-Caching.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Event-Driven-Dynamic-Content-Caching-310x112.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Event-Driven-Dynamic-Content-Caching-768x277.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Event-Driven-Dynamic-Content-Caching-166x60.png 166w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Event-Driven-Dynamic-Content-Caching-249x90.png 249w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Caching difficulty timeline for distinct types of content<\/figcaption><\/figure><p>In the <em>good ol\u2019 days<\/em>, caching dynamic content was next to impossible. Even today, most CDNs only cache static content by default.<\/p><p>But newer technologies have made it possible to serve dynamic content from a cache easily, significantly <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/reduce-ttfb-server-response-times\/\">reducing the TTFB of such pages<\/a> while still keeping the user experience great.<\/p><p><a href=\"https:\/\/wp-rocket.me\/blog\/cdn\/\">CDNs are one of the best ways to cache static content<\/a> and deliver it swiftly to the end-user, but they can also serve dynamic content. One way CDNs \u201ccache\u201d dynamic content is by running scripts in a server closest to the user, rather than in the distant origin server.&nbsp;<\/p><p>Thus, CDNs generate and deliver all the dynamic content from their edge servers. This speeds up the load time of dynamic web pages.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"365\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Website-Acceleration-KeyCDN.png\" alt=\"CDNs use edge servers to speed up dynamic sites (Source: KeyCDN)\" class=\"wp-image-5447725\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Website-Acceleration-KeyCDN.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Website-Acceleration-KeyCDN-310x141.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Website-Acceleration-KeyCDN-768x350.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Website-Acceleration-KeyCDN-132x60.png 132w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Dynamic-Website-Acceleration-KeyCDN-197x90.png 197w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">CDNs use edge servers to speed up dynamic sites (Source: <a href=\"https:\/\/www.keycdn.com\/support\/dynamic-site-acceleration\">KeyCDN<\/a>)<\/figcaption><\/figure><p>CDNs can also use a markup language called Edge Side Includes (ESI) to cache dynamic content. You can insert ESI element tags into the page HTML to show which elements are dynamic. This helps the edge-side processors (a CDN or an origin server) to cache only the static parts of a dynamic webpage.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"218\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Side-Includes-with-Cloudflare-Workers.png\" alt=\"How ESI works with Cloudflare workers (Source: Cloudflare)\" class=\"wp-image-5447731\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Side-Includes-with-Cloudflare-Workers.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Side-Includes-with-Cloudflare-Workers-310x84.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Side-Includes-with-Cloudflare-Workers-768x209.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Side-Includes-with-Cloudflare-Workers-190x52.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Side-Includes-with-Cloudflare-Workers-330x90.png 330w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">How ESI works with Cloudflare workers (Source: <a href=\"https:\/\/blog.cloudflare.com\/edge-side-includes-with-cloudflare-workers\/\">Cloudflare<\/a>)<\/figcaption><\/figure><p>HTTP reverse proxies like Varnish, NGINX, and IIS are another way to cache dynamic content. Some of them like NGINX and IIS also act as a primary web server.<\/p><p>Typically, a reverse proxy is a server (physical or virtual) placed between the client and the web server. Its primary purpose is to filter all the requests before they reach the site.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/HTTP-Reverse-Proxy.png\" alt=\"The reverse proxy works on behalf of the server (Source: Wikimedia)\" class=\"wp-image-5447740\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/HTTP-Reverse-Proxy.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/HTTP-Reverse-Proxy-310x116.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/HTTP-Reverse-Proxy-768x288.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/HTTP-Reverse-Proxy-160x60.png 160w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/HTTP-Reverse-Proxy-240x90.png 240w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">The reverse proxy works on behalf of the server (Source: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Reverse_proxy#\/media\/File:Reverse_proxy_h2g2bob.svg\">Wikimedia<\/a>)<\/figcaption><\/figure><p>Varnish not only handles all inbound requests before they land on the server, it also caches all the server responses. By default, the Varnish cache refreshes every two minutes, but you can set it to whatever time you want. This is how Varnish helps with caching dynamic content.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"169\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Cache-Accelerator-How-it-Works.png\" alt=\"Varnish cache reduces the load on the web server\" class=\"wp-image-5447746\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Cache-Accelerator-How-it-Works.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Cache-Accelerator-How-it-Works-310x65.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Cache-Accelerator-How-it-Works-768x162.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Cache-Accelerator-How-it-Works-190x40.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Cache-Accelerator-How-it-Works-426x90.png 426w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Varnish cache reduces the load on the web server<\/figcaption><\/figure><p>Varnish stores its cache in server memory, making retrieving and delivering responses to clients much faster. For a detailed explanation, read <a href=\"https:\/\/wp-rocket.me\/blog\/varnish-http-cache-server\/\">WP Rocket\u2019s article on HTTP reverse proxies<\/a>. You can also <a href=\"https:\/\/www.youtube.com\/watch?v=fGD14ChpcL4\">watch this educational video<\/a> to get a better understanding of how Varnish works.<\/p><p>Let\u2019s move on to see how you can cache dynamic content through different means.\u00a0<\/p><div id=\"om-olkrjzfbhlynbs54rv6z-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'olkrjzfbhlynbs54rv6z')<\/script><h2 class=\"wp-block-heading\">Caching Dynamic Content on a CDN<\/h2><p>The exact method to cache dynamic content using a CDN varies from one platform to another, but they\u2019re all based on a set of technologies called <a href=\"https:\/\/en.wikipedia.org\/wiki\/Dynamic_site_acceleration\">Dynamic Site Acceleration (DSA)<\/a>.<\/p><p>For instance, if you\u2019re using Cloudflare CDN, you can use <a href=\"https:\/\/www.cloudflare.com\/products\/cloudflare-workers\/\">Cloudflare Workers<\/a> to set up serverless JavaScript functions that run on CDN PoPs placed all around the world.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"354\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cloudflare-Workers-Deploy-Serverless-Code.png\" alt=\"Deploy serverless code with Cloudflare Workers\" class=\"wp-image-5447754\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cloudflare-Workers-Deploy-Serverless-Code.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cloudflare-Workers-Deploy-Serverless-Code-310x137.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cloudflare-Workers-Deploy-Serverless-Code-768x340.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cloudflare-Workers-Deploy-Serverless-Code-136x60.png 136w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cloudflare-Workers-Deploy-Serverless-Code-203x90.png 203w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Deploy serverless code with Cloudflare Workers<\/figcaption><\/figure><p>You can use these custom serverless functions to modify your site\u2019s HTTP requests and responses, generate new responses, and make parallel requests. Cloudflare Workers can help your site perform a variety of tasks based on multiple parameters such as user input, device type, location, time of day, third party APIs, etc.&nbsp;<\/p><p>Thus, you can generate dynamic content from the CDN itself and then serve it to clients. You can also <a href=\"https:\/\/blog.cloudflare.com\/edge-side-includes-with-cloudflare-workers\/\">combine serverless functions with ESI tags<\/a> to make this process even more efficient.&nbsp;<\/p><p>To implement edge caching on your site easily, you can use the free <a href=\"https:\/\/github.com\/cloudflare\/worker-examples\/tree\/master\/examples\/edge-cache-html\">Cloudflare Page Cache plugin<\/a>. Going into further details is beyond this article\u2019s purpose, but you can check out the <a href=\"https:\/\/developers.cloudflare.com\/workers\/tutorials\/\">official Cloudflare Workers docs<\/a> to get started.<\/p><p>Likewise, KeyCDN provides two options to cache dynamic content. The first method is to use <a href=\"https:\/\/www.keycdn.com\/api\">KeyCDN&#8217;s API<\/a> to instantly purge the CDN cache based on user actions so that your users will always see the latest dynamic content.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"298\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Caching-Origin-Shield-KeyCDN.png\" alt=\"KeyCDN\u2019s Origin Shield adds an extra CDN caching layer (Source: KeyCDN)\" class=\"wp-image-5447762\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Caching-Origin-Shield-KeyCDN.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Caching-Origin-Shield-KeyCDN-310x115.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Caching-Origin-Shield-KeyCDN-768x286.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Caching-Origin-Shield-KeyCDN-161x60.png 161w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Edge-Caching-Origin-Shield-KeyCDN-242x90.png 242w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">KeyCDN\u2019s Origin Shield adds an extra CDN caching layer (Source: <a href=\"https:\/\/www.keycdn.com\/blog\/new-feature-origin-shield\">KeyCDN<\/a>)<\/figcaption><\/figure><p>The second option suggested by KeyCDN involves modifying <strong>Cache-Control<\/strong> headers to direct a client how and when to cache responses, and for how long. You can <a href=\"https:\/\/www.keycdn.com\/blog\/cdn-dynamic-content#option-2-cache-control-headers\">view an example in KeyCDN API docs<\/a> to get a better understanding of how it\u2019s deployed.<\/p><p>Fastly CDN\u2019s API also provides features like <a href=\"https:\/\/www.fastly.com\/blog\/building-fast-and-reliable-purging-system\">instant cache purging<\/a>, real-time logging and availability, and mechanisms such as <a href=\"https:\/\/docs.fastly.com\/guides\/how-fastly-services-work\/about-fastlys-origin-shielding-features\">Origin Shield<\/a>. You can check out a few examples of how Fastly users have cached dynamic content using CDN: \u201c<a href=\"https:\/\/www.fastly.com\/blog\/how-to-cache-with-tracking-cookies\/\">How to cache with tracking cookies<\/a>\u201d and \u201c<a href=\"https:\/\/www.fastly.com\/blog\/api-caching-part-iii\/\">API caching<\/a>.\u201d<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"232\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cache-Control-Instant-Purging-Fastly.png\" alt=\"Purge cache instantly with Fastly to serve dynamic content (Source: Fastly)\" class=\"wp-image-5447771\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cache-Control-Instant-Purging-Fastly.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cache-Control-Instant-Purging-Fastly-310x90.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cache-Control-Instant-Purging-Fastly-768x223.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Cache-Control-Instant-Purging-Fastly-190x55.png 190w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Purge cache instantly with Fastly to serve dynamic content (Source: <a href=\"https:\/\/www.fastly.com\/products\/cdn#products-web-application-performance-instant-purge\">Fastly<\/a>)<\/figcaption><\/figure><p>Most of the top CDNs offer multiple ways to cache dynamic content. If you\u2019re using or planning to use any of the CDNs mentioned above, the resources I\u2019ve linked above will come in handy. If it\u2019s any other CDN, then I suggest you to explore their docs or get in touch with their support team.<\/p><p><strong>Further Reading:<\/strong> Refer to WP Rocket\u2019s docs to learn more about how you can <a href=\"https:\/\/docs.wp-rocket.me\/article\/42-using-wp-rocket-with-a-cdn\">integrate various popular CDNs with WP Rocket<\/a>.&nbsp;<\/p><div id=\"om-owmvrkh4grl6rsk0l0re-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'owmvrkh4grl6rsk0l0re')<\/script><h2 class=\"wp-block-heading\">Caching Dynamic Content Using NGINX<\/h2><p>There are many plugins and techniques to cache dynamic content generated by WordPress sites running on an NGINX server. The most recommended solution is to use FastCGI, which is an improved variation of the Common Gateway Interface (CGI) protocol.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"593\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/requests-per-second-NGINX-SpinupWP.png\" alt=\"NGINX + FastCGI is a potent combo (Source: SpinupWP)\" class=\"wp-image-5447777\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/requests-per-second-NGINX-SpinupWP.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/requests-per-second-NGINX-SpinupWP-263x195.png 263w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/requests-per-second-NGINX-SpinupWP-768x569.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/requests-per-second-NGINX-SpinupWP-81x60.png 81w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/requests-per-second-NGINX-SpinupWP-121x90.png 121w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">NGINX + FastCGI is a potent combo (Source: <a href=\"https:\/\/spinupwp.com\/page-caching-varnish-vs-nginx-fastcgi-cache-2018\/\">SpinupWP<\/a>)<\/figcaption><\/figure><p>FastCGI improves site performance by not opening a separate process for each incoming request. Any server that processes requests to generate dynamic content, like NGINX running WordPress, can benefit greatly from it.<\/p><p>As covered in WP Rocket\u2019s <a href=\"https:\/\/wp-rocket.me\/blog\/nginx-caching-for-wordpress\/\">NGINX FastCGI Caching for WordPress<\/a> tutorial, getting started with it is super easy. The NGINX web server provides a native FastCGI module to help you set it up in minutes.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"582\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/average-response-time-NGINX-SpinupWP.png\" alt=\"NGINX + FastCGI Cache will make your sites fly (Source: SpinupWP)\" class=\"wp-image-5447784\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/average-response-time-NGINX-SpinupWP.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/average-response-time-NGINX-SpinupWP-268x195.png 268w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/average-response-time-NGINX-SpinupWP-768x559.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/average-response-time-NGINX-SpinupWP-82x60.png 82w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/average-response-time-NGINX-SpinupWP-124x90.png 124w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">NGINX + FastCGI Cache will make your sites fly (Source: <a href=\"https:\/\/spinupwp.com\/page-caching-varnish-vs-nginx-fastcgi-cache-2018\/\">SpinupWP<\/a>)<\/figcaption><\/figure><p>FastCGI eliminates the need to set up extra caching solutions like WordPress plugins and reverse proxies (e.g. Varnish) for most sites.&nbsp;<\/p><p>NGINX\u2019s <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_fastcgi_module.html\">ngx_http_fastcgi_module<\/a><strong> <\/strong>module allows the main web server to pass incoming requests to the FastCGI server. As with all NGINX modules, FastCGI is controlled by various directives you specify in its configuration file.&nbsp;<\/p><p>Typically, the virtual host file to configure NGINX is found in the <strong>\/etc\/nginx\/sites-available\/domain.com<\/strong> directory, where <strong>domain.com<\/strong> is the name of your domain name (e.g. <em>salmanravoof.com<\/em>, <em>wp-rocket.me<\/em>).&nbsp;<\/p><pre class=\"wp-block-code\"><code class=\"\">sudo nano \/etc\/nginx\/sites-available\/domain.com<\/code><\/pre><p>This will open the configuration file in the Nano text editor within your Linux terminal. Next, add the following NGINX directives before the <strong>server{}<\/strong> block inside your config file.<\/p><pre class=\"wp-block-code\"><code class=\"\">fastcgi_cache_path \/var\/run\/nginx-fastcgi-cache levels=1:2 keys_zone=WPROCKET:100m inactive=60m;\nfastcgi_cache_key \"$scheme$request_method$host$request_uri\";\nfastcgi_cache_use_stale error timeout invalid_header http_500;\nfastcgi_ignore_headers Cache-Control Expires Set-Cookie;<\/code><\/pre><p>Here\u2019s a line-by-line breakdown of the directives used above:<\/p><ul class=\"wp-block-list\"><li><strong>fastcgi_cache_path<\/strong>: This specifies the cache\u2019s location, size, subdirectory levels, key_zone name, and the inactive duration. The cache\u2019s location can be anywhere on the server. Since it\u2019s faster to serve files from the RAM, I\u2019ve used the <strong>\/var\/run<\/strong> folder as Ubuntu mounts this directory as <a href=\"https:\/\/ubuntu.com\/blog\/data-driven-analysis-tmp-on-tmpfs\">tmpfs<\/a> (a fast volatile memory).<\/li>\n\n<li><strong>fastcgi_cache_key<\/strong>: This directs the FastCGI module on how to encrypt the cache files by generating unique key names.&nbsp;<\/li>\n\n<li><strong>fastcgi_cache_use_stale<\/strong>: This instructs NGINX to continue serving old (stale) page cache even if PHP crashes (and by extension WordPress). This is one of the many strengths of NGINX web servers.<\/li>\n\n<li><strong>fastcgi_ignore_headers<\/strong>: This directive tells the FastCGI server not to process specific response header fields.<\/li><\/ul><p>The above directives along with the default NGINX ones will enable caching for your entire site. But the current configuration isn\u2019t ideal for serving a dynamic content site yet.&nbsp;<\/p><p>Now, you need to direct NGINX not to cache certain pages. To do that, just add the following conditional directives before the first <strong>location{}<\/strong> block within your <strong>server{}<\/strong> block.&nbsp;<\/p><pre class=\"wp-block-code\"><code class=\"\">set $skip_cache 0;\n    # POST requests and URLs with query strings won't be cached\n    if ($request_method = POST) {\n        set $skip_cache 1;\n    }   \n    if ($query_string != \"\") {\n        set $skip_cache 1;\n    }   \n    # URIs containing the following segments won't be cached\n    if ($request_uri ~*  \"\/wp-admin\/|\/xmlrpc.php|wp-.*.php|\/feed\/|index.php|sitemap(_index)?.xml\") {\n        set $skip_cache 1;\n    }   \n    # Don't serve cache for logged-in users or recent commentators\n    if ($http_cookie ~* \"comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in\") {\n        set $skip_cache 1;\n    }<\/code><\/pre><p>The above directives will instruct NGINX to skip serving cached content for POST requests, URL requests with query strings attached to them, admin screens, pages for logged-in users, and a few other pages.&nbsp;<br>Next, add the following directives within the PHP <strong>location{}<\/strong> block.<\/p><pre class=\"wp-block-code\"><code class=\"\">fastcgi_cache_bypass $skip_cache;\nfastcgi_no_cache $skip_cache;\nfastcgi_cache WPROCKET;\nfastcgi_cache_valid 60m;\nadd_header X-FastCGI-Cache $upstream_cache_status;<\/code><\/pre><p>The <strong>fastcgi_cache_bypass<\/strong> directive defines when the server\u2019s cache will be skipped, while the <strong>fastcgi_no_cache<\/strong> directive specifies the conditions when no server response will be saved to the cache.<\/p><p>The value under <strong>fastcgi_cache<\/strong> directive should match the <strong>keys_zone<\/strong> value you set before. In my case it\u2019s <strong>WPROCKET<\/strong>.&nbsp;<\/p><p>You can also specify how long the FastCGI cache is valid for. The default value is set to 60 minutes. It\u2019s a decent duration for most sites. You can change it to whatever duration you want though.&nbsp;<\/p><p>If you modify the value of <strong>fastcgi_cache_valid<\/strong><strong> <\/strong>and set it to some other duration, then it\u2019s an excellent idea to update the value of the <strong>inactive<\/strong> parameter too. You defined it earlier inside the <strong>fastcgi_cache_path<\/strong> directive.&nbsp;<\/p><p>The <strong>inactive<\/strong> parameter specifies the max time the server allows any cached data to persist in its memory without being called. If it\u2019s not accessed within the specified timeframe, the server will remove the cache.<\/p><p>The last line adds the <strong>X-FastCGI-Cache<\/strong> header to your server\u2019s HTTP responses. You can use it to validate whether requests to your website are being served from FastCGI cache or not.<\/p><p>Once you\u2019re happy with the configuration, save the file, exit the editor, and then restart NGINX.<\/p><pre class=\"wp-block-code\"><code class=\"\">sudo service nginx restart <\/code><\/pre><p>The last step to configure NGINX to work with your WordPress site is to install the free <a href=\"https:\/\/wordpress.org\/plugins\/nginx-cache\/\">Nginx Cache plugin<\/a> by Till Kr\u00fcss. After activating the plugin, go to <strong>Tools &gt; Nginx<\/strong> panel in your WordPress dashboard and set the <strong>Cache Zone Path<\/strong>. It should be the same as the one you defined in your NGINX hosts file earlier.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"381\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/NGINX_Cache_Plugin.png\" alt=\"Nginx Cache plugin helps you purge FastCGI cache automatically\" class=\"wp-image-5447794\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/NGINX_Cache_Plugin.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/NGINX_Cache_Plugin-310x148.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/NGINX_Cache_Plugin-768x366.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/NGINX_Cache_Plugin-126x60.png 126w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/NGINX_Cache_Plugin-189x90.png 189w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Nginx Cache plugin helps you purge FastCGI cache automatically<\/figcaption><\/figure><p>You can also enable automatic purging of NGINX cache in the same settings panel. Every time you modify any content on your site, it\u2019ll automatically purge the NGINX cache.&nbsp;<\/p><p>The Nginx Cache plugin also lets you purge the cache manually through its settings page and the admin bar. <a href=\"https:\/\/wordpress.org\/plugins\/nginx-helper\/\">Nginx Helper<\/a> is another great plugin that you can install to automate many other NGINX features.&nbsp;<\/p><p>Now that you\u2019ve learned how to cache pages selectively on your WordPress site, you can apply the same logic to specify custom FastCGI cache rules for dynamic WordPress sites&nbsp; built with WooCommerce, BuddyPress, or Easy Digital Downloads.<\/p><p>For example, if you have an ecommerce site that runs on WooCommerce, you shouldn\u2019t cache user account, shopping cart, or checkout pages as they\u2019re unique for each user. To address this issue, you can set up additional cache exclusions by extending the conditional directives you used earlier.<\/p><pre class=\"wp-block-code\"><code class=\"\">\nif ($request_uri ~* \"\/(cart|checkout|my-account)\/*$\") {\n    set $skip_cache 1;\n}\n<\/code><\/pre><p>You need to paste the above conditional directive in the same location where you entered them earlier.&nbsp;<\/p><p>This code snippet instructs NGINX not to cache WooCommerce\u2019s default pages such as&nbsp; Cart, Checkout, and My Account pages. You can also use regex expressions to append even more pages to the cache exclusion list.<\/p><p>You should note that cache still doesn\u2019t work for logged-in users as they\u2019re shown highly personalized pages. To cache pages accessed by logged-in users, you can selectively cache all the static elements of a dynamic webpage by using an advanced technique called <a href=\"https:\/\/css-tricks.com\/wordpress-fragment-caching-revisited\/\">fragment caching<\/a>. While it\u2019s fairly complex, it\u2019s worth checking out.&nbsp;<\/p><p>Most WordPress plugins that create highly dynamic pages should have extensive documentation on how to exclude their dynamic pages from caching. WP Rocket plays well with NGINX servers after a few simple tweaks. Refer to the <a href=\"https:\/\/docs.wp-rocket.me\/article\/37-nginx-configuration-for-wp-rocket\">NGINX Configuration for WP Rocket<\/a> for more information.<\/p><h2 class=\"wp-block-heading\">Caching Dynamic Content Using Varnish<\/h2><p>Varnish is one of the most popular HTTP accelerators and reverse proxies in use today. It\u2019s focused exclusively on HTTP and designed to speed up content-heavy dynamic websites.&nbsp;<\/p><p>Varnish Cache uses a domain-specific configuration language called <a href=\"https:\/\/www.varnish-software.com\/wiki\/content\/tutorials\/varnish\/vcl.html\">Varnish Configuration Language (VCL)<\/a>. If you\u2019re familiar with C programming language, you\u2019ll find VCL to be similar. It\u2019s a highly flexible language that gives you the independence to test and implement Varnish the way you want.<\/p><p>For instance, if you want Varnish Cache to ignore AJAX requests, here\u2019s how you implement it:<\/p><pre class=\"wp-block-code\"><code class=\"\">\nif (req.http.X-Requested-With == \"XMLHttpRequest\") {\n    return(pass);\n}<\/code><\/pre><p>Similarly, if you want to instruct Varnish Cache to skip caching WordPress admin screens and edit pages, you need to add the following VCL code snippet to your config file.<\/p><pre class=\"wp-block-code\"><code class=\"\">\nif (req.url ~ \"(wp-admin|post\\.php|edit\\.php|wp-login)\") {\n    return(pass);\n}\nif (req.url ~ \"\/wp-cron.php\" || req.url ~ \"preview=true\") {\n    return (pass);\n}\n<\/code><\/pre><p>Let\u2019s get started with Varnishing your WordPress site!<\/p><p>If your web server runs on Ubuntu, here\u2019s a <a href=\"https:\/\/www.varnish-software.com\/wiki\/content\/tutorials\/varnish\/varnish_ubuntu.html\">quick guide to install and configure Varnish<\/a>. Alternately, you can also go through this step-by-step tutorial to <a href=\"https:\/\/www.varnish-software.com\/wiki\/content\/tutorials\/wordpress\/wp_step_by_step.html#wp-step-by-step\">enable Varnish Cache on your WordPress site<\/a>.&nbsp;<\/p><p>Once you\u2019ve set up your server to use Varnish to cache content, you can then direct WordPress to take care of the rest. WordPress sites with mostly static content won\u2019t need much tweaking. There are a lot of helper plugins to aid you with optimizing your Varnish Cache configuration even more. Here are some of my favorites:&nbsp;<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/support\/plugin\/varnish-http-purge\/reviews\/\">Proxy Cache Purge<\/a><\/li><\/ul><p>Every time you modify a post or page on your website, Proxy Cache Purge will automatically send a PURGE request on behalf of the URL. For example, when you edit, publish, or delete a post, Proxy Cache Purge will purge its old cache automatically. The same applies for commenting on a post or changing your site\u2019s theme.&nbsp;<\/p><p>You can modify your Varnish Cache\u2019s configuration to skip certain pages from being cached.<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/plugins\/wpbase-cache\/\">WPBase Cache<\/a><\/li><\/ul><p>WPBase Cache is a specialist plugin that optimizes WordPress deployment on a server stack comprising <strong>varnish<\/strong> + <strong>nginx<\/strong> + <strong>php-fpm<\/strong> + <strong>php-apc<\/strong>. It uses three types of cache to supercharge your website: full page cache, db cache, and opcode cache.&nbsp;<\/p><p>This plugin also integrates code from <a href=\"https:\/\/wordpress.org\/plugins\/nginx-compatibility\/\">nginx-compatibility<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/db-cache-reloaded-fix\/\">db-cache-reloaded-fix<\/a> helper plugins. They\u2019re fixes for nginx and database cache respectively.&nbsp;&nbsp;<\/p><p>WPBase Cache also supports configuring Varnish Cache with the provided <strong>default.vcl<\/strong> file. You can <a href=\"https:\/\/www.wpoven.com\/blog\/wpbase-cache-plugin-features-and-advantages\/\">learn more about WPBase Cache\u2019s features and benefits<\/a> on its website.<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/docs.wp-rocket.me\/article\/493-using-varnish-with-wp-rocket\">WP Rocket + Varnish Add-on<\/a><\/li><\/ul><p>WP Rocket\u2019s Varnish add-on allows you to purge both Varnish and WP Rocket\u2019s cache at the same time. Apart from enabling interoperability without causing any conflicts, the add-on will also ensure that the content served to your users is always up-to-date.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"479\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Add-On-WP-Rocket-1.png\" alt=\"Varnish Add-on for WP Rocket\" class=\"wp-image-5447803\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Add-On-WP-Rocket-1.png 680w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Add-On-WP-Rocket-1-277x195.png 277w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Add-On-WP-Rocket-1-85x60.png 85w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Varnish-Add-On-WP-Rocket-1-128x90.png 128w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><figcaption class=\"wp-element-caption\">Varnish Add-on for WP Rocket<\/figcaption><\/figure><p>With the Varnish add-on installed, you can relax knowing that both Varnish and WP Rocket are compatible with each other and can work together. For more information, refer to <a href=\"https:\/\/docs.wp-rocket.me\/article\/493-using-varnish-with-wp-rocket\">WP Rocket\u2019s documentation on Varnish add-on<\/a>.<\/p><p>We\u2019ve finished setting up Varnish Cache to cache and serve static content. But what about caching dynamic content? The solution is to use Varnish Modules (VMODs) to extend the features of Varnish Cache.<\/p><p>Varnish 6.0&#8217;s new <a href=\"https:\/\/docs.varnish-software.com\/varnish-cache-plus\/vmods\/xbody\/\">XBody<\/a> and <a href=\"https:\/\/www.varnish-software.com\/solutions\/varnish-enterprise\/edgestash\/\">Edgestash<\/a> VMODs allow you to cache and accelerate dynamic content with ease.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"433\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/xbody-caching-varnish_6.0.png\" alt=\"Cache dynamic content with XBody + Edgestash VMODs (Source: Varnish Software)\" class=\"wp-image-5447810\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/xbody-caching-varnish_6.0.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/xbody-caching-varnish_6.0-310x168.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/xbody-caching-varnish_6.0-768x416.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/xbody-caching-varnish_6.0-111x60.png 111w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/xbody-caching-varnish_6.0-166x90.png 166w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Cache dynamic content with XBody + Edgestash VMODs (Source: <a href=\"https:\/\/info.varnish-software.com\/blog\/caching-uncacheable-varnish-6.0-xbody\">Varnish Software<\/a>)<\/figcaption><\/figure><p>The XBody VMOD picks up all the dynamic content from the webpage and parses it into JSON data-interchange format and a Mustache web template.&nbsp;<\/p><p>Later, the Edgestash VMOD picks up both the JSON data and the Mustache template, and then recombines them back into a new response. You can check out Varnish Software\u2019s docs on <a href=\"https:\/\/docs.varnish-software.com\/varnish-cache-plus\/vmods\/xbody\/#personalization-caching\">personalized caching<\/a> to learn&nbsp; more about how it\u2019s done.&nbsp;<\/p><h2 class=\"wp-block-heading\">Caching Dynamic Content Using WP Rocket<\/h2><p>Advanced caching plugins like WP Rocket can intelligently sense which assets are static or dynamic and cache only the static content. It also updates the cache automatically whenever any static content is updated.<\/p><p>WP Rocket also disables caching by default for dynamic pages such as cart, checkout, user profiles, etc. It also allows you to disable caching manually for pages.<\/p><p>If you have pages with a lot of static content and a few dynamic elements, then you can still cache those pages by serving the dynamic elements via JavaScript \/ AJAX. Since JS runs on the client-side (or browser), the dynamic elements will get updated on the cached page served to the user.<\/p><p>You can read this <a href=\"https:\/\/premium.wpmudev.org\/blog\/using-ajax-with-wordpress\/\">step-by-step AJAX tutorial<\/a> to learn how you can dynamically update content on your WordPress website.<\/p><p>You can also <a href=\"https:\/\/wp-rocket.me\/blog\/using-woocommerce-dynamic-cart-wp-rocket\/\">use WP Rocket to cache pages with dynamic content<\/a>. WooCommerce also provides an <a href=\"https:\/\/docs.woocommerce.com\/document\/show-cart-contents-total\/\">effortless way to ajaxify your cart viewer<\/a> by adding a simple code snippet.<\/p><h2 class=\"wp-block-heading\">Wrapping Up<\/h2><p>Caching isn\u2019t just for static or event-driven sites anymore. You\u2019ve seen many options above to cache highly dynamic WordPress sites. While it requires some configuration and tweaks initially, the final result is worth the effort. Dynamic content caching helps you to improve your site\u2019s Time to First Byte (TTFB), reduce your hosting costs, achieve better SEO, and increase your conversion rates.<\/p><p>By expanding your cache to include dynamic content too, you can have a dramatic effect on your site\u2019s performance. It\u2019ll also ensure that your users receive the latest up-to-date information swiftly.&nbsp;<\/p><p>And if you want to go further, WP Rocket works out-of-the-box with most of the server-level caching solutions discussed in this article. It\u2019s time to supercharge your website with WP Rocket now!<\/p>","protected":false},"excerpt":{"rendered":"<p>Caching is crucial for WordPress. It\u2019s one of the primary ways to make WordPress sites load as fast as possible. Caching is what WP&nbsp;Rocket excels at. However, it\u2019s not that easy to cache highly dynamic WordPress sites, especially those that display personalized pages to every user. But it\u2019s possible to cache dynamic content with [&hellip;]<\/p>\n","protected":false},"template":"","class_list":["post-5447674","caching_hub","type-caching_hub","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Cache Dynamic Content in WordPress<\/title>\n<meta name=\"description\" content=\"Looking for a way to cache dynamic WordPress sites? Learn how with our in-depth guide. Cache dynamic content to boost your site\u2019s performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Cache Dynamic Content in WordPress\" \/>\n<meta property=\"og:description\" content=\"Looking for a way to cache dynamic WordPress sites? Learn how with our in-depth guide. Cache dynamic content to boost your site\u2019s performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-10T13:38:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/\",\"url\":\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/\",\"name\":\"How to Cache Dynamic Content in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png\",\"datePublished\":\"2023-04-11T10:36:54+00:00\",\"dateModified\":\"2023-05-10T13:38:47+00:00\",\"description\":\"Looking for a way to cache dynamic WordPress sites? Learn how with our in-depth guide. Cache dynamic content to boost your site\u2019s performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png\",\"width\":800,\"height\":249},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Cache\",\"item\":\"https:\/\/wp-rocket.me\/wordpress-cache\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Cache Dynamic Content in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Cache Dynamic Content in WordPress","description":"Looking for a way to cache dynamic WordPress sites? Learn how with our in-depth guide. Cache dynamic content to boost your site\u2019s performance.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Cache Dynamic Content in WordPress","og_description":"Looking for a way to cache dynamic WordPress sites? Learn how with our in-depth guide. Cache dynamic content to boost your site\u2019s performance.","og_url":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_modified_time":"2023-05-10T13:38:47+00:00","og_image":[{"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png"}],"twitter_card":"summary_large_image","twitter_site":"@wp_rocket","twitter_misc":{"Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/","url":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/","name":"How to Cache Dynamic Content in WordPress","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png","datePublished":"2023-04-11T10:36:54+00:00","dateModified":"2023-05-10T13:38:47+00:00","description":"Looking for a way to cache dynamic WordPress sites? Learn how with our in-depth guide. Cache dynamic content to boost your site\u2019s performance.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/04\/Static-Content-Example.png","width":800,"height":249},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/wordpress-cache\/cache-dynamic-content-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"WordPress Cache","item":"https:\/\/wp-rocket.me\/wordpress-cache\/"},{"@type":"ListItem","position":3,"name":"How to Cache Dynamic Content in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/caching_hub\/5447674"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/caching_hub"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/caching_hub"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=5447674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}