Jump to content

  • Log In with Google      Sign In   
  • Create Account





GDNet Slim

Posted by superpig, 16 July 2010 · 348 views

For the past three days or so, I've taken some time away from working on V5 to see if there aren't some things I can do for the current site, V4. As you're no doubt aware, we're in a bit of a tight spot on cashflow right now - much like everyone else in the industry - so I figured I'd see if there wasn't anything I could do to bring down our hosting costs. Messing with our hardware and datacenter setup is beyond my remit; I'm only the software guy here, but that software has been churning out an average of 15 terabytes of data every month, and bandwidth ain't free. Not to mention that it makes the site load more slowly for you.

So, what exactly have I done about it? 97 commits to Subversion in the past three days, that's what [grin]


  • I spent about 4 hours optimizing and refactoring the site's CSS. Historically the site's had one large (28kb) CSS file per theme, with lots of duplication between themes; this is now one shared (16kb) and one theme-specific (11kb) file. A whopping 1kb saving, hurrah! Might not seem like much, but now that all the common stuff is in one file, it makes it easier to optimize, and also means that the optimizations will be picked up by people on every theme.

  • I totally rewrote the markup (and CSS) for the header banner you see up top there. It used to be this big 3-row table, with 0-height cells, lots of sliced-up background imagery, etc. It's now 4 divs. Much, much cleaner.

  • I put all the little icons from the nav bar into a sprite map, and got them all to be displayed by CSS. So, now, instead of making 15 separate requests to the server, you only make 1, and now there are no image tags in the header of every page.

  • I rewrote the little popup you get when you mouse over the 'recent topics' on the front page. The javascript library we were using to do this weighed in at 50KB (!!!); even minified it was still 23KB. I had a look into a jQuery solution, as we can embed a version of jQuery hosted by one of the big CDNs, but then realised that the whole thing could just be CSS instead. So, it is. That's a 50KB saving on bandwidth for every brand new visitor to our site's front page right there, which is substantial.

  • I stripped a bunch of <br> tags out of the markup and replaced them with margins (specified in the cached CSS files, naturally).

  • I updated our Google Analytics code. This wasn't strictly necessary, but I wanted to do it, and in the process I discovered that none of the forum pages have actually been including it properly up until now. The visitor graph in Analytics since I fixed it has a spike that looks like we've just been featured on CNN or something [grin]

  • I tidied up the breadcrumb, search box, and footer code. Again, mostly just getting rid of tables and replacing them with CSS.

  • I killed some of the 'xmlns' attributes that get left in our output due to the way we're using XSLT. There's still a bunch of them around, but I covered forum topics, which are the most popular offender. At some point I'll go back in and do all the other cases.

  • I redid the markup for the headers in 'printable version' articles. The gain from this won't be too huge, but it's often where Google searches end up, so it won't be nothing either. Also because I HATE TABLES AND WILL MAKE LOVE TO CSS IF IT IS EVER INCARNATE AS A TANGIBLE ENTITY.

  • I started switching the site over to using Google Ad Manager, instead of our in-house copy of BanMan. This is quite a big deal; the switch has been far from painless for me, and it's still ongoing, but the benefits are numerous. Firstly, instead of the ad images consuming our bandwidth, they'll consume Google's. Secondly, instead of the ad system consuming our CPU cycles, it'll consume Google's. Thirdly, instead of the ad data store consuming our disk space, it'll consume Google's. I'm pretty much fine with this, and for whatever reason, Google are too.

  • I made us a new version of the OpenGL|ES logo. It's shinier!



That's pretty much everything for now. It's a little difficult to get a picture of how much total change it's made, but the HTML for the site front page has dropped from 95kb to 85kb. I guess I'll find out if it's actually made a serious dent when I hear the bandwidth figures in a few days.

What's the downside to all this? I've been acting with basically no regard to old versions of IE. Chrome is my primary development browser now, with Firefox a close second; I check that things work in IE8, particularly when using unusual CSS pseudoclasses like :hover and :first-child, but anything prior to IE8 - and especially anything prior to IE6 - can go die in a fire, basically. I know, I know, you can't do anything about it, your machine is locked down by corporate, I understand... and I don't care. These days, I think I'd be comfortable accusing any sysadmin who hasn't upgraded all their machines to at least IE7 of criminal negligence.

I guess the site will probably still work in old versions of IE. I'm not actively trying to shoot them down. Yet. By and large, things should degrade gracefully.

To end, here are some excerpts from my SVN logs that you may enjoy.


2010-07-15 00:29:18 dropped prototype and clientscripts.js from the page header. (over 120kb for a new visitor!)
2010-07-15 00:32:50 also dropped menu.js, as the menus have been CSS powered for some time now

2010-07-15 03:24:27 killed the empty child! \m/

2010-07-15 04:33:49 tidied up breadcrumb + search boxes
2010-07-15 04:34:38 oops
2010-07-15 04:35:45 added a floatclearer
2010-07-15 04:37:03 try again

2010-07-16 02:21:38 updated 'printable' articles to use GAM
2010-07-16 02:23:11 forgot the <script> tags :)

2010-07-16 02:28:21 switched the box ad on the printable-article page, and changed it to use the adslots code
2010-07-16 02:28:50 uups
2010-07-16 02:29:31 it's times like this I wish the site was written in pure javascript

2010-07-17 00:17:26 new 'recent threads' code, using pure CSS for the popups
2010-07-17 00:20:52 added a little space between 'recent threads' entries
2010-07-17 00:23:10 bye bye, overlib! :D





The site seems to load much faster for me (not that I was complaining in the first place). And screw IE6, it was replaced something like 4 years ago (and again last year), and sucked in the first place.
Good stuff [smile]. I encourage the move away from supporting IE6 and I think those users are probably quite used to websites looking awful for them anyway so you're only providing them with what they expect.

I do notice however that the top banner part collapses incorrectly if the browser window is made too narrow, I notice this on my laptop if I use the Windows 7 snap-window-to-the-left-or-right feature and also if I visit on my phone. It doesn't make things unusable but I suspect an easy fix, just needs a fixed width set on a div or something.
The front page is all kinds of fucked up in Opera. Almost unusably so. I can provide screenshots if you want. Otherwise, good work!
Quote:
Original post by Dragon88
The front page is all kinds of fucked up in Opera. Almost unusably so. I can provide screenshots if you want. Otherwise, good work!


Have you cleared your cache? I tested the frontpage in every version of Opera I could get my hands on, and it looks OK to me.
Loading times definitely seem a little faster, but the Intel branded search box is overlapping the forum buttons (login, control panel, etc.) on quite a few pages under Chrome.
Quote:
Original post by superpig
Quote:
Original post by Dragon88
The front page is all kinds of fucked up in Opera. Almost unusably so. I can provide screenshots if you want. Otherwise, good work!


Have you cleared your cache? I tested the frontpage in every version of Opera I could get my hands on, and it looks OK to me.


Indeed, I have. I'm using 10.60. I'm also noticing that the bar along the top is messed up in a couple ways.
Quote:
Original post by Dragon88
Quote:
Original post by superpig
Quote:
Original post by Dragon88
The front page is all kinds of fucked up in Opera. Almost unusably so. I can provide screenshots if you want. Otherwise, good work!

Have you cleared your cache? I tested the frontpage in every version of Opera I could get my hands on, and it looks OK to me.

Indeed, I have. I'm using 10.60. I'm also noticing that the bar along the top is messed up in a couple ways.

I've just installed Opera 10.60 on my Windows 7 machine, and the front page is rendering perfectly to me. Are you absolutely sure you cleared your cache? Is it possible that there's an upstream cache holding onto an old version of our CSS for you somewhere?
Quote:
Original post by swiftcoder
Loading times definitely seem a little faster, but the Intel branded search box is overlapping the forum buttons (login, control panel, etc.) on quite a few pages under Chrome.


I can't repro this (Chrome 5.0.375.99). Could you show me a screenshot?
Quote:
Original post by superpig
Quote:
Original post by Dragon88
Quote:
Original post by superpig
Quote:
Original post by Dragon88
The front page is all kinds of fucked up in Opera. Almost unusably so. I can provide screenshots if you want. Otherwise, good work!

Have you cleared your cache? I tested the frontpage in every version of Opera I could get my hands on, and it looks OK to me.

Indeed, I have. I'm using 10.60. I'm also noticing that the bar along the top is messed up in a couple ways.

I've just installed Opera 10.60 on my Windows 7 machine, and the front page is rendering perfectly to me. Are you absolutely sure you cleared your cache? Is it possible that there's an upstream cache holding onto an old version of our CSS for you somewhere?


Yes, I'm absolutely certain, and it's possible. But if so I have no control over that.
Looks good to me on Firefox 3.6 and I'm hope you'll be making savings off these changes.

I happen to be working on a small project which will involve hovering boxes like the one on the "recent threads". A few weeks back, I poked into your HTML and saw that you were using overlib, so I decided to use that. I have some compatibility requirements (IE 6 is a must, older would be nice). Overlib works nicely, but reducing overhead would make my life easier. Did you find the CSS version to be simple and portable?
Looks perfect in Firefox 3.6.6 on Win7 Pro x64. Excellent work.
excellent work. works fine and feels more snappy.

i've just redone my own webpage to be fully html5 compliant, with css and all. the feel-good feeling you get when your code is "clean" is awesome :)

but it's hard work, at least for something big like this page. good job so far.
Quote:
Original post by Ezbez
I happen to be working on a small project which will involve hovering boxes like the one on the "recent threads". A few weeks back, I poked into your HTML and saw that you were using overlib, so I decided to use that. I have some compatibility requirements (IE 6 is a must, older would be nice). Overlib works nicely, but reducing overhead would make my life easier. Did you find the CSS version to be simple and portable?


Simple? Extremely. It's two CSS rules: One that styles the box, positioning it to the left etc - and most importantly, sets display:none - and a second that selects the box as a child of li:hover and sets display:block.

Portable? IE7 and upward. IE5 if you rework things such that the popup is a child of the actual <a> element. Whatever:hover may help.
Nice work. Fix the slow ass journals and I'll buy your five pints of green ale
As another Opera user (also using 10.6) the front page (and forums) look fine for me.
Nice work. :)

Perhaps of interest:

The home page (using the dark theme) attempts to load int_gdcirc.gif and int_gdltcr.gif, but neither of them seem to exists (see left column, features).

The home page includes both gamedev_net.png and news19.png (8.93 kB), which are identical images. But I can understand that from a code organization/file system point of view there's not much you can do about that.

Perhaps we should have a sort of 4K contest to optimize the file size of certain pages. ;)
Quote:
Original post by superpig
Quote:
Original post by swiftcoder
Loading times definitely seem a little faster, but the Intel branded search box is overlapping the forum buttons (login, control panel, etc.) on quite a few pages under Chrome.


I can't repro this (Chrome 5.0.375.99). Could you show me a screenshot?

I see this as well in Chrome. It happens when the breadcrumb line (Home > Forum > etc) is too long (i.e. long forum topic), causing it to collide with the search text. The search and box then drop down below it, obscuring the other links.

Also, while typing this, I'm noticing that the "Show Preview" line below this text box slightly overlaps the text box.

Recent Entries

Recent Comments

PARTNERS