Page MenuHomePhabricator

Fit above-the-fold layout and first paragraph HTML in 14 KB
Open, NormalPublic

Description

Objective

For the browser to be able to have enough HTML to render everything above-the-fold with only a single network roundtrip.

Specifically, by making the following less than 14 KB in total: HTTP headers, HTML <head>, basic skin layout (as visible above the fold), and first bit of the article content.

Background

We don't control the speed (roundtrip latency) with which users can connect to our servers (e.g. via cellular radios and cable), and we also don't control their bandwidth (e.g. how many KB/s). However, it is important to remember that bandwidth is not speed. Transferring 100KB of data with 10 ms latency takes essentially the same amount of time on a 400 KB/s connection as on a 100 MB/s connection. The bandwidth controls how large individual packets can be (at most). It does not control how fast they travel.

The size of each chunk of data is automatically determined by TCP Congestion Control and related algorithms. However, for historical reasons, the default for most browsers and operating systems is to send/accept upto 10 packets of 1432 bytes at once. After that initial burst, the algorithms take over and grow the chunk size with each roundtrip until it finds that it cannot send more. This fluctuates and bounces over time. But, this is why 14 KB is a common target because that's roughly the amount of data all users receive at first, regardless of how high or low their bandwidth and latencies are (2G, 4G, WiFi, etc.)

Further reading

Details

Related Gerrit Patches:

Event Timeline

Krinkle created this task.Aug 25 2019, 3:58 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 25 2019, 3:58 PM
How to measure

Size of HTTP headers:

  • curl -i https://en.wikipedia.org/wiki/Stockholm > http-head
  • trim until line above <!DOCTYPE html>.
  • measure with wc -c.

Size of HTML until start of content:

  • curl -i https://en.wikipedia.org/wiki/Stockholm > html
  • keep only until after <div class="mw-parser-output">
  • measure with cat | gzip -7 -c | wc -c

Size of HTML until first paragraph:

  • curl -i https://en.wikipedia.org/wiki/Stockholm > html
  • keep only until before <p><b>Stockholm</b> …
  • measure with cat | gzip -7 -c | wc -c
Current state (mobile)
Size of HTTP headers (uncompressed)1,242 bytes
Size of HTML until start of content (gzipped)3,724 bytes
Total transfer size before content4.9 KB
Size of HTML until first paragraph (gzipped)3,871 bytes
Current state (desktop)
Size of HTTP headers (uncompressed)1,240 bytes
Size of HTML until start of content (gzipped)3,445 bytes
Total transfer size before content4.7 KB
Size of HTML until first paragraph (gzipped)7,027 bytes

Looks like we're already well-under 14 KB on both. However, for desktop (Vector) this currently does not include the skin layout., because in Vector that is currently at the end of the HTML payload. This was done many years ago under the rationale of search-engine optimisation (SEO). This is the reason that when navigating between long articles, the site header blinks in and out because the visual completion of above-the-foldheader is blocked by all downloading and parsing of HTML below-the-fold. We should fix this. Once done, this can be closed so not such a big task after all :)

Krinkle triaged this task as Normal priority.Aug 25 2019, 4:25 PM

Change 532247 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resourceloader: Compile documentElement.className server-side

https://gerrit.wikimedia.org/r/532247

Change 532247 merged by jenkins-bot:
[mediawiki/core@master] resourceloader: Compile documentElement.className server-side

https://gerrit.wikimedia.org/r/532247