How can I leverage browser caching?

From what I understand here, "leverage browser caching" is a common warning through some website analysis tools, such as GTmetrix or Google's PageSpeed Insights (although the warning is phrased as "Server static sites with an efficient cache policy" on PageSpeed). This essentially means that your website isn't configured to tell the browser to cache/store certain resources. When resources aren't cached, the browser will download them every time (consuming resources and increasing your page load speed in the process). Just want to make sure we're on the same page so correct me if I'm wrong!

The answer is largely dependent on the web server software you are using, such as Apache or Nginx. Both GTMetrix and Google have some advice on configuring caching policies for the browser (sometimes called HTTP caching):

• GTmetrix: PageSpeed: Leverage Browser Caching
• Web.dev / PageSpeed Insights: Serve static assets with an efficient cache policy
• Prevent unnecessary network requests with the HTTP Cache > Response Headers: Configure your web server

That last resources provides links directly to the documentation for common web servers that discuss configuring HTTP cache for that software. You may need to restart the web server software for the changes to take affect, or perform some other task after editing the appropriate files. If you've already made some of these changes and things still aren't working, it may be helpful to provide specifics on what you've tried and what the result is.

You mentioned that you're also using CloudFlare, which means you can configure caching directly through them. The setting you're looking for is called "Browser Cache Expiration" under the "Caching" tab for your website in CloudFlare. CloudFlare's has a few docs that discuss this:

• Customizing Cloudflare's cache
• Best Practices: Speed up your Site with Custom Caching via Cloudflare Page Rules
• Understanding Origin Cache-Control

I also found a separate website discussing this as well: WP Speed Matters > How to Leverage Browser Caching using Cloudflare in WordPress (I don't believe the instructions are WordPress specific).