vb.org Archive - Improve Web Page Performance

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- General Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=189)

- - Improve Web Page Performance (https://vborg.vbsupport.ru/showthread.php?t=223251)

Improve Web Page Performance

Competition is increasing on the Web. If your site is slow you will lose to your competitors. To improve web page performance (speed), you can do a number of things:

increase number of servers
tweak your server(s)
modify your web pages

This article will focus on modifying your web pages to increase performance.

As you are aware, today's browsers are faster than earlier versions. They have changed functionality to help improve speed. By understanding how browsers function, you will be able to increase your web page performance.

Learn everything that you can about browser functionality....
http://www.browserscope.org/ is a great resource that charts how different browsers function.

The Easiest Thing You Can Do To Improve Web Page Performance:

Use less <tables> - if a product requires you to wrap large chunks of code within a <table> you should think twice about it
Remove unnecessary objects, features, and plugins.
Reuse static files across multiple domains. eg. images, css, js, etc
Use less javascript - if a product requires additional javascript you should think twice about it; javascript blocks everything from loading (in parallel) until completely loaded and processed

Javascript blocks other files from downloading - It also needs time from processing. So, the less you have the faster your speed.

http://content.screencast.com/users/...9-17.58.22.png

Read more about how <tables> affect speed...
How Design Affects Performance : Progressive Rendering

Additional information...
How Design Affects Performance

Increase Download Parallelization - Use A CDN Such As Amazon S3:

Increase download parallelization by increasing the number of resources that serves static files. In other words, if you have many static objects* on a page split them across multiple domains.

*static files - includes stylesheets, images, swf, etc

The reason why this works is because each browser allows a maximum number of connections per hostname. In modern browsers, this number has increased to 6 (avg). What this means is that your browser will try to download 6 objects from any hostname at the same time. So if you increase the number of resources that serve static files it's more likely that you will decrease page display time.

In comparison, older browsers such as IE 6 only allowed 2 maximum connections per hostname.

Move all your static files to a CDN such as Amazon S3. Doing so will provide you with the following:

decrease server load
decrease bandwidth
decrease cost
decrease page display time

Get yourself an S3 account ASAP!

I recommend using a different domain other than your site domain. The reason behind this is that you don't want your cookies associated with each static file.

There's no need to associate cookies with static files.
Some cookies can be as long as 1k which will increase your time.

the following image is a snapshot of the headers of a downloaded image...

http://content.screencast.com/users/...9-17.19.49.png

Getting Started

I elect to use .info domain for static files as they are offered on the cheap - $1.99.

For example, if your site domain is domain.com ; you should purchase domain-file.info to serve your static files.

(Note: It can be any domain just as long as it's different from your site.)

Setting Up Your Domain

Once you get your domain you can point it to your amazon s3 server account (url). This is done by adding a CNAME entry for each sub-domain that you want to create.

I created the following sub-domains:

js.domain-file.info to serve javascript files
css.domain-file.info to serve stylesheets
img.domain-file.info to serve images
img2.domain-file.info to serve images
icons.domain-file.info to serve icons if you have a large amount of icons

To upload files, I highly recommend using a commercial product called Bucket Explorer. There is a free Firefox extension, S3Fox Organizer, that provides a GUI interface but it lacks a lot of features.

Whatever you use - make sure that you can alter headers.

You will need to add EXPIRES header so that the static files are cached - saving you bandwidth and decreasing overall page display time.

Other Things You Can Do To Speed Up Your Pages (in no particular order):

combine javascript (to decrease http request)
move javascript to the <head> or to the footer (below any content)
decrease number of inline javascript
combine css (to decrease http request)
combine images using sprites (to decrease http request)
load css prior to any javascript calls
compress images

Compress Javascript & Stylesheets:

To further decrease page display time, I recommend compressing (gzip) your js and css files. You will then have to create a plugin to show the gzip version if browser is capable of displaying if not show the uncompressed version.

Most modern browsers are capable of displaying compressed files. However, IE6 is known to have some issues - yes, even the SP2 which was reported to have this fixed is still buggy.

Tools To Help You Get Started

thanks very much
its really use full information
i don't know it
I'll try to implement it as i can ( its depend on my ability)

Thanks a lot for this very useful article.
Just signed up for S3 account and start doing some of the things you recommend.

1) I have some parked domains which i can use to host files. Say, I have the .info parked on top of my .com.
It seems like I have to create an account for that .info and create subdomains on .info in order to add CNAME?

2) How do I add EXPIRES in the images from Bucket Explorer. When I tried to do that, it always result in https, instead of http.

3) Do you recommend moving all Vbulletin styles images folder off to S3?

once you have your S3 account setup just create new buckets with the same name as your subdomains

for example...
if you create the following sub-domain:
- css.domain.info
- images.domain.info
- etc

your buckets will be called:
- css.domain.info
- img.domain.info
- etc

if creating the following CNAMEs...
- css.domain.info
- img.domain.info
- etc

you should point them to...
- css = css.domain.info.s3.amazonaws.com
- img= img.domain.info.s3.amazonaws.com
- etc

Quote:

3) Do you recommend moving all Vbulletin styles images folder off to S3?

yes

Thanks Princeton,

Got the S3 working and the subdomain properly redirects. I'm moving some images now.
Now, I believe the Expires is set in the apache server, not for individually images, correct?

use the Bucket Explorer Batch Operation / Metadata to set Expires

Key = Expires
value = sometime in the future ex. Thu, 01 Dec 2010 11:16:04 GMT

Thanks Princeton this is exactly what Ive been looking for.

Question, Can I move all the VB js scripts into a single file? Im assuming VB wrote it this way for a reason.

Also can I move all my extra Css into the default VB css? I have 5 customs styles on the site and I wasn't sure if that would overlap them.

Thanks again... Daniel

Quote:

Question, Can I move all the VB js scripts into a single file? Im assuming VB wrote it this way for a reason.

No, it's impossible with the current setup
if you merge them into 1 file you will get errors

(you need to worry about execution order, etc)

Quote:

Also can I move all my extra Css into the default VB css? I have 5 customs styles on the site and I wasn't sure if that would overlap them.

this is possible - I'm assuming you want to create 5 separate css stylesheets.

Quote:

Originally Posted by Princeton (Post 1910216)

No, it's impossible with the current setup
if you merge them into 1 file you will get errors

(you need to worry about execution order, etc)

this is possible - I'm assuming you want to create 5 separate css stylesheets.

As for the JS that's what I thought. I can combine them as long as they have nothing to do with page placement. Correct?

And for the CSS Ive combined all the extra into one file and placed it at the top of the head. Is it really much of a time saver to add them into each stylesheet?

I recommend running tests to find out what files you can merge.

Quote:

And for the CSS Ive combined all the extra into one file and placed it at the top of the head. Is it really much of a time saver to add them into each stylesheet?

confused ... are you suggesting to merge all stylesheets into 1 file? If so, it's not needed nor recommended.

the idea here is to decrease bandwidth but also to generate the pages faster

Great article Joe, thanks for sharing :)

Yes thanks for the article. I hadn't heard of some of these tools that are available. It is interesting to see the suggestions from YSlow. There's a number of things I can fix right away just by using the EXPIRES header information.

I'm pressed between using my current server as my content server hosting the subdomains or separate domains for imgs/css/js/etc., since it several times the bandwidth, storage, and processor power than I am currently using. Or maybe just going with AWS.

So I was playing around with YSlow today and made some progress on improvements. Having some issues getting .js and some .css to compress with gzip but this is in Windoze.

I made a quick plug-in and hooked it as the last thing on global_start to swap out some of my images and other content to my subdomain CDN's. Not sure if my approach is correct but it seems to making YSlow happier anyway:

Code:

$oz_process = str_replace('"http://ozscience.com/forums/clientscript/', '"http://cdn8.ozscience.net/clientscript/', $output);

$oz_process = str_replace('"clientscript/', '"http://cdn8.ozscience.net/clientscript/', $oz_process);

// $oz_process = str_replace('"http://ozscience.com/common/', '"http://cdn8.ozscience.net/common/', $oz_process);

$oz_process = str_replace('"http://ozscience.com/forums/images/', '"http://cdn9.ozscience.net/images/', $oz_process);

$output = str_replace('"/forums/images/', '"http://cdn9.ozscience.net/images/', $oz_process);

Here's some online JS and CSS compressors using the very popular YUI Compressor.

This one is JS only
http://yui.2clics.net/

This one is both
http://refresh-sf.com/yui/

:up:

wow
thanks for sharing

Just wondering, did you guys serve your static files through Cloudfront, or directly through S3? Thanks.

So from this article, is my understanding correct, that I should store all forum images (i.e those in the template) on a different host.

How do I configure vBulletin to automatically store user images (i.e. uploads, attachments, avatars, etc) on a different server automatically?

Quote:

Originally Posted by porcupine73 (Post 1910781)

I made a quick plug-in and hooked it as the last thing on global_start to swap out some of my images and other content to my subdomain CDN's. Not sure if my approach is correct but it seems to making YSlow happier anyway:

i think you meant global_complete. thanks for the tip

Quote:

Originally Posted by Scalemotorcars (Post 1910963)

Here's some online JS and CSS compressors using the very popular YUI Compressor.

This one is JS only
http://yui.2clics.net/

This one is both
http://refresh-sf.com/yui/

:up:

There is even offline Compressor for Windows.

http://files.plusvb.com/EYUIC/EYUIC_Pic.png

http://yuilibrary.com/forum/viewtopic.php?f=94&t=91

Nice article BTW :)

Quote:

You will need to add EXPIRES header so that the static files are cached - saving you bandwidth and decreasing overall page display time.

How do you set the expire header? What time do you suggest?
Is it like this? x-amz-meta-expires:HTTP date or like this x-amz-meta-expires:10000

What about Cache-Control?

Thanks for the tools Princeton,

Seeems I have some work to do!
http://forums.speedysparrow.com/show...&p=208#post208

Hello, 2 questions please:

1) When you say to compress javascript, so you suggest to use some online javascript compressoor, compress all javascript vBulletin and then upload and overwrite they?
Or compress javascript only using Gzip?

2) If I use Amazon S3, very interesting service, than is possible store for example, all the images and the skin on my forum?

Thank, How you have configured vBulletin to work and use that store images, attachments, javascript, on a different server automatically?

Thanks

In Amazon S3 how do you "add EXPIRES header"?

maybe this can help http://www.bucketexplorer.com/

Oh yeah I should have been more detailed. What is the Value I need to use to make it expire in 1 month?

great work, I've done almost all

we need to know more about css sprites with (vBulletin)

Would be nice if this was updated for 2013 / vb 4.21

Most of this stuff is covered in my guide.

Quote:

Originally Posted by joeychgo (Post 2423515)

Would be nice if this was updated for 2013 / vb 4.21

wonderful tips well may i know how i can reduce server load in shared hosting?

use CDN / Caching software on server side / remove unnecessary plugins and modules. optimize images

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01546 seconds Memory Usage 1,818KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (9)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (30)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: