Make Your Template Load Fast By Tweaking The CSS Codes

ADVERTISEMENTS

css-logo-codeToday I updated one of my Wordpress blog to version 2.8 and found some good changes in it. One of the change that forced me to write this tutorial was in the Editor section. Wordpress has added a new feature in its latest version that tells about the number of lines in the code.

Have a look :

css

In the above image you can see the numbers in the leftmost side. These numbers tells the total number of lines in your code. More the number of lines, more long will be your code and more will be the loading speed. So, here is a simple trick with which you can minimize your line of codes.

Open your Style.css file, in this file you will see CSS coding, I’ll explain you about the tutorial by taking this example. Have a look at the code below :

a:link {
color: #2f63b3;
text-decoration: none;
}

The above code is counted as a 4 line code, have a look :

code-started-ended

Now, to minimize the lines, remove all the spaces after ; and write the code continuously without any space. So, your four line code will come in 1 line and will look like this :

a:link { color: #2f63b3; text-decoration: none; }

Similarly do this for all the codes in your Style.css file and you will see a difference in your template loading speed. It will be a minor change in the speed, if you are happy with your template loading speed its better you do not try this. :D


If you like this post, you will love these :

  1. How To Make Your Web Page Load Faster
  2. List Of All 255 Keyboard All Alt Key Codes
  3. 20+ Codes and Hacks Every Wordpress User Should Know
  4. How To Change/Modify AutoSave Interval Time In Wordpress
  5. How to make your Windows XP super-fast in 2 seconds !
  6. Online Tool To Compress CSS Code
  7. All HTML Tags And Attributes : Lesson 4 Part2

Gaganpreet Singh on June 12, 2009 | Filed Under Blogger Templates, Blogger Tricks, Wordpress

{ 19 comments… read them below or add one }

1 Sourish Nath June 12, 2009 at 8:21 pm

I will also update my blog to the earliest.By the way where are you hosting your blog buddy ??

Reply

2 Mayur June 12, 2009 at 8:32 pm

I haven’t upgraded to WP 2.8 yet. Will do now :D

Reply

3 I Make Thousands of Dollars a Month Posting Links on Google from Home June 13, 2009 at 1:28 am

Hey, nice post, really well written. You should post more about this.

Reply

4 I Make Thousands of Dollars a Month Posting Links on Google from Home June 13, 2009 at 1:43 am

Hey, nice post, very well written. You should post more about this. I’ll definitely be subscribing.

Reply

5 Ricky June 13, 2009 at 5:50 am

I couldn’t understand it. How is it affecting the loading speed?

Reply

6 Balaji @ GuideToTech June 13, 2009 at 8:03 am

Hope they may must have spaces between two syntax…
a:link { color: #2f63b3; text-decoration: none; }
Since there is space between the two syntax’s
Am i right gagan?

Reply

7 Huzefa June 13, 2009 at 11:29 am

Really good tip.Thanks but it would take a very long time wouldn’t it?

Reply

8 Aneesh Bhatnagar June 13, 2009 at 12:04 pm

Good post Gagan,

i have one question,
will this also help me in my blogger template?

Reply

9 Gagan June 13, 2009 at 12:46 pm

@ Aneesh,

of course, try it once. :)

Reply

10 Balaji @ GuideToTech June 13, 2009 at 8:01 pm

Is there Any automated tool to do it…
my css have nearly 1000 lines
Thanks

Reply

11 Gagan June 13, 2009 at 8:23 pm

Sorry, dnt know about any such tool, let me search for such tool and if I found it, I’ll surely blog about it. :)

Reply

12 SEO June 14, 2009 at 2:17 am

I’ve just valide my CSS with w3.org. There are no errors so I think it will be ok to leave it like that it took lot time to fix all the errors.

Has anyone tried that yet ? any improvements ?

Reply

13 xphunt3r June 14, 2009 at 3:51 pm

I use thesis 1.5 wordpress theme which itself load faster and css validator. Anyway its a really great knowledge.

Reply

14 George Serradinho June 16, 2009 at 2:14 pm

I have just gone through my css file and there are tons a empty lines. I have cleaned it. I would like to ask you if comments would also play a role in loading time. I ask this as I’m using Thesis and I have a one line comment by all my custom css styling, would that also affect loading time?

Reply

15 The_JaeV June 18, 2009 at 11:26 am

Hi ,,,nice to meet ur site,
I from Indonesia, Im A beganner in wordpress, How to change template in WP. I ever to tray but I can’t.

Nice to Solve my problem with You..

Thanks.

…..www.TheJaev.co.cc

Reply

16 Gagan June 18, 2009 at 6:29 pm

Use any FTP program like FileZilla, log in into your ftp server, now go to wp-content folder and open themes and upload your desired theme into this folder.

Now, in the Wordpress dashboard, click on on theme under Appearance tab and you can see your uploaded theme there, click on Activate to apply that theme to your blog. Simple !

Reply

17 Prateek July 14, 2009 at 9:26 am

Is there any software which could easily condense the codes like this???

Reply

18 Gagan July 14, 2009 at 9:29 am

sorry Prateek I do not know about any such software.

Reply

19 Dinesh July 25, 2009 at 8:34 pm

after reading this post, i just wanna say you rock gagan

Reply

Leave a Comment

Previous post:

Next post: