The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Step by Step guide to speed up your VB4 OR VB3
There are several steps to improve your page loading speed. I will go over a few steps that will improve your site's loading time. Step 1: Tweak your htaccess. Open the htaccess file in your forum root and add the following below any url rewrite rules you may have from: Vbulletin 3 or 4 with VBSEO installed VB4 Forum Classic VB4 Suite VB3 by itself This covers the following Pagespeed Rules. Leverage browser caching Specify a cache validator Enable gzip compression Make the following changes in your admincp Code:
Mod Rewrite Friendly URLs From: Settings > Options > Friendly Urls: Select Mod Rewrite Friendly Urls *some people report login problems, I have posted below what works for me. Be sure to do this step as well to avoid problems!! https://vborg.vbsupport.ru/showthread.php?t=267588#3 Browse to the bottom of this first post for the .htaccess code. Step 2: Optimize images There is no more need to do this for vb4 packages unless you wish to do this on other images such as avatars, custom buttons, attachments, gallery uploads etc. This covers the following PageSpeed Rules: Optimize Images If you have access to Visual Studio 2010 (grab the trial edition here which should be compatible with the addon), you can complete this step in just a few clicks using this addon http://visualstudiogallery.msdn.micr...77c3?SRC=VSIDE You can also use pnggauntlet which will compress images as well. This is great to use on new skins/themes and also non animated gifs for Smileys, Signatures, Photo Album & Group Images and Avatars that your forum stores on your server! Please note that both of these methods produce lossless images, meaning that even though it uses various methods to decrease file size there is absolutely no visual loss in quality of the image. For non-windows users, I suggest Imageoptim & Trimage If you have alot of jpeg images, you can compress 10 per day with this jpegmini. Your other options with this tool are to upload jpegs to a jpegmini album which will compress the images for free which you can download soon after! Your other option is to buy the tool for $20, which will enable you to compress a unlimited amount of jpegs, although it won't compress images above 28 MegaPixels. Optional Step 3: Add CSS Sprites. Not compatible with VB3 This covers the following PageSpeed Rules: Combine images using CSS sprites Code:
Install the addon United-Forum CSS Sprites and follow all of the instructions. Can be found in the sprite_0.6.3a.zip file. Below are 3 free CDN's. I can vouch for cloudflare but have yet to try incapsula. 1) Incapsula 2) Cloudflare *Disable the Rocketloader feature to avoid potential issues. New article on how to setup your forum for HTTPS with cloudflare (Optional) Step 5: Make a free Server Optimization request Now that you've done all of the steps above, there is one final thing left to do if you are using a vps or dedi, tweak the Server! You can go here to request a free tuneup: http://www.vbulletin.com/forum/forum...-configuration Here's one additional trick to help improve your seo btw: [SEO Enhancement] Replace "reload this page" to the thread title [v1.00] Enjoy! Optional (Recommended) Step 7: Lazy load images. Lazy Load will delay the loading of images outside of viewpoint to make the page load faster. That is, images in the visible part of the web page are only loaded and remaining images are loaded when visitor scrolls down the page, at some times it can even helps to save bandwidth. Consider linking to us at http://video-game-chat.com/forum to help show your appreciation, since you'll be saving bandwith, reducing the loading time and thus keeping more visitors who visit your site. And impoving seo as google is now factoring in loading times into it's algorithms. Test your page speed & yslow score's If you would like to test your website and see what changes need to be made while you follow any part of this guide you can do so at several sites: GTMetrix Webpage Test Pingdom Here's a new htaccess that I've been testing, it's pretty solid so far. Simply throw in your url rewrite rules (for friendly urls).... this part may confuse people... they are usually located near the top of an existing htaccess file. Example of what rewrite rules look like... Code:
RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] # Forum RewriteRule ^threads/.* showthread.php [QSA] RewriteRule ^forums/.* forumdisplay.php [QSA] RewriteRule ^members/.* member.php [QSA] Code:
# Author: Final Kaoss (aka: Extreme-Gaming) # Version 3.2 # Special Thanks Goes to W3Total Cache for much of the htaccess rules RewriteEngine on # This file is only needed if you have set the Forum Component URL in your admincp and you are # using the mod_rewrite option for friendly urls. If this is the case, copy this file # to your forum component stub directory. # If you are having problems or are using VirtualDocumentRoot, uncomment this line and set it to your forum component directory. #If your site is located at site.com/forum, then go down one line uncomment (remove the #) and replace /vbtest/ with /forum/ # RewriteBase /vbtest/ # If you are having problems with the rewrite from content/ to content.php, uncomment this line to turn MultiViews off. Options -MultiViews #add your friendly url rewrite rules below. #stop adding your friendly url rewrite rules here. #Deny attempts to view the Htaccess file. <Files .htaccess> Order allow,deny Deny from all </Files> # BEGIN W3TC Browser Cache <IfModule mod_mime.c> AddType text/css .css AddType application/javascript .js AddType application/x-javascript .js AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg .svgz AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> # BEGIN Compress text files <ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf AddOutputFilterByType DEFLATE font/truetype font/opentype BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </ifModule> # END Compress text files # BEGIN Cache-Control Headers <ifModule mod_headers.c> Header set Connection keep-alive <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "private, must-revalidate" </filesMatch> </ifModule> # END Cache-Control Headers # BEGIN Turn ETags Off FileETag None # END Turn ETags Off # proc/self/environ? no way! RewriteCond %{QUERY_STRING} proc/self/environ [OR] # Block out any script trying to set a mosConfig value through the URL RewriteCond %{QUERY_STRING} mosConfig_[a-zA-Z_]{1,21}(=|\%3D) [OR] # Block out any script trying to base64_encode crap to send via URL RewriteCond %{QUERY_STRING} base64_encode.*(.*) [OR] # Block out any script that includes a <script> tag in URL RewriteCond %{QUERY_STRING} (<|%3C).*script.*(>|%3E) [NC,OR] # Block out any script trying to set a PHP GLOBALS variable via URL RewriteCond %{QUERY_STRING} GLOBALS(=|[|\%[0-9A-Z]{0,2}) [OR] # Block out any script trying to modify a _REQUEST variable via URL RewriteCond %{QUERY_STRING} _REQUEST(=|[|\%[0-9A-Z]{0,2}) ## ## Commented version of Rewrite rules attributed to Ronald van den Heetkamp ## Comments by http://bodvoc.com # # Prevent use of specified methods in HTTP Request RewriteCond %{REQUEST_METHOD} ^(HEAD|TRACE|DELETE|TRACK) [NC,OR] # Block out use of illegal or unsafe characters in the HTTP Request RewriteCond %{THE_REQUEST} ^.*(\\r|\\n|%0A|%0D).* [NC,OR] # Block out use of illegal or unsafe characters in the Referer Variable of the HTTP Request RewriteCond %{HTTP_REFERER} ^(.*)(<|>|'|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR] # Block out use of illegal or unsafe characters in any cookie associated with the HTTP Request RewriteCond %{HTTP_COOKIE} ^.*(<|>|'|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR] # Block out use of illegal characters in URI or use of malformed URI RewriteCond %{REQUEST_URI} ^/(,|;|:|<|>|">|"<|/|\\\.\.\\).{0,9999}.* [NC,OR] # NOTE - disable this rule if your site is integrated with Payment Gateways such as PayPal # Block out use of empty User Agent Strings RewriteCond %{HTTP_USER_AGENT} ^$ [OR] # Block out use of User Agent Strings beginning with java, curl or wget RewriteCond %{HTTP_USER_AGENT} ^(java|curl|wget).* [NC,OR] # Block out use of User Agent Strings containing specific robot (crawler) identifiers RewriteCond %{HTTP_USER_AGENT} ^.*(winhttp|HTTrack|clshttp|archiver|loader|email|harvest|extract|grab|miner).* [NC,OR] # Block out use of User Agent Strings containing references to specific crawler libraries RewriteCond %{HTTP_USER_AGENT} ^.*(libwww-perl|curl|wget|python|nikto|scan).* [NC,OR] # Block out use of illegal or unsafe characters in the User Agent variable RewriteCond %{HTTP_USER_AGENT} ^.*(<|>|'|%0A|%0D|%27|%3C|%3E|%00).* [NC,OR] # Measures to block out SQL injection attacks RewriteCond %{QUERY_STRING} ^.*(;|<|>|'|"|\)|%0A|%0D|%22|%27|%3C|%3E|%00).*(/\*|union|select|insert|cast|set|declare|drop|update|md5|benchmark).* [NC,OR] # Block out reference to localhost/loopback/127.0.0.1 in the Query String RewriteCond %{QUERY_STRING} ^.*(localhost|loopback|127\.0\.0\.1).* [NC,OR] # Block out use of illegal or unsafe characters in the Query String variable RewriteCond %{QUERY_STRING} ^.*(<|>|'|%0A|%0D|%27|%3C|%3E|%00).* [NC] # ## End of commented Rewrite directives # |
#172
|
||||
|
||||
I'll give it another shot, it messes with my style a good bit, and I'm not 100% sure I have the skills to fix it......
|
#173
|
|||
|
|||
Turns out that there's quite a few issues with the sprite mod and I've marked it optional as such. Instead of going for that, I use lazy load images, which I've included a link to in the first post.
If you want to pursue getting the sprite mod to work, GL! |
#174
|
|||
|
|||
I've tried out lots of things in this thread over the past couple of years and overall it's been really helpful so thank you first of all.
After researching and researching it seems like vB biggest problem is loading javascript in a bad way that doesn't allow parallel downloading when going through the html header. I've chatted with you about ways to try to compress the JS files but I'm not confident I can do that correctly. It seems like if there were a good fix for the JS files then it would be available, right? What I do think is a good idea is using a CDN to load the CSS and JS. Images should go there too but I think the first two file types cause the biggest problems. Now there are lots of options out there for CDNs but I believe it's possible to mimic a CDN by creating a subdomain on one's own site to load from. Is that correct? If so, do you know of anyone doing this for a vB forum? Here is my gtmetrix report if you are interested. Our load time is horrible according to them but for me it's usually lightning quick to load. I feel like Google Adsense will add one 1-2 seconds to a page sometimes but the real content is already loaded by then. |
#175
|
||||
|
||||
Quote:
Quote:
Here's a test I just did on you, the pageload is not too shabby for a site loading 111 requests.... This was with a IE10 browser on cable internet, Dulles VA. You can choose any browser, dozens of locations and connection types. http://www.webpagetest.org/result/131124_WS_5SN/ As you can see by clicking on the waterfall view, your js is cascading parallel, just fine and dandy for IE10. |
#176
|
|||
|
|||
Thank you again for your comments
I've used WebPagetest before many times in addition to some others. The output of it isn't as clear as to what steps can be made to improve issues like on gtmetrix or YSlow. Nevertheless, the main issues are pretty clear to me concerning vB - loading static content better. It's interesting you say that the JS files are actually loading in parallel, which is something I thought was a big problem for vB. I also have a handful of other JS code/files related to Tapatalk and Mathjax. In terms of just moving all JS, CSS and images to a CDN without any further tweaking - how much of an improvement do you think this could make? I really wish we had some "before and after" data to look at. Trying to make real changes to my site that result in better speeds is something that has been like a theoretical marathon of reading about different strategies but not knowing how to do them. I would like to try to implement something at last, but need guidance where to start. |
#177
|
||||
|
||||
Quote:
You'll see when you click on the waterfall view of your test, what I am talking about re: your js files cascading parallel nicely. Then run the test using a IE6 or 7 or 8 browser and you will see them, NOT do that. Older browsers just can't load js parallel. There's all kinds of tutorials based on your specific tests, at Meehan. There's also a message board community there not unlike this one, with many knowledgeable volunteer helpers like alot of the folks here at vB dot org. |
#178
|
|||
|
|||
The thing is we are all using the same base code for vB 4.x.x and most of the techniques for improving performance should be applicable to everyone else I would think. I'm not against doing tests and gathering data, in fact I enjoy that sort of thing, but I don't have an idea of where to start.
I just checked out http://www.video-game-chat.com/forum/ which is the website of the author of this article and I'm thrilled to see a super fast loading time and a great Webpagetest report. I wonder why he has so little files to load compared to my site? Ok I'll start with double checking my .htaccess file. vbsupercharged is EOL so can't use that and the CSS Sprites program has issues according to this thread. That pretty much leaves using a CDN and Lazy load images right? |
#179
|
||||
|
||||
Quote:
Every image, every advert, and alot of the mods you might install, are going to have their calls in the script. It can add up really quickly and bog your site down - it's one of the reasons your first byte time is relatively slow too. You have a heavy web page. Over 1,000 kb loaded there. Look at the waterfall in detail, look at what all of your 111 calls are. Default vBulletin out of the box only has 30 calls or so.... http://www.webpagetest.org/result/13...5SN/1/details/ At the bottom of the waterfall, click on "View all images" to get details on all your image sizes, whether they are compressed or not, and so on. By contrast, he's got TINY images that he sizes in the script, they don't load very many kb on a browser. http://www.webpagetest.org/pageimage...run=1&cached=0 Here's me. You don't need a CDN to be greasy fast. http://www.webpagetest.org/result/131124_X8_7E5/ |
Благодарность от: | ||
mathforum |
#180
|
|||
|
|||
Very interesting to see the images displayed like that! Thank you for showing me this option.
You make a good point. My custom design is heavy with pictures and we do have a decent amount of mods running that might not be optimized for speed. The number of requests is just too high I think. I don't know how to do this, but combining images lots of the tinier images into a sprite would be helpful. Luckily on the homepage there's only one modification that adds a lot of js and requests, but I can't get rid of it so that is what it is. Google ads are also being a bit annoying with the number of files and images running each time. Speaking of sprites, it seems the mod referenced in this article might still work for vB 4.2.0, the version we have. I'm worried about all of our custom images not working with the code but I'll give it a shot. If you have any advice on this I am all ears, otherwise I'll do my best to use the directions plus support thread. This has been a good discussion because I'm now seeing more details than I was before and in a more useful way. Maybe my misunderstandings can be useful to others who also don't know how apply the advice here. |
#181
|
|||
|
|||
Alot of images can slow a site down alot. Using Lazy Load, you can help reduce the load for guests... idk about search bots. As it loads images as the user scrolls down, meaning they can load many of the other static elements first. As for optimizing images, there's a few on the OP that don't reduce the quality, just the kb of the images; aka lossless image optimization.
As for using mods that you feel aren't optimized, for those that use js, you can run them through a javascript compressor online like this one. You can give the sprite mod a chance if you want but it gives users hell just to get the thing running and some people can't get it to run at all! Which is why I don't recommend it. I think the last thing you need to do is play around with deferring js... but don't go crazy with it, some core js just won't work if you try to defer it and cause you issues. It's been a while since I dabbled with it, so if you can report your findings on that here... it would help alot! The easiest way to remember to do this is to insert it in the first script tag before it closes like so. Code:
<script src="some_javascript.js" defer> |
Благодарность от: | ||
mathforum |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|