<sorry most of this might not make sense, it's mostly a copy/paste from an email thread>

I’ve been looking at a number of our traces from production and I’ve noticed that a large gap of time (100s of ms in some cases) between the last <script> that is a part of the head and the first one that is a part of the body. During this gap we often see image requests go out for images that are a background-image set by a stylesheet. Based on this I was wondering if that gap might be caused by the initial layout and styling of the document.

I used webpage test to gather a trace of https://www.facebook.com/barackobama/ as a logged out user. In this trace I can see a pattern that matches what I see in my production traces — it takes 175 ms to do an initial style & layout of the document. The dom really isn’t that big at this point — UpdateLayoutTree says there are 917 elements at this point in the page.

WPT results:

http://www.webpagetest.org/result/160401_YC_1B32/
http://www.webpagetest.org/export.php?bodies=1&pretty=1&test=160401_YC_1B32


I attached a zipped HTML directory with additional JS/CSS. I used Chrome’s “export to HTML” and I had to manually remove crossorigin=anonymous from the links (I’m assuming some security feature is banning that type of load from local disk). I was able to reproduce the layout jank with this. It’s not exactly minimal, but it’s at least a start.

This seems to reproduce on https://www.facebook.com/legal/terms, which should be a much simpler page. Here’s a WPT render of that page http://www.webpagetest.org/result/160402_TJ_VPZ


Attached are three test cases:

1) Obama's logged out fb page
2) A reduced version of obama's FB page
3) Our ToS, reduced
 

Deleted: minified.zip 2.4 MB

minified.zip 2.4 MB Download

Deleted: obama fb page.zip 2.4 MB

obama fb page.zip 2.4 MB Download