Page MenuHomePhabricator

Stylesheets should be loaded at very top of head
Closed, DeclinedPublic

Description

I notice the link tag for our stylesheets appears below our JS config. Ideally we should be putting it as close to the top so it begins downloading as fast as possible.

<meta charset="UTF-8" />
<title>Wikipedia, the free encyclopedia</title>
<script>document.documentElement.className = document.documentElement.className.replace( /(^|\s)client-nojs(\s|$)/, "$1client-js$2" );</script>
<script>window.RLQ = window.RLQ || []; window.RLQ.push( function () {
mw.config.set({"wgCanonica
...
</script>
<link rel="stylesheet" href="

Event Timeline

Jdlrobson raised the priority of this task from to High.
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a project: Epic.
Jdlrobson set Security to None.
Jdlrobson added subscribers: AndyRussG, Jhernandez, Gilles and 13 others.
Krinkle added a subscriber: Krinkle.EditedAug 31 2015, 8:30 PM

Inclined to decline, but will leave open for now.

Stylesheets used to be before the scripts, but we recently intentionally reversed this as this has measurably improved first paint performance. See 09537e83e7d2 for details.

Firstly, look-ahead pre-parsers will find the stylesheets soon enough to start dispatching fetches for those resources right away – Irregardless and even before inline scripts execute. Even in order browsers, the inline script is cheap as it does nothing but queue a function for later.

Secondly, note that we only put the (synchronous) inline scripts before the stylesheet. The asynchronous (external) scripts is after it. In modern browsers we found no difference either way, but in the past inline scripts were blocked from execution when put after a stylesheet until the stylesheet is parsed, execution and applied as the script may access it via the CSSOM interface. Putting the inline script before optimises against that restriction. The external script is marked asynchronous. This tells the browser we don't intend to access the CSSOM synchronously and thus allows the following to happen in parallel.

Thirdly, the className manipulation must happen before the stylesheet to avoid applying the stylesheet in noscript mode only to trash it and re-apply in client-js mode.

Jdlrobson closed this task as Declined.Sep 4 2015, 5:37 PM
Jdlrobson claimed this task.

I'm happy to decline this with that in mind.