# Pages with Legacy JS

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Performance inefficiencies:</strong> Legacy JavaScript is often less performant than modern alternatives.
    Using outdated methods can lead to slower execution times and increased processing requirements.
  </li>
  <li>
    <strong>Larger payloads:</strong> Older JavaScript practices might involve more verbose syntax or larger polyfills,
    increasing the amount of code that needs to be downloaded and executed.
  </li>
  <li>
    <strong>Compatibility issues:</strong> While legacy code ensures compatibility with older browsers, it can sometimes
    introduce inconsistencies or bugs when interacting with modern web features.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Update codebase:</strong> Refactor your JavaScript to use modern syntax (e.g., ES6+ features) and APIs. This
    can involve replacing <code>var</code> with <code>let</code> or <code>const</code>, using arrow functions, and
    leveraging modern JavaScript features like <code>async/await</code>.
  </li>
  <li>
    <strong>Use transpilers:</strong> Implement tools to convert modern JavaScript into a form compatible with older
    browsers, allowing you to write modern code without sacrificing compatibility.
  </li>
  <li>
    <strong>Optimize third-party libraries:</strong> Ensure that third-party libraries are up to date. Look for
    alternatives if they do not support modern JavaScript features.
  </li>
  <li>
    <strong>Code splitting and tree shaking:</strong> Utilize these techniques to remove unused code and optimize the
    loading of JavaScript modules.
  </li>
</ul>
[Learn more about modern JavaScript.](https://web.dev/articles/publish-modern-javascript)

## What is the positive impact

<ul>
  <li>
    <strong>Improved Performance:</strong> Modern JavaScript is more efficient, leading to faster script execution and
    reduced computational overhead.
  </li>
  <li>
    <strong>Smaller File Sizes:</strong> Updating to modern syntax can reduce the size of JavaScript files, decreasing
    download times and improving page load speeds.
  </li>
  <li>
    <strong>Enhanced User Experience:</strong> Faster execution and loading times result in a more responsive and
    interactive web page.
  </li>
</ul>

## 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:


```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
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"legacy_javascript_failed_audits"}
```