Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Website Optimization Chrome DevTools Basics The Audits Panel

shareyourpeace
shareyourpeace
3,244 Points
Posted by shareyourpeace
shareyourpeace
3,244 Points

When we run the audit and we receive info about unused css, is this specific to only that page or to the entire site ?

It seems that it only evaluates the css on the loaded page. How do we optimize the css ? We cannot just remove the css because it may be used on another page within the site. Can someone please explain the strategy. Thanks.

4 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Yes, thanks for the clarification on your question. In looking at the Chrome DevTools documentation about Audits in their overview section they state:

"The Audit panel can analyze a page as it loads. Then provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness..."

In terms of auditing an entire site, that would take a bit more doing than a traditional web page request, there are entire companies who do site analysis. Think about doing an audit over an entire site the size of, say microsoft.com. That would create a huge workload for your browser and the DevTools. Loading a single page and analyzing it is much different, and manageable.

In terms of your original question about CSS, think of how many rules a site wide CSS file would have. Buttons, input forms, data outputted, etc. You may not need all the rules on every page, and those unused rules will show up in the DevTools Remove unused CSS rules category, but from a site-wide aspect deleting all of those rules may not be a great idea.. This is where many of the techniques I mentioned before come into play.

Does that clear anything up?

Ken

Marcus Parsons
Marcus Parsons
15,719 Points

Marked as best answer

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

There are several practices one can follow in general to produce optimized and more efficient CSS. Here are a couple of steps:

  1. Minify/compress CSS code.
  2. Prune frameworks and resets. Example: if you are not going to use a pre tag on your site, take it out of the CSS.
  3. CSS at the top of the file, JS at the bottom
  4. Code organization - helps with code maintenance as well.

There are several other things that tend to slow down CSS like CSS Hacks, whitespace, image management, etc.

Hope it helps,

Ken

shareyourpeace
shareyourpeace
3,244 Points
shareyourpeace
shareyourpeace
3,244 Points

Hi. Thank you for the feedback.

I want to rephrase my question. The answer is probably obvious and clear. My question is probably not worth asking but I want to be certain.

If we run the audit.... From Chrome Devtools, Which evaluates the site performance, Does this audit Include Every aspect/page of the entire site.

I believe that it does and that would make sense. I just want to make certain that it is Not Just evaluating the Page that I launch the audit from.

Does it evaluate the current page or the entire site ?

Does this question make sense ?

Michael Plemmons
Michael Plemmons
9,393 Points
Michael Plemmons
Michael Plemmons
9,393 Points

I'm wondering the same, if it checks the whole website or just the current page on the website.

Efren Parra
Efren Parra
14,457 Points
Efren Parra
Efren Parra
14,457 Points

i think , it checks just a sigle page , not the entire web site pages that are allocated in the host.

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

To answer the question, it's both... but mostly for the specific web page that's being loaded.

Ultimately, it depends upon what aspect of the audit that you're referring to. For example, if you're getting a specify image dimensions tip for a navigation bar picture that appears on every page, this would apply to the site as a whole - since that image would appear on every page.

For unused CSS rules, that would apply to the page at hand.