So I've learnt a bit about CSS Sprites, and it seems that they can significantly reduce page loading times.
Short Description of CSS Sprites
A CSS Sprite is a whole group of images/icons arranged and painted onto a grid, the grid itself being an image, so that you have one image containing all the other images. A .css file then contains the coordinates/positions of each of the images/icons on the grid, so that only the single CSS Sprite image needs to be downloaded, after which the .css file will "find" the various images on the grid, then serve them to the web.
A CSS Sprite is basically many small icons/smileys/images combined into one image. Downloading too many small images sends too many HTTP requests which puts unnecessary strain on a server, and also creates plenty of latency, causing the small images to download much more slowly than if they were one image.
I was Googling a bit to see if any SMF users have successfully implemented CSS Sprites, but I only found it being mentioned twice or thrice. Some SMF users (even Simple Machines to some extent) have implemented it into their forums' but no mod has been introduced or even discussed that incorporates sprites into SMF. Besides that, there aren't even any mods that really optimize SMF page output. Where are the Minify (http://code.google.com/p/minify/) or Cache Control (http://www.askapache.com/htaccess/apache-speed-cache-control.html) mods?
Anyway, I also had a look to see if vBulletin had such a mod, and it turns out they do. The vBulletin "United-Forum CSS Sprites" mod (http://www.vbulletin.org/forum/showthread.php?t=266696) was created only 2 weeks ago. I'm not sure how far open source code goes, but perhaps someone can ask the author if the mod may be ported to SMF. If not, then maybe someone with plenty of php, css, sprite, and mod knowledge can create SMF's own CSS Sprite mod.
It would be even better if a free mod was created for SMF that could compete with WEBO Site Speedup (http://www.webogroup.com/home/site-speedup/features/).
SMF 2.0 does use some sprites by default. More can easily be added for custom work (I usually use them in custom theming, etc). We'll be making more extensive use of sprites in 2.1, but there are some things you cannot use them for. Smileys are one thing, since smileys are added individually on an ad hoc basis and are therefore not amenable to being made into sprites.
Minification is handy, but the gains aren't as much as you might expect. For instance, minifying the default 2.0 index.css only saves around 10% of the byte count. That amounts to 5 or 6 kb. Given that one avatar can easily be 30 kb, or even a lot more, saving 5 kb on a css file will not result in a noticeable change in page load speed.
You may be 100% correct about the SMF's core code, but what about mods? Various mods may be the culprits in slow-loading pages. I'm suggesting that a mod be made that can somehow find the appropriate faults on a page then optimize them, perhaps via a proxy (even on on a subdomain). I think this is how WEBO Site Speedup works.
Regarding smileys, yes more smileys are are usually added to a forum over time, but why can't the default set be a sprite, while the others remain separate images? After a large number of new smileys get added, they could also be combined into a new sprite, so that the forum then has 2 sprites for smileys, one for the default smileys and another for custom smileys.
I know some people will say that these files get cached soon enough, however if someone visits a forum for the first time, and the page takes forever to load, they're likely to hit the browser's back button and go elsewhere.
You say minification doesn't have so much gains, but 10% is a very large saving in both disk space, and bandwidth. Currently I'm on a free, local (i.e. South African), shared hosting package, and my forum's brand new (with only two members, me and a tester). Note that this is the best free local hosting package out of all the South African ISP's (other than uncapped packages which is saturated with users). I get 100MB of disk space, and 500MB of traffic. Before I installed my anti-bot mods, I almost hit my cap in 3 weeks. However, I alone sometimes use 20MB-30MB of traffic in a day, 10MB of which is for a backup. One backup a day is already 300MB for a month. Then there's disk space. 10% of 100MB is highly significant. Any savings will work for me. Why should one upgrade their hosting package when they probably have enough resources already? I reckon one should first make their website as fast, efficient, and compact as possible before looking at upgrading, and I'm talking about everything: ram, cpu, bandwidth, disk space, and type of hosting (shared or dedicated) - everything should be optimized first before you upgrade, unless you've got money to burn.
Well the problem with spriting default smileys is that people often want to change those too. For instance, although I still use the default code for the most basic smiley
:)
I do not still use the standard gif image. So, to be any use, a spriting app would have to be able to recompile all default images and their css too. This is possible, but it's not high on our list of priorities.
10% saving in total is a significant saving in storage space and bandwidth, but that's not the standard to measure this by. For example, just a default Subs.php (without any other SMF or custom files) is 150kb of storage space and you cannot minify php files to anything like the same extent that you can do with css and js files. By saving 5 or 6 kb on a css file you will not save anywhere remotely near 10% of your storage space. It will actually be less than 1%.
Same with bandwidth. You may save 10% of the bandwidth required to cache that particular file, but that is not at all the same thing as saving 10% of your total bandwidth usage. Like I said, minification is handy but the real gains from it are not nearly as significant as you might think.
I thought about writing a speed mod for SMF which basically takes in account many of the optimizations tips provided on the forums and then some other additions that I think would be helpful just haven't had the time to do it.
Lainaus käyttäjältä: vbgamer45 - heinäkuu 30, 2011, 07:34:45 IP
I thought about writing a speed mod for SMF which basically takes in account many of the optimizations tips provided on the forums and then some other additions that I think would be helpful just haven't had the time to do it.
That would be great. You should probably have a look at WEBO Site Speedup to get more ideas of what optimization would be useful on the forum.
Lainaus käyttäjältä: Antechinus - heinäkuu 30, 2011, 03:15:28 AP
SMF 2.0 does use some sprites by default. More can easily be added for custom work (I usually use them in custom theming, etc). We'll be making more extensive use of sprites in 2.1, but there are some things you cannot use them for. Smileys are one thing, since smileys are added individually on an ad hoc basis and are therefore not amenable to being made into sprites.
Minification is handy, but the gains aren't as much as you might expect. For instance, minifying the default 2.0 index.css only saves around 10% of the byte count. That amounts to 5 or 6 kb. Given that one avatar can easily be 30 kb, or even a lot more, saving 5 kb on a css file will not result in a noticeable change in page load speed.
Sorry to drag this out of the depths but...
I've been notified by my host that they will no longer auto back up my site because I have exceeded 50,000 files - yes that is files not bytes. Size of the files has become immaterial as it now seems to be the number of files that count so reducing a set of smileys from, say, 50 images to one will save a lot more than 10% and yes it can be done (http://xenforo.com/community/threads/smilies-as-css-sprites.20121/)...
Lainaus käyttäjältä: Mudlark - toukokuu 20, 2012, 07:25:19 AP
and yes it can be done (http://xenforo.com/community/threads/smilies-as-css-sprites.20121/)...
Now that' just awesome, I must say. That interface. Just awesome!
Lainaus käyttäjältä: Marcus Forsberg - toukokuu 20, 2012, 07:38:22 AP
Lainaus käyttäjältä: Mudlark - toukokuu 20, 2012, 07:25:19 AP
and yes it can be done (http://xenforo.com/community/threads/smilies-as-css-sprites.20121/)...
Now that' just awesome, I must say. That interface. Just awesome!
+1, i didn't knew that smileys can be loaded from sprite image. Great idea though! :)
If you're doing sprited smileys, you either have to do unanimated ones, or put them all into one huge animation (which has performance issues attached)
And I should note that putting smileys into sprites pretty much precludes users adding individual ones after.
But it's optional, so it would be a great thing to have for those who want it, for those who don't need animated smileys or don't need to add new ones/know how to add new ones. ;) But if we're talking performance improvements, smileys aren't exactly the first priority, that's true... :P
/me has actually been involved in an effort to cache smileys via sprites, it actually doesn't have the benefits everyone thinks it does.
There are other ways of doing such things.