Skip to main content

Legacy JS Resources

Priority: Critical

Impact: Negative

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 GetReportStatForCrawl(
    $crawlId: ObjectID!
    $reportTemplateCode: String!
    $after: String
   ) {
      getReportStat(
        input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
      ) {
        crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
          nodes {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            wastedKibAvg
            urlCount
            wastedKibSum
            gaPageviewsSum
            savingsScoreSum
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }

Try in explorer