From f885cd0086b01454d55ea485149f0d5b0966b554 Mon Sep 17 00:00:00 2001 From: Andre Klapper Date: Mon, 21 Jul 2025 15:53:34 +0200 Subject: [PATCH] Lazy load embedded full size image files Summary: Reduce page load time and bandwidth consumption by setting `` 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 --- .../files/markup/PhabricatorEmbedFileRemarkupRule.php | 1 + 1 file changed, 1 insertion(+) diff --git a/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php b/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php index fd9f6718f4..6c785120af 100644 --- a/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php +++ b/src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php @@ -157,6 +157,7 @@ final class PhabricatorEmbedFileRemarkupRule 'src' => $file->getBestURI(), 'height' => $file->getImageHeight(), 'width' => $file->getImageWidth(), + 'loading' => 'lazy', ); $image_class = 'phabricator-remarkup-embed-image-full'; break; -- 2.51.2