{"id":19232,"date":"2024-02-05T07:21:36","date_gmt":"2024-02-05T07:21:36","guid":{"rendered":"https:\/\/www.accuwebhosting.com\/blog\/?p=19232"},"modified":"2024-03-26T07:38:06","modified_gmt":"2024-03-26T07:38:06","slug":"how-to-serve-assets-with-an-efficient-cache-policy-on-wordpress","status":"publish","type":"post","link":"https:\/\/www.accuwebhosting.com\/blog\/how-to-serve-assets-with-an-efficient-cache-policy-on-wordpress\/","title":{"rendered":"How to Serve Assets With an Efficient Cache Policy on WordPress"},"content":{"rendered":"
<\/div>

\"\"<\/a><\/p>

Do you want to know how to improve the cache policy on WordPress? You are at the right place.<\/p>

Check how you’re handling assets like images and videos. Optimize them for the web and consider using a caching plugin or a CDN.<\/p>

Caching is crucial for a fast and smooth website. It saves images, CSS, and JavaScript files in the browser, which speeds up page loading times<\/strong> and improves the user experience.<\/p>

For the Managed WordPress Hosting<\/a>, consider hosting providers who offer efficient cache policies for serving assets. Additionally, learn how to implement an efficient cache policy on WordPress to maximize the benefits of your hosting service.<\/p>

Note:<\/strong> Explore our guide on How to clear the cache in WordPress<\/a><\/p>

What is Caching?<\/h2>

Caching is a method for temporarily storing data or files, enabling faster retrieval for subsequent requests of the same data.<\/p>

Caching can occur at different levels, including browser, server-side, and CDN caching<\/strong>.<\/p>

Two types of caching are commonly used: page caching and static caching.<\/p>

Page Caching vs. Static Asset Caching<\/h3>

Page caching stores the webpage, while static asset caching preserves individual files like images and stylesheets.<\/p>

This approach suits dynamic sites with occasional content updates, ensuring faster load times and reduced server bandwidth consumption across all websites.<\/p>

Explore the table below for a comprehensive comparison between page caching and static asset caching:<\/p>

\n\n\n\n\n\n\n\n
Page Caching<\/b><\/td>\nStatic Asset Caching<\/b><\/td>\n<\/tr>\n
Provides dynamic content that doesn’t change frequently<\/td>\nReduces load times and conserves bandwidth for static website content.<\/td>\n<\/tr>\n
Updated less frequently based on content changes or expiration settings.<\/td>\nUpdated based on file modifications or according to cache headers.<\/td>\n<\/tr>\n
It stores complete web pages.<\/td>\nIt caches images, stylesheets, scripts, fonts, and other static files.<\/td>\n<\/tr>\n
It’s controlled by headers such as Cache-Control and Expires.<\/td>\nIt is managed through headers and file versioning.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>
<\/div>

What Is a Caching Policy?<\/h3>

A caching policy sets rules and guides browsers and intermediate caches on how long to store a resource in caches. It can reduce server load, bandwidth usage, and load times.<\/p>

\n

Unleash Blazing Speeds with WordPress Hosting!<\/h3>\n
\n

Enhance your website performance with Apache,PHP X-Ray,
\nand CloudLinux Shared Pro, delivering up to a 100% faster experience<\/p>\n<\/div>\n

Order Now <\/a><\/div>\n<\/div>

How Are UX and SEO Affected by a Cache Policy?<\/h3>

An effective caching policy directly impacts User Experience<\/strong> (UX) and Search Engine Optimization<\/strong> (SEO).<\/p>

Proper caching leads to faster website loading times, enhancing user experience by providing a smoother and more responsive browsing experience. It is essential as users will likely leave a site if it takes too long to load.<\/p>

Regarding SEO, Faster website speeds improve Google SEO rankings<\/strong> and increase visibility and traffic.<\/p>

How to Check if Browser Caching Is Enabled on Your Site<\/h3>

Utilizing browser caching for your WordPress site can enhance its performance and address static asset issues. Use browser developer tools or online tools such as Google’s PageSpeed Insights<\/strong> to verify whether your website uses browser caching.<\/p>

    \n
  1. Open your browser.<\/li>\n
  2. Right-click and select Inspect<\/b>.<\/li>\n
  3. Navigate to the Network<\/b> tab.<\/li>\n
  4. Choose any File <\/b>and check whether the Cache-Control and Expires headers are correctly configured.<\/li>\n<\/ol>

    \"\"<\/a><\/p>

    Identify the issue of “Serve Static Assets With an Efficient Cache Policy”<\/h3>

    Issue<\/strong>: “Serve Assets With an Efficient Cache Policy” – static resources without proper caching lead to longer load times.<\/p>

    To pinpoint the problem, it’s essential to understand two key aspects:<\/p>

      \n
    1. The root cause of the issue.<\/li>\n
    2. How does PageSpeed Insights interpret this issue?<\/li>\n<\/ol>

      1. The root cause of the issue<\/strong<\/strong><\/h4>

      Lack of Cache Policy: <\/b>Missing cache-control headers on website files like images, JavaScript, or CSS, leads to browsers not caching these resources, resulting in increased load times for returning visitors.<\/p>

      Limited Cache Duration: <\/b>Short cache durations can cause issues like no caching. Set a longer cache duration for static assets that don’t change frequently to maximize performance benefits.<\/p>

      Not using Browser Caching: <\/b>When browser caching is not employed, users’ browsers won’t store copies of static assets, leading to slower website performance upon subsequent visits.<\/p>

      Common Misconfiguration: <\/b>This includes issues such as incorrect cache-control headers, misconfigured server settings, or problems with the website’s .htaccess file (in the case of Apache servers).<\/p>

      2. How Does PageSpeed Insights Interpret This Issue?<\/strong><\/h4>

      How Google PageSpeed insights<\/a> interpret the issue.<\/p>

        \n
      1. The first step involves examining headers of static assets delivered from your website.<\/li>\n
      2. It evaluates the cache control and expires headers to determine how long browsers cache each asset.<\/li>\n
      3. If the tool identifies short cache TTL (Time To Live) or no caching for these resources, it signals the issue and provides suggestions for improvement.<\/li>\n
      4. By identifying the root cause, you can strategically address and resolve the problem.<\/li>\n<\/ol>

        Solutions for Serving Assets With Efficient Cache Policies<\/b><\/h3>

        There are two approaches.<\/p>

          \n
        1. Manual approach<\/strong><\/li>\n
        2. Plugin approach<\/strong><\/li>\n<\/ol>

          Using a Manual Approach<\/strong><\/h3>

          Step 1: Identify the static assets<\/h4>

          To begin, identify which static assets are being served without using a cache policy or have an ineffective one by following the steps below:<\/p>

            \n
          1. Go to Google Pagespeed Insights.<\/li>\n
          2. Enter URL.<\/li>\n
          3. In the Diagnostics<\/b> section, you’ll find the resources categorized under ‘serve static assets with efficient cache policy.’<\/strong><\/li>\n
          4. Expand the analysis to identify the static assets. Upon completing the test, I discovered ten resources.<\/li>\n<\/ol>

            \"\"<\/a><\/p>

            Step 2: Configure HTTP headers<\/b><\/h4>

            Configuring your server with specific HTTP headers is necessary to instruct the browser on how long it should cache static assets. The primary headers to focus on are Cache-Control and, optionally, Expires.<\/p>

            Customize the HTTP Headers based on the different servers.<\/p>

            For Apache servers<\/strong>, include the following lines in your .htaccess file:<\/p>

            <IfModule mod_expires.c><\/i><\/p>

            ExpiresActive On<\/i><\/p>

            # Images<\/i><\/p>

            ExpiresByType image\/jpeg “access plus 1 year”<\/i><\/p>

            ExpiresByType image\/png “access plus 1 year”<\/i><\/p>

            ExpiresByType image\/gif “access plus 1 year”<\/i><\/p>

            ExpiresByType image\/webp “access plus 1 year”<\/i><\/p>

            ExpiresByType image\/svg+xml “access plus 1 year”<\/i><\/p>

            # Fonts<\/i><\/p>

            ExpiresByType font\/ttf “access plus 1 year”<\/i><\/p>

            ExpiresByType font\/woff “access plus 1 year”<\/i><\/p>

            ExpiresByType font\/woff2 “access plus 1 year”<\/i><\/p>

            # CSS, JavaScript<\/i><\/p>

            ExpiresByType text\/css “access plus 1 month”<\/i><\/p>

            ExpiresByType application\/javascript “access plus 1 month”<\/i><\/p>

            # Others<\/i><\/p>

            ExpiresDefault “access plus 2 days”<\/i><\/p>

            <\/IfModule><\/i><\/p>

            If your server is running Nginx<\/strong>, add the following lines to your server block configuration:<\/p>

            location ~* .(jpg|jpeg|png|gif|webp|svg|ttf|woff|woff2|css|js)$ {<\/i><\/p>

            expires 1y;<\/i><\/p>

            add_header Cache-Control “public, max-age=31536000, immutable”;<\/i><\/p>

            }<\/i><\/p>

            location ~* .(zip|pdf)$ {<\/i><\/p>

            expires 7d;<\/i><\/p>

            add_header Cache-Control “public, max-age=604800”;<\/i><\/p>

            }<\/i><\/p>

            Step 3: Test the Configuration<\/b><\/h4>

            After modifying the server configuration, it is recommended to clear the server’s cache (if applicable) and assess the configuration through testing by<\/p>

              \n
            1. Open your website using a web browser.<\/li>\n
            2. Open the browser’s Developer Tools (right-click > Inspect<\/b>).<\/li>\n
            3. Navigate to the Network<\/b> tab and choose Headers<\/b>.<\/li>\n
            4. Refresh the page.<\/li>\n
            5. Select a static asset within the Network tab and inspect the Cache-Control <\/strong>header in the headers section.<\/li>\n<\/ol>

              \"\"<\/a><\/p>

              Step 4: Re-run Performance Tests<\/b><\/h4>

              Use tools like Google PageSpeed Insights, Lighthouse, or WebPageTes<\/strong>t again to confirm the problem’s resolution and assess any improvements in the performance score.<\/p>

              \"\"<\/a><\/p>

              Using Plugin Method<\/h3>

              The simplest method to implement browser caching on a WordPress site is through a plugin. Numerous caching plugins<\/strong> are available for this purpose.<\/p>

              1. W3 Total cache<\/b><\/h4>