Table of Contents
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*.
Â
Â
Â
Â
Â
.png&optimizer=image)