{"id":5438672,"date":"2023-04-05T11:09:29","date_gmt":"2023-04-05T09:09:29","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=caching_hub&#038;p=5438672"},"modified":"2023-07-24T12:05:24","modified_gmt":"2023-07-24T10:05:24","slug":"different-types-of-caching","status":"publish","type":"caching_hub","link":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/","title":{"rendered":"Server Cache vs. Browser Cache vs. Site (Page) Cache: What\u2019s the Difference?"},"content":{"rendered":"<p>In case you might be questioning yourself:<\/p><p><em>&#8220;I want to cache my WordPress site. What type of caching should I use for it?&#8221;<\/em><\/p><p>The answer involves many options, depending on the nature of your website and what you want to achieve from it.<\/p><p>There are several types of caching, each of which is different from the others and useful in different circumstances. So it&#8217;s essential to comprehend the kinds of data they store and the levels of control they provide you.<\/p><p>In this article, we&#8217;ll discuss different types of web cache in detail, how they work, and their differences.<\/p><p>Then we&#8217;ll look at various types of content that can be cached and how you can cache your WordPress site in the most efficient way possible!&nbsp;<\/p><h2 class=\"wp-block-heading\">What Are The Caching Types?<\/h2><p>There are two types of caching options you can go with:<\/p><ol class=\"wp-block-list\"><li>Server-side Caching<\/li>\n\n<li>Client-side Caching<\/li><\/ol><p>Although both of them cache your website differently but has one similar goal:<\/p><p><em>Making your website load blazing fast without loading the entire site files again.<\/em><\/p><p>Let&#8217;s take a closer look at both of them.&nbsp;<\/p><h3 class=\"wp-block-heading\">What&#8217;s Server-Side Caching?<\/h3><p>Server-side caching temporarily stores web files and data on the server for later use, effectively reducing the server&#8217;s load and latency.<\/p><p>Here&#8217;s how it works:<\/p><p>1. When the user visits a website and requests the web page, the website retrieves data from the server, generates that webpage, and displays it to the user.<\/p><p>2. After the response has been sent back to the user, the server creates a copy of the webpage and stores it as a cache.<\/p><p>The result?&nbsp;<\/p><p>The next time a user revisits the website, instead of going through the whole process again, it displays the already saved (or cached) copy of the webpage \u2013 thus making the website load faster!<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"621\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png\" alt=\"Illustration of how server-side caching works - Source: Medium\" class=\"wp-image-5094680\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png 1400w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works-310x138.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works-768x341.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works-135x60.png 135w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works-203x90.png 203w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\"><em>Illustration of how server-side caching works &#8211; Source: <\/em><a href=\"https:\/\/medium.com\/@tmakhlay2\/cache-me-outside-1b312e04ead6\"><em>Medium<\/em><\/a><\/figcaption><\/figure><h3 class=\"wp-block-heading\">What&#8217;s Client-Side Caching?<\/h3><p>Client-side caching, often called <strong>browser caching<\/strong>, temporarily stores the copy of a webpage in the browser&#8217;s memory (a folder created by the browser).&nbsp;<\/p><p>So, the next time a user revisits a website with client-side caching enabled, it won&#8217;t make a call to the server for the data. Instead, it will fetch it from the browser cache folder located on the user&#8217;s device.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1029\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-client-side-caching-works.png\" alt=\"Illustration of how client-side caching works - Source: Medium\n\" class=\"wp-image-5094687\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-client-side-caching-works.png 2048w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-client-side-caching-works-310x156.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-client-side-caching-works-768x386.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-client-side-caching-works-119x60.png 119w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-client-side-caching-works-179x90.png 179w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><figcaption class=\"wp-element-caption\"><em>Illustration of how client-side caching works &#8211; Source: <\/em><a href=\"https:\/\/medium.com\/@tmakhlay2\/cache-me-outside-1b312e04ead6\"><em>Medium<\/em><\/a><br><\/figcaption><\/figure><h3 class=\"wp-block-heading\">Server-Side Caching vs. Client-Side Caching<\/h3><p>The type of caching you choose significantly improves the overall user experience and usability of your WordPress site. So it&#8217;s always better to understand which type goes well with your website beforehand.<\/p><p>Let us help you figure that out with an example:<\/p><p>Suppose you run an online retail site.<\/p><p>Because of the nature of the business, the type of content on your website is dynamic (<em>i.e., users see recommended products, emails about abandoned carts, or ads for similar\/relevant products).<\/em><\/p><p>Due to this, users access your website smoothly whenever there&#8217;s a new update.&nbsp;<\/p><p>If your website takes longer to load, it will urge the users to move on to another site even before the content fully loads. Hence, resulting in increased bounce rates and, most importantly, a negative first impression on a visitor landing on your website.<\/p><p>Now, consider the above example:<\/p><ul class=\"wp-block-list\"><li><strong>If you use server-side caching:<\/strong><\/li><\/ul><p>When the user requests a web page, the website retrieves data from the server. But before that, it checks if a copy of that web page is cached. If it&#8217;s cached, it serves the cached copy of the webpage.<\/p><p>There are three main scenarios:<\/p><ol class=\"wp-block-list\"><li>If your website\u2019s content is static, it does require any accommodation.<\/li><\/ol><ol class=\"wp-block-list\" start=\"2\"><li>If the content is dynamic within a time frame (short-lived content), it requires cache renewal after a certain amount of time or &#8220;ajaxifying&#8221; the dynamic content.<\/li><\/ol><ol class=\"wp-block-list\" start=\"3\"><li>On the other hand, if your website&#8217;s content is dynamic with a short time frame and is user-specific (logged-in experience, for example), it requires bypassing the cache.<\/li><\/ol><p>By default, and if the webpage is cached, it will be served from the cache as long as there is no instruction to bypass it (i.e., adding items to the cart in some specific cases).<\/p><p>But there&#8217;s one problem.<\/p><p>It displays the cached version as if the content on the website is static!<\/p><p>Due to this reason:<\/p><p>Server-side caching is the best choice for websites with static content and short-lived cache, as it significantly reduces the number of operations on the server \u2013 without having it reconstruct the entire content per user request. On the other hand, a highly dynamic server cache is still possible using advanced technologies like Edge Side Includes (ESI) or Ajax (Asynchronous JavaScript and XML).<\/p><ul class=\"wp-block-list\"><li><strong>Let&#8217;s try it out with client-side caching:<\/strong><\/li><\/ul><p>When you use client-side caching, the website&#8217;s copy is stored in the browser&#8217;s cache. So when the user requests a web page, it displays the cached version stored in the browser instead of requesting it from the server.<\/p><p>For this example, since your website has dynamic features, your preferred method will be using JavaScript (JS). It operates on the browser&#8217;s side, so you can rely on it by running the scripts within the browser to handle the dynamic needs of your website in real time.<\/p><p>Due to this reason:<\/p><p>For dynamic websites, client-side caching solves both latency and server cache problems by reducing the server load.<\/p><p>Now, if we categorize it further, some of the types of web cache include:<\/p><ul class=\"wp-block-list\"><li><strong>Page Cache<\/strong> <strong>(or Site Cache)<\/strong><\/li>\n\n<li><strong>Server Cache<\/strong><\/li>\n\n<li><strong>Proxy Cache<\/strong><\/li>\n\n<li><strong>Browser Cache<\/strong><\/li><\/ul><p>However, there\u2019s also a different type of caching unrelated to the other four types mentioned above, known as <strong>Object Cache<\/strong>.<\/p><p><strong>Object Cache<\/strong> is a process that stores database query results so that they can be accessed easily the next time a user requests it. The cached object will be served instantly from the cache without needing to query the database repeatedly.<\/p><p>If you want to learn more about Object Cache, check out <a href=\"https:\/\/wp-rocket.me\/blog\/object-caching-use-wordpress\/\">What is Object Caching and How to Use It With WordPress<\/a>.<\/p><h2 class=\"wp-block-heading\">What is Page Cache (or Site Cache)?<\/h2><p>Page cache, also known as HTTP or site cache, temporarily stores the content on your website the first time you visit it.&nbsp;<\/p><p>So the next time you visit that website, it fetches the stored data from the page cache to display static web content faster than it would with a new request.<\/p><p>In addition to that:<\/p><p>All the data is stored in the server\u2019s hard disk or memory (RAM), and you, as a website owner, can determine how much time a file stays in the page (site) cache.&nbsp;<\/p><p>If elements of your website are static, you can set a file&#8217;s expiry date for longer. However, dynamic elements of a website have much shorter expiry dates. These brief expiry dates tell the website when to refresh the files stored in your device&#8217;s page cache.<\/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\">What is Browser Cache?<\/h2><p>Browser cache stores cached versions of the specific web pages a user browses. It is built into your web browser \u2013 enabling the website to load faster in order to provide you with a better user experience.<\/p><p>Browser caches work by temporarily saving copies of a website\u2019s files, such as:<\/p><ul class=\"wp-block-list\"><li>HTML pages<\/li>\n\n<li>Multimedia content and images<\/li>\n\n<li>CSS stylesheets<\/li>\n\n<li>JavaScript scripts<\/li><\/ul><p>When the user revisits your website, their browser will fetch the cached files and use them to assemble your website\u2019s content to create a smooth browsing experience. Cached content loads faster because your browser doesn\u2019t have to load everything from scratch to display them.<\/p><p>Usually, a browser stores its cache for a limited time or until it is full. After that, it automatically clears out the cache and displays the updated website\u2019s content on the next visit.<\/p><p>The silver lining is:<\/p><p>You can also delete your browser cache by manually clearing your browsing data if it takes up too much space \u2013 and that\u2019s one of the key features of this type of cache!<\/p><p>In Google Chrome, you can do this by clicking:<\/p><p><strong><em>Settings <\/em><\/strong><em>&gt;<\/em><strong><em> Privacy and security <\/em><\/strong><em>&gt; <\/em><strong><em>Clear browsing data<\/em><\/strong><\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1012\" height=\"946\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/How-to-clear-browser-data-in-Google-Chrome.png\" alt=\"How to clear browser data in Google Chrome\" class=\"wp-image-5094695\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/How-to-clear-browser-data-in-Google-Chrome.png 1012w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/How-to-clear-browser-data-in-Google-Chrome-209x195.png 209w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/How-to-clear-browser-data-in-Google-Chrome-768x718.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/How-to-clear-browser-data-in-Google-Chrome-64x60.png 64w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/How-to-clear-browser-data-in-Google-Chrome-96x90.png 96w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" \/><figcaption class=\"wp-element-caption\"><em>How to clear browser data in Google Chrome<\/em><\/figcaption><\/figure><p>When you visit a website after clearing browser data, it will load everything from scratch.<\/p><h2 class=\"wp-block-heading\">What is Server Cache?<\/h2><p>Server cache is also the type of web caching over which the end users don\u2019t have any control and is fully administered by the server.<\/p><p><em>(Note: There are mainly four types of web servers \u2013 <\/em><strong><em>Apache, IIS, Nginx, <\/em><\/strong><em>and<\/em><strong><em> LiteSpeed<\/em><\/strong><em>.)<\/em><\/p><p>This type of cache is mainly used to reduce server loads.<\/p><p>When a user visits a website and requests a web page from the server, the server scans the cache and displays the stored content immediately. This helps decrease the processing time and return web pages faster, which is especially beneficial for websites with high traffic.<\/p><p>Server cache can be considered an umbrella term for many types of caches. The most common are:<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wp-rocket.me\/blog\/object-caching-use-wordpress\/\"><strong>Object cache<\/strong><\/a> \u2013 stores database queries in a server-side cache for quick retrieval and prompter page loading without querying the database repeatedly.<\/li><\/ul><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wp-rocket.me\/blog\/what-is-opcache\/\"><strong>Opcode cache<\/strong><\/a> \u2013 store precompiled PHP code for speedier execution.<\/li><\/ul><h2 class=\"wp-block-heading\">What is Proxy Cache?<\/h2><p>Proxy cache stores content on the proxy server, allowing web services to share those resources with more users. The proxy server coordinates with the origin server to cache website data such as files, images, and web pages.<\/p><p>When a user opens a web page, the proxy checks whether it has a recent copy of that web page and its assets.&nbsp;<\/p><p>If a copy exists, it immediately displays that web page or resource to the user. On the other hand, if the web page is old or missing, it fetches a new copy from the source, caches it to the proxy, and delivers it to the user.<\/p><p>Once a proxy updates a web page, it resets the webpage&#8217;s expiration date to prevent it from being labeled as outdated. The webpage will be delivered until a specific time passes, after which the proxy server will re-check the source.<\/p><p>Besides that, the proxy cache also has a type known as:<\/p><p><a href=\"https:\/\/wp-rocket.me\/blog\/cdn\/\"><strong>Content Delivery Network (CDN) cache<\/strong><\/a><strong> <\/strong>\u2013 a cluster of servers located at different geographic locations. The server closest to the end user will return cached content to load content faster.<\/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\">Page Cache vs. Browser Cache vs. Server Cache vs. Proxy Cache <\/h2><p>Now that we know about each type of cache \u2013 let&#8217;s understand the differences between them:<\/p><p><strong>Page Cache (or Site Cache):<\/strong><\/p><ul class=\"wp-block-list\"><li>Saves content like web pages, images, text, etc.<\/li>\n\n<li>Serves content much quicker after the first visit.<\/li>\n\n<li>Ideal for websites with static content.<\/li><\/ul><p><strong>Browser Cache:<\/strong><\/p><ul class=\"wp-block-list\"><li>Stores limited data types like HTML pages, CSS stylesheets, JavaScript scripts, Images, and other multimedia files.<\/li>\n\n<li>Files are heavier and take time to load \u2013 thus, stored in the computer.<\/li>\n\n<li>Controlled by the user&#8217;s browser.<\/li>\n\n<li>Serves web pages directly without processing from the server.<\/li><\/ul><p><strong>Server Cache:<\/strong><\/p><ul class=\"wp-block-list\"><li>Saves content, code, queries, and similar data on a server.<\/li>\n\n<li>Type of server-side caching.<\/li>\n\n<li>Controlled by the server.<\/li>\n\n<li>Administered by website owners without any input from end-users.<\/li>\n\n<li>Best for high-traffic websites that need to reduce server strain.<\/li><\/ul><p><strong>Proxy Cache:<\/strong><\/p><ul class=\"wp-block-list\"><li>Allows web services to share resources with multiple users<\/li>\n\n<li>Saves bandwidth and decreases the loading time<\/li>\n\n<li>It might help in more complex scenarios, such as handling dynamic or frequently-updated resources (but only when using geotargeted content where the country\/region-specific content is stored separately).<\/li><\/ul><h2 class=\"wp-block-heading\">What Content Can Be Cached?<\/h2><p>There are various types of content that website owners frequently cache. However, some can be cached, but many site owners do not cache them as it seems &#8220;<strong><em>risky&#8221;<\/em><\/strong>. And lastly, there are some which should not be cached at all.<\/p><p>Let&#8217;s look into all of them.<\/p><h3 class=\"wp-block-heading\">Files that can be cached but rarely cached include:<\/h3><ul class=\"wp-block-list\"><li>Pages with dynamic content<\/li>\n\n<li>Ajax\/REST requests if their cache is purged<\/li>\n\n<li>Other code that needs to change less frequently<\/li><\/ul><h3 class=\"wp-block-heading\">Files that are frequently cached and should be cached include:<\/h3><p>Pages with static content or types of content that remain the same for all users and don&#8217;t often change, such as<\/p><ul class=\"wp-block-list\"><li>Static images<\/li>\n\n<li>Logos and assets<\/li>\n\n<li>CSS stylesheets<\/li>\n\n<li>Downloadable files or other content<\/li><\/ul><h3 class=\"wp-block-heading\">Files that should not be cached include:<\/h3><ul class=\"wp-block-list\"><li>Dynamic content, or in simpler terms, personalized data using conditions to be displayed<\/li>\n\n<li>Any sensitive data (such as credit card information)<\/li><\/ul><h2 class=\"wp-block-heading\">Caching with WP Rocket<\/h2><p>WP Rocket is the most beginner-friendly and easiest plugin to quickly improve your WordPress website&#8217;s speed and performance!&nbsp;<\/p><p>Here&#8217;s how it works:<\/p><p>It caches your web pages by creating static HTML files and making them readily available for future visits. In addition, it applies browser caching, requesting the browser to save the frequently used but rarely updated files in its local cache memory.<\/p><p>One of the things which makes it <a href=\"\/blog\/best-caching-plugins-wordpress\/\">the best caching plugin for WordPress<\/a> is that when you install WP Rocket on your WordPress site and activate it, it automatically applies 80% of web performance best practices right away!&nbsp;<\/p><p>Furthermore:<\/p><p>WP Rocket can be set to bypass or store dynamic cache depending on query strings and cookies.<\/p><p>Also, it has a system to help refresh the cache in any timeframe requests to help serve a fresh version of the website.<\/p><p>Page caching, browser caching, and GZIP compression are some of the default features that WP Rocket enables for you. But if you don&#8217;t settle for the standard settings, WP Rocket also includes advanced features such as:<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/docs.wp-rocket.me\/article\/1350-css-minify-combine\"><strong>Minify CSS and JavaScript files<\/strong><\/a><strong> <\/strong>\u2013 removes whitespaces and comments to reduce the file size.<\/li>\n\n<li><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/remove-unused-css\/\"><strong>Remove Unused CSS<\/strong><\/a><strong> <\/strong>\u2013 eliminates render-blocking CSS on your site for faster load time. You can either load CSS asynchronously or remove unused CSS files (the preferred method).<\/li>\n\n<li><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/eliminate-render-blocking-javascript-css\/\"><strong>Load JavaScript deferred<\/strong><\/a> \u2013 eliminates render-blocking JavaScript to improve load time.<\/li>\n\n<li><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/reduce-javascript-execution-time\/\"><strong>Delay JavaScript execution<\/strong><\/a><strong> <\/strong>\u2013 improves performance by delaying loading JavaScript files until the user interacts with the website, i.e., via scroll or click.<\/li>\n\n<li><a href=\"https:\/\/docs.wp-rocket.me\/article\/1312-optimize-google-fonts\"><strong>Optimize Google Fonts<\/strong><\/a><strong> <\/strong>\u2013 combines, preloads, and loads the Google Font file asynchronously (i.e., without render blocking).<\/li><\/ul><p>With all these <a href=\"https:\/\/wp-rocket.me\/features\/\">features<\/a>, you can get a blazing-fast website in the blink of an eye, which eventually results in:<\/p><p><em>Great first impressions, better SEO ranking, &amp; more conversions! \ud83d\ude80<\/em><\/p><p>Most importantly, it helps <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/\">improve the PageSpeed Performance Score and metrics<\/a>, including the <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\">Core Web Vitals grades<\/a>.<\/p><p><strong>P.S: <\/strong>To set up caching in WP Rocket, go to:<\/p><p><strong>Settings &gt; WP Rocket page &gt; <\/strong>and click on the<strong> &#8216;Cache&#8217; <\/strong>tab.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"942\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Cache-tab-using-the-WP-Rocket-plugin.jpg\" alt=\"Cache tab using the WP Rocket plugin\" class=\"wp-image-5094704\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Cache-tab-using-the-WP-Rocket-plugin.jpg 1200w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Cache-tab-using-the-WP-Rocket-plugin-248x195.jpg 248w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Cache-tab-using-the-WP-Rocket-plugin-768x603.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Cache-tab-using-the-WP-Rocket-plugin-76x60.jpg 76w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Cache-tab-using-the-WP-Rocket-plugin-115x90.jpg 115w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\"><em>Cache tab using the WP Rocket plugin<\/em><\/figcaption><\/figure><p>WP Rocket already enables page caching by default, but you can tweak additional cache settings from this page.&nbsp;<\/p><h2 class=\"wp-block-heading\">Wrapping up<\/h2><p>The boost in the performance of your website after implementing caching is simply irresistible. If done right, it can unlock a whole new level of user experience, search engine rankings, and revenue by optimizing your WordPress site for performance.&nbsp;<\/p><p>However, with so many caching options available, it seems scary to understand which one suits your website well.<\/p><p>But now, as you&#8217;re well aware of all the types of caching out there and how they work \u2013 it&#8217;s time to get cached up! <em>(no pun intended)<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>In case you might be questioning yourself: &#8220;I want to cache my WordPress site. What type of caching should I use for it?&#8221; The answer involves many options, depending on the nature of your website and what you want to achieve from it. There are several types of caching, each of which is different from [&hellip;]<\/p>\n","protected":false},"template":"","class_list":["post-5438672","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>Different Types of Caching: Server Cache vs Browser Cache vs Page (Site) Cache<\/title>\n<meta name=\"description\" content=\"There are enough different types of caches to make your head spin. Not to worry! Learn the differences between page (site) cache, browser cache, and server cache.\" \/>\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\/different-types-of-caching\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Different Types of Caching: Server Cache vs Browser Cache vs Page (Site) Cache\" \/>\n<meta property=\"og:description\" content=\"There are enough different types of caches to make your head spin. Not to worry! Learn the differences between page (site) cache, browser cache, and server cache.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/\" \/>\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-07-24T10:05:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.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=\"12 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\/different-types-of-caching\/\",\"url\":\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/\",\"name\":\"Different Types of Caching: Server Cache vs Browser Cache vs Page (Site) Cache\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png\",\"datePublished\":\"2023-04-05T09:09:29+00:00\",\"dateModified\":\"2023-07-24T10:05:24+00:00\",\"description\":\"There are enough different types of caches to make your head spin. Not to worry! Learn the differences between page (site) cache, browser cache, and server cache.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png\",\"width\":1400,\"height\":621,\"caption\":\"Illustration of how server-side caching works - Source: Medium\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#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\":\"Server Cache vs. Browser Cache vs. Site (Page) Cache: What\u2019s the Difference?\"}]},{\"@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":"Different Types of Caching: Server Cache vs Browser Cache vs Page (Site) Cache","description":"There are enough different types of caches to make your head spin. Not to worry! Learn the differences between page (site) cache, browser cache, and server cache.","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\/different-types-of-caching\/","og_locale":"en_US","og_type":"article","og_title":"Different Types of Caching: Server Cache vs Browser Cache vs Page (Site) Cache","og_description":"There are enough different types of caches to make your head spin. Not to worry! Learn the differences between page (site) cache, browser cache, and server cache.","og_url":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_modified_time":"2023-07-24T10:05:24+00:00","og_image":[{"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png"}],"twitter_card":"summary_large_image","twitter_site":"@wp_rocket","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/","url":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/","name":"Different Types of Caching: Server Cache vs Browser Cache vs Page (Site) Cache","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png","datePublished":"2023-04-05T09:09:29+00:00","dateModified":"2023-07-24T10:05:24+00:00","description":"There are enough different types of caches to make your head spin. Not to worry! Learn the differences between page (site) cache, browser cache, and server cache.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/12\/Illustration-of-how-server-side-caching-works.png","width":1400,"height":621,"caption":"Illustration of how server-side caching works - Source: Medium"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/wordpress-cache\/different-types-of-caching\/#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":"Server Cache vs. Browser Cache vs. Site (Page) Cache: What\u2019s the Difference?"}]},{"@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\/5438672"}],"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=5438672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}