Learn how to remove unused CSS in WordPress without a plugin. Our WordPress Support team is here to help you with your questions and concerns.
How to Remove Unused CSS in WordPress Without a Plugin
Did you know unused CSS can negatively impact our WordPress website’s performance, leading to slower load times and reduced scores on tools like Google PageSpeed Insights?
By removing unused CSS, we can enhance your site’s speed, user experience, and search engine rankings.
If you are still on the fence about removing unused CSS, take a look at how they can cause problems:
- Unused CSS adds unnecessary bulk to our website’s files, slowing download times.
- Larger files take longer to download and process, impacting the user experience.
- Search engines prioritize fast-loading websites, so unused CSS can hurt our SEO.
Today, we will quickly examine how to manually remove unused CSS.
An Overview:
- Analyze CSS Usage
- How to Manually Remove Unused CSS
- Step 1: Create a Custom CSS File
- Step 2: Enqueue the New CSS File
- Step 3: Minify CSS
- Step 4: Inline Critical CSS
- Step 5: Defer Non-Critical CSS
- Step 6: Testing and Monitoring
Analyze CSS Usage
Before removing unused CSS, identify which styles are unnecessary using these tools:
- DevTools:
Use the “Coverage” tab in DevTools to see which CSS rules are unused.
- Google PageSpeed Insights:
It provides recommendations and highlights unused CSS.
- PurgeCSS:
It is a Node.js tool that scans our HTML and CSS to pinpoint unused styles.
How to Manually Remove Unused CSS
Step 1: Create a Custom CSS File
- First, open the theme’s `style.css` file (found under `wp-content/themes/your-theme-name/style.css`).
- Then, take a backup of the file before making changes.
- Copy only the essential CSS rules needed for our layout and design into a new file, e.g., `style.min.css`.
Step 2: Enqueue the New CSS File
Now, it is time to edit our `functions.php` file to replace the original stylesheet with the optimized version:
function optimize_css() {
// Dequeue the original style
wp_dequeue_style('theme-style');
// Enqueue the optimized CSS file
wp_enqueue_style('optimized-style', get_template_directory_uri() . '/style.min.css');
}
add_action('wp_enqueue_scripts', 'optimize_css', 20);
Remember to replace `theme-style` with the handle of our theme’s CSS file.
Step 3: Minify CSS
Next, minify the optimized CSS file to reduce its size by removing whitespace, comments, and unnecessary characters. We can use tools like CSS Minifier or Minify for this purpose.
Step 4: Inline Critical CSS
Furthermore, loading critical CSS inline can speed up above-the-fold content by prioritizing essential CSS.
- First, identify critical CSS using tools like Chrome DevTools or PurgeCSS.
- Then, add the critical CSS inline in our theme’s `header.php` file within the `<head>` section.
Step 5: Defer Non-Critical CSS
We can defer the loading of non-critical CSS to prioritize essential styles with this code:
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
Step 6: Testing and Monitoring
Follow these steps after optimizing the CSS:
- Test the website using tools like Google PageSpeed Insights, GTMetrix, or Lighthouse.
- Verify that all elements display correctly across devices and browsers.
- Monitor the site’s performance and make adjustments as needed.
[Need assistance with a different issue? Our team is available 24/7.]
Conclusion
In brief, our Support Experts demonstrated how to manually optimize a WordPress site by removing unused CSS.
0 Comments