Archive for category Web

Taming the GAM beast

Posted by Eion in Web on 2009-11-01

One of the things I have to do in my day-job is manage our Google Ad Manager system, which we call GAM. One of the downsides of using GAM (actually a lot of different ad management systems) is their use of the javascript function document.write(), as well as their requirement to load in a big whomping load of javascript in the <head> of the page. One of the keys of website optimisation is to load all javascript at the end of your HTML page, so that the webpage renders as quickly as possible.

The way we can deal with this is overload the document.write() function to bend to our own wicked ways. Normally, you load the GAM code at the top of the page, but we’ll put it at the bottom and use a neat little function I wrote.

function insertAds(AdSlotName, width, height)
{
var slot = document.getElementById('my_ads_'+AdSlotName);
if (!slot)
return;
var oldwrite = document.write;
document.write = function(text){slot.innerHTML+=text};
GA_googleFillSlotWithSize("ca-pub-yournumhere", AdSlotName, width, height);
document.write = oldwrite;
}

Now we just slap in a <div> with our ad slots name, so we’ll replace
<script type="text/javascript">GA_googleFillSlotWithSize("ca-pub-yournumhere", "AdSlotName-760x120", 760, 120);</script>
with
<div id="my_ads_AdSlotName-760x120">&nbsp;</div>
(which will render faster)
Then load in the ad at the bottom of the page:
<script type='text/javascript'><!--
insertAds("AdSlotName-760x120", 760, 120);
// --></script>

And there you have it. You can take out some more javascript from your <head> and speed things up a bit. My own speed tests showed between one-and-a-half to two seconds decrease in start-rendering time. Would be interested to hear your own findings.

2 Comments

Cross-Browser Gradient Backgrounds

Posted by Eion in Uncategorized, Web on 2009-09-20

Recently, one of the websites I work on was given a makeover and I was asked to implement the design. One of the features it called for was rounded-cornered gradient backgrounds. Rather than turning the design down, I took up the challenge to try to implement it.

Looking around on the internet, there’s a little bit about how to go about that in a cross-browser way, but I thought I’d document it here.

The basic idea I took is to use an SVG as the background. Unfortunately, IE doesn’t support SVG’s and most of the browsers that do support them didn’t support them as backgrounds at time of writing. Fortunately, we can mess with CSS and HTML to display the SVG as an image behind the content, while at the same time providing a fallback for IE.

The basic idea, is to show the SVG after the content, then push it up behind the content with some absolute/relative positioning, so we write code similar to:

<div id="svg_outside">
    <div id="svg_content"></div>
    <div id="svg_background"></div>
</div>

Give the outside div a “position:relative” and the background div “position:absolute” and you’re all set. Put whatever you want for a background in the background div and your content in the content div (funnily enough).

While this doesn’t look nearly as clean as having just a single div with the background set to the svg, it does allow us a lot of flexibility to deal with IE. Since IE can’t natively handle SVG’s (yet), we can use a gradient filter on the background div. Alternatively, we could use some VML. You could even use a video as a background if you so felt like it :)

Check out http://eion.robbmob.com/svgdemo/ for an example.

There can be issues with the Adobe SVG plugin taking over sometimes.

Can’t be bothered writing about this any more, so I’m just gonna post it. Its been sitting in my drafts folder for long enough :)

No Comments

Gzip Encoding

Posted by Eion in Web on 2009-05-06

On PHP pages that I get control over, one of the first things I do is add Gzip encoding. This compresses the text on the page for browsers that can handle it, and really reduces network traffic, speeding up page load/download times on dial-up (well, and broadband) connections significantly.

On PHP this is really easy, its just one line of code at the top of the page:

ob_start('ob_gzhandler');

But until now, I had trouble finding out how to do this for .NET sites. All I could find was that you can enable it server-wide on IIS but now I found this handy bit of code that can go at the top of your .NET pages.

string AcceptEncoding = HttpContext.Current.Request.Headers["Accept-Encoding"];
if (!string.IsNullOrEmpty(AcceptEncoding) && AcceptEncoding.Contains("gzip"))
{
    HttpContext.Current.Response.AppendHeader("Content-Encoding", "gzip");
    HttpContext.Current.Response.AppendHeader("Vary", "Content-Encoding");
    HttpContext.Current.Response.Filter = new System.IO.Compression.GZipStream(HttpContext.Current.Response.Filter, System.IO.Compression.CompressionMode.Compress);
}

And that’s it. Tasty Gzip encoding for all. The next step is testing it, which I use the mod_gzip_test site for. You can see an example of the changes we made to gameplayer.co.nz (a .net site) here

1 Comment