Once this is enabled, you can use this feature on any page (or group of pages) you want. Here, enable the ‘Coverage support’ option. There should now be an ‘Experiments’ tab.Now, open up Dev Tools, and go to ‘Settings’.Go to chrome://flags in Chrome, and make sure ‘Developer Tool Experiments’ is enabled (this may require a browser relaunch). First, in the current version of Chrome (v 58.0.x), this tool is still technically an ‘experiment’, so you’ll need to enable it.Code Coverage in Dev ToolsĪlthough there are command line tools that can help lint your JS and CSS (like the unCSS node module, for instance), today I’ll be focusing on a handy tool baked into Chrome Dev Tools that can give you a quick overview of which files may be good candidates for pruning. Because although minifying and compressing are great, if we’re compressing unnecessary data, we still end up behind where we’d be if we didn’t send it in the first place.īut how do we know what’s actually necessary and what’s not? Today we’ll look at a quick way to see how much of the CSS and JS files on a page are actually being used, and how much might be able to be removed. But even more basic than these techniques is paring down what we even put in these files to start with - sending only those elements (and files) that are actually needed. Some popular ways optimizing these files include concatenating, minifying, and compressing them. So how do you reduce the size of these files? ![]() The CSS and JavaScript files used for a site, for instance, can grow fairly large now days, especially if 3rd party framework are involved. Images are often an early target for optimization, but other files - like those used for HTML, CSS, and JavaScript - can provide plenty of room for improvement. One of the fundamental ways of improving webpage performance is to reduce the size of the files that are being sent over the wire.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |