Have you gone to the Pricelist? Oh, I'm sure you have! Now have you noticed the load time? Yeah, the load time is around 10.62 seconds. The wiki is slow, and some pages have load times exceeding 10 seconds. This is because the page is loading every image individually. By each image loading individually increases your bandwidth usage. Why? It’s simply because your browser has to establish a connection to the server for each image request. The solution for this would be to use Sprites -- basically one image containing multiple images. This means only one image needs to be loaded, and it greatly decreases the load-time of the pages.
My suggestion is to enable CSS image sprites on the wiki, which would allow us to implement Sprites and speed up wiki navigation.
By using the following sprite it will significantly reduce the number of server requests, also will save bandwidth! To download this image it would be around 433ms... What?!?! Yeah I know that would increase page load by a lot.
Image we would use for the sprite: 
Premade css sheet:
http://pastebin.com/zbW1ZfgDWhat are CSS Sprites?"Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.
Sprite may seem like a bit of a misnomer considering that you're create a large image as opposed to working with many small ones, but the
history of sprites, dating back to 1975, should help clear things up.
To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic.
CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. This reduces the overhead of having to fetch multiple images.
Why use CSS Sprites?
It may seem counterintuitive to cram smaller images into a larger image. Wouldn't larger images take longer to load?
Let's look at some numbers on an actual example:
That adds up to a total of 14.38KB to load the three images.
Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images. This isn't a big difference, but there needs to be a good reason to accept this larger file... and there is!While the total image size (sometimes) goes up with sprites,
several images are loaded with a single HTTP request. Browsers limit the number of concurrent requests a site can make and HTTP requests require
a bit of handshaking.Thus, sprites are important for
the same reasons that minifying and concatinating CSS and JavaScript are important.
"If my suggestion gets implemented then I will make a post on how to use them! Until then you'll have to wait!
The wiki is now using css image sprites the new load time is 2 seconds thanks to the wiki contributors efforts!!!
Locking this due to the fact that it is no longer needed.The following users liked this post: C4 Nerd,
66destroyer3,
Yaz,
Back At It
Show Posts
