sttm-web
sttm-web copied to clipboard
KhalisFoundation
Doodle image is quite heavy and causes a lot of layout shift on page load
Describe the bug Doodle image loads quite slowly and causes a layout shift. Either ensure it's same height as the logo so as to avoid layout shift, or load it as a background image (like bing) for large doodles.
To Reproduce Steps to reproduce the behavior:
- Open sikhitothemax.org
- Observe
Expected behavior Page should load without layout shifts causing incorrect taps.
Screenshots
I think the load time really depends on connection speed, we will optimize the images to load faster in future.
That isn't the fix. You need to provide height and width to img tag so that even if image hasn't loaded, it takes the necessary space instead of causing a layout shift.
Similarly, the decision to show logo or doodle should be eagerly made before page load so that user doesn't see a splash of logo before seeing the image.
@ManjotS can you just confirm we are able to specify height and width in api? In which case we just need to add it at presentation layer.
Yes, by design API is providing height, width, custom CSS. I even specified at implementation that web should use all of the available.
On Wed, Sep 2, 2020 at 11:11 PM Aman Singh [email protected] wrote:
@ManjotS https://github.com/ManjotS can you just confirm we are able to specify height and width in api? In which case we just need to add it at presentation layer.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KhalisFoundation/sttm-web/issues/1233#issuecomment-686277204, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAE5OFNXW7PGGXZIJVB66GDSD4XQ7ANCNFSM4QQLIAPQ .
