Archive For: November, 2014

vBulletin Optimization, Provide a Better User Experience

Here at URLJet, we host forums of all sizes, from startups to long established forums with data base’s over 100GB and we’re often asked how to optimize vBulletin to lower server load and render pages faster.   The following how-to includes steps to enhance the user experience in forums of all sizes. We started with admincp basics and move to steps than should be taken as your forum grows.

  1. Optimize admincp settings;
  • Cookies and HTTP Header Options > At URLJet, turn GZIP off – It’s enabled by default and setting it twice actually slows things down. This is not true at all hosts so check first.
  • Cookies and HTTP Header Options > Remove Redirection Message Pages – Turn this off to reduce unneeded page loads and bandwidth.
  • Enable All AJAX features – Set to allow all AJAX Features. Ajax helps reduce server load by not reloading pages where AJAX is called. Quick Reply is an example > General Settings -> Disable AJAX Features and select Enable All Ajax Features.
  • Server Settings and Optimization Options > Cached Posts Lifespan –10 days, depending on disk space available is a good setting. When set don’t forget to rebuild your Post Cache under Maintenance > Update Counters
  • Server Settings and Optimization Options > Update Thread Views Immediately – Set to No. By default threads will update hourly via a cron. You can change the frequency by editing the Scheduled Tasks > Thread Views to a different time.
  • Server Settings and Optimization Options > Update Attachment Views Immediately – Set to No.
  • Message Posting and Editing Options > Quick Reply – This makes posting faster possibly leading to a more active community, also uses Ajax and prevent additional page loads when making a post.
  • User Listing & Profile Viewing > Show Last Post on Profile Page – Very server intensive process, set this to no, if you’re having load issues.
  • Message Posting and Editing Options > Quick Edit – Turn this on to prevent a new page load when someone simply wants to edit a post.
  • Message Searching Options > Minimum Time Between Searches – Set this to some value mainly to avoid an attempt to use the search to harm your server.
  • Forums Home Page Options > Display Logged in Users? – If you have issues with server load you can turn this feature off.
  • Forum Display Options > Show Users Browsing Forums – If you have issues with server load you can turn this feature off.
  • Thread Display Options > Show Users Browsing Threads If you have issues with server load you can turn this feature off.
  • Forum Display Options > Maximum Displayed Threads Before Page Split – Too many threads on a page loads more data and slows page load. Best to set the value between 20 to 40.

 

  1. Limit Search Spider Activity

A robots.txt files will save bandwidth and cut requests. Include any file or folder in it that you don’t want indexed in search. Keep in mind this file can viewed, meaning that if listed pranksters can get the folders and files you may not want them to see. Below is an example

User-agent: *
Disallow: /admincp/
Disallow: /images/
Disallow: /modcp/
Disallow: /attachment.php
Disallow: /search.php
Disallow: /newreply.php
Disallow: /newthread.php
Disallow: /editpost.php
Disallow: /profile.php
Disallow: /register.php
Disallow: /login.php
Disallow: /subscription.php
Disallow: /private.php
Disallow: /report.php
Disallow: /sendmessage.php
Disallow: /memberlist.php
Disallow: /misc.php
Disallow: /moderator.php
Disallow: /postings.php
Disallow: /sendtofriend.php
Disallow: /threadrate.php
Disallow: /usercp.php
Disallow: /showgroups.php

 

 

 

  1. Reduce HTML use for guests and users.

Cutting HTML can help render pages faster and reduce server load.

  1. Disable who is online for guests – Find the usergroup “Unregistered / Not Logged In” ( Admin CP > Usergroups > Usergroup Manager ) and set “Can View Who’s Online” to off.
  2. Disable Template Name in HTML Comments– More comments in HTML means more time to download and render the html. Ensure the template name in html comments turned off. Admin CP > vBulletin Options > vBulletin options > General Settings > and select No for Add Template Name in HTML Comments.
  3. Disable Posting Rules – Displaying posting rules on every thread and your forum pages really only adds to amount of HTML rendered. It cannot be disabled in admincp and you’ll need to edit one template to remove posting rules. You can disable for guests only or competly.. To disable for guests; edit the forumrules template by adding the following <if condition=”$show[member]”>, at the top of the template. At the end of the template add </if> That will display Posting rules to members only and not guests. If you empty the template Posting Rules will not show to anyone.
  4. Disable Forum Jump Menu – Disable forum jump completely from Admin CP. Experiment here, turn it off and if no one reports it, assume no one cared about using it either. Forum jump causes the server to work harder generating the menu and increases bandwidth by displaying it on each page load. Change forum jump options from Admin CP > vBulletin Options -> General Settings -> Use Forum Jump Menu.
  5. Disable username menu for guests on showthread pages – Showthread page shows posts and each post has a username, clicking a username loads a popup menu and that menu is rarely of use to guests as vBulletin, by default restricts email and PM to members only. Turn it off for guests DBSEO give this option.

 

  1. Move Attachments and Images from the Database to the File System

By Default vBulletin stores Attachments / Images / Avatars all in the databasee. Move them to the file system to reduce load and speed rendering

  1. Admin CP > Attachments > Attachment Storage Type
  2. Admin CP > User Albums > Album Picture Storage Type
  3. Admin CP > Avatars > User Picture Storage Type
  1. Move CSS StyleSheets From the Database to the File System

Again by default vBulletin renders the CSS in head part of HTML, this increases the size of each page. Storing CSS in files does 2 things; it reduces the code from each page and it enables the CSS files to be cached..

  1. Compress Output (GZIP)

vBulletin provides compression for HTML output but I prefer to get it done through Apache via mod_deflate. Disable Zipped output in vBulletin. vBulletin Options -> Cookies and HTTP Header Options -> GZIP HTML Output And add the following lines to your httpd.conf file in Apache.

<IfModule mod_deflate.c>

SetOutputFilter DEFLATE

# file-types indicated will not be compressed

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|rar|zip|pdf)$ no-gzip dont-vary

<IfModule mod_headers.c>

Header append Vary User-Agent

</IfModule>

</IfModule>

Restart Apache web server. Additionally you should also use Apache to cache static content. Refer article by coderzone on How to Decrease Web Page Loading Time especially caching of static content.

  1. Full Text Search Type

You can use this option to greatly reduce server load when a search query is used on your server. Admin CP > vBulletin Options > Search Type. This change is a server intense process as it needs to alter the vBulletin post and thread table. If you don’t have many searches, this isn’t a needed change

Read More

How To Personalize your vBulletin Forum

OK, vBulletin is installed, how you make it look like your site and not vBulletins. Head for the Administration Control Panel (ACP) and Style Manager. Style Manager is where you can modify and change everything about vBulletin, from the logo and header image to font color to the pixels width separating different elements, or to change the overall background image.

Intimidating at first glance, it’s really pretty simple to use. To illustrate, the following few step will totally change the look of vBulletin.
Best Practice: Create a New Style
DO NOT modify the default style; instead create a new style in Style Manager. This will allow you to always be able to return to the default style, should you need to test functions later on and users can continue to use the old style while you develop the new one.

Change the Logo

First, let’s change the vBulletin logo to something more relevant. You’ll need to upload the new logo to the images folder. The default location of the logo image is public_html/images/misc/
URLJet Logo

Best Practice: Add a folder for your new style.
Add a new folder in your forums image directory to store the graphics for your new style. Trust me, files will be much easier to find if you need to make changes later.

With the new logo uploaded, login to the ACP and navigate to Style Manager. Click the dropdown list next to the style you’re editing and select “StyleVars”.

styvar

In the variable list on the left, scroll to StyleVars “titleimage” under the header “ImagePaths”. In the title image box on the right, enter the path for the logo and save. vBulletin uses relative paths so as long as you uploaded the new image to the images/misc/ folder, just replace the vB logo with yours. The header will automatically resize to fit. This is a good time to visit your forum to check your work. TIP: To quickly find the variable you’re looking for; use the search function in the upper left hand menu. Enter the name of the StyleVar you’re looking for and vBulletin finds it for you.

 

Change the Header Background

So, your new logo is in place, but it doesn’t go with the background and you want to change the background to match the header. Repeat the steps used to change the vBulletin logo, but instead of choosing the “titleimage” StyleVars, pick the “header_background” under the “Header” section.
hedbacki

The URLJet logo is a mix of blue and red and adding a white background makes it pop. In the background color box change the Hex color to white (#FFFFFF). This link will take you to a handy hex color picker. http://www.color-hex.com. If your background is more complex, you can also build one with the appropriate dimensions, upload it to your new style folder, then call out its location in this window.

 

 


Change the Background of the Tab Bar

Say you want something other than the vBulletin green here. Like the header background, vBulletin uses a repeating gradient image here as well.

navgrad

We made a black gradient. After uploading it to the style folder, head back to the Style Var Editor, look for the NavBar section and select “nav_tab_background” and save.

navtab

 

 

 

 

 

Time to practice….Check back and well have more tips on a vartrity of sujects from vBulletin to XenForo and WordPress

Read More