PhucSD
12-06-2011, 06:30 PM
A lot of search engines (http://blogs.sitepoint.com/google-rankings-now-affected-by-site-speed/) 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
The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It's true that the end-user's bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.
Source (http://developer.yahoo.com/performance/rules.html)
If your server supports gzip compression you can alter the level of compression in your vBulletin administrator control panel.
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>
Instead, create a class and then put the attributes for the class in additional.css template.
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>
It is relatively easy to find all instances of inline CSS.
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" );
Put Scripts at the bottom
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.
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
Source (http://developer.yahoo.com/performance/rules.html)
Make JavaScript and CSS External
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>
Instead create an external file and call it in the template.
Example:
Code:
<LINK href="mystyle.css" rel="stylesheet" type="text/css"><script src="http://www.mysite.com/js/myjs.js" type="text/javascript">
Minify JavaScript and CSS
Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin (http://crockford.com/javascript/jsmin) and YUI Compressor (http://developer.yahoo.com/yui/compressor/). The YUI compressor can also minify CSS.
Source (http://developer.yahoo.com/performance/rules.html)
In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. (If you must use them, it is recommended to have your scripts and styles as external files.)
Reduce the number of DOM elements
vBulletin.com forum has 1909 DOM elements. My site (http://www.windowscommunityforum.com/) 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
http://i53.tinypic.com/hwl2lk.png
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
GZip Compression
The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It's true that the end-user's bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.
Source (http://developer.yahoo.com/performance/rules.html)
If your server supports gzip compression you can alter the level of compression in your vBulletin administrator control panel.
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>
Instead, create a class and then put the attributes for the class in additional.css template.
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>
It is relatively easy to find all instances of inline CSS.
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" );
Put Scripts at the bottom
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.
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
Source (http://developer.yahoo.com/performance/rules.html)
Make JavaScript and CSS External
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>
Instead create an external file and call it in the template.
Example:
Code:
<LINK href="mystyle.css" rel="stylesheet" type="text/css"><script src="http://www.mysite.com/js/myjs.js" type="text/javascript">
Minify JavaScript and CSS
Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin (http://crockford.com/javascript/jsmin) and YUI Compressor (http://developer.yahoo.com/yui/compressor/). The YUI compressor can also minify CSS.
Source (http://developer.yahoo.com/performance/rules.html)
In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. (If you must use them, it is recommended to have your scripts and styles as external files.)
Reduce the number of DOM elements
vBulletin.com forum has 1909 DOM elements. My site (http://www.windowscommunityforum.com/) 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
http://i53.tinypic.com/hwl2lk.png
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