Using the Chrome Coverage tab to find unused CSS and JS

preview_player
Показать описание
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.
  1. EWWW Image Optimizer
  2. WordPress
  3. website
  4. performance
Рекомендации по теме
Using the Chrome 0:04:04

Using the Chrome Coverage tab to find unused CSS and JS

Chrome dev tools 0:02:48

Chrome dev tools - Coverage

Removing Unused CSS 0:05:55

Removing Unused CSS & JS with Chrome Coverage Tab

How To Use 0:01:15

How To Use Chrome's Coverage Report

Chrome DevTools for 0:13:18

Chrome DevTools for Performance Engineers - Performance

Chrome Developer Tools 0:00:58

Chrome Developer Tools - Coverage Tab | CheezyCode #shorts

Find Unused JavaScript 0:05:18

Find Unused JavaScript And CSS With The Coverage Tab | Chrome Devtools Part 9 | Celotek

Accessing the Coverage 0:00:24

Accessing the Coverage tool in Chrome Dev Tools

21+ Browser Dev 0:09:26

21+ Browser Dev Tools & Tips You Need To Know

Chrome Dev Tools: 0:02:03

Chrome Dev Tools: Audits Tab

Improving Load Performance 0:13:29

Improving Load Performance - Chrome DevTools 101

Inspect Network Activity 0:09:00

Inspect Network Activity - Chrome DevTools 101

Setting Breakpoint at 0:00:38

Setting Breakpoint at Event Listeners | Debugging with Chrome DevTools

Remove unused javascript 0:01:22

Remove unused javascript and css using chrome devtools coverage

Chrome 79 - 0:03:22

Chrome 79 - What’s New in DevTools

A chrome tool 0:01:00

A chrome tool you should be using. #Shorts

Coverage in Chrome 0:01:52

Coverage in Chrome DevTools of Fiori Development Skill

How To Use 0:00:22

How To Use The Google Chrome Coverage Report For SEO

Chrome DevTools - 1:14:51

Chrome DevTools - Crash Course

Chrome Developer Tools: 0:09:28

Chrome Developer Tools: Elements Tab

What is Computed 0:01:52

What is Computed Tab in Google Chrome Browser | Find CSS style

Chrome Dev Tools: 0:01:44

Chrome Dev Tools: Console Tab

Chrome DevTools For 0:19:07

Chrome DevTools For Marketers - How to get the most out of the elements tab + relevant bonus tab!

Using Tabs In 0:07:38

Using Tabs In Google Chrome

Комментарии
Автор

Maybe it might sound like a stupid question but after this should I go to my theme editor and remove these lines?

panagiotisexplorer
Автор

Hi, it's possible to make a new or export with only useful css?

mlavinb
Автор

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)?

vladioffe
Автор

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?

overparkrice
Автор

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.

edgarlacson
Автор

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.

AhmadZaytoun