Unused JS Resources
Priority: Critical
Impact: Negative
What issues it may cause
When the JavaScript is render-blocking, the browser has to download, parse, compile, and evaluate the script before it can continue with the tasks necessary for rendering the page, which means users have to wait longer for the entire page to load because the browser is downloading and parsing unnecessary code.
Even when the JavaScript is asynchronous (non-render-blocking), it still uses bandwidth that could be used for other resources during the download process, which can impact performance. Transmitting unnecessary code over the network is also inefficient for mobile users with limited data plans.
Loading and parsing unused JavaScript can increase the time it takes for a page to become interactive, delaying the point at which users can start engaging with the page's content.
How do you fix it
- Identify and remove unused JavaScript.
Use Code Splitting to divide JavaScript code into smaller chunks and only load the parts that are necessary for the current page or interaction.
Load JavaScript files asynchronously and only load code when it is needed, reducing the amount of unused code on the initial page load.
Learn more about how to reduce unused JavaScript.
What is the positive impact
Faster Page Load Times: Removing unused JavaScript reduces the amount of data that needs to be downloaded, speeding up page load times.
- Reduced Network Usage: By minimizing unnecessary code, you can reduce network traffic and bandwidth usage.
Lower Memory Consumption: Removing unused code helps keep memory usage low, particularly important on devices with limited memory capacity.
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":"unused_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":"unused_javascript_failed_items"}}' https://api.lumar.io/graphql