[roberto]

On a couple of my blogs I've noticed that upon loading up the index page my browser loads all the first-page posts and images before the header image. This leaves a blank spot at the top until the rest of the content is done... of course for design/branding/etc I'd like that header to load quickly and the rest of the content to cascade down the page. Is there a trick to this?

I could have asked about this on the WP forums, but it always gets tricky when they say "Well, let's see your site"

Here's an example:
Natural Girls Nude - Naked Exhibitionists & Amateurs, Art Nudes, Hairy Pussy, Natural Breasts, and More...

[gonzogone]

ok... ready for some HTML 101 fun?

When a page loads, the code is read by the browser from top to bottom, left to right. As each element is read, the browser responds to what needs to be done. Images are read as a file on a server someplace, so the URL has to be established and a call is made to the server to request the image.

Same thing happens for server based items like CSS files, JavaScripts - anything that is not coded directly into the page.

Your sites header image is part of your .header class in your CSS file. To get to it, the browser has to read down through the code, then request the CSS file from the server. Once it's loaded, it then has to read through the CSS file to find what needs to be done, pretty much like what it does with the HTML file.

All these things are taking place in parallel. While the CSS file is being served to the browser, and then read through, the browser is still able to work with the HTML file and request other images that it has more direct information on because they are in the HTML code versus the CSS. Because of this, requests can be made to the server for them sooner, so many times they load sooner than images that are located in the CSS file - like background images such as your header image.

Text needs nothing to load since it is directly in the HTML file. So, your header image, being a background image defined as part of a rule in a server based CSS file will always begin loading at least a bit after other things load. That's the order of things.

Now... down to image info from the homepage.

Your header image is 77K. Of the 5 CSS based images on the page, it's by far the biggest. The next biggest one is only 14K. All of your CSS images only total 95K, so really, all the others will likely load before your header regardless.

So through this long winded explanation, the page is pretty much setup to almost force the header to load like that.

Solutions? First, lighten up the weight of the header image. It looks great, but you can likely reduce the quality to bring the byte size down and still look good. Second, you may be able to achieve a similar effect by breaking the image up a bit. The text is graphic. You may be able to get the site name loaded as a separate graphic in the HTML header and then continue to load the remains of the header image as the background image. The text would need to be a transparent GIF or PNG for this to work. Also, would be good to load a background color behind it so the site name image could be seen nicely while waiting for the rest of the background image to load.

Another issue to consider is taht your total page load is HUGE! 2.1 MB for the page with 55 HTML images loading a total of 1.9 MB. That's a monster size page with a LOT of images. Pretty much ALL those HTML document images are in the queue to load before your header is, even though they are loading well below the fold. You have the blog set to load many posts, maybe reduce that to 5 posts max and that will reduce the number of image loads and help get the header image up there sooner.

I'm pooped.. that's all I got for now... hope this makes at least some sense...

if anybody is wondering where I got all this fun info, I just plugged the URL into this handy tool
Web Page Analyzer - free website optimization tool website speed test check website performance report from web site optimization

[Gaystoryman]

Now to translate that into plain English... your header image is too big

Nice stuff Mr Geek to end all Geeks

[gonzogone]

sometimes... there is no short answer between my ears...

honestly, even if the header image was half the size... with everthing else going on in the page, not sure it would load too much sooner

[Tigger]

Originally Posted by Gaystoryman

Now to translate that into plain English... your header image is too big

Nice stuff Mr Geek to end all Geeks

but I also have to say "whats the problem"

Do you think this will put the surfer off looking around the site? or clicking on your sponsors ads ? nope

Often when building sites & working on themes we spend so much of our time trying get everything "just" right but when the guy comes along the only thing he wants to see if the porn - I had a similar more design problem on a theme I was working on and just couldn't get it quite right and spent a couple of days tweaking until I gave up .........converts just as well as the others

Sometimes as website owners / designs we worry too much about how well a site looks & feels

[VoyGeorge]

My recommendation is this *without* seeing your page: the header image size is okay. Trimming a few K off 77K isn't going to make a difference, I'd do two things:

1. Don't have the header image in the CSS (typical with WordPress themes, so I am assuming this is the case). Move it to the HTML.

2. Make your home page MUCH lighter. If you want to put in crap do it on the sub-posts or pages. Keep your home page as small as possible so it loads in a few seconds, TOPS. Otherwise people will just hit the back button before the page fully loads. Look at your time-on-site or bounce stats. Keep adjusting your home page until you see a marked improvement.

[gonzogone]

Originally Posted by VoyGeorge

2. Make your home page MUCH lighter. If you want to put in crap do it on the sub-posts or pages. Keep your home page as small as possible so it loads in a few seconds, TOPS. Otherwise people will just hit the back button before the page fully loads. Look at your time-on-site or bounce stats. Keep adjusting your home page until you see a marked improvement.

most site load tests are looking for pages that are under 100K TOTAL so they load in less than 10 seconds on crap connections. G may already be using site load time as a ranking factor. The typical time a surfer waits for a page to load is about 8 seconds and getting less every year. It's in anybodies best interest to keep page load times as low as possible.

[roberto]

Yo, thanks for the in-depth responses. You guys rock.

I suspected the image load order had to do with CSS vs HTML, but being a self-taught and still learning web 'designer' I wasn't entirely positive. Will look into presenting that header via HTML.

As for page weight, I recognized that there were a lot of posts being loaded. My rationale was that they seemed to more or less load in descending order, so a surfer would see the first images and as they scrolled down the others would've completed as well. I wanted to give the surfer a decent variety of galleries/photosets right off the bat without having to click on any more pages - I could see major design elements not loading right away being a problem, but didn't think content below the fold would be a big deal. Maybe this was mistaken?

And I'm far from an expert on this so I'll defer to you folks, but it seems to me there are a *lot* of major websites (adult & mainstream) with pretty heavy page weight and load times in exchange for presenting a lot of content on that first page. Who is on those "crap connections" as you call them where a 100K page is necessary? And are they really going to be able to load any of my sponsors' content effectively if/when they head over there?

A possible Google penalty would be some concern, I'd never heard that before!