Page MenuHomePhabricator

Optimise critical rendering path
Closed, ResolvedPublic

Description

T159911: Audit modules (2017)


This is a tracking task for improving page load performance of MediaWiki-powered page views. The scope and objective of this task is to reduce time durations as observed through metrics of the Paint Timing API (first-paint, and first-contentful-paint) and front-end metrics of the Navigation Timing API (responseEnd, domInteractive, domComplete, and loadEventEnd). We also care about the following perceptual metrics: "time to logo", "time to text", "time to first image", "time to interaction".

https://www.w3.org/TR/paint-timing/
https://www.w3.org/TR/navigation-timing-2/

The critical path is defined here as all downloading, parsing and execution in the browser up until loadEventEnd (when the browser's native loading indicator finishes), or the last visual change (whichever happens later). From a network perspective, this involves the following resources:

  • One HTML document.
  • One or more (blocking) stylesheets.
  • Zero or more images requests that started before onload.
  • Zero or more (async) JavaScript requests that started before onload.

Category: Improve caching

Improving the cachability of web responses used in the critical path.

Expected impact on repeat views (not first views):

  • For any resources:
    • Consume less bandwidth (reduces mobile data costs).
    • Consume less power (no cell-radio activation required).
  • For stylesheets:
    • Improvement of all paint metrics. Cached stylesheets load faster without network roundtrip, allowing rendering to happen earlier.
    • Reduce time to domComplete and loadEventEnd metrics. Stylesheets are subresources part of DOM completion.
  • For JavaScript:
    • Reduce "Time to Interactive". Cached scripts load (and parse) faster.

Tasks:


Category: Reduce size of HTML payload

Reducing the size of the main HTML payload. Specifically, we're focussing on the first 14 KB of the HTML (TCP slow-start), which should ideally contain everything needed to render to rough skin layout and a bit of the article text. And do so in a way that isn't later moved around (more components may load later, but existing components should not move).

Vagues:

  • Reduce amount of per-page header bloat (e.g. RLQ, mw.config, mw.loader).
  • More minification of CSS, JavaScript and HTML within the <head>.

Tasks:


Category: Reduce size of stylesheet

Reducing the size of the main (blocking) stylesheet loaded by the HTML.

Expected impact on all views:

  • Improvement of all paint metrics. Smaller stylesheets load and parse faster, allowing rendering to happen earlier.
  • Reduce time to domComplete and loadEventEnd metrics. Stylesheets are subresources part of DOM completion.
  • Consume less bandwidth (reduces mobile data costs).
  • Consume less power (reduce CPU time for stylesheet parsing).

Tasks:


Category: Reduce size of scripts

Reducing the amount of scripts loaded by default as part of the startup module, the base modules (jquery+mediawiki), or module that are pre-loaded on a page. This does not include scripts that are lazy-loaded after document-ready.

Expected impact on all views:

  • Reduce "Time to Interactive". Less code to download, parse, and execute.
  • Reduce time to domComplete and loadEventEnd metrics. These scripts are sub resources part of DOM completion.
  • Consume less bandwidth (reduces mobile data costs).

Tasks:


Category: Reduce processing cost of scripts

Reduce the amount of time spend in executing JavaScript code during the critical path. This includes:

Expected impact on all views:

  • Reduce "Time to Interactive". Less execution before the page is ready. Less uninterrupted execution which blocks interactions Fewer "forced synchronous layouts" which significantly slow down code execution.
  • Reduce time to loadEventEnd metrics. These finishing of initial scripts' execution holds back "loadEvent".

Tasks:


Category: Reduce latency

Try to find ways to reduce latency from a browser discovering a resource and requesting it, and the browser receiving the response. Either by making the response happen faster, or by making it start earlier.


Other

Related Objects

StatusAssignedTask
ResolvedKrinkle
ResolvedKrinkle
ResolvedBBlack
ResolvedKrinkle
ResolvedTheDJ
ResolvedTheDJ
ResolvedKrinkle
ResolvedKrinkle
Resolved Mattflaschen-WMF
ResolvedFlorian
Resolved Mattflaschen-WMF
Resolved Mattflaschen-WMF
Resolved Mattflaschen-WMF
ResolvedPhysikerwelt
ResolvedJdlrobson
ResolvedAddshore
Resolvedmatmarex
ResolvedTpt
ResolvedKrinkle
DuplicatePeter.Hedenskog
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedJdforrester-WMF
ResolvedUmherirrender
ResolvedFomafix
ResolvedKrinkle
ResolvedJdforrester-WMF
ResolvedKrinkle
ResolvedGilles
ResolvedKrinkle
ResolvedFlorian
ResolvedNone
ResolvedPeter
Resolved Jonas
ResolvedNikerabbit
Resolvedmatmarex
Resolvedmatmarex
ResolvedMooeypoo
ResolvedJdforrester-WMF
ResolvedEsanders
Resolvedmatthiasmullie
Resolvedmatthiasmullie
ResolvedAnomie
Resolvedmatmarex
ResolvedNone
Resolvedmatmarex
ResolvedKrinkle
Resolvedcscott
ResolvedKrinkle
ResolvedKrinkle
OpenNone
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedPeter
ResolvedJdlrobson
ResolvedRyasmeen
ResolvedGilles
ResolvedMilimetric
ResolvedRyasmeen
ResolvedMilimetric
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedKrinkle
ResolvedEsanders
ResolvedKrinkle

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Krinkle updated the task description. (Show Details)Apr 26 2018, 12:21 AM
Nirmos added a subscriber: Nirmos.May 30 2018, 9:10 PM

Change 441614 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] skins: Remove redundant mediawiki.hidpi script

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

Change 441616 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] Remove deprecated 'dom-level2-shim' module

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

Change 441616 merged by jenkins-bot:
[mediawiki/core@master] Remove deprecated 'dom-level2-shim' module

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

Change 441614 merged by jenkins-bot:
[mediawiki/core@master] skins: Remove redundant mediawiki.hidpi script

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

Change 442991 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] Remove deprecated 'json' module

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

Change 442991 merged by Krinkle:
[mediawiki/core@master] Remove deprecated 'json' module

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

Schnark added a subscriber: Schnark.Jul 2 2018, 9:37 AM
Krinkle updated the task description. (Show Details)Jul 6 2018, 10:59 PM
Krinkle added a subscriber: matmarex.
Paladox added a subscriber: Paladox.Jul 7 2018, 2:37 AM

Change 444782 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] mediawiki.language: Combine with 'mediawiki.language.data' and 'mediawiki.language.init'

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

Change 452588 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resourceloader: Remove support for state(name, state) signature

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

Change 452588 merged by jenkins-bot:
[mediawiki/core@master] resourceloader: Remove support for state(name, state) signature

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

Krinkle updated the task description. (Show Details)Aug 17 2018, 6:17 PM
PerfektesChaos added a subscriber: PerfektesChaos.EditedAug 24 2018, 6:18 PM

Change 452588 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resourceloader: Remove support for state(name, state) signature
https://gerrit.wikimedia.org/r/452588

Well, then documentation in line 1925 should be {Object}. Has been changed

  • from {string|Object}
  • to {Object|string}

doc

Change 455224 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resourceloader: Correct @param doc for mw.loader.state()

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

@PerfektesChaos Well-spotted. Thanks for noticing that. I've submitted a patch to adjust that.

Change 455224 merged by jenkins-bot:
[mediawiki/core@master] resourceloader: Correct @param doc for mw.loader.state()

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

Change 456512 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/extensions/WikimediaBadges@master] Remove @embed for badge images

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

Change 456524 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/extensions/Wikibase@master] Remove @embed from wikibase.client.css background-image

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

Change 456525 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resourceloader: Reduce memory cost of mw.config.set()

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

Change 456532 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resourceloader: Remove module stringification from execute path

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

Change 456512 merged by jenkins-bot:
[mediawiki/extensions/WikimediaBadges@master] Remove @embed for badge images

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

Change 456525 merged by jenkins-bot:
[mediawiki/core@master] resourceloader: Reduce memory cost of mw.config.set()

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

Change 456532 merged by jenkins-bot:
[mediawiki/core@master] resourceloader: Remove module stringification from execute path

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

Change 457968 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@wmf/1.32.0-wmf.20] resourceloader: Remove module stringification from execute path

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

Change 457977 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@wmf/1.32.0-wmf.19] resourceloader: Remove module stringification from execute path

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

Change 457968 merged by jenkins-bot:
[mediawiki/core@wmf/1.32.0-wmf.20] resourceloader: Remove module stringification from execute path

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

Change 457977 merged by jenkins-bot:
[mediawiki/core@wmf/1.32.0-wmf.19] resourceloader: Remove module stringification from execute path

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

Change 457989 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@wmf/1.32.0-wmf.20] resourceloader: Reduce memory cost of mw.config.set()

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

Change 457989 merged by Krinkle:
[mediawiki/core@wmf/1.32.0-wmf.20] resourceloader: Reduce memory cost of mw.config.set()

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

Change 459011 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/extensions/UniversalLanguageSelector@master] compactlinks: Optimise performance of DOM logic

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

Change 459012 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/extensions/UniversalLanguageSelector@master] compactlinks: Optimise performance of list creation logic

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

Change 459256 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resourceloader: Optimise and simplify state propagation logic

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

Change 456524 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Remove @embed from wikibase.client.css background-image

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

Change 459011 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] compactlinks: Optimise performance of DOM logic

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

Change 459256 merged by jenkins-bot:
[mediawiki/core@master] resourceloader: Optimise and simplify state propagation logic

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

Change 459012 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] compactlinks: Optimise performance of list creation logic

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

Krinkle updated the task description. (Show Details)Sep 28 2018, 4:30 PM

Change 464720 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@master] resources: Update CLDRPluralRuleParser to v1.3.2-pre

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

Change 464720 merged by Nikerabbit:
[mediawiki/core@master] resources: Update CLDRPluralRuleParser to v1.3.2-pre

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

Change 465786 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/core@wmf/1.32.0-wmf.24] resources: Update CLDRPluralRuleParser to v1.3.2-pre

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

Change 465786 merged by jenkins-bot:
[mediawiki/core@wmf/1.32.0-wmf.24] resources: Update CLDRPluralRuleParser to v1.3.2-pre

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

Krinkle closed this task as Resolved.EditedOct 13 2018, 2:53 AM

This task is currently serving too many purposes at once. As a result, I think it not being great at any of its intended purposes. I'll try to identify what purposes it is serving, and how that purpose can be better served in a different way.

Focus

There are a nearly infinite number of ways in which we can change the page structure, script/styles delivery, and contents of our script/styles that we believe might improve user-perceived performance somehow.

This task's task description has been a central place to summarise:

  • what our high-level direction is and what our focus areas are,
  • why they are our focus areas,
  • and what we have learned the impact will be of making changes to those areas.

Indirectly, it has also allowed us to decide what to take on, and what to doubt and consider more carefully. For example, if something doesn't fit in thee areas, it might be a distraction that serves something we don't prioritise, or it unintentionally regress an aspect we do prioritise.

Distraction

While the task has been useful to decide at a high-level what we should and shouldn't focus on (in the long term). It has not been very useful in the short-term, because the areas describes are still quite large.

I think it'd be better if, going forward, we focus on only one specific theme at a time. I've tried this a few times in the past (with T159911, T192623 and T202154: Audit modules 2018: Reduce registry overhead). And I believe those worked out well.

When we work on what comes to mind (my bad), there's often little time to promote or explain properly why we are working on it. It is also harder to evaluate the impact on small changes.

When focussing on a single theme only and making small changes within that theme, we can afford to explain and promote the theme, and draw in other teams. It also means that after a quarter, we can look back and with only a minimal number of unrelated changes, can draw a comparison and assess the cumulative impact the focus area had.

Tracking

In addition to high-level focus areas, and sections for themes, the task also served as tracking task for all work performed in a particular area. This was mainly for the purposes of search, and (in case no separate task exists) to track the effort of a particular theme.

But, editing task descriptions with checkboxes is rather tedious and not a particularly user-friendly way of tracking work across several years.

Going forward

  • Focus: I've published the focus areas at https://www.mediawiki.org/wiki/Wikimedia_Performance_Team/Page_load_performance.
  • Themes: There'll be separate tracking tasks for themes that'll last one or two quarters with only subtasks added for a short-time, and once completed, allows the task to be resolved.
  • Tracking: When we do one-off work in an area that isn't within an area that currently has a tracking task for this quarter, it won't be tracked as subtask anymore. I think that's a small loss, that is worth the benefit of better focus. Also, for the purposes of search, we can use Performance-Team and Performance-Team (Radar).
Krinkle changed the status of subtask T192862: Reduce overhead of navtiming beacon from Stalled to Open.Dec 16 2018, 7:28 PM