Slow page loading for /studio.youtube.com

NEW
Unassigned

Status

defect
P3
normal
8 months ago
Last month

People

(Reporter: cfogel, Unassigned)

Tracking

Firefox Tracking Flags

(firefox-esr60 affected, firefox63 wontfix, firefox64 wontfix, firefox65 affected, firefox67 affected)

Details

()

Attachments

(1 attachment)

[Affected versions]:
- Firefox: 60.3.0esr,  63.0.1, 64.0b7, 65.0a1 (2018-11-05)

[Affected platforms]:
- Win10x64, macOS 10.12, Ubuntu 18.04;

[Steps to reproduce]:
1. Launch Firefox;
2. Access https://youtube.com/
3. Log in with a valid account;
4. Access the following link: https://studio.youtube.com/

[Expected result]:
- the Youtube (beta) studio is loaded;

[Actual result]:
- the page load time is double compared to other browsers;
- the Loading Youtube Studio message is displayed

[Regression range]:
- could only get the following results with mozregression:
- last good: 2017-09-20; changeset: ca7d18dbacbf103d74a3213d8d08a7c3e4def9a2
- first bad: 2017-09-19; changeset: 319a34bea9e4f3459886b5b9e835bd338320f1fd

[Additional notes]:
- versions pre-bad date load in about maximum 10 seconds, affected versions load in 15-20 seconds;
- attached recording with the issue, both pages where loaded before the recording; same results with fresh profiles;
- might need to be reassigned to a more suitable section;
Could you create a performance profile? http://perf-html.io/

So far nothing hints about DOM Events.
Component: DOM: Events → General
Flags: needinfo?(cristian.fogel)
There is a noticeable delay of ~4 seconds on Firefox that doesn't exist on Chrome, this is basically from the "Loading Youtube Studio..." message until the page actually loads.

Inspecting the final HTML documents on each browser, there are quite a few differences, but most seem to be CSS related. There is however a block of js which is only served to Firefox:

><script nonce="">var createApp = function(e) {if (e) {window.removeEventListener('HTMLImportsLoaded', createApp);}var js = document.createElement('script');js.crossorigin = 'anonymous';js.src = 'https://www.youtube.com/s/creator/f3485c4f/creator_studio_polymer.js';js.setAttribute('name', 'creator_studio_polymer/creator_studio_polymer');document.body.appendChild(js);};if (window.HTMLImports && window.HTMLImports.ready) {createApp();} else {window.addEventListener('HTMLImportsLoaded', createApp);}if (window.Polymer && Polymer.RenderStatus) {Polymer.RenderStatus.whenReady(function() {if (window.ytcsi) {window.ytcsi.tick("apr", null, '');};        });}if (window.ytcsi) {window.ytcsi.tick("ac", null, '');};</script>

Looking into the polymer script there is also mention of a "firefoxSilentErrorTimeout", tho not sure what it does atm.
Hmm, something to do with HTML Imports polyfill? HTML Imports is a Google only API, obsolete and will not be implemented by anyone else.
But I would have expected that to be loaded also in Safari and Edge, but based on the comment it isn't.
(In reply to Olli Pettay [:smaug] (high review load) from comment #1)
> Could you create a performance profile? http://perf-html.io/
> 
> So far nothing hints about DOM Events.

https://perfht.ml/2JR2FbO
Flags: needinfo?(cristian.fogel)
So, looks like the webcomponents polyfill is taking lots of time. We can't really change that.
Youtube will move to use v1 APIs which also Gecko and Webkit implement.
So, this is either tech evangelism bug or JS bug (since polymer is taking lots of time to execute).
According to the comment above, I am setting this bug's component as (Tech Evangelism) Desktop.
If this component turns out to be incorrect, please try to find a better component.
Thank you.
Component: General → Desktop
Product: Core → Tech Evangelism
Product: Tech Evangelism → Web Compatibility

AFAIK, YouTube is rolling out a new Polymer version in the near future. Let's check back once that's done.

Priority: -- → P3

Updating for the current RC build. Nothing new from YouTube yet.

You need to log in before you can comment on or make changes to this bug.