3

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.

Improve this question
2

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I did all possible optimizations that I can think of, Google Page speed gives me rank of 91/100 (thanks to facebook like box etc, rate drops). I totally agree with your "hiding content" comment.
0

Depending on other page content, you could run your script on DocumentReady as opposed to onload.

DocumentReady runs after the page downloaded and the DOM rendered, but before images are retrieved.

I believe that there is an official DocumentReady event somewhere, but I still have to support IE6 on my pages, so I use a busy loop to watch the DOM.

Improve this answer

1 Comment

"I still have to support IE6" ... I weep for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.