MyBB Community Forums

I've been able to spend a lot more time on one of my forums, rtfw.org, mainly because the person that is running it with me has been able to spend more time with it as well. One thing I've been working on is optimizing the loading speed of my website, because it's on a shared host (and will be until I can earn enough to move it to it's own small VPS) that isn't the fastest in the world. I've also been doing it as a learning experience, so even if the performance gains are negligible I would still like to know.

What I've already done:

• Sign up for CloudFlare
  
• Re-compress the main images used by the site (pngcrush and a little manual hex editing on the body background and a cool but a little confusing tool called Trout's GIF optimizer on the container BG, as well as pngcrush-ing all of the other pngs)
  
• Tweak the caching HTTP headers for various file types
  
• Minified prototype.js
  

To do:

• CSS optimization and minifying
  
• HTML optimization
  

All in all, I've managed to reduce my front page's initial hit time to an average of ~4 seconds (unless you're in Ireland in which case it's a mind-numbingly slow 6 seconds).

However, I know I can do better. What I could use help on is how. I've already run my page through https://developers.google.com/pagespeed/ and got a score of 96, but I see it as 4 points of potential improvement. On top of that, I don't think that Google's PageSpeed takes into account bandwidth optimization (and I know it doesn't take into account the Google Analytics stuff that I have no control over).

Part of the reason I wanted to optimize the crap out of my site is that the VPS I've been looking at is ~$4/mo, but has a 150GB/mo limit. It's their cheapest plan, and I believe I can upgrade as needed when the time is right, but I wanted to get things as good as possible now while it's just a nice-to-have, not while I'm panicking because it's a need-to-have. I'm focusing on size optimization first, rather than page generation speed, since that's what will affect me the most (and since most page-generation speed upgrades would be from updated software, which I have no control over on my shared host). Most of what I've done was chosen on an effort to benefit ratio, but at this point I'm getting into the little details that are easy to miss, and I know I've missed things.

TL;DR: Please help me make RTFW.org as tiny as possible while still looking good!

It's currently loading in ~1.3 seconds for me so I'd say you're doing pretty well so far.

One things that supposedly helps is specifying image dimensions, though I've never noticed a difference. Are you currently using CSS Sprites for images or not? If not, I'd certainly advise doing so. I'd also advise combining all your JS files and moving them to the bottom of the body.

Using CSS sprites sounds interesting, do you have any tips for getting started on that? Things like which images and what's the best way to go about doing that.

I tried moving the JS to the bottom of the page at one point but it had no visible effect on load times. I'll combine them though, as well as minify them.

Well, this is a great resource for information on how they work exactly: http://css-tricks.com/css-sprites/

As for which ones you should do, I tend to do whatever I can. I always make sure my small images (icons, thead background etc) are sprited at the very least.

"What I've already done:

Sign up for CloudFlare

To do:

• CSS optimization and minifying
  
• HTML optimization
  

"

Just a quick note that you could use CloudFlare's Auto Minify for this (can also use to minify JS and HTML).

According to this tool the site is good enough already. But there are some minor problems with cache headers and with graphics.

"Freshness lifetime (Cache-Control): 604800 sec, 22% of recommended one month."
"Wrong MIME type (image/gif) for PNG image."
"Wrong extension (gif) for PNG image."

For
http://rtfw.org/images/RTFW/body_bg.png
"JPG version could weight 1%"

PNG is not always the best format.

(2012-04-17, 07:50 PM)damoncloudflare Wrote: [ -> ]

• CSS optimization and minifying
  

"

Just a quick note that you could use CloudFlare's Auto Minify for this (can also use to minify JS and HTML).

I do use it, but I meant more along the line of combining similar styles to reduce the number of CSS rules, as well as streamlining the HTML markup (i.e. use <strong class="smalltext"></strong> instead of <span class="smalltext"><strong></strong></span>).

(2012-04-18, 05:59 AM)Genry Wrote: [ -> ]http://rtfw.org/images/RTFW/body_bg.png
"JPG version could weight 1%"

PNG is not always the best format.

Except JPG doesn't support transparency and I was originally using that image with another theme (back when I hand optimized it to solid-black-with-trns-palette instead of RGBA). I will look in to recompressing container_bg.png as a JPG since there's no transparency in that one (well there is but that was supposed to be a GIF compression trick that ended up being smaller as PNG).

Beyond that most of the "problems" are the "MyBB uses GIF and I use PNG and I'm too lazy to change all of the .gif to .png" problems (which I'll fix as I redo the HTML and build sprite sheets) and some cache length problems (one of which is Google's fault and I can't change it and I wish all of those speed tools would recognize that and stop complaining about something I can't change).