I have a website and I currently use a very small subset of bootstrap 5.0, and my own CSS file. I also use some jQuery for simple scrolling/form behaviours, and font-awesome for icons.

I run a coverage analysis in chrome dev tools, and reports the following:

I'm not too worried about custom.css, though from a performance standpoint, I'm curious to know why SASS wouldn't tell me which tags are unused & more importantly, how my CSS stands up to performance metrics.

These are the CDNs I pull libraries from
In the head

• cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
• cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css
• ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
• custom.css

At the bottom of the body, not deferred

• cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js

My takeaway questions

1. What are good standards of analysis & reduction of the aforementioned libraries/packages?
2. What are the best ways to gauge and categorize load-performance? (over-usage of CSS, redundancy, nesting, etc..)

Unrelated to this question
There's a bug in the markdown for tables. In the table above, under the library/bundle column, it would report this if I had periods between the library domain levels in the third row (bootstrap.bundle.min.js versus bootstrap bundle min js)

Your post appears to contain code that is not properly formatted as code. Please indent all code >by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, >click the [?] toolbar icon

Who should I report this to?

As always, your help is greatly appreciated.

Cheers!