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:

Operation: query GetReportStatForCrawl( $crawlId: ObjectID! $reportTemplateCode: String! $after: String ) { getReportStat( input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode} ) { crawlSiteSpeedAudits(after: $after, reportType: Basic) { nodes { url auditId title displayValue savingsKib pageviews productOfSavingsKibAndPageviews itemsCount auditResult } totalCount pageInfo { endCursor hasNextPage } } } }Variables: {"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"legacy_javascript_failed_audits"}
GetReportStatForCrawlTry in Explorer
GraphQL
query GetReportStatForCrawl(
    $crawlId: ObjectID!
    $reportTemplateCode: String!
    $after: String
   ) {
      getReportStat(
        input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
      ) {
        crawlSiteSpeedAudits(after: $after, reportType: Basic) {
          nodes {
            url
            auditId
            title
            displayValue
            savingsKib
            pageviews
            productOfSavingsKibAndPageviews
            itemsCount
            auditResult
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }