Four Things Stand Between a Document Arriving and Anything Appearing, and Only One of Them Is Usually the Reason Your Page Is Slow
Last timeWorking Out What Applies
The complete list of what prevents the first frame, what each one costs in practice, and the three questions that tell you which item is actually holding your page.
The complete list
Two lessons have each produced one reason the page is not on the screen yet.
Collecting them gives a list that is shorter than most people expect.
A stylesheet whose conditions apply blocks, because a rule in it could change
any position, as the previous lesson established.
A script with no attribute blocks, because the parser cannot continue past it,
so the tree stops growing and the rest of the document is not even known about.
The document itself blocks, in the sense that nothing can be drawn before
enough of it has arrived to contain something worth drawing.
And a web font blocks the text that uses it, which is a narrower kind of
blocking and the one that produces the most confusing symptom.
That is the list. Four categories.
| stops the tree growing | stops layout running | stops something being dr | |
|---|---|---|---|
| stylesheet that applies | 1 | 1 | 1 |
| script with no attribute | 1 | 1 | 1 |
| web font in visible text | 0 | 0 | 1 |
| image in the visible are | 0 | 0 | 0 |
| image further down the p | 0 | 0 | 0 |
| script marked defer | 0 | 0 | 0 |
| stylesheet for printing | 0 | 0 | 0 |
Which one is actually costing you
The four are not comparable in cost, and this is where most optimisation effort
is misspent. The useful move is to find the one on the critical path and leave
the others alone.
| step | item | when it was discovered | when it finished | delay it added | what happened |
|---|---|---|---|---|---|
| 1 | the document | 0 | 180 | 180 | One round trip plus the server working. Unavoidable and the floor under everything else. |
| 2 | the stylesheet | 190 | 410 | 220 | Found in the first packet, which is the good case. Still a full round trip, and the first frame cannot precede it. |
| 3 | a script in the head | 195 | 690 | 280 | Discovered at the same moment and finished much later, because it is larger and because the parser stopped while it ran. This is the item on the critical path. |
| 4 | the heading font | 430 | 760 | 70 | Not discovered until the stylesheet was parsed, because the reference is inside it. The delay it adds is small because most of its fetch overlapped the script. |
Two patterns recur often enough to check first.
A script in the head with no attribute. Adding one attribute removes it from
the list entirely, and on many pages that is the whole fix.
A stylesheet reference that is not in the first packet of the document. It
cannot be fetched before it is seen, so a reference a few kilobytes down the
document starts a round trip late and everything else follows.
The lesson stops here
4 more paragraphs to go
You have read the opening. The rest of the argument, the problems that check whether it landed, and the lines worth keeping at the end all come with a plan.
The first lesson of every course in the library reads the whole way through, free, so you can see exactly what the rest of them are.
See the planThe contentsThis is the reading half
Starting the course gives you your own copy of it. Every idea on every page has problems standing under it, marked with a reason rather than a tick, and any sentence you do not believe can be opened and argued with. None of that can happen on a page nobody owns.
The contents