Page MenuHomePhabricator

Use native <img loading=lazy> for non-printable images
Closed, ResolvedPublic

Description

We can't do content images yet due to print support and other load-event complexities (see parent task). But for non-printable ones we can start doing this.

The footer icons (Powered by MW, WMF project) might be a good place to start experimenting with the native browser feature for lazy loading of images.

Because:

  • They are known to enjoy eager discovery by the browser's lookahead parser and thus get requested fairly early and thus compete for bandwidth with other low priority resources (such as async JS).
  • They are not critical for the user experience.
  • They are not critical for the above-the-fold rendering.
  • They are hidden in the "print" mode stylesheet, which side-steps one of the two "known issues" with lazyload today.
  • They are not part of the content, which means any JS code expecting images to have loaded at window.onload isn't affected (e.g. Mediaviewer), this side-steps the other known issue.

Event Timeline

Krinkle created this task.Nov 28 2019, 2:37 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 28 2019, 2:37 AM
Krinkle triaged this task as Low priority.Dec 2 2019, 8:56 PM
Krinkle moved this task from Inbox to Backlog: Small & Maintenance on the Performance-Team board.

Change 592733 merged by jenkins-bot:
[mediawiki/core@master] Add lazy loading on Mediawiki powered-by icon

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

Krinkle renamed this task from Use <img lazyload> for footer icons to Use native <img loading=lazy> for footer icons.Apr 28 2020, 6:49 PM
Krinkle renamed this task from Use native <img loading=lazy> for footer icons to Use native <img loading=lazy> for non-printable images.
Krinkle updated the task description. (Show Details)
Krinkle added a project: MediaWiki-Interface.
Krinkle added subscribers: Gilles, Jdforrester-WMF.

Change 593038 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[operations/mediawiki-config@master] Add lazy-loading to Wikimedia Foundation powered-by icon

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

This can be a good hackathon/pair programming activity for the EngProd offsite, for someone who needs to be introduced to MediaWiki code contribution by a more experienced person.

Gilles claimed this task.May 13 2020, 8:17 AM

(should be done for all skins not just Vector)

I think the spirit of this task is to be more exhaustive (all non-printable icons, all production skins).

Change 593038 merged by jenkins-bot:
[operations/mediawiki-config@master] Add lazy-loading to Wikimedia Foundation powered-by icon

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

Mentioned in SAL (#wikimedia-operations) [2020-05-26T15:08:19Z] <jforrester@deploy1001> Synchronized wmf-config/CommonSettings.php: Add lazy-loading to Wikimedia Foundation powered-by icon T239377 (duration: 00m 57s)

This is working for the Wikimedia icon (from CommonSettings.php) but not the MediaWiki one (from Skin.php):


<ul id="footer-icons" class="noprint">
	<li id="footer-copyrightico">
		<a href="https://wikimediafoundation.org/"><img src="/static/images/wikimedia-button.png" srcset="/static/images/wikimedia-button-1.5x.png 1.5x, /static/images/wikimedia-button-2x.png 2x" alt="Wikimedia Foundation" loading="lazy" width="88" height="31"></a>
	</li>
	<li id="footer-poweredbyico"><a href="https://www.mediawiki.org/">
		<img src="/static/images/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/static/images/poweredby_mediawiki_132x47.png 1.5x, /static/images/poweredby_mediawiki_176x62.png 2x" width="88" height="31"></a>
	</li>
</ul>

Change 603980 had a related patch set uploaded (by Gilles; owner: Gilles):
[mediawiki/core@master] Lazy load footer icons

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

Change 603980 merged by jenkins-bot:
[mediawiki/core@master] Lazy load footer icons

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

Gilles closed this task as Resolved.Jun 10 2020, 7:13 AM

Works fine on Beta. I've looked at other icons on articles and the only ones that are part of the UI and appear frequently are completely at the top of the page, so it's pointless to mark them for lazy loading.

It would probably be beneficial for some template icons on some wikis to have that attribute as well, but I think that's out of scope for this task.