Skip to main content

Long Execution Time JS Files

Priority: Critical

Impact: Negative

What issues it may cause​

  • Network cost: More data means longer download times.

  • Parse and compile cost: JavaScript is parsed and compiled on the main thread. When the main thread is busy, the page can't handle user interactions.

  • Execution cost: JavaScript is executed on the main thread. If your page runs excessive code before it's needed, it can delay the Time To Interactive, which is a key metric for how users perceive your page speed.

  • Memory cost: If your JavaScript retains numerous references, it can use up a lot of memory. High memory consumption can make pages feel sluggish or unresponsive. Memory leaks can lead to the page freezing entirely.

How do you fix it​

  • Minifying and compressing JavaScript files to reduce their size and improve loading times.
  • Deferring non-critical JavaScript so that only essential scripts are executed during initial page load.
  • Lazy loading resources to only execute scripts when they are needed.
  • Optimizing JavaScript code to reduce unnecessary computations and improve performance.
  • Using code splitting to load only the code necessary for the current page or interaction.

Learn more about how to reduce JavaScript execution time.

What is the positive impact​

  • Faster Time to Interactive: Reducing bootup time means the page becomes interactive more quickly, allowing users to start engaging with the content sooner.

  • Improved User Experience: Faster bootup times lead to smoother interactions and a more responsive website, resulting in a better experience for users.

  • Reduced CPU Usage: Optimized bootup time minimizes the amount of CPU resources used during JavaScript execution, which can improve performance, especially on lower-end devices.

  • Lower Memory Consumption: By improving bootup time, you can reduce memory usage, preventing slowdowns and crashes on devices with limited memory capacity.

  • Higher User Retention and Engagement: Faster bootup times lead to more satisfying user interactions, encouraging users to stay on the page longer and engage more with the website's content.

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
            wastedSecsAvg
            urlCount
            wastedSecsSum
            gaPageviewsSum
            savingsScoreSum
          }
        }
      }
    }
  }
}

Try in explorer