Page MenuHomePhabricator
Create Task
Maniphest T98986

[EPIC] Improve the status quo of mobile web performance
Closed, ResolvedPublic
Actions

Description

Copied from https://phabricator.wikimedia.org/T97570#1265298
"The size of the HTML served at pageload seems to be where the biggest performance gains are to be had on mobile web at the moment. One area to explore is the automated size reduction of the HTML via Parsoid. Another is to only serve the lead section on pageload and load the rest of the page asynchronously. A secondary improvement-worthy area is the current firstPaint performance hampered by the amount of CSS and JS served in the head. Some of which has already been identified as low-hanging fruit. Lastly, the idea of loading images on demand when they are scrolled to could be experimented with."

Related Objects
Search...

StatusSubtypeAssignedTask
 Duplicate• JhernandezT104432 [EPIC]: Improve mobile site performance
 ResolvedJdlrobsonT98986 [EPIC] Improve the status quo of mobile web performance
 Resolved• GillesT99228 browser.supportsAnimations() causes a forced layout
 ResolvedJdlrobsonT97289 Trim down CSS loaded in the head for anonymous users on mobile
 Resolved• bmansurovT95332 Stop serving menu and styles in the page HTML
 ResolvedJdlrobsonT97431 Render main menu via a template
 ResolvedJdlrobsonT97326 Only load mobile.pagelist.styles when necessary
 ResolvedJdlrobsonT97327 skins.minerva.drawers.styles should be moved into mobile.drawers
 ResolvedJdlrobsonT98392 Gather module ext.gather.menu.icon should only load in beta and be position bottom
 InvalidmatmarexT98394 ResourceLoaderImageModule always gets loaded in head
 ResolvedJdlrobsonT97587 .column-break-inside-avoid rule appearing on every ResourceLoader module that includes mixins file
 DeclinedJdlrobsonT98395 MediaWiki UI styles loaded in head but unused on most pages
 OpenNoneT101666 Create parser tag(s) that render OOUI PHP widgets
 ResolvedFlorianT106949 enableOOUI() not possible for Tag extensions
 ResolvedJdlrobsonT98399 .inputs-box style shoudl only be loaded on login page
 ResolvedJdlrobsonT98400 Alpha styles loaded for all users in head
 ResolvedJdlrobsonT98401 Main page specific styles should only be loaded on main page and not in the head
 ResolvedJdlrobsonT98402 Upload icon styles loaded despite uploads being disabled
 ResolvedJdlrobsonT98473 Minimise icons loaded in head
 DeclinedJdlrobsonT98858 Content styles should not be loaded in head
 ResolvedJdlrobsonT98859 Main menu styles shouldn't be loaded on all pages
 ResolvedJdlrobsonT98864 Various legacy icons loaded in head via iconsNew.less
 ResolvedJdlrobsonT98869 Mobile menu icons loaded in head
 ResolvedJdlrobsonT98870 Diff icons loaded in head
 ResolvedJdlrobsonT98871 Icons used in JavaScript overlays are loaded in the head
 Resolved• GillesT98875 skins.minerva.beta.images loaded in head on beta site
 ResolvedJdlrobsonT98877 Alert styles should be conditionally loaded
 ResolvedJdlrobsonT98878 Gallery styles should only be loaded on pages that need them (desktop and mobile)
 ResolvedJdlrobsonT110709 Stop double loading mediawiki.page.gallery.styles
 ResolvedFlorianT113511 Category media styles broken in 1.26wmf24
 InvalidFlorianT113522 Reconcile category and gallery code to be generated via the same mechanism
 ResolvedJdlrobsonT100405 Do not load icons without JS
 ResolvedFlorianT100256 Stop flattening red links
 ResolvedJdlrobsonT71849 Deprecate redlink removal (enable redlinks in stable)
 ResolvedAlbert221T100377 RSS feeds should not be in head for mobile
 ResolvedJdlrobsonT100378 ext.imageMetrics.head should only load on File pages
 DuplicateNoneT100398 Explore text only skin alternative
 ResolvedJdlrobsonT104712 Layout flicker on mobile skin
 ResolvedJdlrobsonT105365 Make a performance audit of the mobile site
 ResolvedJdlrobsonT106756 mobile.site module should not be loaded in head
 DeclinedJdlrobsonT110938 Stylesheets should be loaded at very top of head
 ResolvedJdlrobsonT110718 Use core API code - reduce size of JS assets sent to mobile users

Event Timeline

Jdlrobson created this task.May 13 2015, 5:48 PM
Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson subscribed.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 13 2015, 5:48 PM
Krenair added projects: Web-Team-Backlog, Performance Issue.May 14 2015, 11:08 PM
Krenair merged a task: T98987: Epic: Make mobile web more performant.
Krenair added subscribers: Volker_E, Glaisher.
Krenair subscribed.
Glaisher updated the task description. (Show Details)May 15 2015, 11:06 AM
Glaisher set Security to None.

copied description from T98987 as this one was blank

phuedx renamed this task from Make mobile web more performant. to [EPIC] Make mobile web more performant..May 15 2015, 2:33 PM
phuedx added a project: Epic.
phuedx added a subtask: T99228: browser.supportsAnimations() causes a forced layout.May 15 2015, 4:01 PM
Florian subscribed.May 23 2015, 1:29 PM
• Tnegrin subscribed.May 23 2015, 1:58 PM

Notes from meetup @ Hackathon

  1. Establish a timing baseline for median of pages served
  2. Is time to first paint the right metric?
  3. Can we eliminate the top modules in mobile?
  4. Revisit banners mobile (loads desktop data stuff as well) -- need someone from FR to collaborate
  5. How can we load lead image faster?
  6. Image optimization might really help as well
  7. Tooling: how do we detect regressions via automated tools? (Web + Perf team)
    1. Can this be part of automated builds?
    2. Perf has a chromium client that periodically d/ls pages.
  8. Need a strategy to work better with community about common.js (replace with gadget)
  9. Inline CSS may be a problem with versioning (ESI may help)
  10. BBC is good example to follow in general
  11. HTTP2 is also encouraging (future)

Graphs are at gdash.wikimedia.org/dashboards/frontend

He7d3r subscribed.May 23 2015, 8:56 PM
Ricordisamoa subscribed.May 23 2015, 11:54 PM
• Mholloway subscribed.May 24 2015, 7:13 AM
Jdlrobson closed subtask T99228: browser.supportsAnimations() causes a forced layout as Resolved.May 24 2015, 8:39 AM
Jdlrobson added a subtask: T97289: Trim down CSS loaded in the head for anonymous users on mobile.May 24 2015, 3:26 PM
Jdlrobson moved this task from Incoming to 2015-16 Q2 on the Web-Team-Backlog board.May 26 2015, 8:33 AM
• GWicke subscribed.May 26 2015, 11:54 AM
• Deskana added subscribers: • bearND, • Deskana.May 27 2015, 9:33 AM

The Mobile Apps Team has been working on a content service that strips redundant HTML on the server side to reduce page weight and data usage, and performs transforms on the server rather than the client to reduce time spent reshuffling content. Could mobile web also use this service? @bearND will know more.

• bmansurov subscribed.May 27 2015, 9:24 PM
• Spage added a subtask: T100546: Reduce amount of metadata embedded in thumbnails across site.May 27 2015, 9:37 PM
• Tbayer subscribed.May 27 2015, 10:45 PM
Jdlrobson closed subtask T100256: Stop flattening red links as Resolved.May 29 2015, 7:14 AM
• Gilles subscribed.May 29 2015, 11:13 AM
Jdlrobson added a subtask: T100778: [Epic] Dedicated no-JS version of the site.Jun 22 2015, 3:46 PM
Jdlrobson added a subtask: T101731: Leverage Service Workers for performance improvements.
• Deskana unsubscribed.Jun 22 2015, 3:47 PM
• Jhernandez added a parent task: T104432: [EPIC]: Improve mobile site performance.Jul 1 2015, 10:39 AM
• Jhernandez subscribed.Jul 1 2015, 10:43 AM

Hey, I've added this epic as a blocker to our quarterly goal about performance on mobile web T104432.

I want to keep it as a reference since there are a lot of great improvements we could implement but I'd want Web-Team-Backlog to first measure & report, make hypothesis and scope pieces of work and tackle them once at a time measuring after implementation the actual improvements (if any).

This epic has a bunch of subtasks that we could fit into batches of work to do through the quarter after we've set baselines.

• Jhernandez moved this task from 2015-16 Q2 to 2016-17 Q3 on the Web-Team-Backlog board.Jul 1 2015, 11:29 AM
• Jhernandez edited projects, added Reading-Web-Planning; removed Web-Team-Backlog.Jul 2 2015, 9:25 AM
• Jhernandez moved this task from To classify to Q1 Goals on the Reading-Web-Planning board.
• Jhernandez triaged this task as High priority.Jul 2 2015, 9:30 AM
phuedx changed the status of subtask T100258: [EPIC] Only load the lead section on page load from Open to Stalled.Jul 7 2015, 3:42 PM
• Mholloway unsubscribed.Jul 7 2015, 4:22 PM
• Jhernandez added a subtask: T104712: Layout flicker on mobile skin.Jul 8 2015, 10:40 AM
• Jhernandez moved this task from Q1 Goals to 2015-16 Q4 on the Reading-Web-Planning board.Jul 8 2015, 11:05 AM
• Jhernandez moved this task from 2015-16 Q4 to To classify on the Reading-Web-Planning board.Jul 8 2015, 11:07 AM
• Jhernandez moved this task from To classify to Sprint 52: Zoolander on the Reading-Web-Planning board.Jul 9 2015, 4:28 PM
Jdlrobson closed subtask T104712: Layout flicker on mobile skin as Resolved.Jul 23 2015, 11:53 PM
Jdlrobson added subtasks: T19577: Thumbnail urls should be versioned and sent with Expires headers, T86993: Static image files from en.m.wikipedia.org are served with cache-suppressing headers.Jul 30 2015, 12:42 AM
dr0ptp4kt added a subscriber: • JKrauska.Aug 4 2015, 12:03 AM
• Jhernandez moved this task from Sprint 52: Zoolander to Sprint 54: 28 days later on the Reading-Web-Planning board.Aug 4 2015, 6:24 PM
Jdlrobson closed subtask T100378: ext.imageMetrics.head should only load on File pages as Resolved.Aug 13 2015, 7:56 PM
AndyRussG subscribed.Aug 18 2015, 10:55 PM
• JKrauska unsubscribed.Aug 18 2015, 10:59 PM
• Jhernandez closed subtask T106756: mobile.site module should not be loaded in head as Resolved.Aug 21 2015, 4:33 PM
• Jhernandez moved this task from Sprint 54: 28 days later to Sprint 55: π on the Reading-Web-Planning board.Aug 28 2015, 10:31 AM
• Jhernandez closed subtask T105365: Make a performance audit of the mobile site as Resolved.Aug 28 2015, 12:26 PM
Jdlrobson closed subtask T110938: Stylesheets should be loaded at very top of head as Declined.Sep 4 2015, 5:37 PM
Adishaporwal subscribed.Sep 16 2015, 8:44 AM

I want to contribute to wikimedia and for that Outreachy intership program looks perfect fit for me.
I am really interested in mobile web and have already fixed some bugs of MobileFrontend extension (#1 ,#2). I am looking for project idea related to this task, I will be thankful if someone can suggest any idea to me to contribute for wikimedia.

Jdlrobson renamed this task from [EPIC] Make mobile web more performant. to [EPIC] Make existing mobile web experience more performant..Sep 18 2015, 5:37 PM
Jdlrobson added a subtask: T110718: Use core API code - reduce size of JS assets sent to mobile users.
Jdlrobson removed subtasks: T110613: Strip certain HTML markup from the DOM e.g. navboxes, T101731: Leverage Service Workers for performance improvements, T100778: [Epic] Dedicated no-JS version of the site.Sep 18 2015, 5:43 PM
Jdlrobson removed subtasks: T110612: Spike: Does HTML minification gain us anything?, T100258: [EPIC] Only load the lead section on page load.
Jdlrobson renamed this task from [EPIC] Make existing mobile web experience more performant. to [EPIC] Improve the status quo of mobile web performance.Sep 18 2015, 5:47 PM
Jdlrobson removed subtasks: T110615: Explore the improvement on first paint / load time on connections if we load images via JS, T100254: Spike: Document all uses of jQuery and mediawiki (mw) in mobile..
Jdlrobson moved this task from Sprint 55: π to Q1 Goals on the Reading-Web-Planning board.Sep 18 2015, 8:30 PM
phuedx closed subtask T110718: Use core API code - reduce size of JS assets sent to mobile users as Resolved.Sep 25 2015, 7:54 AM
Jdlrobson closed subtask T97289: Trim down CSS loaded in the head for anonymous users on mobile as Resolved.Sep 26 2015, 12:42 AM
Florian closed subtask T100377: RSS feeds should not be in head for mobile as Resolved.Dec 17 2015, 10:06 PM
bd808 moved this task from Q1 Goals to To classify on the Reading-Web-Planning board.Dec 28 2015, 4:25 PM
Jdlrobson removed subtasks: T86993: Static image files from en.m.wikipedia.org are served with cache-suppressing headers, T19577: Thumbnail urls should be versioned and sent with Expires headers, T100546: Reduce amount of metadata embedded in thumbnails across site.Jan 11 2016, 9:39 PM
Jdlrobson closed this task as Resolved.Jan 11 2016, 9:42 PM
Jdlrobson claimed this task.
Jdlrobson removed a subtask: T100262: [SPIKE] Which API requests should be cached and for how long?.
Jdlrobson removed subtasks: T100372: CentralNotice mobile modules should not be loaded in the head, T100255: [EPIC] Load ResourceLoader startup module from the bottom of the HTML.

Having this bug around is confusing since most of the work is focused in T113066 now.
Have moved the blocking tasks over there to keep things less confusing.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL