Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
If I understand correctly — why do we do this later and not right on save?
Basically we need to inspect the files for their meta data. We use FastImage because it's fast, but it is still a remote transaction and we'd rather not add extra latency in case the process hangs for any reason.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Ah that makes sense so saving doesn’t get held up!
But then you cache the value afterwards so you only have to look up the meta data once (well twice from what I gather from the PR! 🤣) and then update the HTML with the width and height values?
Yeah, we store HTML in the DB, so only ever re-compute on changes. (This approach could change slightly over time to give us more flexibility, but it works well for efficiency).
And yeah — FastImage seems to allow you to look up either size, type, or animated, but doesn't let you open up the image to look for everything at once. 🤷♂️
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Yup!
This has been something I've been personally tackling one way or another for a while and this helps pull a bunch of it together.
Fixing Cumulative Layout Shift
Ben Halpern ・ Jan 19 ・ 2 min read
Using FastImage to detect image dimensions in Ruby
Ben Halpern ・ Sep 28 ・ 2 min read
Yeah I saw the posts and enjoyed those articles. ❤️
I have to ask why you don’t cache the values when the item is saved? Or is that how you do it and I misunderstood lol!
Either way always great to see people paying attention to web vitals! 💪
If I understand correctly — why do we do this later and not right on save?
Basically we need to inspect the files for their meta data. We use
FastImage
because it's fast, but it is still a remote transaction and we'd rather not add extra latency in case the process hangs for any reason.Ah that makes sense so saving doesn’t get held up!
But then you cache the value afterwards so you only have to look up the meta data once (well twice from what I gather from the PR! 🤣) and then update the HTML with the width and height values?
Very smart!
Yeah, we store HTML in the DB, so only ever re-compute on changes. (This approach could change slightly over time to give us more flexibility, but it works well for efficiency).
And yeah —
FastImage
seems to allow you to look up either size, type, or animated, but doesn't let you open up the image to look for everything at once. 🤷♂️Thought I had replied, must have closed browser by mistake 🙄
Looks like you are right, Line 223 in fastimages
So it looks to be animated, type or size as you thought.
Pretty sure you could extend it and just call them both together but that is probably an over optimisation!
Great solution for CLS either way ! ❤
I’d consider this an over optimization for the matter of this first PR, but once it’s merged, a dedicated task to optimize this makes sense.