Site Loading Oddly?

I’m not sure if I’m posting this in the right section, so if the topic belongs somewhere else then I apologize.

I’m having issues with a site I’m working on. I have uploaded it onto this testing server: CA Test

Basically what is happening is some individuals (and it’s fairly random, not everyone has this issue just a select number of random people, and it’s not specifically on just a mac or pc or a specific browser) when loading the above site are getting a disjointed loading issue, where the text will load before the images (ie the header banner etc). Those images don’t load for a full 10+ secs. I personally have been unable to duplicate the issue on any of my mac’s/pc’s or browsers on those systems (tried IE, Firefox, Chrome, Safari) but have had screen shots sent to me of the issue. I have tried loading the files on 2 separate host websites so I’m sure it’s not a host issue.

I thought at first it might possibly be F.O.U.T (flash of un-styled text) causing the problem as previously I did use the @font-face selector for the title headers on the side nav. However, I removed all traces of the @font-face selector and am just using all regular text font families, and some people are still having the disjointed loading issue.

I have no idea what could be causing this at this point. Does anyone else have any suggestions about the cause? Could it be a internet service provider lag issue since it’s occurring so sporadically or some people? I’m stumped at this point.

Thanks in advance.

It could just be that those people have a dodgy connection and it’s taking longer to do the server handshakes and get the images down the wire. They all loaded pretty speedily for me.

What you can do to improve the experience is to set the height and width attributes on each <img> to the height and width of the image. That way, browsers will reserve that space for the image, and so if they are a bit slow to load, you won’t get the awful movement on the page as everything shuffles round to make space for the pictures once they load.

Uhm, text is typically SUPPOSED to load and display before the images… that’s nothing out of the ordinary.

THOUGH if you want to know what’s wrong with the page and likely making it more pronounced an effect, the 300k of images with zero images off graceful degradation could be a contributing factor. The 127k banner image for example being used instead of plain text making that information effectively not exist for search engines or images off users.

The use of HTML 5 a specification not even out of draft and therefore should NOT be used in the deployment of production websites isn’t helping matters much either; In fact, the legacy versions of IE where that stupid ‘html 5 shiv’ nonsense ends up being loaded could be the root of your problems… Alongside the typical jquery for nothing bloat.

In fact, I am seeing exactly what you describe in IE7 and IE6 … and it’s that HTML5Shiv javascript implementation causing it.

Here’s a tip - NOBODY has ANY business trying to use HTML5 to build a deployment website yet, and throwing javascript at the old browsers to try and do so is NOT the answer. In it’s current draft form HTML 5 exists solely for the purpose of testing, NOT for creating real world websites.

Do yourself a huge favor — it’s called XHTML 1.0 STRICT or HTML 4.01 STRICT… the current RECOMMENDATIONS from the W3C.

Other things to clean up would include the nonsensical heading orders (skipping to h3 and h5), the effectively made-up rel values (prettyphoto?!?), repeated use of images for text content, unneccessary classes on like elements that have a perfectly good classed wrapping element (.subheaders for example), lack of content first source order making it painful to use on handhelds, no blockquote around the actual blockquote while using blockquote around what should probably be EM or STRONG, H2/H3 pairings for what should be a single header with a SMALL tag inside it, total lack of graceful degradation, etc, etc…

Bottom line – time to throw it out and start over. You went down a very BAD path by trying to deploy HTML 5 before it is actually ready for use on real websites.

I would suggest markup along these lines:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="description"
	content="Sylvan Lake&#8217;s Atheletic training facility featuring a hockey treadmill, synthetic ice, turf, gym and trained instructors to help you train like a pro in your sport."
/>

<meta
	name="keywords"
	content="athletic, facility, hockey, ice, turf, gym, instructors, sport"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Sylvan Lake Atheletic Facility
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<span>Complete<span></span></span> Athlete
		<small>Fitness Classes & Sport Specific Training For Athletes of All Ages</small>
	</h1>

	<ul id="mainMenu">
		<li>Home</li>
		<li><a href="pricing.php">Programs &amp; Pricing</a></li>
		<li><a href="about.php">About Us</a></li>
		<li><a href="facility.php">Facility</a></li>
		<li><a href="team.php">Our Team</a></li>
		<li><a href="registration.php">Registration Forms</a></li>
		<li><a href="contact.php">Contact Us</a></li>
	</ul>

	<div id="contentWrapper><div id="content">

		<img src="images/promotional/promo.jpg" alt="Promo" class="plate" />

		<a
			href="http://www.youtube.com/watch?v=3N2I0wEbSJo"
			title="Complete Athlete Facility Video"
		>
			<img
				src="images/video/fp-vidthumb.jpg"
				alt="Complete Athlete Facility Video"
				class="leadingPlate"
			/>
			Click here to see Skating Treadmill in action.
		</a>

		<div class="homeTopSubsection">

			<h2>
				CHECK IT OUT!
				<small>See Complete Athlete's Facilities!</small>
			</h2>
			<ul class="mainpage">
				<li><b>Skating Treadmill</b> with 8&#8217; x 8&#8217; Platform with Stickhandling Platform & Shooting Extension</li>
				<li><b>Synthetic Ice Surface</b> - Skating, Shooting, Stickhandling, Goalie Training</li>
				<li><b>Artificial Turf </b>for Agility Training</li>
				<li><b>Full Set of Weights</b> and cardio equipment</li>
			</ul>

			<blockquote>
				<h2>&#8220;Absolutely loved it!&#8221;</h2>
				<p>
					Logan was invited to use this facility and he absolutely loved it!<br /> Thanks, Jim.
				</p><p>
					<cite>-Terry Somerville.</cite>
				</p>
			</blockquote>

		<!-- .homeTopSubsection --></div>

		<div class="subsection">
			<h2>Welcome To Complete Athlete</h2>
			<p>
				Finally, an athletic training center that caters to the needs and wants of young athletes. We offer sport-specific training programs under the guidance of certified personal trainers and athletes respected in their sport.
			</p><p>
				<em>We believe that to be your best, you must train like the best</em>
			</p>
		<!-- .subsection --></div>

		<div class="halfSection">
			<h2>
				TRAIN WITH A GOAL IN MIND!
				<small>
					Complete Athlete is geared for <em>your success!</em>
				</small>
			</h2>
			<p>
				Jim Lawrence is a long-time resident of Sylvan Lake with a passion for hockey and athletic success. He knows what it takes to becoming a successful athlete,or to be fit - to be your best!
			</p>
			<a href="about.php" class="more">Read More About Our Facilities...</a>
		<!-- .halfSection --></div>

		<div class="halfSection">
			<h2>State of the Art Training Facility</h2>
			<ul>
				<li>Over 6000 Square Feet of Training Space</li>
				<li>Full set of weights and cardio equipment</li>
				<li>Bright and Open Floor Plan</li>
				<li>Lots of Paved Parking</li>
				<li>Accessible Location</li>
				<li>Large Offices, Rooms &amp; Mezzanine for Lease</li>
				<li>Affordable general monthly memberships</li>
			</ul>
		<!-- .halfSection --></div>

		<ul class="imageStrip">
			<li>
				<a href="images/facility-strip/large/turf.jpg">
					<img src="images/facility-strip/thumbs/turf.jpg" alt="Artificial Turf" />
				</a>
			</li><li>
				<a href="images/facility-strip/large/synth-ice.jpg">
					<img src="images/facility-strip/thumbs/syn-ice.jpg" alt="Synthetic Ice" />
				</a>
			</li><li>
				<a href="images/facility-strip/large/facilities.jpg">
					<img src="images/facility-strip/thumbs/facility.jpg" alt="Facility" />
				</a>
			</li><li>
				<a href="images/facility-strip/large/skating-tread.jpg">
					<img src="images/facility-strip/thumbs/skate-tread.jpg" alt="Skating Treadmill" />
				</a>
			</li><li>
				<a href="images/facility-strip/large/kids.jpg">
					<img src="images/facility-strip/thumbs/kids.jpg" alt="Hockey Kids" />
				</a>
			</li>
		</ul>

	<!-- #content, #contentWrapper --></div></div>

	<div id="sideBar">

		<img src="images/sidebar/yng-ath.jpg" alt="Training Center" />

		<div class="subsection">

			<h2>Hours:</h2>
			Mon - Thurs: 4pm - 9:30pm<br />
			Fri: 4pm - 8pm<br />
			Sat: 9am - 7pm<br />
			Sun: 9am - 6pm<br />

			<h2>We Offer:</h2>
			<ul>
				<li>Sport Specific Training for athletes of all ages</li>
				<li>General Memberships</li>
				<li>Fitness Classes</li>
				<li>Personal, group &amp; team lessons on synthetic ice</li>
				<li>Personal, group &amp; team fitness training on artificial turf</li>
				<li>Personal, group &amp; team cardio and weight training on weights and core body</li>
				<li>Individual Motion analysis of athletes skating stride</li>
			</ul>
			<a href="pricing.php">Learn More About Our Services...</a>

			<h2>Directions:</h2>
			1A Industrial Drive<br />
			Sylvan Lake, AB<br />
			<br />
			Just Off Hwy 20, <br />
			Just north of Clearview Glass<br />
			<br />
			<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1A+Industrial+Drive+Sylvan+Lake+Ab+T4S+1P4&sll=37.0625,-95.677068&sspn=44.47475,91.669922&ie=UTF8&hq=&hnear=1+Industrial+Dr,+Sylvan+Lake,+Division+No.+8,+Alberta+T4S+1P4,+Canada&z=16">Click Here for a Map</a>

			<h2>Links</h2>
			<a href="http://www.sylvanlakeminorhockey.com/">Sylvan Lake Minor Hockey Assoc.</a><br />
			<a href="http://www.redlinehph.com/">Redline HPH</a>

		<!-- .subsection --></div>

	<!-- .sideBar --></div>

	<div id="footer">
		<ul>
			<li><a href="index.php">Home</a></li>
			<li><a href="pricing.php">Programs &amp; Pricing</a></li>
			<li><a href="about.php">About Us</a></li>
			<li><a href="facility.php">Facility</a></li>
			<li><a href="team.php">Our Team</a></li>
			<li><a href="registration.php">Registration Forms</a></li>
			<li><a href="contact.php">Contact Us</a></li>
		</ul>
		&copy; Complete Athlete. All Rights Reserved <br />
		<a href="http://www.tripletwistmedia.com">
			Designed & Developed by Triple Twist Media Inc.
		</a>
	<!-- #footer --></div>

</body></html>

Which has PROPER heading orders, can be coded to gracefully degrade when you make the CSS, has ALL the hooks needed to apply pretty much the same styling, and despite adding formatting to it, more text and a keywords meta is still less code since it throws away the useless IE conditional comment in the head and all the pointless wrapping elements like ‘figure’ that HTML5 bloats out sites with.

I am aware of how a page loads, but the issue being described by some individuals seemed longer than what is average.

The person that the site was created for has been rotating out different banners so there’s not much I can do on that one, if they change it they change it. There were reasons, despite the fact that you don’t agree, why it was left as a banner vs, using text. Same with in some other places on the site.

We can get into a debate about not using html 5 all day and I can argue all your points about why you think it’s wrong and counter them with why starting to use HTML5 is right but that’s not the discussion. Quite frankly I have used the shiv and html5 elements in several sites (personal and non) without it causing this problem. I also checked on IE 6 7 and 8 and could not replicate the disjointed loading issue that I described some individuals getting. Hence my original post.

You can also bash on prettyphoto all you want and what you would choose or not choose to use in it’s place but that is not the point of this thread either.

To all your nay saying on HTML5 let me refer you to this article… straight from SitePoint: http://blogs.sitepoint.com/2010/07/20/5-reasons-why-you-can-use-html5-today/

Bottom line, just because you are unwilling to step away from your comfort zone does not mean others should not. And to encourage individuals to not embrace it is narrow minded on your part. Honestly I found nothing constructive or helpful in your post all you did was bash and lecture and push your methods thanks for that but no thanks.

Thank you for your suggestion, I will try setting the H & W on the <img>

Here it literally appears to be the HTML5 shiv taking it’s sweet time starting – as in both IE 6 & 7 it’s showing a completely messed up layout of sloppy text even though SOME of the CSS is applied, and then it ‘snaps’ into place.

Ok, I can see that… sometimes you have to work around the client not listening to good advice and not caring that what they want is bad practice.

It’s draft – draft means don’t use it for production work. Whatever the problem is the issue seems to be the markup and CSS rendering BEFORE the shiv script runs. I don’t know if it’s the delay of hanging the DOM waiting for the manual attach of pretty-photo to load, or if the load order is ending up different in IE, but that IS the most likely cause of the problem here. I’ve seen this with “HTML5 shiv” before which is just one of the many reasons not to use it. (alongside the page not working for IE users who block scripts)

Yup, and that article is some of the worst advice I’ve seen on this website – file that alongside the using 4k of jquery to do 300 bytes of CSS’ job for @font-face

It’s not about comfort zone – it’s about a fat bloated train wreck specification that seems bound and determined to undo all the progress of the past decade… Much less the pure nonsense of deploying DRAFT. It’s like people don’t know what DRAFT means.

It’s great to play with for testing what we MIGHT be able to real world deploy six to ten years from now and for bug testing various browsers – it is NOT for use on production websites any more than the browser-specific prefix CSS values are. It’s what words like “DRAFT” MEAN!

Well then you just don’t want to fix what’s actually wrong with the page or the issue you were asking about.

… at which point you might as well go back to writing HTML 4 tranny or HTML 3.2 – which is basically what you have.

All that aside – have you seen what that HTML5 shiv does for first-visit when IE asks if you want to allow .js to run?

I really don’t appreciate your tone throughout all your responses in this thread. It’s not about not wanting to fix the issue. You’re pushing your ideals on how YOU believe development should be done and bashing on it because it is not what YOU would encourage to do; as you clearly show below you don’t like the spec.

I’m not going to get into an argument about the semantics of HTML5. You have your own opinions, I have mine, on that note, perfect example of HTML5 being implemented today… viewsource Google.

I think you should do your history about using specs that are not/were not fully complete(d).

That aside, if it really is the shiv, I will review it, and make the necessary changes. My point was I have used the shiv on other sites as well as HTML5 without this particular issue occurring, even in older versions of IE.

Funny, I see HTML 3.2 with the HTML 5 lip-service doctype slapped on it.

But then I’m a Opera user, and repeatedly it seems Google tells us to go shtup ourselves.

Oh, and please don’t take offense to any ‘tone’ you might THINK you are hearing – my intent was to help… I do tend to be blunt and tell you what I see wrong. Please take my posts in the context they were offered.

But again, I’m the nutjob who takes more offense to pedantic platitudes than I do profanity. Too many people seem to think because you dare to say something negative it’s an all out assault; if you don’t point out what you see wrong with the world NOTHING will ever get fixed. Status quo for the win – NOT!

Kind of my problem with HTML 5 – instead of progress they want to just throw us back into tranny-land. It’s obviously created by people who never grasped simple concepts like separation of presentation from content, simplification of code and just kept slapping a HTML 4 tranny doctype on their HTML 3.2.

If Javascript is required to make a browser understand markup, it already crosses the line.

But, re the shim: I remember the talk by Stoyan Stefanov slides here on slideshare showing browsers loading css and Javascript (yeah slides suck when they have no transcript with them but there is [url=http://fronteers.nl/congres/2010/sessions/progressive-downloads-and-rendering-stoyan-stefanov]video available which helps). Hm, also Steve Souders’ [url=http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/]article here about non-blocking Javascript and Nicholas Zakas’ [url=http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/]example may help you deal with the shim (and/or any other JS on the page that may be blocking image loading). Of course, while IE is executing the shim, it is not loading anything else. Other browsers aren’t loading this JS at all (but Conditional Comments themselves can block!). (note, you might want to change that CC to IE lt 9 since as I understand it, IE9 will not need this JS for HTML5?)

It’s possible that the reason Crusty and some of your testers see the blocking while you and others don’t may be up to browser settings. In general, IE has been lagging the other browsers and traditionally IE has allowed only 2 requests active at a time (you can change this setting I think in IE8 & 9 now) whereas Opera by default will do 8 requests and FF will do 8 if you set it… think FF defaulted to 4. Anyway, number of active requests to the server can make a difference to users who are downloading a bunch of images, moreso than individual image size (why web devs want to use sprites as much as possible… one request for many images).

Anyway, hope some of this information helps. I agree with Crusty’s posts in that many of these issues are only really solvable by writing the markup differently in the first place (and I don’t even mean no-HTML5), but I understand sometimes things are written and aren’t getting a rewrite anytime soon anyway.

Part of the reason that I didn’t think that it was the shiv itself was that it’s in an IE conditional statement. So it won’t affect non-IE browsers but this sporadic issue is randomly happening on multiple browsers (chrome and Firefox for example).

Thank you for you links Stomme I will check them out.

I also contacted the authors of www.html5doctor.com since they use html5 and the shiv and posed the question to them about if the shiv was indeed causing the issue, the response that came back was:

Remy’s HTML5 shiv only causes IE browsers to recognize new HTML5
elements. It won’t affect any non-IE browser (due to the IE
conditional comments), and doesn’t do anything else.

I thought about changing the CC for IE 9 so I’ll most likely make that change.(I was also under the impression that IE9 won’t need JS to handle the html5 elements) On a side note, I wonder how many users of IE will actually switch to 9 when it’s out of beta, I mean there are people still using 6 (with no justifiable reason to do so other than not updating).

Thank you for your post!

They can say it does nothing, but being a <link>'d javascript it is doing what any other Javascript does, which is blocking page load (tho still, not normally for as long as your users are describing). It might be a red herring.

On a side note, I wonder how many users of IE will actually switch to 9 when it’s out of beta, I mean there are people still using 6 (with no justifiable reason to do so other than not updating).

The only people who will be switching are those either upgrading to a new OS or buying a new machine running a new OS. IE9 will not run on WindowsXP (unless something’s changed recently and I missed the memo).

I agree with your comment Stomme about it being <link>'d and page load block. It’s an oddity, since I haven’t seen linked JS cause such a long block (and I’ve seen sites with a lot of js scripts linked on them). I am going to go back when I get a chance and re-enable the @font-face selector and set the specific width/heights on the <img> tags and go from there.

I haven’t heard about IE 9 not running on XP, mind you I’m not following all of the updates on it as closely as I probably should (not a fan of IE). I had the 9 beta installed on my vista system but reverted back to 8. How I wish that more people would proactively upgrade their IE. -__-;;

Hopefully you can find a system that acts like Crusty’s and reliably loads with the long delay… then remove and add in the various external files to see which it is.

And if it is the shim.js then you’ll have to see what’s different between systems showing delay with it and those without (yours).