Home Page Performance Optimization

CMS & WordPress
1

I have a wordpress website where WP-Rocekt is already configured. But when I check the homepage’s performance in google page insight , it says remove unused CSS and use Deferred Javascript. Both of these options are already checked in WP-Rocket, how can I remove unused CSS manually?

3 Likes
2

If WP Rocket is configured correctly and you’re still seeing recommendations to remove unused CSS and defer JavaScript in Google PageSpeed Insights, you might need to take a few additional steps to address these issues manually. Here’s how you can do it:

  1. Identify Unused CSS: Use browser developer tools (like Chrome DevTools) to identify unused CSS. Go to the “Coverage” tab to see which styles are not being used on your homepage.
  2. Remove Unused CSS Manually:
  • Extract the necessary CSS that your site requires. You can do this by checking the critical CSS for above-the-fold content and keeping that in your main stylesheet.
  • Consider using a tool like PurgeCSS or UnCSS, which can help automate the process of removing unused styles from your CSS files.
  1. Inline Critical CSS: For improved loading speed, consider inlining critical CSS directly in the <head> of your HTML to ensure that above-the-fold content loads quickly.
  2. Defer JavaScript: While you have the option enabled in WP Rocket, ensure that it’s applied to all relevant scripts. You can manually add the defer attribute to script tags in your theme or use a plugin like Asset Cleanup to manage script loading.
  3. Test Again: After making these changes, retest your homepage in Google PageSpeed Insights to see if the recommendations are resolved.

By following these steps, you should be able to effectively remove unused CSS and defer JavaScript, improving your site’s performance.

2 Likes
3

thanks

6

I was having the same issue with my website but when i clicked on deferred JavaScript load, it solved the problem

9

If Google PageSpeed Insights flags unused CSS despite WP Rocket’s settings, use Chrome DevTools’ “Coverage” tab to identify unused styles. Remove them manually by editing your theme’s CSS file or creating a custom stylesheet, ensuring no essential styles are removed. Test changes across devices to maintain functionality and performance.