Speed up your sites ‘display’ time, how fast it loads to the end user; by putting your external ads in iframes.
You toss some advertisements on your site and the worse thing that happens is that it slows the display time of your site to the end user by waiting for the advertisement to load up.
There’s another way of handling the advertisement boxes like Techonorati and Google adsense and others that take forever to load. That is by putting them into an iframe and loading the code from a file on your machine.
Create a file on your hosting, say in the root directory of your hosting; call it something like adbox.html
Put your advertisement code into it, like this example:
<!-- BEGIN UAT - 728x90 - YourComic: YourComic - DO NOT MODIFY --> <script type="text/javascript" src="http://ad-cdn.technoratimedia.com/??/??/??/uat_????.js?ad_size=728x90"></script> <!-- END TAG -->
^ That is an example of a technorati ad code, you place that inside of the adbox.html file in the root directory of your site.
Then let’s place the html code inside of the text widget where you original had the advertisement.
<iframe src="http://yourcomic.com/adbox.html" frameborder="0" scrolling="no" style="padding: 0px; border-style: none; width: 736px; height: 100px; overflow: hidden;"></iframe>
The above iframe will ‘allocate’ space on your website and letting the rest of your site display and load, and itself load the advertisement form the adbox.html into the space that was allocated for it. Leaving no undesired page-pause while it loads.
– Phil
Thanks for posting this – it looks interesting. Project Wonderful is the slowest thing on my page at the moment (although, admittedly, it only takes 0.2 secs to load). I’m giving your technique a shot, and will report back with the results once the change has propagated throughout my CDN.
cool looking forward to it.
I got the Project Wonderful ads to display just fine in the iframes (using the “standard code”), but the overall effect was a slow-down. It’s probably because of my set-up.
My PW adboxes already loaded pretty quick at 0.2 secs, partly because I use a script accelerator anyway (RocketScript, which is part of the CloudFlare package). By contrast, the html files contained in the iframes took about 0.5 secs to load. The html files might have been quicker if I had put them on my CDN, but that wouldn’t be ideal for fast-changing ads – and possibly wouldn’t work at all, as it’s supposed to be for static files only.
It was worth a try though. I’m always on the lookout for ways of speeding up the site, so thanks for the suggestion – even though it didn’t work!
Read the comments below by me on the project wonderful asynchronous info that is a better way of doing it for PW.
I tried this out and it significantly sped up my loading. Thanks! One question, if you check out http://hijinksensue.com/ you can see that the header banner, the sidebar square ad and the sidebar skyscraper seem to have some padding on them now that is obscuring part of the ad within the iFrame. Any idea how to fix that? Also, I could not get project wonderful ads to display properly using this method.
The body tag inside of the iframe’s file it loads up – since there isnt one (i just said put in that info, but its actually a html file with
that goes inside of it. if you were to create a real html doc and add some css inside of it to make body { margin: 0; padding: 0; } inside of it, it would fix it.Ok, doing that I managed to get the sidebar 300X250 ad to appear correctly but the header and sidebar skyscraper are still having the issue. I guess I could add some negative padding to move the ads up and to the left a bit.
Yeah I haven’t seen project wonderful ads work in an iframe properly yet ;/ I am sure someone will figure it out, so that the page displays fast *then* the ads show up.
PW ads should not be in an iframe, nor should any asynchronous code, as it actually slows it down. Use the PW asynchronous code. The difference is that async code looks like this:
Header:
The your ad’s simply use this:
replace XXXXX with your ad id, and Y with the ad type. this code replaces the script block right above the noscript block. PW still needs some work to remove the table tag-soup it generates, but this is still faster than the older code by at least 300ms per ad. (Depending on your geographical region.)
PW’s instructions are here (PW account required):
http://www.blogjectwonderful.com/2011/03/asynchronous-code-now-available/
Google Adsense uses asynchonous code inside an iframe already, so there’s no need to iframe it a second time (and it will break contextual matching.)
Google Analytics asynchronous code is here:
http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html
If you’re using quantcast, also make sure use it’s asyncronous tracking:
http://www.quantcast.com/learning-center/guides/using-the-quantcast-asynchronous-tag/
If you’re using something like adsdaq/contextweb, their robot actually downloads the referring page (identifying as MSIE6) before serving an ad, so if you iframe the ad, it will no longer do context matching, you may get kicked from it. So be aware of the TOS of the ad network before iframeing the ad. Other ad networks that use context matching with CPM/CPC may do the same.
Oh dear the code chunk doesn’t display.
Actually, Contextweb has set up a system to allow you to use iframes apparently. I could be wrong… but from my research, it seems you just need to first install something called “SmartFile” in your root folder so that it can still identify context sensitive data to keep your fill rate up. Here’s the link on how to install it: http://doc.contextweb.com/display/SmartFile/SmartFile+Installation+Instructions+for+Publishers
I did some investigation of the smartfile before (eg looking at it at the code level) and it seems to be a CDS(Cross Domain Scripting) workaround (which in effect works around the iframe communication. It however doesn’t do anything about contextualization, but your mileage may vary. On sites I manage, there is 99% 1:1 hit ratio for every page that the code is loaded from. Reportedly you get a lower fill rate if you iframe the ads, but the sites I manage don’t use iframes on the ads.
so if I just did exactly what phil suggested and I have my contextweb ad code in the external HTML file being loaded into the iFram, AND my Google adsense code is the backup tag to the context web ads, did I just break either of those ads’ abilities to work correctly on my site? I really hope not, because I page loads MUCH faster now.
Check your fill rates after three days. If they have dropped compared to the previous week, undo the changes, or see the smartfile info in this thread.
This worked wonders, thanks man!
Make sure you have the contextweb “SmartFile” setup (you just download the file to your website, and then put in the var cwfl =”whereveritis”; in a script block.) http://getsatisfaction.com/contextweb/topics/smartfile_ad_tags has some info on verifying.
However iframing the contextweb code isn’t a good idea in practice since it real-time contextualizes the content.
The strategy I employ on sites I redesign is to physically put the contextweb javascript in a div container after all the content, but css position it to where it’s actually supposed to appear. (You can see this effect on all of benny’s sites: http://waywardsons.keenspot.com , and one I redesigned for the Crosby brothers: http://plusev.keenspot.com/ ) This is a bit harder to get away with wordpress, but it’s doable.
Any code containing document.write, document.writeln or .innerHTML/.outerHTML should be iframed if it impacts the site loading time and you can’t redesign the page to physically move it after the content.
This is one of the great reasons to stop using table layouts, as you can’t reposition ads in table layouts.
I just tried the new asynchronous code for PW Ads, (put it on frumph.net) and love it.
To properly do this, copy the header.php file to your CHILD theme from the main comicpress theme, THEN add the code to directly below the body tag inside the header.php you put in your CHILD theme.
Then just add the pw_adbox div into the text widget where your code was originally.
Might I ask what you mean by copy the header.php file to your child them from the main comicpress theme. Can’t you just go to edit themes and past the code after this code <body >
If you could, could you provide pictures for those vague directions?
Yes, yes you could do that, however for those who use child themes (and I advocate those who use child themes) to do it that way.
More info for those interested in speeding your site up:
Your target load time is 2 seconds.
Even though comicpress might say it rendered the page in 500ms, that is only the php processing time. Actually use Chrome or Firebug to profile the load time.
From the time someone types in your site into the address bar, to the time they see the content (eg the comic itself), no more than 2 seconds should have passed. If the ads are appearing before the content, they should be asyncronous javascript, iframed, or css-repositioned but physically located later in the page code.
You may have heard the phrase “above the fold”. Both your content, and most valuable ads should be above the fold of the page. After 2 seconds, all of this content should be visible (If your comic is taller than 400pixels, then there should be at least the visible part of the comic loaded.) If the page is waiting on the ads, then something has to be done.
The slower your site is to load… the less page impressions you get, which means the less fill rate you get.
You should be able to “page flip” your site (eg rapidly go forward or backwards.) If it’s slower than 2 seconds, the reader may go somewhere else and not bother to read the archives.
It is OK for the ads to load after the content does, it’s actually a better user experience and gives readers less reason to block the ads in the first place. Only about 2% of readers block ads. Not all of them intentionally. So if a reader has finished reading the page, the ads are there waiting for them to read or click on as part of the site experience.
Yeah… so i had to scrap this whole idea. I looked at my money for the day since I changed it and it was so rediculously low it made me want to cry. I think you were on the money about the fill rate and contextualization. :/ Oh well, my site still loads pretty fast, it’s just a few times when it gets bogged down by context web.
…besides, my adbrite ads started freaking out because they were the back up tags.. which meant Valueclick wasn’t even getting a chance to load behind that because the condition that THEY show is that adbrite is working properly. ….pretty much my whole ad chain wasn’t looking pretty anymore.