How to Remove Unused JavaScript and CSS from a WordPress website

Having a fast-loading and responsive website is crucial for providing an excellent user experience and improving search engine rankings. One effective way to achieve this is by removing unused JavaScript and CSS files from your WordPress website. In this comprehensive guide, we will walk you through the steps to identify and eliminate unnecessary code, ultimately optimizing your website’s performance.

1. 1. 1. Audit Your Website: Use a website auditing tool or browser developer tools to identify unused JavaScript and CSS files. This will help you determine which files can be safely removed. You may interested to have a look at another post to learn how to identify unused JavaScript and CSS.
      2. Update WordPress and Plugins: Ensure that your WordPress core, theme, and plugins are up to date. Developers often optimize and remove unused code in updates.
      3. Use a Plugin: There are several WordPress plugins available that can help you remove unused JavaScript and CSS. Some popular ones include “Autoptimize,” “WP Asset CleanUp,” “Hummingbird,”and “WP Rocket” etc.
      4. Autoptimize Plugin (Example): Install and activate the “Autoptimize” plugin from the WordPress repository.
      5. Configure Autoptimize Settings: Go to “Settings” > “Autoptimize” in your WordPress dashboard.
         • Check the “Optimize JavaScript Code” and “Optimize CSS Code” options.
         • Optionally, enable the “Also aggregate inline JS” and “Also aggregate inline CSS” options if needed.
      6. Exclude Files (Optional): If you encounter issues with certain scripts or styles, you can exclude them from optimization in the “Exclude Scripts from Autoptimize” and “Exclude CSS from Autoptimize” sections.
      7. Save Changes and Clear Cache: Save your settings and clear any caching plugin or server cache you might be using.
      8. Test Your Website: Thoroughly test your website after enabling Autoptimize or any other optimization plugin to ensure that there are no conflicts or broken functionalities.
      9. Manually Remove Unused Code (Advanced): For more control and if you are comfortable with coding, you can manually remove unused JavaScript and CSS from your theme files or child theme.
         • Create a child theme if you haven’t already (to avoid losing changes during theme updates).
         • Identify unused JavaScript and CSS files in your theme’s header.php, functions.php, or style.css.
         • Safely remove the unused code. Be cautious and back up your files before making any changes.
      10. Use a Content Delivery Network (CDN): If you use a CDN, ensure that it has the option to remove unused JavaScript and CSS from cached files, further optimizing your website’s performance.

    

1. Always remember to back up your website before making significant changes, and test thoroughly after implementing any changes to ensure your website functions correctly. Removing unused code can help improve your site’s loading speed and overall performance, leading to a better user experience and potentially better search engine rankings.

Did you find the article helpful? If you'd like to show your support, consider buying me a coffee. Thank you!