Announcement

Collapse
No announcement yet.

An easy way to save loads of bandwidth ( Font tags >> Style Sheets )

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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)
    Code:
    <font face="verdana, arial, helvetica, sans-serif" size="2">
    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
    Code:
    <font class="nf">
    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:
    Code:
    <meta http-equiv="MSThemeCompatible" content="Yes">
    <style type="text/css">
    BODY {
    	SCROLLBAR-BASE-COLOR: {categorybackcolor};
    	SCROLLBAR-ARROW-COLOR: {categoryfontcolor};
    }
    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: {linkcolor};
    }
    #all A:hover {
    	COLOR: {hovercolor};
    }
    #cat A:link, #cat A:visited, #cat A:active {
    	COLOR: {categoryfontcolor};
    	TEXT-DECORATION: none;
    }
    #cat A:hover {
    	COLOR: {categoryfontcolor};
    	TEXT-DECORATION: underline;
    }
    #ltlink A:link, #ltlink A:visited, #ltlink A:active {
    	COLOR: {linkcolor};
    	TEXT-DECORATION: none;
    }
    #ltlink A:hover {
    	COLOR: {hovercolor};
    	TEXT-DECORATION: underline;
    }
    .thtcolor {
    	COLOR: {tableheadtextcolor};
    }
    </style>
    
    $headnewpm
    Just before the closing </style> tag, we will now add our central definition for how <normalfont> will be formatted. Add this:
    Code:
    .nf {
    	FONT-FAMILY: verdana, arial, helvetica, sans-serif;
    	FONT-SIZE: 13px;
    }
    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
    Last edited by Kier; Thu 24th May '01, 8:43am.

  • #2
    always wondered why there was so many font tags in the html code - but thought the stylesheet covered that.. guess you didn't before ..

    thanks kier
    :: Always Back Up Forum Database + Attachments BEFORE upgrading !
    :: Nginx SPDY SSL - World Flags Demo [video results]
    :: vBulletin hacked forums: Clean Up Guide for VPS/Dedicated hosting users [ vbulletin.com blog summary ]

    Comment


    • #3
      We use the full font tags for the default templates/replacements because we have to make sure that vB works half-decently in all possible browsers... by using this CSS you are cutting out those users whose browsers don't support CSS (IE3, NS3), but quite frankly (and this is my opinion, not that of vBulletin), if a user can't be bothered to upgrade from those browsers to something new, then I'm not going to put loads of extra code into my pages to make it work for them alone.

      Comment


      • #4
        Thanks for the tip

        Comment


        • #5
          WOW!

          That tip shaved 10KB away from my forumhome-page . That's a 16% reduction.

          Thanks!
          Last edited by TommyBALL; Thu 24th May '01, 8:52am.
          MCP / MCSA / MCSE / MCT
          A few eggs short of a complete easter basket

          vB 4.0.5+ CMS (No hacks), Windows Server 2008 R2 Ent, IIS 7.5, PHP 5.3+ (FastCGI), WinCache, Memcached, MySQL 5.1.45

          Comment


          • #6
            I've done some browser experimentation, and found that Nutscrape 4 messes that up (surprise surprise), so I've come up with these, which fix the problem.

            The class for normalfont and largefont is 'nf' and the class for smallfont is 'sf'.

            Plonk these in your headinclude:
            Code:
            .nf { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt }
            .sf { font-family: verdana,arial,helvetica,sans-serif; font-size: 10px }

            Comment


            • #7
              yup shaved off 15kb on my front page if you view it uncompressed - compressed it saved only 700 bytes hehe
              :: Always Back Up Forum Database + Attachments BEFORE upgrading !
              :: Nginx SPDY SSL - World Flags Demo [video results]
              :: vBulletin hacked forums: Clean Up Guide for VPS/Dedicated hosting users [ vbulletin.com blog summary ]

              Comment


              • #8
                Originally posted by Kier
                We use the full font tags for the default templates/replacements because we have to make sure that vB works half-decently in all possible browsers... by using this CSS you are cutting out those users whose browsers don't support CSS (IE3, NS3), but quite frankly (and this is my opinion, not that of vBulletin), if a user can't be bothered to upgrade from those browsers to something new, then I'm not going to put loads of extra code into my pages to make it work for them alone.
                Personally I think that if someone doesn't use a CSS browser, that shouldn't make the page not work- I know of one vBulletin site which is targeted towards Dreamcast users, many of which are using the Dreamcast to browse the board with HTML 3.2 and no CSS support. Additionally, those folks who browse in Netscape (4 at least, don't know about 6) and disable Javascript have CSS disabled too. But I also think there's really no harm done if users without CSS browsers can't see things in the font and size intended- these are enhancements, hardly requirements for readability. CSS is perfect for things like font and size settings, which are enhancements only and not vital to the content of the page.

                One thing I would like to see is to have the image pixel sizes also stored in variables or in some other way set such that you could put the image widths and heights in wherever possible without making it difficult to replace them. The lack of image sizes on most of the images in the tables make the page jump around like crazy when loading in my browser, and will cause slowness in loading in browsers which need that data to render the tables in the first place. I've gone through and put them in most of my templates, but it will be a pain when I change the images if their sizes change, so it would be better to be in a variable somewhere.

                Comment


                • #9
                  One thing I would like to see is to have the image pixel sizes also stored in variables or in some other way set such that you could put the image widths and heights in wherever possible without making it difficult to replace them. The lack of image sizes on most of the images in the tables make the page jump around like crazy when loading in my browser, and will cause slowness in loading in browsers which need that data to render the tables in the first place. I've gone through and put them in most of my templates, but it will be a pain when I change the images if their sizes change, so it would be better to be in a variable somewhere.
                  that would be great... i haven't done the hard coding of image sizings on my forum yet since i haven't settled on new graphics/dimensions yet but this would be nice
                  :: Always Back Up Forum Database + Attachments BEFORE upgrading !
                  :: Nginx SPDY SSL - World Flags Demo [video results]
                  :: vBulletin hacked forums: Clean Up Guide for VPS/Dedicated hosting users [ vbulletin.com blog summary ]

                  Comment


                  • #10
                    thanks Kier
                    You're my Prince of Peace
                    And I will live my life for You

                    Comment


                    • #11
                      forumdisplay is the page that will benefit most from this little tweak - compare the sizes before and after the alteration for a page with lots of threads displayed

                      Comment


                      • #12
                        Originally posted by Kier
                        forumdisplay is the page that will benefit most from this little tweak - compare the sizes before and after the alteration for a page with lots of threads displayed
                        saved 1.5kb compressed
                        :: Always Back Up Forum Database + Attachments BEFORE upgrading !
                        :: Nginx SPDY SSL - World Flags Demo [video results]
                        :: vBulletin hacked forums: Clean Up Guide for VPS/Dedicated hosting users [ vbulletin.com blog summary ]

                        Comment


                        • #13
                          I agree with you, cdaveb, altough I go a bit further in my css-ness, by totally disabling table things for css-incapable users. css-incapable users will just see transperent tables with images.. all those table/tr/td tag attributes gone make for much easier writing of html and also reduce the bandwidth used a lot..
                          Site: -http://www.jazz2online.com-
                          Forums -http://www.jazz2online.com/jcf/-

                          Comment


                          • #14
                            Why?

                            Wasn't something like this factored or optioned from the start? This confuses me a bit when I read this thread as to why that is?

                            Comment


                            • #15
                              is Head Insert the same as HeadInclude?

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X