• Posts
  • RSS
  • ◂◂RSS
  • Contact

  • Text-Only Fallback Browsing

    July 11th, 2013
    ideas, tech  [html]
    When you download a webpage you go through several steps [1], but your web browser usually has the text you're looking for early in the process. If you're on your phone and a page gets stuck with the progress bar halfway across the screen, it probably already has all of the html and is waiting on some external javascript, css, or font before displaying the page. Let's stop doing that: if a page has taken over twenty seconds to load, the browser should paint whatever it has so far.

    Won't that mean painting ugly unstyled content? Yes it will, but that's better than making the user wait forever on a blank screen. For example, on an example page, it would look like this:

    screenshot of unstyled page showing navigation screenshot of unstyled page showing title and broken image screenshot of unstyled page showing readable text

    (Try your browser here)

    Displaying only the html isn't a new thing: text-based browsers have done this for years and there's already one for Android. But the user shouldn't have to think "this page might be slow because I have a bad internet connection and it's really big so let's open it in a text-only browser". Instead regular browsers should just paint what they've already downloaded if they've been keeping the user waiting too long.

    Update 2013-07-11: Instead of a pure timeout, it might be better to display a button like "unstyled text available now, click here to load" that would force an early paint. You would still want a timeout of a few seconds so that you don't display this button when someone would get the whole page if they were just a little more patient.


    [1] What your browser does to download a simple web page:

    1. Use DNS to look up the IP of your site:
            Browser:    What is www.jefftk.com?
            DNS Server: www.jefftk.com is 209.20.65.89
    2. Open a TCP connection to the site.
            Browser:    SYN
            Web Server: SYN-ACK
            Browser:    ACK
    3. Download the HTML
            Browser:    GET / HTTP/1.1
                        Host: www.jefftk.com
            Web Server: Server: nginx/1.4.1
                        Date: Thu, 11 Jul 2013 11:27:07 GMT
                        Content-Type: text/html
                        ...
                        <link rel=stylesheet href=main.css>
                        <script src=scriptes/main.js<
                        ...
                        about a month ago I &lta href="news/2013-06-05"&gt
                        got some citric acid&lt/a&gt. Since then I've tried
                        putting it on and in various things. Chocolate was
                        strange, Strawberries were good, but my favorite has
                        definitely been watermelon:
                        <p>
                        <img src="/citric-acid-watermelon.jpg">
                        ...
    4. The browser could paint here (or continuously as it downloads the html) but doesn't, to avoid a flash of unstyled content.
    5. Download the referenced resources that go are required for displaying the page:
            Browser:    GET /main.css HTTP/1.1
                        Host: www.jefftk.com
            Web Server: [contents of main.css]
            Browser:    GET /scripts/main.js HTTP/1.1
                        Host: www.jefftk.com
            Web Server: [contents of /scripts/main.js]
    6. Display the page in its initial state (first paint!)
    7. Download lower priority resources:
            Browser:    GET /citric-acid-watermelon.jpg HTTP/1.1
                        Host: www.jefftk.com
            Web Server: [contents of /citric-acid-watermelon.jpg]
    8. Display the page in its final state. There could be multiple paints during the previous step.

    Comment via: google plus, facebook

    Recent posts on blogs I like:

    Randal O’Toole Gets High-Speed Rail Wrong

    Now that there’s decent chance of US investment in rail, Randal O’Toole is resurrecting his takes from the early Obama era, warning that high-speed rail is a multi-trillion dollar money sink. It’s not a good analysis, and in particular it gets the reality…

    via Pedestrian Observations May 12, 2021

    Collections: Teaching Paradox, Europa Universalis IV, Part II: Red Queens

    This is the second part in a series (I) that examines the historical assumptions behind Paradox Interactive’s grand strategy computer game set in the early modern period, Europa Universalis IV (EU4). Last time, we took a look at how EU4 was a game fundame…

    via A Collection of Unmitigated Pedantry May 7, 2021

    Books and websites on babies

    Several people I know are expecting a first baby soon, and I wrote up notes for one of them. Might as well share here too: Medical:Scott Alexander’s Biodeterminist’s Guide to Parenting is an interesting read, and some parts are actionable.  If you live in…

    via The whole sky April 14, 2021

    more     (via openring)


  • Posts
  • RSS
  • ◂◂RSS
  • Contact