How to detect and remove unused CSS and Javascript for site speed?

Shopify Discussion
,

Topic summary

Improving site speed by identifying and removing unused CSS/JavaScript and reducing a large DOM (Document Object Model).

  • Current state: Images have been optimized, but performance remains poor due to reported large DOM size and unused CSS/JS.
  • Key question: How to determine which parts of CSS and JavaScript are actually unused versus necessary for the site.
  • Tool reference: A Chrome DevTools screenshot is provided; the poster asks if the red-highlighted sections indicate unused code and whether it is safe to remove those blocks entirely.

Status: No guidance or solution provided yet; the request is for methods/workflows to reliably detect unused code and decide what can be safely removed. The included DevTools screenshot is central to the question about interpreting “unused” indicators.

Summarized with AI on January 8. AI used: gpt-5.
1

Hi!

I have been working on improving the speed of my website for the past few days. I have implemented image optimization but the speed is still not good due to large dom size and unused CSS and javascript.

How can I figure out which part of code is unused and which is not?

planetjuniorseo_0-1705600659336.png
planetjuniorseo_0-1705600659336.png780×591 46.9 KB

here is a screenshot of google developer tools. Is this red part unused code and should I just remove the above highlighted code with red boundary at the left completely. How to find it and identify which code is useful or not?