.png?table=block&id=c99d9b71-ee15-4992-af21-b8ab5609b352&cache=v2)
Qayyum RajanQayyum (”Q”) is a serial builder with more than 5 startups to his name with 3 exits. He specializes in shipping products fast, and early with an focus on driving traffic across the marketing funnels
Note: SaaSwrites is a curated growth marketing hub and resource built to help SaaS founders grow their products. We sincerely thank all our experts for their constant value addition to this world.
Updated: 05/24/2022
How to solve your unused JS for SaaS SEO
Izzi Smith shares
What's the issue with unused JS?
- the browser needs time and resources to process the script, with no benefit for the visitor.
- mobile users may have to use extra data when accessing the page
- it's commonplace, as many files or scripts might be bundled together
- It's basically really detrimental to your performance, Core Web Vital scores, and therefore the general UX of your site, so better tackle it!
Let's take a look at a couple of things you can do to improve this issue, or better communicate some causes.
Step 1: Assessment of your existing plugins if you are using Wordpress for your SaaS SEO
Clean up the unused , update the old, and find overlaps to merge. If you have a big team working on the CMS, make everyone provide a case for theirs.
This can be a big win driven by SEO / content teams. Identify unused JS that could be dealt with accordingly. You can do this in Dev Tools. Just head to More Tools > Coverage > & go!
This shows which scripts & CSS files were not critical or were unused during the page load. Of course, some JS is important after the page loads and when users interact with elements. (note: "some").
Choosing the file and visiting the "Source" tab shows you the unused lines of code for review, but your developer can assess this best.
Step 2: For non-critical JS files
(code that's not needed for the page's main functionality.) you can mark the script's URL with "defer" or "async".
Unless there is a specific reason not to, all third-party scripts should be loaded with either defer or async by default.
A good solution could also be bundling & code-splitting. This technique "splits" the code, cleans it up, & creates neat bundles for critical and non-critical code.
Some well-known bundlers are Webpack, Browserify & Rollup (but best handled by web dev specialists!).
Step 3: Heavy Scripts
@Ryte_EN to crawl sites with Lighthouse and then understand the templates with heavy scripts, checking a few manually to uncover what could be optimized (e.g. deferred or bundled/split), and then creating my priority.
This speeds up the analysis *massively*.
Written by
Qayyum Rajan
Qayyum (”Q”) is a serial builder with more than 5 startups to his name with 3 exits. He specializes in shipping products fast, and early with an focus on driving traffic across the marketing funnels
.png?table=block&id=6a82d21d-7ff4-4f80-ada1-3c5892817b99&cache=v2)