Page MenuHomePhabricator

mobile-html: improve page load time and time to first paint
Closed, ResolvedPublic

Description

Background information

Time to first paint is slower on mobile-html than mobile web according to PageSpeed Insights.

Compare mobile-html:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fen.wikipedia.org%2Fapi%2Frest_v1%2Fpage%2Fmobile-html%2FDog

to mobile-web:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fen.m.wikipedia.org%2Fwiki%2FDog

This was consistent across all pages tested.

What

Speed up page load and time to first paint for mobile-html

How

Investigate suggestions from pagespeed insights, talk to the mobile web team, make recommended adjustments

Completed changes

Event Timeline

JoeWalsh created this task.Aug 26 2019, 1:47 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 26 2019, 1:47 PM
JoeWalsh updated the task description. (Show Details)Aug 26 2019, 5:04 PM
bearND added subscribers: Jhernandez, bearND.EditedAug 26 2019, 6:19 PM

FYI, JoeWalsh added minification of the pagelib CSS in https://github.com/wikimedia/wikimedia-page-library/pull/244 and pagelib version 9.1.3.

JoeWalsh updated the task description. (Show Details)Aug 26 2019, 7:08 PM
JoeWalsh updated the task description. (Show Details)
bearND added a comment.EditedAug 26 2019, 9:01 PM

PR 244 has been merged and published, and MCS deployed plus the JS and CSS of the pagelib URLs purged from Varnish, but doesn't show any noticeable improvement.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fen.m.wikipedia.org%2Fapi%2Frest_v1%2Fpage%2Fmobile-html%2FDog

Before change:

After change:

Not sure if we run into caching issues in pagespeed insights. I do see a .1s improvement when changing the URL to drop the .m domain to: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Dog

We've met and decided that mobile-html should favor first paint performance of the first section, and delay any other processing of the rest of the page. Similar to the tradeoffs chosen by the Android app with mobile-sections.

@JoeWalsh will explore the approach of injecting settings that pagelib needs at the beginning of the page load.

We will need to review the transform and setup approach so that the base style changes like theme color and margins can be set up as early as possible, the trasnforms can be run only on the lead section, and then we can lazily do the rest after that work has been done, and with requestIdleCallback so that we block the main thread as little as possible.

bearND claimed this task.Aug 27 2019, 3:37 PM
bearND triaged this task as High priority.
bearND moved this task from Needs triage to Kanban on the Product-Infrastructure-Team-Backlog board.
bearND moved this task from To Do to Doing on the Product-Infrastructure-Team-Backlog (Kanban) board.

Injecting the settings atDocumentStart and calling setup inline made no appreciable change to time to first paint on the iOS prototype.

Furthermore, removing the linked pagelib js script entirely and just making the callback in an inline script in the head tag also made no appreciable change to time to first paint.

Lastly, removing the pagelib js and not hiding the webview made no appreciable change to time to first paint.

Local loads are consistently between 0.5s and 1s on the prototype. Might be something else going on here that I'm missing, will re-check these numbers tomorrow. CC @Dbrant @Jhernandez @bearND

Change 533008 had a related patch set uploaded (by Joewalsh; owner: Joewalsh):
[mediawiki/services/mobileapps@master] Add mobile-html shell page endpoint

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

Change 533274 had a related patch set uploaded (by Joewalsh; owner: Joewalsh):
[mediawiki/services/mobileapps@master] Split PCS into pre/post load components

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

Change 534531 had a related patch set uploaded (by Joewalsh; owner: Joewalsh):
[mediawiki/services/mobileapps@master] Progressive content loading for mobile-html without splitting pagelib.

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

Change 533274 abandoned by Joewalsh:
Split PCS into pre/post load components

Reason:
replaced by 534531 - not necessary to split pagelib into separate components as it didn't have a huge impact on performance

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

Change 533008 abandoned by Joewalsh:
Add mobile-html shell page endpoint

Reason:
534531 is the better approach

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

Change 534531 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Speeds up time to first paint for mobile-html

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

JoeWalsh updated the task description. (Show Details)Sep 10 2019, 4:17 PM
JoeWalsh closed this task as Resolved.Tue, Oct 1, 3:34 PM
JoeWalsh claimed this task.