Guide

How to Minify CSS in wordpress Without Plugin

How to Minify CSS Stylesheet of Your Blog
Written by Rachit Singh

CSS or the Cascading Style Sheets is a style sheet language used for describing the look and formatting of a document written in a markup language. ( Source : wikipedia ). If you aren’t yet aware, it is the CSS file of your theme which decides how your theme will look across browsers. The css file is most often named as style.css and is placed in the theme folder. It is the style sheet that decides your Font-family , Font-color , line height, various elements, their colors and placements, behavior etc. You can also bring changes to your WordPress blog by simply making some changes in the style.css file. Although it is not suggested to directly edit the style.css as you might breakdown it completely, so all the developers recommend using the “Edit CSS” option through the jetpack plugin.

style.css

Minify CSS in wordpress Without Plugin

The very first question which would ponder your mind is, “Why Should I minify CSS of my blog ?” The answer to the question is, generally the CSS of your blog contains lots of comments , blank spaces, line breaks and a lot of pretty typing done to make it easy for you to understand and edit the code in future. But all these features increase your page load time and hence decrease your earnings and conversions as well. So, this is why you need to minify your blog’s style sheet.

What Minifying your Style sheet does ?

Minifying your style-sheet removes all the extra stuff out of your style sheet like comments , blank spaces, line breaks and all the pretty typing done in your css. For example the CSS of my blog was about 893 lines earlier, after minifying it became only 4 lines and the web page loaded much more faster. I’ve worked on several websites and tested this scheme on majority of them. I actually got to use this thing when I created a blog for one of my clients and he wanted the page to load faster. After trying various things including optimizing images, database optimization and using a CDN, I thought to minify the style sheet.

After minifying the stylesheet, the page loaded much faster, although it was hard after then to edit the stylesheet.

Minify CSS in wordpress Without Plugin?

How to Minify CSS Stylesheet of Your Blog

To minify your CSS stylesheet , first go to Apperance – Editor , this will open your stylesheet. Copy all the code as a backup. You can copy the code in Dreamweaver , or codelibrary to save your original code as backup in case something goes wrong. Once you have the original code saved you can move on to minify your code.

  • Go to appearance > Editor and copy all the CSS. Press Ctrl + A to select all the code and Press Ctrl + C to Copy all the selected code.
  • Go to CSSminifier.com and left side where it asks for input CSS press Ctrl + V to paste all the code. After entering the code click on minify.
  • In the next step you need to implement the minified code in your blog. In the right pane Click on select all and press ctrl + c to copy all the code.
  • Now go to apperance > Editor and Press Ctrl + A and Press Ctrl + V to replace the code with minified version.

Finally click on update to save all the changes.

You need to be a bit cautious while doing this. Make sure you don’t remove the comments in the starting , especially if you are using a child theme as the comments tell which template to use. So, it is suggested that delete all the code below comments in the starting. The comments look some what like this –

/*
Theme Name: Theme name
Theme URL: http://www.hacknovations.org
Description: Your theme description goes here, developers define their theme here and theme features etc too.
Author: Author Name
Author URI: http://www.hacknovations.com
Version: 3.0
Template: genesis
*/

Delete the code below the comments and paste the minified code below the comment section. After saving the changes you would need to update your file and clear your caching plugin for minified CSS to take effect.

Final words – Minifying reduces the length of CSS file at a great extent. You can take a look at minified and normal CSS by download this zip file that contains both normal and minified version of the style sheet.

There are a lot of online minify websites and services that help you minify your css. I Hope this article would have helped you to minify stylesheet of your wordpress blog. Do tell me your opinions and suggestions regarding the article in the comments below.

So, did you minify your css yet ?

About the author

Rachit Singh

Professional Content Marketer who Founded Scribbify, and Hacknovations. Passionate Blogger & Content Marketer.

Leave a Comment

CommentLuv badge

Download Premium Magento Themes Free | download premium wordpress themes free | giay nam dep | giay luoi nam | giay nam cong so | giay cao got nu | giay the thao nu