Maniphest T193221

Mobile doesn't render until full HTML is downloaded in Chrome
Open, MediumPublic
Actions

Assigned To

None

Authored By

	• Peter
	Apr 27 2018, 8:19 AM

Description

I've been trying out to set the connectivity on my phone using TSProxy to slow down the connection to try to get stable metrics but I've seen another thing. When I look at the HAR file it looks like in practice on mobile (Chrome on Android), we will not start to render the page until the full HTML is downloaded:

Screen Shot 2018-04-27 at 10.05.20 AM.png (1×2 px, 357 KB)

Both the HTML and CSS got highest (or very high) prio but the CSS seems to always finish after the HTML is fully downloaded, so we cannot render before that. Meaning pages with a lot of HTML will be slower.

I verified by testing on Moto G4 on WebPageTest and it looks the same:

Screen Shot 2018-04-27 at 10.08.18 AM.png (596×1 px, 135 KB)

https://webpagetest.org/result/180427_YV_a1b029d14a28956c39080176e2f25465/1/details/#waterfall_view_step1

I know we touched this issue a couple of times before T125208 and at that time we talked about that the HTML had slightly higher prio than CSS (from Chrome) but now it looks that it has the same, but it still looks like the CSS never finish before the HTML is downloaded? Maybe file another upstream bug?

Upstream bug: => https://bugs.chromium.org/p/chromium/issues/detail?id=849106

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T193221 Mobile doesn't render until full HTML is downloaded in Chrome
		Resolved		• Gilles	T210141 Test our production stack's HTTP/2 priority support

Event Timeline

• Peter created this task.Apr 27 2018, 8:19 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 27 2018, 8:19 AM

• Imarlier moved this task from Inbox, needs triage to To-do: Goals prioritized current Quarter on the Performance-Team board.Apr 30 2018, 7:56 PM

• Peter claimed this task.May 7 2018, 8:34 PM

I created an upstream issue in Chrome for this: https://bugs.chromium.org/p/chromium/issues/detail?id=849106

• Peter triaged this task as Medium priority.Jun 5 2018, 10:45 AM

• Peter mentioned this in T123328: [GOAL] Lazy load references in mobile skin.Jun 6 2018, 10:00 AM

Adding an example as what it looks like on iOS Safari after discussing with @Jhernandez
https://webpagetest.org/result/180607_7X_89696060282ad9321ec2a3846b893d33/1/details/#waterfall_view_step1

Screen Shot 2018-06-07 at 2.57.46 PM.png (866×1 px, 179 KB)

• Vvjjkkii renamed this task from Mobile doesn't render until full HTML is downloaded to 23daaaaaaa.Jul 1 2018, 1:13 AM

• Vvjjkkii removed • Peter as the assignee of this task.

• Vvjjkkii raised the priority of this task from Medium to High.

• Vvjjkkii added projects: CheckUser, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), Tamil-Sites, Gamepress, Hashtags, Jade, KartoEditor, Language-2018-Apr-June, New-Editor-Experiences, Mail, TCB-Team (now WMDE-TechWish).

• Vvjjkkii updated the task description. (Show Details)

• Vvjjkkii removed a subscriber: Aklapper.

Mainframe98 renamed this task from 23daaaaaaa to Mobile doesn't render until full HTML is downloaded.Jul 1 2018, 10:03 AM

Mainframe98 assigned this task to • Peter.

Mainframe98 lowered the priority of this task from High to Medium.

Mainframe98 removed projects: TCB-Team (now WMDE-TechWish), Mail, New-Editor-Experiences, Language-2018-Apr-June, KartoEditor, Jade, Hashtags, Gamepress, Tamil-Sites, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), CheckUser.

Mainframe98 updated the task description. (Show Details)

Mainframe98 added a subscriber: Aklapper.

• Peter renamed this task from Mobile doesn't render until full HTML is downloaded to Mobile doesn't render until full HTML is downloaded in Chrome.Aug 31 2018, 6:32 AM

Krinkle updated the task description. (Show Details)Dec 5 2018, 5:03 PM

Krinkle moved this task from Backlog to Reported Upstream on the Upstream board.

Krinkle moved this task from To-do: Goals prioritized current Quarter to Blocked (old) on the Performance-Team board.

• Imarlier added a subtask: T210141: Test our production stack's HTTP/2 priority support.Dec 5 2018, 5:05 PM

• Jhernandez unsubscribed.Apr 2 2020, 6:46 PM

Removing task assignee due to inactivity, as this open task has been assigned to the same person for more than two years (see the emails sent to the task assignee on Oct27 and Nov23). Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome.
(See https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator.)

Clearing out old Blocked column.

Krinkle moved this task from Inbox, needs triage to Backlog: Maintenance, non-prioritized on the Performance-Team board.Mar 2 2021, 9:23 PM

It seems Chrome might have improved to have a more optimal approach like the one we see in Safari.

But, I'm not sure. I tried quite a few different article sizes (to vary HTML payload size), and different network emulations (to vary artificial latencies) and for most combinations I tried we still see the waterfall the same way as Peter first found it.

I'm thinking that maybe with today's Chrome, it still often looks like the CSS first byte (and visual paint) are delayed by HTML completion, but maybe that is a coincidence? If the HTML is short enough, it will complete before the render can happen. And if the artificial latency is generally long, then it will take longer for the CSS bytes to arrive and thus arrive shortly after the HTML finished.

On a large article (like Obama), with a medium speed, I found that we seem to get the "ideal" where CSS and paint both finish completely while the HTML is still being downloaded:

Screenshot 2021-10-05 at 20.30.26.png (1×2 px, 847 KB)

• dpifke subscribed.Oct 5 2021, 9:43 PM

I think this is still an issue. To test and verify I pushed some tests to run continuously and forced them to use HTTP1, I only did it for emulated mobile, and the test use simulated 4g. Make sure the test type is http1.

https://grafana.wikimedia.org/d/IvAfnmLMk/page-drilldown?orgId=1&var-base=sitespeed_io&var-path=emulatedMobile&var-testtype=http1&var-group=en_m_wikipedia_org&var-page=_wiki_Barack_Obama&var-browser=chrome&var-connectivity=4g&var-function=median&var-s3path=https:%2F%2Fsynthetic-tests-result-wikimedia.s3.amazonaws.com

Then you can compare with the same URLs and change the test type to firstView. The impact is bigger than I thought on not so slow connection.

Here's two HAR files, one with HTTP1 and one with HTTP2, you can drag and drop them both into https://compare.sitespeed.io and then use the slider to see the diff.

har.zip2 MBDownload

Krinkle added a project: Wikimedia-Performance-recommendation.Aug 23 2024, 3:28 AM

	F34673325: Screenshot 2021-10-05 at 20.30.26.png
	Oct 5 2021, 7:43 PM

	F18898375: Screen Shot 2018-06-07 at 2.57.46 PM.png
	Jun 7 2018, 12:58 PM

	F17337227: Screen Shot 2018-04-27 at 10.05.20 AM.png
	Apr 27 2018, 8:19 AM

	F17337362: Screen Shot 2018-04-27 at 10.08.18 AM.png
	Apr 27 2018, 8:19 AM

	F34676010: har.zip
	Oct 6 2021, 1:16 PM

Mobile doesn't render until full HTML is downloaded in ChromeOpen, MediumPublicActions

Description

Related ObjectsSearch...

Event Timeline

Mobile doesn't render until full HTML is downloaded in Chrome
Open, MediumPublic
Actions

Related Objects
Search...