After numerous projects targeted at the optimization of SocialEngine we have gathered some generic methods that might be interesting if you are looking to speed up your community.

Although the following tips were tested on SocialEngine version 3, they are valuable for all versions.

In this article I want to put emphasis on html/css optimization rather than on php/mysql. But some of these tips will reduce server load as well.

1. Choose plugins carefully. Less plugins you have -> faster your website works.
2. Unite all css files in one. That will reduce total number of separate requests to server. I’ve seen more than 25 separate css files for a single page. Minimization of css is a good idea as well.
3. Unite javascript files and move them to the bottom where it’s possible. Pages will load up faster because all html/css will load at first.
4. Unite small images, for example icons, in bigger images and output them using css sprites, the way it is done in a lot in WordPress themes. Again this will reduce number of separate http requests to server.
5. Try to use a static page for home. Since it will be the most popular page of your website it should load up as fast as possible.
   A good workaround for dynamic home pages is to make a page that will be updated once every 20 minutes.
6. Minimize what you load from outside servers. Place widgets and gadgets from outside sources (eg twitter widgets) lower in the page or in the right-hand column, so that most of the page can load before the widget. Use images from your own server for ads where possible.

If you are seriously working on speed-up best practices from Yahoo is a good starting point.

Thanks to Clare for proof-reading.

Pretty often I see people making the same mistake again and again when start a community website. Eventually a lot of people install all plugins they found to be “cool”: blog, chat, groups, forum, video, music, gallery and so on. With addition of a bunch of modifications to expend the functionality. The main problem here is that in this case you will require good hosting from the very beginning.
There is another serious issue here – attention of your users will be spread around the features. People won’t know what to start from and most likely some of community functionality won’t be used at all (but will eat server resources).

Here is an example. You are starting an “art house movies” community. In this case you can install SocialEngine, add plugins like groups (for discussions) and blogs (for movie reviews). Also few mods to improve usability. As an option you can add video plugin to keep movie trailers, but only in case your budget allows good hosting. In addition you can order to build a custom plugin “movies” that will allow admin to add movies and users to rate them.

More than enough for a start. All listed functionality won’t cost much. And you can actually start to work on getting community members (and trying to keep them involved), instead of adding any extra functionality. Your hosting payments won’t be high.

You need to pay attention to what makes your social network different and listen to your users. It’s much better to enhance your specific functionality instead of general. For example, it will make more sense to order a custom recommendation system based on users votes instead of chat.

If you will try to be a second facebook or myspace you will loose. But you can always beat any large network if you will concentrate on a smaller niche.

This was the first thing I’ve found in SocialEngine that should be enhanced.
As you may have noticed SocialEngine in most of cases resizes images using html width and height options.
While this is the easiest technique it’s not the best one. If you want to keep the high quality of images uploaded by users you need to find another solution here.

I’ve created a mod that can help you to solve this problem. It uses caching, so it will increase the page loading speed of your website.
Let me demonstrate how you can resize images using phpthumb library.

To install this mod you need to follow the next steps

1. Download the mod from http://webhive.com.ua/products/se_thumb.html
and copy all files from archive to your SocialEngine folder.
2. Set permissions ‘777′ to folders thumbs/cache and thumbs/tmp after upload.

3. Download phpThumb library from
http://phpthumb.sourceforge.net/#download
Take the latest stable version you see there (1.7.8 at the moment of writing this doc)
Unzip it and upload to folder include/phpThumb/ in your SocialEngine directory.

4. Now we will need to edit some files (I advise you to make backup copies of all files you will edit).

Let’s create a function that will output thumbnails of the image instead of original images
include/class_user.php
Go to the end of file and add before last brace (“}”) next code:

Now we will need to increase the quality of newly uploaded images from 75%(default) to 100%

include/class_upload.php
Search for next code (you will find 4 occurrences):

Now when our mod is installed we need is to replace the links from big images resized with html with links to our thumbnail generator

templates/home.tpl

Search for next code (line ~152):

1. </pre>
2. Change to
3. <pre lang="html4strict"><img class="photo" src="{$signups[signups_loop]-&gt;user_thumb(" border="0" alt="" width="{$misc-&gt;photo_size($signups[signups_loop]-&gt;user_photo(" />

Search for code (line ~178):

1. </pre>
2. Change to
3. <pre lang="html4strict"><img class="photo" src="{$friends[friends_loop].friend-&gt;user_thumb(" border="0" alt="" width="{$misc-&gt;photo_size($friends[friends_loop].friend-&gt;user_photo(" />

Search for code:

1. </pre>
2. Change to
3. <pre lang="html4strict"><img class="photo" src="{$logins[login_loop]-&gt;user_thumb(" border="0" alt="" width="{$misc-&gt;photo_size($logins[login_loop]-&gt;user_photo(" />

Now when all images on your home page are beautifully resized, let’s proceed and make all images on profile page look great too

templates/profile.tpl

Search for code(line ~395)

user_info.user_username)}'>

1. </pre>
2. Change to
3. <pre lang="html4strict"><a href="{$url-&gt;url_create(">user_info.user_username)}'&gt;<img class="photo" src="{$comments[comment_loop].comment_author-&gt;user_photo(" border="0" alt="" width="{$misc-&gt;photo_size($comments[comment_loop].comment_author-&gt;user_thumb(" /></a>

I will try to cover the rest of the SocialEngine pages in future posts, but if you have understood what we have done you can try to do it yourself.

A long voyage is started with a small step. Today we are starting the WebHive blog at last!

Unlike most developers’ blogs around, we will do our best to keep the signal/noise ratio as high as we can. From now on everyone will be able to see the approaches we use and know the things that keep us motivated.

We promise to find time to make regular updates about web development, and share useful tools, tricks and ideas.

Also I want to make an announcement – we are going to open a store to sell the scripts and products we have developed. Some of them will be offered free of charge.

So please stay tuned