Page MenuHomePhabricator
Create Task
Maniphest T239377

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

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.

Details

SubjectRepoBranchLines +/-
Lazy load footer iconsmediawiki/coremaster+2 -0
Add lazy-loading to Wikimedia Foundation powered-by iconoperations/mediawiki-configmaster+1 -1
Customize query in gerrit

Related Objects
Search...

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, needs triage to Backlog: Maintenance, non-prioritized on the Performance-Team board.
Krinkle added a parent task: T148047: Desktop MediaWiki should be able to lazy load images.Dec 2 2019, 9:02 PM
• Niedzielski added a project: Web-Team-Backlog.Dec 4 2019, 3:59 PM
• Niedzielski subscribed.
• Niedzielski moved this task from Incoming to Tracking on the Web-Team-Backlog board.Dec 4 2019, 4:01 PM
• Niedzielski edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.
Jdlrobson moved this task from Needs triage to Feature requests on the Vector (legacy skin) board.Jan 15 2020, 5:57 PM
Krinkle added a subtask: T251181: Add lazy loading on Mediawiki powered-by icon.Apr 28 2020, 6:48 PM
In T251181#6089659, @gerritbot wrote:

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 merged a task: T251292: (native) lazy-load icons that aren't part of the printed view.
Krinkle added a project: MediaWiki-User-Interface.
Krinkle added subscribers: • Gilles, Jdforrester-WMF.
gerritbot added a comment.Apr 28 2020, 7:13 PM

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

gerritbot added a project: Patch-For-Review.Apr 28 2020, 7:13 PM
• Gilles added a comment.Apr 29 2020, 6:44 AM

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 added a project: EngProd-Virtual-Hackathon.May 11 2020, 11:52 AM
• Gilles claimed this task.May 13 2020, 8:17 AM
Jdlrobson subscribed.May 15 2020, 5:06 PM

@Gilles was this fixed by https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/592733/ or is this something different?

Jdlrobson edited projects, added Vector (legacy skin) (Tracking); removed Vector (legacy skin).May 15 2020, 5:07 PM

(should be done for all skins not just Vector)

• Gilles added a comment.May 18 2020, 8:33 AM

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

• Gilles removed a project: EngProd-Virtual-Hackathon.May 25 2020, 8:39 AM
gerritbot added a comment.May 26 2020, 3:06 PM

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

Stashbot added a comment.May 26 2020, 3:08 PM

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)

Jdforrester-WMF added a comment.May 26 2020, 3:10 PM

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>
Maintenance_bot removed a project: Patch-For-Review.May 26 2020, 3:11 PM
Krinkle reopened subtask T251181: Add lazy loading on Mediawiki powered-by icon as Open.May 26 2020, 3:39 PM
Krinkle mentioned this in T251181: Add lazy loading on Mediawiki powered-by icon.
gerritbot added a comment.Jun 9 2020, 11:45 AM

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

gerritbot added a project: Patch-For-Review.Jun 9 2020, 11:45 AM
gerritbot added a comment.Jun 9 2020, 9:36 PM

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

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.37; 2020-06-16).Jun 9 2020, 10:00 PM
Maintenance_bot removed a project: Patch-For-Review.Jun 9 2020, 10:11 PM
• Gilles closed this task as Resolved.Jun 10 2020, 7:13 AM
• Gilles closed subtask T251181: Add lazy loading on Mediawiki powered-by icon as Resolved.

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.

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