Remove unused JavaScript and CSS .

[nareshsinghankit1]

This is a common issue , that affect the whole performance in desktop check so ,you can understand where the unused css and javascript uses in the code. thanks

How to detect unused CSS
The Coverage tab of Chrome DevTools can help you discover critical and uncritical CSS. See View used and unused CSS with the Coverage tab.

Chrome DevTools: Coverage tab

[ibro9113]

Removing unused JavaScript and CSS can optimize your website by reducing page load times and improving performance. Here's a detailed guide to do it effectively:

1. Analyze Your Website
   a. Use Developer Tools:
   Open your website in Google Chrome.
   Press F12 to open DevTools, then go to the "Coverage" tab under Performance.
   Reload the page and analyze the output. It will show the percentage of unused JavaScript and CSS.
   b. Use Online Tools:
   Tools like Google PageSpeed Insights or GTmetrix highlight unused CSS and JavaScript.
   For deeper analysis, try Lighthouse.
2. Identify Unused Resources
   a. Third-Party Libraries:
   Libraries like Bootstrap or jQuery might include more features than you use. Identify specific components or plugins.
   b. Custom Code:
   Check your own JavaScript and CSS files for redundant or obsolete code.
3. Remove Unused CSS
   a. PurgeCSS:
   Install PurgeCSS via npm:
   bash

npm install @fullhuman/postcss-purgecss --save-dev
Integrate it with your build tools (e.g., Webpack, PostCSS).
Example Configuration:
javascript
Copy code
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src//*.html', './src//*.js'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
plugins: [
purgecss
]
};
b. Online Tools:
Use UnusedCSS to scan your site and generate optimized stylesheets.
c. Manually Prune CSS:
If your CSS is small, manually remove unused rules by referencing the "Coverage" report in DevTools.
4. Remove Unused JavaScript
a. Tree Shaking:
Use a module bundler like Webpack or Rollup. Ensure your JavaScript is written in ES6 modules to allow dead code elimination.
Example Webpack Configuration:
javascript
Copy code
module.exports = {
optimization: {
usedExports: true
}
};
b. Dynamic Imports:
Load JavaScript only when needed:
javascript
Copy code
import('./module.js').then(module => {
module.default();
});
c. Audit Third-Party Scripts:
Remove unnecessary third-party scripts or replace them with lighter alternatives.
5. Lazy Load Resources
a. Lazy Load JavaScript:
Use async or defer for non-critical scripts.
html

<script src="script.js" async></script> <script src="script.js" defer></script>

b. Lazy Load CSS:
Use media attributes or dynamically load CSS:
javascript

let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);
6. Automate the Process
a. Tools & Frameworks:
Use frameworks like Next.js, Gatsby, or Hugo that optimize CSS and JavaScript out of the box.
Integrate tools like PurifyCSS or UnCSS:
bash

npm install purify-css
purifycss src//*.css src//*.html --min --out purified.css
7. Test and Monitor
After removing unused JavaScript and CSS, retest your website with tools like Lighthouse and GTmetrix.
Regularly monitor performance during development to prevent unused code from accumulating.