Optimize your WordPress site and make it faster! – part 1

After a long break, i’ve decided to back to blogging again! thought to write a series of articles about optimizing your WordPress site and make it faster. Lets see how it goes :)

Making your site fast is essential for user experience and search engine optimization. First thing about WordPress, It is HUGE! And as it is also so much user friendly, so most of the WordPress user is non coder. they try a lot of plugins in it which impose more load on the site. And also, sometimes more plugins means more css and js files which effects the load.

Now, lets categories optimization level. I think levels are
– Basic Optimization
– Database Optimization
– Advance Server Optimization

I am going to discuss basic optimization today, you don’t need any coding experience to do this.

  • Firstly, Server response time matters!

If you have a lot of files to load, then you need a fast server that serve files real fast. How to test your server’s average response time? its simple, open command prompt if you are using windows, or terminal in linux or mac, and type this
ping yoursite.com
you will see response time there.
example, if you try ping facebook.com you’ll see average response time of Facebook server is 450 millisecond, which means if you have 100 files to load, it will take 4.5 seconds only to get response from server, then more time may need to download those depending on you internet connection speed. So, as you don’t have any option to control users internet speed, we can select as much fast server as we can.

If you ask me for recommendation, my first choice is always amazon. cloud servers are great. but amazon provides unmanaged servers only, so unless you know some server administration stuff, it is almost impossible to use by yourself.

My second choice is easy DnH I am using it from last 3 years without any trouble, it is easy to use, more like godaddy, but better than godaddy in term of service.

Hostgator is my 3rd choice. they provides cpanel too in case you are cpanel lover. best thing about hostgator was its customer service, but last year, after godaddy owns it, I feel little difficult. anyway, you can use my affiliate link if you wish, which means some more bucks for me :), or direct link here too

  • Secondly, Cut extra loads!

Remember, WordPress itself is huge, with it you need to use a theme which has some css and js files to load. Plugins with it means additional load, and some plugins has separate stylesheet and script which is enqueued  at front end. So these extra files makes extra request to server, which means extra response time.

  • Thirdly, combine what you have

you may have separate css and js files in your theme or plugins, but why keeping those separate? I mean, those will still work if you have a large css of js file instead of 4-5 small files. so combining these in 1 file means less request to server, and less response time of course!

Like CSS and JS, we can use combined form of icons and images in a single image used in theme and re-positioning it using css, as example, if you see facebook, all major icons in FB combined in this single image and positioned using css. this process is called css sprite. you may need some css knowledge to do that. There are some cool sprite generater tools out there, you may try spritegen or csssprites

  • Fourthly, JS in bottom

Bad thing about JavaScript is, when browsers start loading a JS file, it stops all other works until it is done. so you can put essential js at top, but rest of in bottom.

  • fifthly, Shrink you resources

Now, you have combines JS and CSS file but developers code those in human readable form ( with enough spaced between lines, making comments ). For browser, you don’t need it to be human readable, you just need it machine readable. So, why not delete all extra spaces and comments we have in CSS and JS files, which will save some kilobytes. You don’t need to do that manually, theres some nice plugins out there to do this. I will add links later part in this particle.

Similar to CSS and JS we can compress out images too, if you have some coding knowladge, you may use timthumb image reisizer instead of html resizing which will save a lot of KBs to load.

  • Now its caching time!

Why compiling the HUGE WordPress every time in every page load, instead you can compile once and save the result in somewhere as a static file and then server it, So you saved compilation time!
This process is called caching. Theres nice plugins out there for cache.

Now, plugins you may need to do these

WP minify plugin is one of the best plugin I ever used for file combine and minification. at allows you to combine css and js file and put js files at bottom

WP Smush.it allows you to compress your images dynamically.

W3Total cache is the best caching plugin I have used, but it may seem little complex to use as it has a lot of option, you can use wp super cache too

Now, you can measure your site’s performance using gtmetrix this will also suggest you how to improve optimization!

These are basic optimization. more coming up next! :)

How to get twitter API key

Twitter release their API version 1.1, you may need API key to use twitter related wordpress plugins, here is described shortly how you can get you twitter API key things.

1. First login to you twitter account

2. Go to https://dev.twitter.com/apps

3. Click on Create New Application button.

4. Fill up the form and submit it.

twitter create application form

 

5. After submitting the form, Scroll down a little, you will see Consumer Key and Consumer Secret information, but you will still need access token.

6. Click “Create my access token” button at the bottom of the page, then you will get Access Token and Access Token Secret information. thats everything that you need!

Coming up next… BuddyPress Nested Conditional Fields!

Well, I know it should be published before, as I felt BuddyPress really should have this feature. I like  to have unlimited nested conditional fields in my BuddyPress site registration and profiles. As example,
You want Car details of your user, So, your fields should be

1. Do you have a car? ( radio button/dropdown selectbox )

1a. Yes

2. Which Brand?

2a. Audi

3. Which Model of Audi?

3a. Audi A4

3b. Audi A5

3c. Audi A6

2b. BMW

4. Which Model of BMW

4a. BMW ActiveHybrid 3

4b. BMW ActiveHybrid 5

4c. BMW ActiveHybrid 7

2c. Cadillac

1b. No

5. Do you want to buy a car?

5a. Yes

6. Your Budget?

7. Brand?

5b. No

I guess you understand now what I going to do. this kind of things is not possible with BuddyPress now. The new plugin is just to do that.

Any suggestion is welcome. Going to release it in next week! It will be a paid plugin.

BuddyPress Featured Member plugin released!

Just released BuddyPress Featured members.So, Whats inside?

  • Make Featured Member: Site admin can make some selected users as featured from user profile. Plugin will add a button named “Make Featured” right beside of “Add as Friend”, “Private Message” button.
    make featured
  • Generate Shortcode: After making featured members, you need to show it anywhere you want, you can show them using shortcode. There’s a shortcode generator in wp-admin, you can easily generate shortcode from there.
    Shortcode generator
  • Shortcode parameters:
    1. View: How you want to display members, options: normal, slider. Default: slider
    2. max: Maximum number of members you want to show. Default: 5
    3. filter: Show users using BuddyPress filters. options: Active, Newest, Popular, Alphabetical, Online, Random. Default: Active
    4. astyle: Avatar style code. options: round_0,round_1,round_2,round_3,round_4,round_5, round_6,round_7. Default: round_0
    5. asize: Avatar size. default 150px
    6. user_type: BuddyPress User Account Type PRO integration. So, if you have user types teachers and students, you can create Featured Teachers and Featured Students list.

Example Shortcode:

 

  • [bfm view="slider" max="15" filter="alphabetical"  astyle="round_7" asize="100"]
    slider view
  • [bfm view="normal" max="15" filter="alphabetical"  astyle="round_0" asize="100"]
    normal mode

Let me know if you have any suggestion.
And yeah, here you can download it.

BuddyPress Featured Member , New plugin in the queue

Just started working on a new BuddyPress plugin, BuddyPress Featured Member. The idea is very simple, Admin can select some users as featured and can show featured members list in different way, like, as widget, and in page using shortcode.

Complete features list:

  • Admin can select an user as featured from his/her BuddyPress profile
  • Can show featured members list in page using shortcode
  • Style customization option both from backend and shortcode
  • Filter options ( active, popular, online )
  • BuddyPress User Account Type PRO integration, So, Admin can have featured members list by type, e.g. Featured Teachers, Featured Students

umm, what you want more in it? let me know :)