No video

Using the Chrome Coverage tab to find unused CSS and JS

  Рет қаралды 15,255

EWWW Image Optimizer

EWWW Image Optimizer

3 жыл бұрын

I'll show you how to get to the Chrome DevTools, where to find the Coverage tab, and how to get some really useful information regarding unused CSS (style sheets) and JS (JavaScript) as well as how to find Critical CSS for various screen sizes.

Пікірлер: 25
@CahyaNugraha-i8v
@CahyaNugraha-i8v 5 күн бұрын
thanks a lot
@bs5744
@bs5744 2 жыл бұрын
it helped me
@biga.design
@biga.design Жыл бұрын
Thank you sir
@vladioffe
@vladioffe 3 жыл бұрын
Hi, do you know if there is a way to export the coverage report but instead of having the bundle file line ranges, get the original file ranges (for example typescript that was compiled to js)?
@EWWWImageOptimizer
@EWWWImageOptimizer 3 жыл бұрын
I'm not aware of any way to do that. Even when you use Chrome's "pretty print" feature, you don't get back to the original un-minified version of the JS resource, since there are often white space differences, and comments that have been removed. So it'd be next to impossible to match things up with the original using any automated tool.
@vladioffe
@vladioffe 3 жыл бұрын
@@EWWWImageOptimizer in dev tools you actually can see the original files coverage
@EWWWImageOptimizer
@EWWWImageOptimizer 3 жыл бұрын
@@vladioffe I'm having a hard time visualizing what you're actually asking then, and either way, I don't have any answers for you, sorry!
@panagiotisexplorer213
@panagiotisexplorer213 Жыл бұрын
Maybe it might sound like a stupid question but after this should I go to my theme editor and remove these lines?
@EWWWImageOptimizer
@EWWWImageOptimizer Жыл бұрын
If you're using a custom theme and those lines aren't used anywhere on the site, sure. Otherwise, theme updates will overwrite your changes, and you certainly have to be careful of removing too much. I mostly would use the coverage tab to find CSS files that are completely unused, and the theme CSS seems unlikely to be one of those.
@mlavinb
@mlavinb 3 жыл бұрын
Hi, it's possible to make a new or export with only useful css?
@EWWWImageOptimizer
@EWWWImageOptimizer 3 жыл бұрын
I'm not aware of any functionality like that within Chrome, and I wouldn't use this tool as a 100% accurate way of detecting unused CSS. For example, if it says a stylesheet is only 43% used, that could be because some of the elements that it affects aren't displayed on the page you're looking at. Or it could be footer CSS that hasn't been "used" yet because you didn't scroll that far. So you can use the coverage tab as a guide, but know that it's not 100% perfect.
@jsskulio
@jsskulio 2 жыл бұрын
Not at the moment, but will probably be a feature in future.
@nassimback
@nassimback 2 жыл бұрын
@@jsskulio it's 2022 and we're still looking for them, i desperately need it for my work
@SilverZero
@SilverZero Жыл бұрын
@@nassimback me tooooo
@edgarlacson
@edgarlacson Жыл бұрын
Hi, thank you for this. But it's kinda incomplete. I wished you continue with the tutorial on what to do with the red ones - if need need to delete them - then I hope you have shown it how to do it. But thanks anyway.
@EWWWImageOptimizer
@EWWWImageOptimizer Жыл бұрын
There's a newer video where I show how to use our SWIS plugin to disable unused assets (red ones): kzfaq.info/get/bejne/Z9amnNOU0baoaKs.html
@overparkrice1425
@overparkrice1425 9 ай бұрын
I went to my most unused css, and i clicked but it don't shows any red mark or blue mark. How can i see my red mark on unused CSS?
@EWWWImageOptimizer
@EWWWImageOptimizer 9 ай бұрын
If your CSS is minified (as it should be), Google apparently broke the coverage functionality, and you'll only see a red or green for one or two lines near the top. I checked it just now, and the Coverage section no longer works the way it used to. If you know how to put your site into SCRIPT_DEBUG mode, you may be able to make your site load un-minified CSS files temporarily, but some plugins/themes won't support that.
@AhmadZaytoun
@AhmadZaytoun 2 жыл бұрын
thanks. what is the benefit of this? after checking the unused css, what can I do? I'm using EWWW and SWIS to optimize my homepage.
@shanebishop959
@shanebishop959 2 жыл бұрын
Then you use the SWIS plugin to disable unused CSS (and JS) files: docs.ewww.io/article/97-disabling-unused-css-and-js
@AhmadZaytoun
@AhmadZaytoun 2 жыл бұрын
@@shanebishop959 thank you.
@edgarlacson
@edgarlacson Жыл бұрын
@@AhmadZaytoun Hi, I cannot see Shane's reply to your comment. Same question here, what to do now on the red CSS and JS? This is video is awesome but incomplete.
@AhmadZaytoun
@AhmadZaytoun Жыл бұрын
@@edgarlacson Sorry. I forgot what he had replied.
@edgarlacson
@edgarlacson Жыл бұрын
@@AhmadZaytoun hi, I found it from other videos. :) thanks for your reply anyway
How to Find Unused CSS Styles with Chrome Dev Tools
7:26
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 15 М.
UnCSS your CSS!  Removing Unused CSS with PostCSS & Parcel
13:08
DesignCourse
Рет қаралды 59 М.
EVOLUTION OF ICE CREAM 😱 #shorts
00:11
Savage Vlogs
Рет қаралды 14 МЛН
Ouch.. 🤕
00:30
Celine & Michiel
Рет қаралды 32 МЛН
IQ Level: 10000
00:10
Younes Zarou
Рет қаралды 13 МЛН
Best Toilet Gadgets and #Hacks you must try!!💩💩
00:49
Poly Holy Yow
Рет қаралды 23 МЛН
Google Chrome Developer Tools Crash Course
51:20
Traversy Media
Рет қаралды 679 М.
CSS Anchor Is The Best New CSS Feature Since Flexbox
15:39
Web Dev Simplified
Рет қаралды 365 М.
Find your biggest website problems quickly with Chrome DevTools
4:36
Chrome for Developers
Рет қаралды 33 М.
How to Speed Up Your WordPress Website (Simple Guide)
14:03
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,1 МЛН
Bulk Optimizing Existing Images
3:36
EWWW Image Optimizer
Рет қаралды 79
10 modern layouts in 1 line of CSS
21:39
Chrome for Developers
Рет қаралды 1,1 МЛН
Chrome dev tools - Coverage
2:48
Jad Joubran
Рет қаралды 12 М.
Top 10 High-Paying Remote Job Skills for Professionals in Their 50s
7:33
EVOLUTION OF ICE CREAM 😱 #shorts
00:11
Savage Vlogs
Рет қаралды 14 МЛН