@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Lazy load embedded full size image files

Summary:
Reduce page load time and bandwidth consumption by setting `<img loading="lazy">` on embedded image files rendered in full size (`{F1,size=full}` markup).

See https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading and https://caniuse.com/loading-lazy-attr

Closes T16187

Test Plan:
* Upload two or three large (as in MB) image files via http://phorge.localhost/file/
* Embed those files as fullsize in comments on a Maniphest task via `{F1,size=full}` markup so that they are far outside the initial viewport when loading the task
* Open the Developer Tools in your web browser, go to the Network tab, reload the page with browser cache disabled/bypassed, see that these image files get unconditionally loaded at initial page load
* Apply patch
* Open the Developer Tools in your web browser, go to the Network tab, reload the page with browser cache disabled/bypassed, see that these image files do not get initially loaded, scroll down to change the viewport, see that the browser loads these large image files when getting close to displaying them
* Add more comments, reload page and bypass cache, see that it also works as expected when "Changes from before your most recent comment are hidden. Show Older Changes" is active and you click "Show Older Changes"

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T16187

Differential Revision: https://we.phorge.it/D26207

+1
+1
src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php
··· 157 157 'src' => $file->getBestURI(), 158 158 'height' => $file->getImageHeight(), 159 159 'width' => $file->getImageWidth(), 160 + 'loading' => 'lazy', 160 161 ); 161 162 $image_class = 'phabricator-remarkup-embed-image-full'; 162 163 break;