Skip to main content

Static Resources with Poor Cache Policy

Priority: Critical

Impact: Negative

What issues it may cause​

  • Increased Network Requests: Without appropriate cache TTL values, resources may need to be fetched from the server each time a user requests them, resulting in more network requests and slower load times.

  • Higher Bandwidth Usage: Fetching resources repeatedly from the server increases bandwidth usage for both the user and the server, potentially leading to higher costs and slower page load times, especially on slow or congested networks.

  • Longer Page Load Times: When resources are not cached or have very short TTL values, the browser must download resources from the server for every page load. This can result in longer page load times and a less responsive user experience.

  • Reduced Efficiency: Constantly fetching resources from the server puts additional strain on server infrastructure and can lead to higher latency and slower page loads. Potential for Traffic Congestion: In scenarios with high traffic or peak usage times, the lack of caching can lead to server overload and potential downtime.

How do you fix it​

  1. HTTP Headers: Set cache TTL values using HTTP headers such as Cache-Control and Expires in server responses.

    • Cache-Control: This header allows you to specify the maximum age (max-age) that a resource can be cached by the browser. For example, Cache-Control: max-age=604800 sets the TTL to one week (604,800 seconds).

    • Expires: This header specifies a date and time when the resource should be considered stale and fetched from the server again. For example, Expires: Wed, 15 Feb 2023 12:00:00 GMT.

  2. Resource Type Considerations: Different types of resources require different cache TTL strategies:

    • Static Resources: Resources like images, fonts, CSS, and JavaScript files that change infrequently should have longer TTL values (e.g., days or weeks) to maximize caching benefits.

    • Dynamic Resources: Resources like APIs or frequently updated data should have shorter TTL values or may not be cached at all.

What is the positive impact​

  • Reduced Network Requests: By allowing resources to be cached and reused, cache TTL minimizes the need for repeated network requests, which can speed up page load times.

  • Faster Page Load Times: Serving resources from the cache is faster than downloading them from the server, especially for users on slow connections or high-latency networks.

  • Lower Bandwidth Usage: Using cached resources reduces bandwidth consumption for both users and servers, which can lead to cost savings and better performance.

  • Consistent Performance: Longer cache TTLs can help improve performance consistency, as cached resources are available locally and less affected by fluctuations in network conditions.

How to fetch the data for this report template​

You will need to run a crawl for report template to generate report. When report has been generated and you have crawl id you can fetch data for the report using the following query:

query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAuditOpportunities {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            wastedKibAvg
            urlCount
            wastedKibSum
            gaPageviewsSum
            savingsScoreSum
          }
        }
      }
    }
  }
}

Try in explorer