Skip to main content

Pages with Third-Party Resources Not Deferred

Priority: Critical

Impact: Neutral

What issues it may cause​

  • Blocking Resources: Third-party scripts can block the main thread, delaying the rendering of the webpage. Since the browser has to download, parse, and execute these scripts before continuing with rendering, this can significantly slow down the initial load time.

  • Delayed Interactivity: Heavy or slow-loading third-party scripts can delay the time it takes for a page to become interactive, frustrating users who have to wait longer to engage with the content.

  • CPU and Memory Usage: Third-party scripts can consume significant CPU and memory resources, especially on lower-powered devices. This can lead to slowdowns and a degraded experience for the user as their device struggles to handle the load.

How do you fix it​

  • Deferring Loading: Use techniques like lazy loading or setting the async or defer attributes for scripts that are not essential for the initial render.

  • Facades: Implement third-party facades to load third-party resources only when necessary, such as when a user scrolls to a certain part of the page or interacts with a specific element.

  • Code Splitting: Split the code to load only essential parts upfront and defer the rest.Learn more about deferring third-parties.

What is the positive impact​

  • Faster Page Load Times: By deferring the loading of non-essential third-party resources, the critical rendering path is shorter, leading to quicker page loads.

  • Improved User Experience: Users can start interacting with the primary content of the page faster, improving their overall experience.

  • Better SEO: Improved load times and user engagement can positively impact search engine rankings.

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 CrawlSiteSpeedAudits {
            url
            auditId
            title
            displayValue
            savingsSecs
            pageviews
            productOfSavingsSecsAndPageviews
            itemsCount
            auditResult
          }
        }
      }
    }
  }
}

Try in explorer