Hey friends, let's chat about dealing with unused and render-blocking JavaScript! 🧩
I see this topic popping up frequently in audits and I've been asked how to deal with it in my Tech SEO Help Hours, so here's a quick intro thread on what you can do 🧵 (1/10)
I see this topic popping up frequently in audits and I've been asked how to deal with it in my Tech SEO Help Hours, so here's a quick intro thread on what you can do 🧵 (1/10)
2/10. What's the issue with unused JS? Well:
😴 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
😴 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
3/10. It's basically really detrimental to your performance, Core Web Vital scores, and therefore the general UX of your site, so better tackle it I say!
Let's take a look at a couple of things you can do to improve this issue, or better communicate some causes.
Let's take a look at a couple of things you can do to improve this issue, or better communicate some causes.
4/10. First of all, do a big assessment of your existing plugins. 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 💪
5/10: 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. Here's the status of my pals Brewdog: 
6/10. 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.
7/10. 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.
8/10. 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!).
9/10. I'm using @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*.
10/10. That was the quick chat about handing unused and render-blocking JavaScript! There are many ways of handling this, and it varies for every set-up. I'd love to hear what works for you, and hope this was helpful! #friendlyJS #CWV ❤️
Now, happy Friday! 🍻🥳
Now, happy Friday! 🍻🥳
• • •
Missing some Tweet in this thread? You can try to
force a refresh
