Modifying HTML while document is loading

Question

Assume you have 75 div's that have data-id="{some number}" attribute. The overall page size is unfortunately big, very big.

There are many repetitive HTML snippets in my HTML document like image tags or links. These images/links' only changing portion is the id.

The HTML document is quite long, these snippets contribute to the overall size of the document.

I can run a javascript when dom is ready, but the user experience will be: - wait the page loads, and start seeing nodes etc, - page loads, - extra snippets show.

I can make the top container DIV to hide until the page loads but - worried that google search bot could realize the div is hidden and skip the content (or does it?) - the users won't be able to see the content while the page is loading.

What ideal is to load the page in HTML without much extra markup for google search bot, and add extra elements while it's loading with javascript.

Any tricks that I can try that comes to your mind to accomplish this?

Thank you.

Answer 1

The best performance and user experience is to do as much work as possible on the server, then send efficient HTML and allow the browser to display the page as it's received. Sending say a single DIV container, then using script to clone it 70 or 80 times will be slower (probably a lot slower for some users).

Hiding content completely until your script has finished is the worst solution - users are left with a blank (or minimal content) page, waiting for something to happen.

The vast bulk of most pages is script and images, replacing HTML with scripting really is playing at the margins. e.g. this page has 90KB of HTML and 264KB of script, images and css. Apple's home page has 12KB of HTML and around 800KB of script, css and images.

Browsers show content progressively as it's received because that's how they evolved over many years on the web. Users prefer to see something rather than nothing, and to start viewing content while the rest loads (it's all about the content, not about fancy layouts or effects). Try to work with browser behaviour and features rather than against them.

You can greatly help the browser by specifying sizes for images and having an efficient layout. That way the layout won't change much as new content is received.