The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Speed up your forum with a few edits.
A lot of search engines are now adding page speed as a determining factor in the way results are ranked and listed. There are a few things you can do to speed up the load time for guests (Bots, unregistered users etc). GZip Compression Quote:
AdminCP>Settings>Options>Cookies and HTTP Header Options> You will see a setting called GZIP Compression Level Play around with this setting. If used properly, it can dramatically decrease the load time of your site. Put CSS Stylesheets at the top If you are using any custom CSS stylesheets, make sure they are at the top of the page when it is rendered. If you have stylesheets loaded after the <head> then you should move them to the top by placing them at the bottom of template headinclude. Also try avoiding inline CSS. Example: Code:
<div style="margin:0 20px;border:1px solid #000000;"> content </div> Example: Code:
***** ADDITIONAL.CSS TEMPLATE ***** .newdiv { margin:0 20px; border:1px solid #000000; } ***** END ADDITIONAL.CSS TEMPLATE ***** **** YOUR DIV THAT WAS USING INLINE CSS **** <div class="newdiv"> content </div> Go to AdminCP>Styles & Templates>Search in Templates> select your style you want to edit, or leave it default to search all templates. then type in the search box style=" it will then show you all templates that have that in it, you can then search those templates, find the inline CSS, assign a class, and put the class attributes in additional.css Another tip is to avoid CSS Expressions. Most of the time you can get the look you want without using expressions. Example of css expressions: Code:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); This is also something that will help speed up the load time. Not every script needs to be loaded in the header. Move as many scripts as you can to the footer template. Quote:
This goes along with what I was saying before. Don't use inline CSS and Javascript. Create external css and js files and include the content in them and then add them to your style appropriately. Example inline css and javascript Code:
<style type="text/css"> .body { background-color:#FFFFFF; } </style> <script type="text/javascript"> $(document).ready(function(){ $("a.switch_thumb").toggle(function(){ $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); }, function () { $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); }); }); </script> Example: Code:
<LINK href="mystyle.css" rel="stylesheet" type="text/css"> <script src="http://www.mysite.com/js/myjs.js" type="text/javascript"> Quote:
Reduce the number of DOM elements vBulletin.com forum has 1909 DOM elements. My site has 670. A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS. The lower your DOM element count is, the faster your site will render. You can check the amount of DOM elements on your site by using Firefox with the Firebug addon. Enter the following command in the console of the page you want to check. Code:
document.getElementsByTagName('*').length There is no set amount of acceptable DOM elements. But you can get an idea of "acceptable" by looking at high-end sites such as yahoo.com (currently around 928 elements) and others. You can reduce your DOM element count by removing things that are not necessary, and optimizing your code. For example, you can edit the FORUMHOME template to hide the WGO (What's Going On?) box to guests. When google views your site they are viewing it as a "guest" so the less it has to load and read, the faster it will see your site. There are a lot of addons for Firefox that will help you in seeing and editing the code to your site, as well as optimizing it such as YSlow! and Page Speed. Here is a helpful page that has additional things you can do to speed up your site load time. http://developer.yahoo.com/performance/rules.html ---- WindowsCommunityForum.com - Your source for Windows news, discussion & support |
#2
|
||||
|
||||
great article :up:
|
#3
|
|||
|
|||
Excellent stuff, I really dont want to shock you with what my read-out was!
Can you explain a little about storing css as files and if this helps at all. And also external image calls. Thanks |
Благодарность от: | ||
nokturno |
#4
|
||||
|
||||
Wow the 'Make JavaScript and CSS External' part will come in handy for Google Adsense Channels.
--------------- Added [DATE]1308871232[/DATE] at [TIME]1308871232[/TIME] --------------- 'Create external css and js files and include the content in them and then add them to your style appropriately.' Where can I find out how to do this? I have some Google Channel ads I want to add throughout my site instead of doing them 'inline' |
#5
|
||||
|
||||
I love Firebug.
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|