Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Think I may have found a new bug in IE8 but a really, really good 1

Discussion in 'Website Design Forum:' started by Jazajay, Dec 13, 2009.

  1. Jazajay

    Jazajay Active Member

    Right I posted a site a few days ago for form usability feedback, anyway it's been a good year since I touched the code on this, so I said what half of this is bollo*ks TBH, I can do a lot better job.

    So anyway I've recoded the entire site, fixing every bug I come across and giving it a final valuation check list like I should have done in the first place. To make things clear this site I maintain and built for a family member and touch up now and again when I have time so as it was free I didn't really put my heart and sole into it. Anyway as site performance will become a ranking factor as of 2010 I thought you know what lets use every advance technique I know and get this baby as good as I could.

    So I looked to see if IE8 supported the object tag on images and it did, now being a geek and due to the fact I know how superior the object tag is over the img tag for displaying images, I got dead excited until I found out that IE8 will only load images through it up to a maximum of 36k which is crap TBF, Opera, Firefox and Saf all support it and they support massive files.

    Now before I go any further lets explain why this is a far superior tag, it's because the browser wont download the image it will just get it and display it, now what's the difference?

    The difference is huge, because it doesn't download the image it takes it out of the download list for a page, or removes a http header. Now browsers vary how they download the page, hence why some are faster than others but on average a browser will get 4 elements and download 4 simultaneously, so 1 css sheet is 1 element, 1 js sheet is 1 element, 1 img is 1 element etc... etc..., once one of the 4 spots becomes free it's gets another 1 from the server.

    Anyway this is huge right my home page now downloads only 84k when before it was downloading close to 700k due to me pre-loading images, I mean it doesn't take a genius to see how quick it will now load.

    But I thought IE8 only supports up to 36k until, and here's the flaw in IE8 which is great for us, I made a mistake. I saved an img in a jpg format by mistake and referenced it, Worked fine in FF, Saf and Opera then I went to refresh the page in IE8 and this 250k image showed up, now I was thinking hang on that's completely impossible according to all the documentation.

    Anyway some playing around with it and I found if you save the same image sameish bytes as a png and then place it in the object tag IE8's 36k rule kicks in and it doesn't show but save it as a JPG and the 36k rule goes out of the window and it will, wack in a conditional comment for 6 and 7 to show images in the img tag instead of an object tag for them, and wack in a CSS rule in a IE only css sheet of object:display:none, otherwise you get this little box shape appearing in IE7 and IE6, and wella dead fast for IE8, FF, Saf and Opera and slow for IE7 and IE6 as they have to load all the images, and with IE6 only able to download 2 page elements at a time, IE7 I think 4 it is a lot slower for them, but dead quick for all the current versions.

    I can't find this bug documented anyway so hay it's mine. :D

    Anyhoo thought I would share it as it is huge TBH, if you are a geek that is. :)

    You don't even need to base64 encode it as the Microsoft video I watched says you do, saving you hundreds of bytes on top of that again. :)

    Anyhoo here's my code ~
    <object data="img/your-any-size-image.jpg"></object>
    <!--[if lte IE 7]><img src="img/your-any-size-image.jpg" alt="" /><![endif]-->

    Simple right, and that is the beauty of it it is.:clap:

    Now the object tag doesn't except the alt attribute but it does except the title attribute which will be picked up by all the screen readers you have to buy. I would say SEO wise if you want the alt text on a page then still use the img tag for that 1 img.
    So something like ~
    <img src="data:img/your-any-size-image.jpg" alt="Your alt text" />
    <!--[if lte IE 7]><img src="img/about1.jpg" alt="" /><![endif]-->

    Same effect but you use the img tag instead.
    Jaz
     
  2. Harry

    Harry Senior Member

    So if you disable images, what happens then?
     
  3. Jazajay

    Jazajay Active Member

    Yeah they still don't load with them still being images you are only changing how they are referenced and thus how the browser loads them. I did just check as TBH I wasn't sure myself. :D
     
  4. Harry

    Harry Senior Member

    Hmmm, still not sold though. You seem to be more concerned with saving unnoticeable bytes than writing proper code :S The speed savings you're making can't be worth the code sacrifices you make…
     
  5. Jazajay

    Jazajay Active Member

    Dude did you missread this ~
    Thats a byte saving of over 616k WELL OVER HALF A MEGABYTE thats a ridiculous amount of saving thats not small. But as ranking will be effected by how slow a site loads in 2010 web designers really should get out of the idea of using more bloated coded techniques why because they will effect your rankings as the browser WILL have to spend time downloading more when it shouldn't.

    On top of that the W3C says you can do it. Which I know will persuade you, lol.
    Cite: Objects, Images, and Applets in HTML documents

    Mmm...I should be including the type attribute according to that I might check that out.
    But this is a huge amount of code I don't think you grasp it TBH fella. :)

    And yes for well over half a MB they can thats huge. :)

    It is not actually sacrificing TBH I'm using more advanced tags and tags how they should be used, the img tag is meant to be replaced with the object tag, check the W3C read it earlier their own words, your gods. :)
     
  6. Jazajay

    Jazajay Active Member

    Cite: W3C same link as above.

    Again your gods fella same page but if you search through the W3C site you will find it somewhere where it says something like the object tag will replace the img tag when support catches up I'm just following the W3C as they want it to be eventually. :)
     
  7. I don't get it?
     
  8. Jazajay

    Jazajay Active Member

    Okay what don't you get? :)
    This overrides IE8's default of 36k when referencing img's via the object tag, which MS says you can't do.
     
  9. Harry

    Harry Senior Member

    I'm worried that your page weighed that much in the first place lol. But what I'm meaning is that you're not building websites that are gonna be viewed on an old WAP phone from Saturn, so on sites where you drop a few kb by writing sub-standard code, you're best off just doing it right…
     
  10. Jazajay

    Jazajay Active Member

    Yeah still got it loading well quick using advanced caching, but yeah, lol, then every subsequent page only needed 5k to load so every page after the first page load which took about 3-5 seconds was taking 0.8 seconds to load on average.

    Yeah but say you have 1 image that weighs 78k most of us can relate using that you add a few bytes to the page but you take out 78 thousand so the net gain is well in the green, do you get me? This is so beneficial you are saving well over a few bytes and cutting seconds off page load times.

    Even if the image is say 6k you add what 1k to the page with the code, and thats being generous, you still remove 5000bytes again huge increase in what you are giving the user and thus their wait time for the page to load.

    But this is right according to the W3C. :D
     
  11. You must be doing something wrong if your page weights that much and you need to start hacking around HTML elements and browser handling to save bytes.
     
  12. Jazajay

    Jazajay Active Member

    Okay 1 i will shorten any code if I can improve performance, and thus the users wait time, I don't care about semantics if it gets in the way of the user getting the content if it doesn't fair enough but I don't see why code should hamper their waiting for the content, even by a second.

    Bare in mind I know lots of tricks from improving my server, maximum caching, removing server parameters, getting images to compress via the server, now that's impressive on it's own etc... etc....

    But no I was doing everything right the reason the first page was that heavy was because I was preloading all the images. But thats not the point I was using every trick in the book and even with that file size page load was not much more than 3-5 seconds tops. I'm good. Find me someone else who can get a file that big downloaded quicker?

    Then all other page loads where 0.8 seconds on average. Thats something like on average 78% faster than the average website according to Google analytics. With this technique added, which apparently also can't happen according to MS, I can now increase the page load even faster as I can remove 600k from the first page alone, and then reduce server strain dramatically.

    If ppl can't get thier heads around it you don't have to use it but yeah thought I would share anyway encase someone wants to get there head around it.......:D
     
  13. Levi

    Levi Moderator Staff Member

    Jaz, a little off topic, but how are you measuring load times :)
     
  14. Jazajay

    Jazajay Active Member

    Yslow, google analytics and a few others that get the page several times and then give you the average page load. Allows you to stress the server that way as in quick succession.
     
  15. Jazajay

    Jazajay Active Member

    Also I'm only on a 2 gig connection and measure my http responses by milliseconds on an unprimed cache.
     
  16. Damn this thread has gone geek so bad I almost want to get a pocket protector for my pens :lol:
     
  17. Jazajay

    Jazajay Active Member

    I sleeped in mine dude, imagine the pain I'm in now, that and I have actually just spilt a cup of hot coffee down my bare chest, yeah, :cry: lucky I was wearing trousers.:D
     

Share This Page