⚡ Every Web Developer should know how to find unused code in their application
A lot of unused code can slow down your website. It is blocking the main thread with parsing, compiling, and executing the code.
👇 Learn how to find unused code in seconds
A lot of unused code can slow down your website. It is blocking the main thread with parsing, compiling, and executing the code.
👇 Learn how to find unused code in seconds
1️⃣ Using chrome dev tools
Chrome dev tools have a coverage tab that can reveal unused CSS. You can access this tab by:
- Open Dev Tools
- STRG+ Shift + P
- Searching "Coverage"
- Select "Start instrumenting coverage and reload the page"
👇
Chrome dev tools have a coverage tab that can reveal unused CSS. You can access this tab by:
- Open Dev Tools
- STRG+ Shift + P
- Searching "Coverage"
- Select "Start instrumenting coverage and reload the page"
👇
This does open a new tab in Chrome and displays all the files that may include unused code.
You can already learn a lot from these files alone, as in our example, there are fonts loaded that are never used. Easy to clean up.
👇
You can already learn a lot from these files alone, as in our example, there are fonts loaded that are never used. Easy to clean up.
👇
Clicking one of these source URLs will open up these files in your Chrome Dev Tools and highlight line-by-line if they are unused or not.
For CSS, this mostly checks whether the class is used. Logical usage of properties that may are inheriting is not checked!
👇
For CSS, this mostly checks whether the class is used. Logical usage of properties that may are inheriting is not checked!
👇
🔴 Slow down when checking these files! Not everything is secure to be deleted there.
It does check exactly the current state in your browser and nothing more. CSS that is applied to dynamic content may be marked as unused when it is not.
👇
It does check exactly the current state in your browser and nothing more. CSS that is applied to dynamic content may be marked as unused when it is not.
👇
If you start toggle these states and dynamic content, the coverage will update as soon as these classes are used.
An undeniable example is a light/dark mode.
It could also be some popups, dialogs, content being revealed with javascript, etc.
👇
An undeniable example is a light/dark mode.
It could also be some popups, dialogs, content being revealed with javascript, etc.
👇
Not every unused content can be avoided! So do not expect to get 100% used code straight away.
Usually, using third-party libraries will bring up many unused lines code, as you do not use all their functionality. Being aware of it is already a good point when evaluating libs.
Usually, using third-party libraries will bring up many unused lines code, as you do not use all their functionality. Being aware of it is already a good point when evaluating libs.
2️⃣ CI tools
There are 3 well-known packages to remove your unused CSS while building a page:
- PurifyCSS: github.com/purifycss/puri…
- PurgeCSS: purgecss.com
- uncss: github.com/uncss/uncss
With a CI, you could automate the whole process of finding unused code 🙌
There are 3 well-known packages to remove your unused CSS while building a page:
- PurifyCSS: github.com/purifycss/puri…
- PurgeCSS: purgecss.com
- uncss: github.com/uncss/uncss
With a CI, you could automate the whole process of finding unused code 🙌
This is the first thread breaking down some methods to boost your website's performance with ease and no hassle. 🙌
Tomorrow I will post another thread with more insights into defining critical CSS and how to defer loading non-critical CSS. ⚡
Tomorrow I will post another thread with more insights into defining critical CSS and how to defer loading non-critical CSS. ⚡
✅ Done
If you found this useful, consider following me @michaelketzer and retweet the first tweet! 🙏
Did I miss something? Please let me know 🙏
If you found this useful, consider following me @michaelketzer and retweet the first tweet! 🙏
Did I miss something? Please let me know 🙏
• • •
Missing some Tweet in this thread? You can try to
force a refresh
