Go Premium for a chance to win a PS4. Enter to Win


How to display an extremely long web page

Posted on 2015-02-14
Medium Priority
Last Modified: 2015-02-15
I have a very simply web page that is extremely long.  It has a little under 4 million characters.  It's nothing but very simply html with about 300 images interspersed throughout.

The problem is that it takes forever to load -- maybe 10 minutes or more -- and it overtaxes the browser while loading.

Is there a way -- I'm thinking some flavor of JavaScript -- to resolve this?  I've found a couple of "lazy load" scripts, but they either apply only to the images, or else they require the page content to be dived up into sections that will load as each section appears in the browser's view port.  I'm looking for a solution that won't require much or anything in the way of modifying the html, of which there are nearly 85,000 lines of code.


Question by:Jonathan Greenberg
  • 2
  • 2
LVL 53

Accepted Solution

COBOLdinosaur earned 2000 total points
ID: 40610017
You have a design that is never going to work.  your only solution is to break it up into multiple pages with links to navigate.  you are trying to push more through the internet pipe than it can handle.  If the page is public facing don't ecpect many visitors, because even if some decide to wait; their browser will time out and drop the connection anyway.

Your soultion is never going to come from finding some kind of hack to get around it because no matter what you do, there is a limit to how much can be moved in a given amount of time.  Your only solution will have come in the form of a re-design with realistic page  payloads.


Author Comment

by:Jonathan Greenberg
ID: 40610042
Thanks for the response.

Just to clarify, this page is not for the public.  It's a personal page for a single person, who will be happy to wait for a few seconds of load time.  It just needs to do a lot better than it's doing to suit my purposes.

With that in mind, is there any feasible method of making the page more manageable without having to break the html up into hundreds of sections?

LVL 53

Expert Comment

ID: 40610055
You can try compression by zipping it, but with that many images you are not going to get as much size reduction as you will with the text.  Still it will not come down to anything acceptable.  85,000 lines of code still has to be parsed and serialized in the the document object, and a redererObject has to be instantiated for ever element in the document tree.  So even if you found a way to reduce the transfer time it is still going to take a massive amount of time to actually get layout done.  

What you have is beyond the capability of the technology to cope with as a single piece.


Expert Comment

ID: 40610377
" else they require the page content to be dived up into sections that will load as each section appears in the browser's view port."

This would be really easy for you to do.  You wouldn't have to divide the page into sections... Store the html page in a database table or perhaps json.. and then when the lazy load is triggered just return the next 10000 characters or something like that....

You can use the mysql substring function to grab the part of the html that you need to return.

or if you are using php I am sure you could read in the file into a string and run substr to pull and return the string you wanted.


Author Comment

by:Jonathan Greenberg
ID: 40611130
Thanks to both of you for your help.  I've gone ahead and broken up the content into 12 pages and added navigation, as this seemed like the most time-effective way forward.

rjohnsonjr, your solution might have fit the bill, but I had too many uncertainties about it and decided to go with what seemed to me a bit more easily doable.

Thanks again!


Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question