Page MenuHomePhabricator

Use "preconnect" resource hint for thumbnail host
Closed, ResolvedPublic

Description

To make the images load faster, we should add a resource hint, making the browser preconnect to upload.wikimedia.org. Preconnect in this case means the browser will do DNS+TCP+TLS as soon as it cann for that domain and hopefully a little earlier than today.

To do that, we need to add:
<link rel="preconnect" href="//upload.wikimedia.org ">

Note: we should use the header variant instead of adding the link tag to the DOM, as Edge only supports the header version.

Here's an example of how it looks today.

Preconnect is supported by Chrome, Firefox and Opera on Desktop and Chrome & Android Browser on Android (http://caniuse.com/#feat=link-rel-preconnect).

Quick draft to show the syntax of preconnect: https://gerrit.wikimedia.org/r/#/c/348807/4/includes/OutputPage.php

Potential gotcha from @Krinkle at https://gerrit.wikimedia.org/r/#/c/348807/:

MediaWiki ParserOutput doesn't currently track the effective image url(s). Only the file names. Extracting the host from File::getPath() manually is tricky because file path to original file and thumbnail may differ. E.g. when using a foreign repository like Wikimedia Commons, some configurations host thumbnails in the local file backend (instead of "hot linking").

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Peter raised the priority of this task from to Needs Triage.Jan 13 2016, 10:32 PM
Peter updated the task description. (Show Details)
Peter added a project: Performance-Team.
Peter added a subscriber: Peter.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptJan 13 2016, 10:32 PM
Peter renamed this task from Decrease time to first image using resources hint with preconnect to Decrease time to first image using resource hints with preconnect.Jan 14 2016, 8:55 AM
Peter updated the task description. (Show Details)
Peter set Security to None.

Change 267719 had a related patch set uploaded (by Ori.livneh):
Speed trials: add preconnect

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

Change 267719 merged by Ori.livneh:
Speed trials: add preconnect

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

ori assigned this task to Peter.Feb 1 2016, 7:29 PM
Peter added a subscriber: Krinkle.Feb 3 2016, 8:25 AM

I've discussed this with @Krinkle and he pointed out that it would not have any practical impact since the first image is picked up so early after the HTML is parsed, so having the preconnect in the HTML will almost be the same as the HTML tag. I agree I didn't think of that.

However, if we add it as HTTP header like:
Link: https://upload.wikimedia.org; rel=preconnect

That would have a better chance to make difference. But do we want to bloat the headers?

Peter triaged this task as Medium priority.Feb 10 2016, 7:55 AM
Peter closed this task as Resolved.Dec 7 2016, 5:26 PM
Peter reopened this task as Open.
Peter removed Peter as the assignee of this task.
Peter added a comment.Dec 7 2016, 7:11 PM

I did some simple testing and we could actually see the difference. Comparing two runs with the same ttfb (almost):

Waterfall with preconnect:

Waterfall without preconnect:

We can clearly see that with preconnect the dns lookup happens earlier and the image (in the screenshot) arrives earlier.

Gilles raised the priority of this task from Medium to High.Dec 7 2016, 7:20 PM

Change 348807 had a related patch set uploaded (by Phedenskog):
[mediawiki/core@master] Preconnect to the the image domain

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

I tried it locally to verify that it works. This is the version without preconnect, using Chrome:

Then with preconnect that connect/DNS/SSL is gone:

But I cannot see when the lookup happens because it's not in the HAR file.

Krinkle renamed this task from Decrease time to first image using resource hints with preconnect to Use "preconnect" resource hint for thumbnail host.Jun 28 2017, 3:02 AM
Krinkle removed Peter as the assignee of this task.
Krinkle updated the task description. (Show Details)
Krinkle updated the task description. (Show Details)Jun 28 2017, 3:08 AM

We've done the research to show that the impact would be positive, and provided a proof of concept to show the general requirements and syntax.

@matthiasmullie @MarkTraceur Would one of you perhaps be willing to take ownership of this? I believe it would make a notable improvement for user experience and rendering start-up time for galleries and slideshows. As well as the first image in e.g. the infobox.

I'm removing our assignment of the implementation for the time being given. Peter and I gave it a quick shot incase the thumb url is easily available, but looks like it requires someone with better understanding of this code and the context to make the right trade-off in any related decision.

MarkTraceur lowered the priority of this task from High to Medium.Aug 7 2017, 2:30 PM
MarkTraceur moved this task from Untriaged to Triaged on the Multimedia board.

@Krinkle - we could take a look at this at some point in the future, but I don't think it will happen soon. We have big projects in the making, and a hiring backlog that's made us fairly slow. Moving on our workboard and lowering the priority accordingly.

Change 348807 abandoned by Krinkle:
Preconnect to the the image domain

Reason:
Closing for now. Can be re-opened or forked once resourced.

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

aaron moved this task from Radar to Inbox on the Performance-Team board.Jan 28 2020, 10:19 PM
aaron edited projects, added Performance-Team; removed Performance-Team (Radar).
Gilles added a subscriber: Gilles.Jan 28 2020, 10:19 PM

I think we should try the non-smart version for a bit (serving the link no matter what, even for articles without images) and look at the effect in the wild.

dpifke claimed this task.Feb 7 2020, 5:45 AM

Change 570788 had a related patch set uploaded (by Dave Pifke; owner: Dave Pifke):
[mediawiki/core@master] Use preconnect resource hint

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

Change 570788 merged by jenkins-bot:
[mediawiki/core@master] OutputPage: Add experimental preconnect resource hint for thumbnails

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

Next steps:

  • Wait for Peter to be back and make sure we have all the instrumentations running that we want to observe this change.
  • Enable in Beta.
  • Enable in prod on a group0 wiki.
  • Enable in prod on group0+1.
  • Enable in prod in group2/all.
Krinkle reassigned this task from dpifke to Peter.Sep 22 2020, 4:44 PM
Krinkle added a subscriber: dpifke.

Awaiting go ahead and/or proposed changes from Peter first.

Change 634058 had a related patch set uploaded (by Dave Pifke; owner: Dave Pifke):
[operations/mediawiki-config@master] Enable $wgImagePreconnect

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

Peter added a comment.Oct 14 2020, 6:15 PM

For one off tests I think https://wikitech.wikimedia.org/wiki/Performance/WebPageTest/WPTBulkTester and Andy Davies spreadsheet is perfect. Adding it here for the next time we gonna do it.

Change 634058 merged by jenkins-bot:
[operations/mediawiki-config@master] Enable $wgImagePreconnect in group0

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

Mentioned in SAL (#wikimedia-operations) [2020-10-14T21:51:12Z] <dpifke@deploy1001> Synchronized wmf-config/InitialiseSettings.php: Enabling image preconnect in group0 (T123582) (duration: 01m 03s)

dpifke claimed this task.Oct 14 2020, 10:24 PM

This was tested in beta, and confirmed via WebPageTest to be an improvement for Chrome. Firefox appeared to be ignoring it (as well as other hints).

Deployed to group0; we'll look at other metrics over the next couple of days before rolling out further.

Change 635856 had a related patch set uploaded (by Dave Pifke; owner: Dave Pifke):
[operations/mediawiki-config@master] Expand $wgImagePreconnect to group1

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

Change 635856 merged by jenkins-bot:
[operations/mediawiki-config@master] Expand $wgImagePreconnect to group1

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

Mentioned in SAL (#wikimedia-operations) [2020-10-22T18:12:35Z] <dpifke@deploy1001> Synchronized wmf-config/InitialiseSettings.php: Expand to group1 (T123582) (duration: 00m 56s)

Change 639205 had a related patch set uploaded (by Dave Pifke; owner: Dave Pifke):
[operations/mediawiki-config@master] Enable wgImagePreconnect on remaining wikis

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

Change 639205 merged by jenkins-bot:
[operations/mediawiki-config@master] Enable wgImagePreconnect on remaining wikis

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

Mentioned in SAL (#wikimedia-operations) [2020-11-04T20:17:29Z] <urbanecm@deploy1001> Synchronized wmf-config/InitialiseSettings.php: 82579bf9d71bd3c9d97da0132ce8d92a8863da5b: Enable wgImagePreconnect on remaining wikis (T123582) (duration: 01m 06s)

dpifke closed this task as Resolved.Wed, Nov 4, 8:49 PM

This is now live globally.

Note that cached pages won't have the tag, so effects of this will continue to ramp up with time.