Skip to main content

Pages with Legacy JS

Priority: Critical

Impact: Neutral

What issues it may cause​

  • Performance inefficiencies: Legacy JavaScript is often less performant than modern alternatives. Using outdated methods can lead to slower execution times and increased processing requirements.

  • Larger payloads: Older JavaScript practices might involve more verbose syntax or larger polyfills, increasing the amount of code that needs to be downloaded and executed.

  • Compatibility issues: While legacy code ensures compatibility with older browsers, it can sometimes introduce inconsistencies or bugs when interacting with modern web features.

How do you fix it​

  • Update codebase: Refactor your JavaScript to use modern syntax (e.g., ES6+ features) and APIs. This can involve replacing var with let or const, using arrow functions, and leveraging modern JavaScript features like async/await.

  • Use transpilers: Implement tools to convert modern JavaScript into a form compatible with older browsers, allowing you to write modern code without sacrificing compatibility.

  • Optimize third-party libraries: Ensure that third-party libraries are up to date. Look for alternatives if they do not support modern JavaScript features.

  • Code splitting and tree shaking: Utilize these techniques to remove unused code and optimize the loading of JavaScript modules.

Learn more about modern JavaScript.

What is the positive impact​

  • Improved Performance: Modern JavaScript is more efficient, leading to faster script execution and reduced computational overhead.

  • Smaller File Sizes: Updating to modern syntax can reduce the size of JavaScript files, decreasing download times and improving page load speeds.

  • Enhanced User Experience: Faster execution and loading times result in a more responsive and interactive web page.

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
            savingsKib
            pageviews
            productOfSavingsKibAndPageviews
            itemsCount
            auditResult
          }
        }
      }
    }
  }
}

Try in explorer