0

I roughly know how browser parses a website, and how it does all the job from I type stackoverflow.com to I have the page in my browser.

The question here is how can I override or manipulate its behavior in order to force a specific set of tasks in the order I want.

I mean something like this:

  1. Download only the HTML code of above the fold section of the website.
  2. Download and parse the stylesheet of above the fold section of the website.
  3. Render above the fold
  4. Download images of above the fold
  5. Download the JS of above the fold
  6. While parsing the JS, download another section of the website
  7. Repeat...

In my example, I just want to render above the fold ASAP and then render the rest of the page.

Obviously, this is a very simplified example of I what asking if is possible to do, and also I want to know if there is some library that implements this functionality (or something similar).

TylerH
  • 20,799
  • 66
  • 75
  • 101
IAmJulianAcosta
  • 1,082
  • 2
  • 14
  • 30
  • This question is way too broad. Are you trying to implement some Javascript that will achieve each of these tasks? If so, there are already [questions](http://stackoverflow.com/questions/19374843/css-delivery-optimization-how-to-defer-css-loading) and [answers](http://stackoverflow.com/questions/30964257/critical-css-above-the-fold-content-and-rendered-views) for these tasks. Or, are you trying to implement a browser plugin? – alexw Apr 09 '16 at 04:29
  • It might be too broad, but I'm asking it looking for a detailed answer that would help me to find a way to accomplish what I want, but is obvious that SO loves questions more like "help this not works" – IAmJulianAcosta Apr 09 '16 at 13:06
  • SO likes specific, well-researched questions. The problem with "overriding how browsers render pages" is that this literally could describe *anything*. ALL CSS and Javascript modifies the default behavior of the browser. As for the rest of your questions...they're not really questions, they're topics. If you had done some research on these general topics earlier, I suspect you'd have much more specific questions for us. – alexw Apr 09 '16 at 13:52
  • There are several ways to do this, I could find some hackish way to do this, but is not the question. I researched this topic and found that hackish ways. I ask in SO after going elsewhere. I know that site is not famous because of its friendliness. – IAmJulianAcosta Apr 09 '16 at 14:40

1 Answers1

3

How is the browser supposed to know which of your website's source only touches the area above the fold?

Well, you need to take care of that. Explicitly.

  • In your site's initial stylesheet, only include styles for "above the fold".
  • In your site's initial JavaScript, only include behavior for "above the fold" and behavior for fetching the rest of the content dynamically (jspm lets you do that, for example).
  • Once the initial viewport is rendered, have the JavaScript download and insert the rest of the styles/scripts and insert them into your DOM.
  • You could also divide your website into chunks that are loaded dynamically once the user scrolls near (see lazy-loading for images/videos, YouTube's comment section, etc. for instance).

Beware: What is "above the fold"? Can you tell what's above the fold for devices with smaller screens such as mobiles or even smart watches?

Most of the time, it's unnecessary scripts and media that kill website performance. There's no reason to pre-fetch these.

Rather than over-engineering this, you should take simpler approaches (such as lazy-loading big chunks of data that the user first needs to scroll to).

Chiru
  • 3,661
  • 1
  • 20
  • 30
  • _“What is "above the fold"?”_ – IMHO it is an idiotic construct invented by Google, who abuse their market position to try and force us all to rape and dismember our HTML & CSS … – CBroe Apr 09 '16 at 04:37
  • @cbroe it makes sense when you have a very big page and you want to make it render very quick. It was only an example – IAmJulianAcosta Apr 09 '16 at 13:02