Tweet
An easy way to save loads of bandwidth ( Font tags >> Style Sheets )
Saving bandwidth is good for everyone, so here is a little tip to save absolutely buckets of it.
You may have noticed in your styles CP that there is an option to specify a 'class' for the various font sizes. This is what it's for
Normally, if you use the default settings, every single piece of text on a vBulletin page will be surrounded by <font> tags, each of which contain this sort of information (view the source of this page and you'll see)
You'll see that code repeated hundreds of times all over the pages. Wouldn't if be good if we could somehow take that formatting information and store it centrally in the HTML, then have all the <font> tags reference that single source?
Well you can.
Let's try it for the most common tag - <normalfont>.
Normally, <normalfont> is replaced with this sort of thing: <font face="verdana, arial, helvetica, sans-serif" size="2"> because your settings for <normalfont> look like this:
Let's get rid of all that superfluous information, and simply replace it with a CSS style definition:
<normalfont> will now be replaced with
This is much, much smaller than that long definition we had before, but how do we tell it what font and size we want it to use?
Look up at the top of your styles control panel, and you will see an area where you can edit the headinclude template. By default, your headinclude will look like this:
Just before the closing </style> tag, we will now add our central definition for how <normalfont> will be formatted. Add this:
This CSS class definition will now be called for ALL the <normalfont> tags, so your resulting HTML pages will be much smaller. Repeat this for <smallfont> and <largefont> and you're laughing
You may have noticed in your styles CP that there is an option to specify a 'class' for the various font sizes. This is what it's for
Normally, if you use the default settings, every single piece of text on a vBulletin page will be surrounded by <font> tags, each of which contain this sort of information (view the source of this page and you'll see)
Code:
<font face="verdana, arial, helvetica, sans-serif" size="2">
Well you can.
Let's try it for the most common tag - <normalfont>.
Normally, <normalfont> is replaced with this sort of thing: <font face="verdana, arial, helvetica, sans-serif" size="2"> because your settings for <normalfont> look like this:
Let's get rid of all that superfluous information, and simply replace it with a CSS style definition:
<normalfont> will now be replaced with
Code:
<font class="nf">
Look up at the top of your styles control panel, and you will see an area where you can edit the headinclude template. By default, your headinclude will look like this:
Code:
<meta http-equiv="MSThemeCompatible" content="Yes">
<style type="text/css">
BODY {
SCROLLBAR-BASE-COLOR: {[color=black]categorybackcolor[/color]};
SCROLLBAR-ARROW-COLOR: {[color=black]categoryfontcolor[/color]};
}
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
#all A:link, #all A:visited, #all A:active {
COLOR: {[color=black]linkcolor[/color]};
}
#all A:hover {
COLOR: {[color=black]hovercolor[/color]};
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: {[color=black]categoryfontcolor[/color]};
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: {[color=black]categoryfontcolor[/color]};
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: {[color=black]linkcolor[/color]};
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: {[color=black]hovercolor[/color]};
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: {[color=black]tableheadtextcolor[/color]};
}
</style>
$headnewpm
Code:
.nf {
FONT-FAMILY: verdana, arial, helvetica, sans-serif;
FONT-SIZE: 13px;
}
. That's a 16% reduction.
Comment