![]() |
|
Article Options |
Improve Web Page Performance
Princeton
Join Date: Nov 2001
Posts: 6,693
Joe Velez began developing for the web in 1998. He is an avid vBulletin user and volunteers his services as a vbulletin.org administrator. He currently spends his time maintaining and developing allnurses.com. Vineland, NJ
by
![]() Rating:
![]() 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:
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:
![]() 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:
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.
![]() 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:
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):
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
No members have liked this post.
Last edited by Princeton; 17 Sep 2009 at 15:42.. |
Views: 454180
|
Comments |
#2
|
||||
|
||||
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) No members have liked this post.
|
#3
|
|||
|
|||
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? No members have liked this post.
|
#4
|
||||
|
||||
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
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
#5
|
|||
|
|||
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? No members have liked this post.
|
#6
|
||||
|
||||
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
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
#7
|
||||
|
||||
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 No members have liked this post.
|
#8
|
||||
|
||||
if you merge them into 1 file you will get errors (you need to worry about execution order, etc)
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
#9
|
||||
|
||||
Originally Posted by Princeton
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? No members have liked this post.
|
#10
|
||||
|
||||
I recommend running tests to find out what files you can merge.
the idea here is to decrease bandwidth but also to generate the pages faster
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
#11
|
||||
|
||||
Great article Joe, thanks for sharing
![]()
__________________
No members have liked this post.
|
#12
|
|||
|
|||
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. No members have liked this post.
|
#13
|
||||
|
||||
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:
No members have liked this post.
Last edited by porcupine73; 06 Nov 2009 at 01:18. Reason: update code |
#14
|
||||
|
||||
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/ ![]() No members have liked this post.
Last edited by Scalemotorcars; 06 Nov 2009 at 13:52. |
#15
|
||||
|
||||
wow
thanks for sharing No members have liked this post.
|
![]() |
![]() |
||||
Article | Author | Type | Replies | Last Post |
Improve performance on thread view updating | dwh | vBulletin 3.0 Full Releases | 45 | 23 Sep 2005 07:53 |
«
Previous Article
|
Next Article
»
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
Article Options | |
|
|
New To Site? | Need Help? |
All times are GMT. The time now is 20:37.