How To Minify CSS In WordPress Without Using Plugins

Sharing is caring!

If you want to know how to minify CSS WordPress without plugin?

Why do we want to minify CSS in our WordPress?

Now we are going to see how to minify CSS WordPress without plugin. Why you need to minify CSS for your WordPress website. How it will improve your SEO score.

What Is Minify?

Minify is a state of compressed a web page or website into a smaller size. It can eliminate unnecessary white spaces, characters, and lines in the source of a web page. We can remove useless things in HTML, CSS and JavaScript files.

HTML, CSS, and JavaScript minifying files can improve a website performance slightly better. Search engines are recommending minifying HTML, CSS and JavaScript files for enhancing your WordPress website performance.

If you have small website or blog, then you don’t need to minify your website, and it does not give a significant improvement in your website performances. Because your site is only under 800KB and you have done minify all the source files on your website, and it has compressed into 600KB. Before your website loaded in 3 seconds after you have done minify, it loads just 2.5 seconds.

You achieved only 13% improvement in your website loading speed but it was not a big difference but search engine recommendation of website loading time is under 1.2 seconds. So, these things you don’t to need for a smaller website. But your site is 2 MB of larger size. Then you need to minify to your website source files to remove unnecessary things to your website.

The larger size of websites has the lot of white spaces, lines. So, we need to minify those things to improve our loading time. Your site has loaded much faster then you have ranked higher.

Do you want to know how to minify CSS WordPress without plugin?  Please scroll down to the last section.

What Is CSS And Why Need To Minify?

Cascading Style Sheet is called CSS. Purpose of CSS is giving colors size variations and styles to fonts, heading, and characters in a web page or website. We can change the style of a WordPress website with CSS. CSS codings are style.css in WordPress. We can’t write anything in the style.css file directly on any site.

Before minifying my website, CSS coding took 2000 line, and after minifying CSS it became only 12 number of lines. Minifying CSS is a hard thing, you have done it will make your website loaded much faster in seconds.

Befor Minfy CSS

  • Body {
  • Margin:20px;
  • Padding:20px;
  • Colour: #33333;
  • Background: #f7f7f7f;
  • }
  • H1 {
  • Font-size: 32px;
  • Colour: #423424;
  • Margin-bottom: 10px;
  • }

Minify CSS has looked like below for coding. It removes a lot of line spaces in CSS coding.

After Minify CSS

  • Body {Margin:20px; Padding:20px; Colour: #33333; Background: #f7f7f7f;} H1 {Font-size: 32px; Colour: #423424; Margin bottom: 10px;}

CSS minify is one of a good practice to follow it give a clean result of loading time of a website. It reduces the size and unnecessary things in a source of web page.

Why Do We Need To Minify CSS WordPress Without Plugin?

Plugins are very easy minifying HTML, CSS, and JavaScript files and they designed for that purpose. But minifying plugins are never being developed with lightweight coding. These plugins occupy lot lines to the source page and make a website larger sizes.

WordPress themes are mostly large sized, and a lot of themes are not designed for SEO friendly. Most themes have large number additional characters, lines, white spaces with it.

When we were adding more plugins with these kinds of themes, those are created a lot of lines in HTML, CSS and JavaScript coding. After adding more than ten numbers of plugins, your CSS files have more than 1000 lines.

The problem is we need to reduce those line for loading faster a website. That will make the site load faster and look smaller. Plugins are not very helpful for reducing the line spaces in HTML, CSS, and JavaScript files. So we need to minify CSS without plugins.

Note: If you don’t want minifying HTML, CSS, and JavaScript files, then you need to use Genesis themes. These themes are very lightweight and well-designed for SEO. Genesis themes are pre minified to build, So you don’t have to worry about minifying source files. Use Genesis themes for improving your SEO score and reduce loading times.

Now we are going to see how to minify CSS WordPress without plugin.

How Can We Minify CSS WordPress Without Plugin?

STEP: 1

Go to your WordPress dashboard > Select Appearance > Open Editor.

STEP: 2

Copy all CSS coding in Style.CSS. Just pressing to CTRL + A to select all the CSS code and press CTRL + C to copy all selected CSS code.

STEP: 3

Do not copy or replace theme details

  • /*
    Theme Name: Edu Pro
    Theme URI: https://tutplus.tech/
    Author: StudioPress
    Author URI: https://tutplus.tech/
  • Version: 3.0.2
  • Tags: black, blue, gold, green, orange, purple, red, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, RTL-language-support, sticky-post, theme-options, threaded-comments, translation-ready
  • Template: Genesis
    Template Version: 2.0.0
  • License: GPL-2.0+
    License URI: http://www.opensource.org/licenses/gpl-license.php
    */

Please copy all the above lines of CSS

STEP: 4

In this stage, we are going minify CSS with a third-party website. So we go to CSSminifier.com and paste all select CSS code to left side input box. Then press minify button to minify your CSS code.

STEP: 5

It takes 1 or 2 minutes to minify your CSS code. Then you need to copy all those minified CSS codes press CTRL + C to copy.

STEP: 6

Now head to appearance > editor and replace all those old CSS codes and replace it your minified code.

So just press CTRL + A and Press CTRL + V to implement your WordPress.

Note: Don’t replace theme details like shown below

  • /*
    Theme Name: Edu Pro
    Theme URI: https://tutplus.tech/
    Author: StudioPress
    Author URI: https://tutplus.tech/
  • Version: 3.0.2
  • Tags: black, blue, gold, green, orange, purple, red, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, RTL-language-support, sticky-post, theme-options, threaded-comments, translation-ready
  • Template: Genesis
    Template Version: 2.0.0
  • License: GPL-2.0+
    License URI: http://www.opensource.org/licenses/gpl-license.php
    */

STEP: 7

Click update files button to save your minified CSS. Clear all cache to make CSS work.

Now you have successfully minify CSS WordPress without plugin. We hope this article helps you minified CSS and make our site load much faster. Thank you for reading and if you like our article share with your friends on social media.

Sharing is caring!

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *