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
withlet
orconst
, using arrow functions, and leveraging modern JavaScript features likeasync/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
- Variables
- cURL
query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
getCrawl(id: $crawlId) {
reportsByCode(
input: {
reportTypeCodes: Basic
reportTemplateCodes: [$reportTemplateCode]
}
) {
rows {
nodes {
... on CrawlSiteSpeedAuditOpportunities {
opportunityDigest
element
title
auditId
exampleUrl
wastedKibAvg
urlCount
wastedKibSum
gaPageviewsSum
savingsScoreSum
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"legacy_javascript_failed_items"}
curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"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 wastedKibAvg urlCount wastedKibSum gaPageviewsSum savingsScoreSum } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"legacy_javascript_failed_items"}}' https://api.lumar.io/graphql