Sites with Jumping Beans

[Scott A.]

I figured my question was more general so I'm posting here. Hope it is the correct place.

I've been looking at a lot of sites and templates just to get an idea of what is out there and how to do things.
One thing I've noticed is that there are some sites that load quick and smooth. No jumping around. Other sites look like they have eaten a whole bowl full of jumping beans.
The site loads "full width" then re-sizes to the graphics. It doesn't seem to be browser specific. More site specific.

My question is this: Is there a "best practices" in how to place code and graphics in the boards to achieve the best experience for the user?

I would love to know how the pros think on this!

Thanks,

Scott

[Jordan]

Coding

The first thing I should say is that using Javascript in general for Proboards is slow because we have to manipulate the content after it loads. This won't be a problem when version 5 comes out since we will have direct access to the page source.

One thing you can do to speed up Javascript execution is to simply not have a lot of codes (unless you know how to manipulate them to be efficient). Just add the codes that you think are most beneficial to your forum and then stop there. Having a lot of codes will just slow everything down and eventually you'll get two codes which will conflict with one another since they will be trying to modify the same area of the page.

Another thing you can do is to save your Javascript code into an external file so the browser can cache the file on the user's hard drive. This way, the browser can quickly retrieve the file off the hard drive on subsequent loads which is a lot faster than having to retrieve it off the web each time. You can do this with your CSS as well.

<script type="text/javascript" src="externalhost.com/yourfiles.js"></script>

You should also use CSS over Javascript whenever possible. Put your CSS in your header so the browser can apply the styles while it parses the HTML. If you want your forum to be quickly resized, just use CSS/HTML (Chris has one in the Code Database).

Graphics

Use gradients. They look good and they load quickly because you can make them 1 pixel in width and have the browser repaint it over an entire object. For normal (larger) images, just don't use that many. Nearly every pixel (32 bits) has to be loaded unless RLE acceleration or some type of compression is used, but even then the process is still slow. Having lots of images which have to be loaded can give that "jumping" effect.

Preload images. If you know you are going to have a lot of images or if your images are taking more time to load than you would like, then load the images in the background on pages that don't display them which the user will visit first. A good example of this is to use a splash page. As the user views your splash page, load all the images used throughout your forum so by the time the user enters most if not all of the images will be fully loaded. Let me know if you want to know how to do this. Using a sprite sheet is good as well. I believe Charles Stover pointed out earlier that Google preloads its main sprite sheet on its home page (which you don't see at all), and then the pages you visit after the home page use that sprite sheet stored on your hard drive.

In other words... the basic idea is to create a template which looks nice and uses resources efficiently. If you want a design that has "hi-tech" graphics, do it with small images that work with gradients and then position everything with CSS. The user will never know the difference. Load resources that the user will probably need on subsequent pages right now. Store CSS and Javascript in external files so they can be stored in cache. Use CSS over Javascript whenever possible. Finally, only add features that you really need rather than bloating your forum with a ton of them.

[Scott A.]

Jordan

Thanks for your input. I've done some programming in other things but the Proboards is new for me. Your comments help a lot.

I didn't realize that you could have external CSS and Java Script - That makes a lot more sense to me. I'm assuming that it would have to be hosted on the web - Kind of like hosting your images else where. Would a folder off my web site be adequate?

Just in my reading of other topics it seems as though there will be a lot of new benefits in v5. Is there a projection when it will be ready?

I was curious about using sprite sheets - I wasn't aware those could be used with PB. Do you know of any threads or examples of using them? I'm afraid I don't have much experience with sprites but the theory intrigues me.

The same with pre-loading graphics. Makes sense but I don't think it is done much. I also have not seen examples here.
In fact, I would love to see more documentation in general. I for one would read it. Unfortunately, I don't think many would so it doesn't seem to be a priority. Unless I'm just missing it some where. The good thing is that we have these boards and I do do a lot of searching and reading. There are a great bunch of tidbits out there, it is just to bad there isn't a method to submit a post for a "best of" list. Maybe that should go into a suggestion box! LOL

Again thanks for the input.

Scott

[Jordan]

Hey Scott, I'll put some examples below on how to do this.

Your are correct about having to put external JavaScript and CSS files on another host. A folder on your website would be perfect. Just don't put the <script></script> and <style></style> tags in the file. Instead, just save it as .js and .css. Be sure to select the "All file types" option when you are saving so it doesn't become a filename.css.txt file (assuming you are using Windows).

To load these files on your site, it is best to use a little bit of JavaScript to append them dynamically to the HTML head tag which we can't access directly. I've put a script below that does this.

For using sprites, just Google "CSS Sprites". I don't think there are any tutorials on here, but if you want to see an example, the link below is for Google's sprite sheet. They just have to cache that single image on your machine, and then they use CSS to display parts of the image. This really can improve your loading times because each image on a web page requires a HTTP-Request.

www.google.com/images/nav_logo16.png

There's two ways you can pre-load graphics off the top of my head. One is to use an <img> tag, but to add style="display: none;" to it.

<img src="http://yourhost.com/img.png" style="display: none;" />

This browser will load the image, but it won't be displayed. I would just use Javascript, however. Below is a code I've written that should do all this for you, but I don't have time to test it right now so it may have problems.

<script type="text/javascript">
<!--

var Global = {

      // Where the files are located on your host.
      // Don't include any "/" at the beginning or ending of the paths.
      paths: {
            main: "yourwebsite.com/proboards",
            css: "css",
            js: "js",
            images: "images"
      },

      images: [
            "image1.png",
            "image2.gif",
            "image3.jpg"
      ],

      preLoadImages: function() {
            if(pb_action == "home") {
                  for(i = 0; i < images.length; i++) {
                        var _img = new Image();
                              _img.src = images;
                  }
            }
      },

      loadFile: function(_file) {

            var type = _file.split(".")[1];

            switch(type) {
                  case "js": {
                        var _script = document.createElement("script");
                              _script.type = "text/javascript";
                              _script.src = paths.main + "/" + paths.js + "/" + _file;
                              document.getElementsByTagName("head")[0].appendChild(_script);
                        break;
                  }
                  case "css": {
                        var _style = document.createElement("link");
                              _style.type = "text/css";
                              _style.rel = "stylesheet";
                              _style.href = paths.main + "/" + paths.css + "/" + _file;
                              _style.media = "screen";
                              document.getElementsByTagName("head")[0].appendChild(_style);
                        break;
                  }
            }
      }
};

//-->
</script>

It's good to put everything into a Global object. To use this, you just write Global.functionName().

I would put this code in your Global Header, and then call preloadImages() and loadFile("file.js") (works for CSS files as well) on each page. I have the preloading function setup to only execute on the home page and I would put it directly below the Global object. If you don't have a lot of different images on subsequent pages you may not need this. The loadFile function calls should be placed where the codes would normally go, so you should have files named something like "header.js", "footer.js", "styles.css" etc.

I'll add to this later, but hopefully this helps some.

[Scott A.]

Jordan you ROCK!!
I really appreciate the examples.
The Google sprite really surprised me. I thought a sprite had to have all images the same width and height. Not this one though. I'm going to have to go learn more about creating and using sprites now.

I'll also have to study the code a bit and your instructions in order to digest it a bit. I can tell you right away that I'll have questions but I want to struggle with it a little - I think you learn better that way.

I can tell you right off the bat that you went over my head on this part:

It's good to put everything into a Global object. To use this, you just write Global.functionName().

I would put this code in your Global Header, and then call preloadImages() and loadFile("file.js") (works for CSS files as well) on each page. I have the preloading function setup to only execute on the home page and I would put it directly below the Global object. If you don't have a lot of different images on subsequent pages you may not need this. The loadFile function calls should be placed where the codes would normally go, so you should have files named something like "header.js", "footer.js", "styles.css" etc.

I'll add to this later, but hopefully this helps some.

Once again I really do appreciate you doing this. I was just tossing this out for discussion not really "expecting a solution". Yet another reason I have grown to like ProBoards... People are always willing to share their knowledge and lend a helping hand.

I look forward to reading more!

Scott

[Jordan]

Glad it's all helping. I'll try to clear things up a bit, but keep letting me know if something doesn't make sense. A lot of things are obvious to me which I don't realize aren't obvious to other people.

To make your sprite just open up Microsoft Paint, Gimp, Photoshop or whatever program you have, and combine all the images into one. Then use CSS to set the background-position. I found a really good tutorial here.

As for the coding, you don't really have to know how it works. Just put it in your Global Header, and the only editing you need to do is to set the paths which your images and codes are located at. For example, the CSS path that would be constructed in the code right now would look this when you call the loadFile("file.css") function.

yourwebsite.com/proboards/css/file.css

Notice how this works with the code below.

paths: {
        main: "yourwebsite.com/proboards",
        css: "css",
        js: "js",
        images: "images"
}

Each variable represents the location of the items you have stored on your website, and this is assuming you have your files set up this way. This can be easily changed if you want to store things in a different way.

The only other thing you really need to know about the code is how to use it. If you want to load a JavaScript file in your global header, then create a JS file with all your global header codes (without the <script></script> tags), name it "gheader.js", and then upload it to your site into your javascript folder. Then in your global header, type:

Global.loadfile("gheader.js");

This will load the file located at:

yourwebsite.com/proboards/js/gheader.js

At this point I don't think you really need to preload any images. I added the feature to just give you a feel for it. The basic idea is to just get the browser to request the image and load it, but to not display it it.

[Charles Stover]

Oct 11, 2010 12:11:07 GMT -8 Scott A. said:

I figured my question was more general so I'm posting here. Hope it is the correct place.

I've been looking at a lot of sites and templates just to get an idea of what is out there and how to do things.
One thing I've noticed is that there are some sites that load quick and smooth. No jumping around. Other sites look like they have eaten a whole bowl full of jumping beans.
The site loads "full width" then re-sizes to the graphics. It doesn't seem to be browser specific. More site specific.

My question is this: Is there a "best practices" in how to place code and graphics in the boards to achieve the best experience for the user?

I would love to know how the pros think on this!

Thanks,

Scott

Three things immediately come to mind with images (although there are countless ways to improve performance).

First, cache. Give images and other static documents (CSS/JS) a permanent (i.e. year+) cache. Simple as that. Use ETags for when the cache expires or for documents that update every-so-often at no real predictable interval. An ETag gives a document an ID (e.g. the timestamp of the last time it was modified). When your browser requests a document, it sends the ETag of the one it received last (and has cached). The conversation would look something like this:

Browser: Hey, server. I'm looking for stylesheet.css. I already have one named v122534. Is there a newer one?
Server: Nope, that's the latest.

Done! No bandwidth used, no download time used. The browser didn't have to re-download the document, so time was saved.
However, the browser _did_ have to connect to the server, so this method is milliseconds slower than simply using a 'permanent' cache, which you should use if you know that a document is never going to change.

Second, sprite sheets. When using background images (especially those with a fixed width or non-repeating), you're supposed to put them all in a single image. Set the gigantic image as the background-image of an element, then position it using background-position. This way, whenever the images are loading, the browser only has to make a single connection to the server in order to get every image necessary for those backgrounds. Obviously there are exceptions and not every image can fit into this one (e.g. the <body> background, since the size is not fixed). This should be used for graphics that are viewed on all pages. Obviously if there's a gradient that's on every page and some picture that's only on one page, they shouldn't go in the same sprite sheet (it's a waste of bandwidth and storage if they never view the page with the picture). At the same time, the file size of a large image is generally smaller than the file sizes of smaller images combined.

Lastly, setting width/height. If you're using an inline image <img />, set the width and height attributes. While it is capable of loading on its own, it doesn't know what width or height to be until it has loaded. This causes the page size to jump around as the image loads (and thus starts stretching from the size it was). Beyond that, the browser also has to read the image in-depth instead of just display it, in order to determine the width and height of it in order to set to width and height of the <img /> element. It takes extra processing power, and it causes the page to jump. It's a really simple fix to just throw in the width and height attributes.

[Charles Stover]

RE: Preloader.

I'd vote against this. Splash pages are fugly, and preloading is only valid if cache is enabled. Otherwise, you're wasting bandwidth and the user's time. I've never had to preload anything, and I've never had a problem with it. Honestly, I'd rather my browser spend a few extra seconds on some page that uses the graphics than spend a few extra seconds on some page that doesn't. Especially if it were a splash page, which I'd hate to have to see. And especially since I'd likely close the window once seeing a splash page (and thus the preloading was a waste of time, since I never saw the pages).

Soooo... preloading. No. No exceptions, imo.

[Jordan]

I actually agree with you on the preloading which is why I stated in my last message that he doesn't need to do it. I meant to get the idea across that it's something you may want to do if you have a setup like Google or if you know subsequent pages are going to have a lot of images. I really don't think its needed unless you aren't using a sprite sheet and you are using rollover images which will only start to load until you roll over them which makes them not display for a second.

[Scott A.]

Hey guys -


Interesting points on both sides. I haven't had a chance to try things out - unfortunately work takes priority

Thanks for all the input!

Scott

[Scott A.]

Hi Jordan and Charles -

I didn't know whether or not to start a new topic in the support or continue here. I decided here as it is pretty much a continuation of this discussion. Please feel free to move if you think it best.

---

I made up and tried to use the CSS Sprite but I am not having much luck. I have it working on a test html page on my local machine but can't get it to work in the proboards.

I would like to use the sprite in this code:
Extra Avatars Based on Post Count

The first issue is I can't get the code to work at all trying to use a sprite image. You can see the sprite here: AV Sprite

The whole sprite is 170px by 1020px. Each image is 34px high by 170px wide.

Second:
Since I wasn't having any luck I tried to get the code working with just individual images. So far I have only been successful in getting one image in a single .png to show. The images aren't changing with the post count.

My test site: LINK

There is a test user set up:
username: peggya
pass: peggya123

If either of you (or anyone for that matter) could help me troubleshoot this I would sure appreciate the help. I've only got 2-3 hairs left to pull - LOL.

Thanks!

Scott

EDIT:

Fixed issue 2. For others reference I found THIS POST that explains the fix.

I could still use some help with issue 1 - how to use a CSS Sprite.

Thanks!

Scott