PDA

View Full Version : Improve page load time


Jon_Simmonds
29 Jan 2010, 18:45
With google now apperently taking in page load time into account for rankings, and looking at the Labs > Site Performance link on Google Webmaster Tools, it says my forums were slow to load up I have spent the last few days looking at how to speed things up. Now while you can control what googlebot see's via robots.txt, the info uses to generate page load time appears to come from the google toolbar, which means all parts of your site visible to members have the page load time logged

I came across this article on vbulletin.org - http://www.vbulletin.org/forum/showthread.php?t=223251 and just have a few quick tips that can be done to help make things faster.

I have mainly focused on what can be improved in terms of vbulletins templates, rather than tinkering with servers etc, some of these were touched in the article I linked in above but I feel that I have added onto them, all of this I have found from researching the net/google/etc so I don't take any credit for anything!

While doing this, I found it relativly easy to improve on the forumhome & forumdisplay templates, though when it comes to showthread the biggest issue is images in your member's signatures - inactive members could have links to images that 404, others may have multiple images in theirs.

1) If using the Yahoo CDN to host the YUI libraries, then use Yahoo's combine function

In the header include template replace the following

<script type="text/javascript" src="$stylevar[yuipath]/yahoo-dom-event/yahoo-dom-event.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript" src="$stylevar[yuipath]/connection/connection-min.js?v=$vboptions[simpleversion]"></script>
with

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/connection/connection-min.js"></script>
This only works on the Yahoo CDN for the YUI files, not for Google or from your own server, if you use other YUI libraries then you can use this page to add what libraries you need : http://developer.yahoo.com/yui/articles/hosting/?connection&yahoo-dom-event&MIN

Simple really, 2 http requests or 1 http request, for what is the same data, that will be called on every page. If you use a few mods check if they use any other YUI libaries and consider loading them in this way.

2. Improve the loading of CSS

Using store CSS as a file (http://www.vbulletin.com/docs/html/stylemanager_css_as_file) I then modified the code to make vbulletin treat the CSS via a link rather than import - http://www.vbulletin.com/forum/showthread.php?306573-import-vs-link

Depending on your style, you could consider combining the CSS into one, to save on http requests, but that really depends on how you have your style setup on your forums.

3. Make use of css image sprites
These can really make a difference to page load times, I found a great CSS sprite generator
at http://csssprites.com/ although I prefer to use <img> tags rather than <div>'s that the generator uses, so read this article http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites and use the background position info from the genarator & the <img> tags suggested by the article

4. Turn of signatures for in-active members

Consider turning off signatures for members who haven't been active in X days by changing the following code in both postbit & postbit_legacy (well either/or depending on how you run your forums)

<if condition="$post['signature']">
<!-- sig -->
<div>
__________________<br />
<div class="hidesig">$post[signature]</div>
</div>
<!-- / sig -->
</if>

to

<if condition="$post['signature']">
<if condition="$post[lastactivity] > TIMENOW - X*86400">
<!-- sig -->
<div>
__________________<br />
<div class="hidesig">$post[signature]</div>
</div>
<!-- / sig -->
</if>
</if>

Changing X to a value in days


Or for vbulletin 4.x use the following (Thanks to BBR-APBT for the code)

<vb:if condition="$post['signature']">
<vb:if condition="$post['lastactivity'] > TIMENOW - X*86400">
<blockquote class="signature restore"><div class="signaturecontainer">{vb:raw post.signature}</div></blockquote>
</vb:if>
</vb:if>

Princeton
31 Jan 2010, 17:41
great tips :up:

BBR-APBT
31 Jan 2010, 23:24
Considering this is in the vB4 section the correct if conditionals will be.

<vb:if condition="$post['signature']">
<vb:if condition="$post['lastactivity'] > TIMENOW - X*86400">
<blockquote class="signature restore"><div class="signaturecontainer">{vb:raw post.signature}</div></blockquote>
</vb:if>
</vb:if>

Jon_Simmonds
02 Feb 2010, 17:22
I had meant it to be for vb3.x, as I have not yet moved to 4, though the submissions area seams to cover both 3.x & 4.x

I will amend the first post with your code :)

bada_bing
03 Feb 2010, 20:26
I had a question about the conditional signature code as this is a great idea...

looking at your code below
<if condition="$post[lastactivity] > TIMENOW - X*86400">

you mention to change X to days but what do we do with *86400 which is 24 hours?

What would that look like if I wanted signature to not display if not active with 4 weeks ?


thanks

Audax666
08 Feb 2010, 10:58
4 Weeks are 28 days, so it should be 28*86400 in your code. (28 times x 1 day/24 hours)

Or am I wrong or missunderstood something?

lazydesis
11 Feb 2010, 02:08
the store as css does not seem to be working on vb4

when i go into admincp it throws me an error about parsing variables?


Fatal error: Only variables can be passed by reference in /home/MYDIR/public_html/includes/adminfunctions_template.php on line 3294


i commented out the code in blue and added the code in red


delete_css_file($styleid, $csscache["$styleid"]);

$adblock_is_evil = str_replace('ad', 'be', substr(md5(microtime()), 8, 8));
$cssfilename = 'clientscript/vbulletin_css/style-' . $adblock_is_evil . '-' . str_pad($styleid, 5, '0', STR_PAD_LEFT) . '.css';

// if we are going to store CSS as files, run replacement variable substitution on the file to be saved
if ($vbulletin->options['storecssasfile'])
{
$css = process_replacement_vars($css, array('styleid' => $styleid, 'replacements' => serialize($replacements)));
$css = preg_replace('#(?<=[^a-z0-9-]|^)url\((\'|"|)(.*)\\1\)#iUe', "rewrite_css_file_url('\\2', '\\1')", $css);
if (write_css_file($cssfilename, $css))
{
// $css = "@import url(\"$cssfilename\");";
$css = "<link rel='stylesheet' type='text/css' href='".$cssfilename." />";
}
}

$fullcsstext = "<style type=\"text/css\" id=\"vbulletin_css\">\r\n" .
"/**\r\n* vBulletin " . $vbulletin->options['templateversion'] . " CSS\r\n* Style: '$title'; Style ID: $styleid\r\n*/\r\n" .
"$css\r\n</style>\r\n" .
"<link rel=\"stylesheet\" type=\"text/css\" href=\"clientscript/vbulletin_important.css?v=" . $vbulletin->options['simpleversion'] . "\" />"
;


doesnt seem to work .. anyone can check this for me please .. thanks

ChopSuey
20 Feb 2010, 11:04
This is a great artile thanks for sharing :)

Kolbi
22 Mar 2010, 19:10
Are there other possitive reports about these improvements?

pant
25 Mar 2010, 16:31
The best improvement I got overall was to disable CMS and Blogs and store the stile as files.

YankForum
10 Apr 2010, 06:36
great tips
tnxxxx

samiro
21 Apr 2010, 07:36
Considering this is in the vB4 section the correct if conditionals will be.

<vb:if condition="$post['signature']">
<vb:if condition="$post['lastactivity'] > TIMENOW - X*86400">
<blockquote class="signature restore"><div class="signaturecontainer">{vb:raw post.signature}</div></blockquote>
</vb:if>
</vb:if>


its not working.
i set it to 100 days
and i can see sig' of users not been in the forum from 2009

Kolbi
21 Apr 2010, 10:55
Have you changed the x to something else?

slimgamer
05 May 2010, 01:33
thanks for the idea & code! Implementing it on my test site to see how effective it is in my case.

evo10
29 Nov 2010, 20:15
Excellent

moustafa
28 Nov 2012, 17:14
what codes to be replaced for Google CDN to host the YUI libraries?

friendlymela
21 Jul 2015, 17:54
this was i needed .. thanks