How can I find unused images and CSS styles in a website?
*Quick wins*: Use **Chrome DevTools' Coverage tab** to pinpoint unused CSS and JS. For images, **audit with a crawler** like **Screaming Frog** to find unlinked assets.
Example:
// For CSS/JS in Chrome DevTools
1. Open DevTools (F12 or Ctrl+Shift+I on Windows/Linux, Cmd+Opt+I on Mac)
2. Go to the 'Coverage' tab
3. Click 'Start instrumenting coverage and reload page' // As easy as going live on Instagram!
4. Review unused code highlighted in red // Red always means "action needed"!
// For images
1. Use Screaming Frog to crawl site // Yes, it crawls like a spider, not jumps like a frog!
2. Check the 'Internal' tab, filter for 'Images' // Got your own internal image filter now!
3. Scan for images without a source page under 'Inlinks' // Lonely images raise their hands here!
More tools for uncovering unused assets
Automation: Scripts to rescue!
Consider setting up a script for regular site scanning. This ensures consistent monitoring for changes, detection of unused assets, and generation of useful reports.
Example scripting flow with sed, awk, grep:
- Process server logs to identify accessed resources
- Use
diffto compare with site directory resources - Highlight discrepancies, identifying unused images or styles // Progressing from being a code ninja to a whitehat!
Beyond Chrome: Widen your toolbox
Firefox Developer Tools offer similar features to Chrome DevTools. For those immersed in the Adobe ecosystem, try Dreamweaver or Golive to dust off orphaned assets.
Using Adobe Dreamweaver:
- Choose 'Site' > 'Advanced' > 'Remove Unused CSS' // Like blowing off the dust!
- Spot images not linked via 'orphaned files' // Orphans no more!
Bring in the third-party cavalry
Check out tools like PurifyCSS or online services such as Unused-CSS and UnCSS Online that can analyze your webpages and trim off unused CSS selectors.
Using PurifyCSS:
- Install via
npm install -g purify-css// As pure as just-out-of-the-box iPhone! - Execute on your files:
purifycss ./path/to/your/css/files/*.css// Feel the cleanse!
Tweaking Performance: More than cleaning
Optimize caching and load times
Implement effective caching strategies. Store frequently accessed files in the browser cache to improve load times. Use Cache-Control headers to determine how long these files are remembered.
Prune Third-party libraries
Analyzing third-party libraries you’re using could be enlightening. Check if you’re using an entire library for just a couple of features. Tools like Webpack's 'tree shaking' can help remove unused code from these libraries.
Checks in Continuous Integration (CI)
Maintain code and asset cleanliness by including unused resource checks as part of your CI pipeline. This prevents unused code or assets from sneaking into production.
Was this article helpful?