Page MenuHomePhabricator
Create Task
Maniphest T407593

Early script tag in the body from MobileFrontend is blocking HTML parsing
Open, LowPublicBUG REPORT
Actions

Assigned To
None
Authored By
Func
Fri, Oct 17, 2:12 AM
Tags
Referenced Files
F66756376: Screenshot 2025-10-17 143629.png
Fri, Oct 17, 7:02 AM
F66756374: image.png
Fri, Oct 17, 7:02 AM
F66756368: Screenshot 2025-10-17 145542.png
Fri, Oct 17, 7:02 AM
F66755857: Screenshot 2025-10-17 101305.png
Fri, Oct 17, 2:13 AM
F66755858: Screenshot 2025-10-17 101242.png
Fri, Oct 17, 2:13 AM
F66755842: Screenshot 2025-10-17 095356.png
Fri, Oct 17, 2:12 AM
F66755841: Screenshot 2025-10-17 095133.png
Fri, Oct 17, 2:12 AM
Subscribers
Aklapper
Func
Jdlrobson-WMF

Description

Steps to replicate the issue (include links if applicable):

  • Load enwiki:Earth with device emulation set to a mobile device
  • From the Performance tab, apply 4x CPU slowdown and Slow 4G network throttling (for example)
  • Record and reload, screenshot the graph for comparison
  • Load the same page from patchdemo in another tab with the same settings
  • Record and reload, screenshot the graph for comparison

What happens?:

HTML parsing is delayed, waiting for the stylesheets to be loaded (which blocks the inline script).

Screenshot 2025-10-17 101242.png (329×927 px, 64 KB)
Screenshot 2025-10-17 145542.png (1×1 px, 314 KB)

What should have happened instead?:

HTML parsing goes along while the HTML content is downloading, and sections are expandable as soon as First Contentful Paint.

image.png (320×906 px, 72 KB)
Screenshot 2025-10-17 143629.png (1×2 px, 326 KB)

IMPORTANT: It should also be possible to load sections before the code has finished loading. To test this scroll down to the first section heading and make sure it can be expanded via click as soon as the page renders.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
MobileFrontendHooks: Use async script with data URL for mfTempOpenSectionmediawiki/extensions/MobileFrontendmaster+6 -4
Customize query in gerrit

Related Objects

Event Timeline

Func created this task.Fri, Oct 17, 2:12 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFri, Oct 17, 2:12 AM
Func updated the task description. (Show Details)Fri, Oct 17, 2:13 AM
gerritbot added a comment.Fri, Oct 17, 2:47 AM

Change #1196784 had a related patch set uploaded (by Func; author: Func):

[mediawiki/extensions/MobileFrontend@master] MobileFrontendHooks: Add mfTempOpenSection to the bottom instead

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

gerritbot added a project: Patch-For-Review.Fri, Oct 17, 2:47 AM
Func updated the task description. (Show Details)Fri, Oct 17, 7:02 AM
Func updated the task description. (Show Details)Fri, Oct 17, 7:10 AM
Jdlrobson-WMF changed the task status from Open to Stalled.Fri, Oct 17, 5:01 PM
Jdlrobson-WMF subscribed.

This is intentionally blocking by design. Without it sections will not be expandable on mobile until all the HTML has loaded which is a problem on slower connections and larger pages. You can replicate this by loading the page France on a 2G or 3G connection and trying to expand a section as soon as the page loads.

Stalling for now as the patch doesn't match the problem statement in this ticket (please reword or create a new ticket given this new nformation)

PatchDemoBot added a comment.Fri, Oct 17, 5:01 PM

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://7c2177cd3e.catalyst.wmcloud.org/w/

Func changed the task status from Stalled to Open.Fri, Oct 17, 5:38 PM
In T407593#11285938, @Jdlrobson-WMF wrote:

This is intentionally blocking by design. Without it sections will not be expandable on mobile until all the HTML has loaded which is a problem on slower connections and larger pages. You can replicate this by loading the page France on a 2G or 3G connection and trying to expand a section as soon as the page loads.

Stalling for now as the patch doesn't match the problem statement in this ticket (please reword or create a new ticket given this new nformation)

I already updated the task description right after I uploaded that new patchset, and even used the patchdemo I created for the screenshots and other testing, which leads me to filing T407602: MobileFrontend: Sections expanded via mfTempOpenSection collapse when JS is loaded

Now it's working as intended, you can change the content to console.log or perfomance.mark and see the async script being executed even before the stylesheet is loaded, far before the very first contentful paint.

Jdlrobson-WMF updated the task description. (Show Details)Fri, Oct 17, 5:42 PM
Jdlrobson-WMF added a project: Reader Growth Team.
Jdlrobson-WMF moved this task from Untriaged to MobileFormatter on the MobileFrontend board.Tue, Oct 21, 3:42 PM
Jdlrobson-WMF edited projects, added MobileFrontend (MobileFormatter); removed MobileFrontend.
egardner triaged this task as Low priority.Wed, Oct 29, 4:47 PM
egardner moved this task from Incoming/Inbox to Backlog on the Reader Growth Team board.
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 · Credits