Using VergeCloud Caching Settings To Improve your webiste Performance

VergeCloud Caching Configuration Guide: Optimize Your Website Performance

Caching is the process of temporarily storing web data to improve website performance by reducing delays in content delivery. When caching is enabled in VergeCloud’s CDN service, website data is stored in various cache layers to enhance accessibility, efficiency, and availability.

Glossary

  • Cache Hit: Data served from the CDN cache.
  • Cache Miss: Data served directly from the origin server when it is not in the cache.
  • Cache Level: The configuration defining how much content to cache, with options like no cache, cache without query strings, or cache with query strings.
  • Cache Max Age: The duration for which cached content remains valid before being refreshed.
  • Always Online: A setting that serves cached content to users when the origin server is unavailable.

How Caching Works

When a user requests data that is not available in the CDN cache, the request is forwarded to the origin server. Once the origin server responds, the data is cached at the CDN edge, allowing subsequent requests for the same data to be served from the cache rather than the origin server. This reduces the load on the origin server and speeds up response times. The process is called a cache hit. If a request bypasses the cache and is served directly from the origin server, it’s referred to as a cache miss. Cache revalidation is also possible, depending on the configuration.

Notes
Not all data is cached. Typically, static resources like images, JavaScript (JS), and CSS files are cached. To check whether a resource was served from the cache, you can inspect the x-cache response header in the browser’s developer tools.

Real Usage Scenarios

Consider a typical e-commerce website that serves static assets like product images, stylesheets, and JavaScript files. By enabling caching in VergeCloud, these static resources can be cached at the CDN edge servers. This reduces the load on the origin server and significantly improves the site’s load times for end users. If a customer visits a product page, the images and associated CSS files are quickly loaded from the cache, leading to a smoother experience.

CDN Caching vs. Browser Caching

Unlike browser caching, where you can only control how resources are stored in a user’s browser (with limitations on storage duration and type), CDN caching offers more flexibility. With VergeCloud, the administrator can specify which resources are cached, how they are stored on the CDN servers, and the duration for which they are kept. This results in more consistent performance across all users.

In contrast to browser caching—where first-time visitors or users who have cleared their cache experience delays—CDN caching ensures that content is delivered from the nearest edge server for faster access, regardless of the user's previous interactions with the website.

Step-by-Step Configuration Instructions

  1. Access the Caching Settings

    Log in to your VergeCloud account and navigate to the Caching Settings page. All caching features are configured on this page.

  2. Configure Cache Level Setting

    Select how VergeCloud handles content caching based on your needs:

    • Off: Requests bypass the cache and are sent directly to the origin server.
    • Without QueryString: Caches the same version of content regardless of URL parameters, ensuring that variations in query strings do not create duplicate cache entries.
    • With QueryString: Differentiates cached content based on URL parameters, which is useful for dynamic content that varies with query strings.
  3. Purge Cache

    Manage your cached content by purging outdated files:

    • Purge Individual Files: Efficiently update a specific file without affecting other cached data, minimizing strain on your origin server.
    • Purge Everything: Clears all cached content to forcefully refresh everything from the origin server. Use this option sparingly, as it increases the load on your server.
  4. Enable Additional Caching Features

    Take advantage of the following advanced options to further optimize performance:

    • Cache Max Age: Set the maximum duration for which content is cached before checking for updates from the origin server.
    • Cache of Error Pages: Cache non-200 status code pages to reduce the frequency of requests to the origin server during outages.
    • Maximum Cache Size: Define the maximum size for individual files to be cached, reducing latency for large media files.
    • Browser Cache Duration: Specify how long files remain in the user's browser cache, which can improve load times for returning visitors.
    • Cache Files With Set-Cookie Headers: Enable caching of resources even if they include Set-Cookie headers.

      Normally, CDNs avoid caching pages that include Set-Cookie headers because these cookies often indicate personalized or session-specific data. However, this feature allows you to cache such pages when the core content remains static for all users. It is especially useful when:

      • The content is largely static, and the cookies are used only for tracking or minor personalization.
      • Performance is critical, and caching improves response times without compromising the displayed content.
      • Custom cache rules are in place to ensure that cached content does not mix personalized data between users.

      Use this feature with caution to avoid serving incorrect personalized data.

    • Development Mode: Bypass the cache entirely during testing to see real-time updates from the origin server.
    • Always Online: Ensure your site remains accessible during origin server downtime by serving cached content.
  5. VergeCloud Default Cacheable Extensions

    If you haven’t specified custom cache rules, VergeCloud CDN will automatically cache files with the following extensions:

    ImageVideoAudioCodeDocumentArchiveOther
    gifmpegmidijavascriptmswordx-gzipoctet-stream
    jpegwebmoggx-javascriptpdfjava-archivex-redhat-package-manager
    pngmp4x-m4acssrtfx-msdownloadvnd.android.package-archive
    tiffquicktimex-realaudioplainpostscriptx-font-woffvnd.microsoft.icon
    x-iconx-flvx-vcardepub+zipx-font-ttfvnd
    vnd.microsoft.x-iconx-ms-wmvx-font-woff2wap
    webpx-msvideoAndroid
    x-mngx-m4vx-jng
    x-ms-bmpx-ms-asfwbmp
  6. Page Rules for Caching Pages

    Info
    By default, pages are not cached. To cache your HTML pages, create a Page Rule for specific URLs. For example:

    • For all pages: yourdomain.com/*
    • For a single page: yourdomain.com/about-us/*

    Ensure that your page rules are prioritized correctly to avoid conflicts with other rules.

  7. Testing and Validation

    After configuring your caching settings, verify that they are working correctly:

    • Use your browser’s developer tools to inspect the x-cache response header. A hit indicates that content is served from the cache.
    • You can also use tools like curl or dig to check the cache status.

    For example, run the following curl command to check a resource's cache status:

    curl -I https://example.com/resource

Additional Notes

  • Performance vs. Freshness: Longer cache durations reduce server load but may serve older content. Balance these settings based on your site's content type.
  • File Size Limits: Ensure the Maximum Cache Size is set high enough to store your largest files to optimize load times.
  • Server Load: Features like Development Mode can significantly impact server load during testing. Use with caution.
  • Stale Cache: When using Always Online, users may see outdated content if the origin server is down, but they will still be able to access your site.