4 ms·

There is one metric where hand-coded-in-vim pages tend to do poorly, and that's cumulative layout shift. If you have images on your page (a reasonable assumptio

There is one metric where hand-coded-in-vim pages tend to do poorly, and that's cumulative layout shift. If you have images on your page (a reasonable assumption) and just stick <img> tags in there, you can get dinged on cumulative layout shift because the layout will shift as images get loaded. I use a somewhat hand-coded-in-vim approach, but there's some post-processing that adds width/height attributes to <img> tags which mitigates this particular problem. Edit: Not sure why everyone is telling me to add "height" and "width" attributes, because that's what I wrote in the comment, above. Just to explain how this works--the width and height attributes describe the "intrinsic size" of the image.

thehappypm 5y ago
I would imagine it's best practice to define height and width attributes for <img> tags, no?
- klodolph 5y ago
  Yes, it's just tedious to do by hand, which is why, in practice, people who write HTML by hand often don't do it.
  - thehappypm 5y ago
    I think it's one of the more elegant styling things in HTML, you don't need to use the more verbose style=, it's just plain Jane height= and width=. I've never left it out, and I've written a few HTML pages by hand.
Tomte 5y ago
Include height and width attributes to your <img> tag and the layout shift problem is solved. Those are used to determine the aspect ratio, so even when resized via CSS the browser knows how much space to reserve in the layout.
- klodolph 5y ago
  They are used to determine the intrinsic size. The aspect ratio is also affected by the CSS rules, and doesn't necessarily equal the aspect ratio of the intrinsic size.
  - jacobr 5y ago
    The width and height attributes are used by the browser to determine the aspect ratio https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ https://www.smashingmagazine.com/2020/03/setting-height-widt...
    - klodolph 5y ago
      That's a simplification--they determine the intrinsic size. The aspect ratio is determined by a combination of CSS rules and the intrinsic size.
eli 5y ago
Tip: Add "height" and "width" attributes even if the rendered size will be different because of CSS. The CSS sizing will still take precedence but the height/width attributes let the browser know the aspect ratio without having to download the image so it can layout the page faster.
swiley 5y ago
Having two CSS rules in a single selector is something you absolutely can do in vim. You can even chuck it in a one line style tag. IMO cumulative layout shift should be ranked down, it's extremely frustrating.
DamonHD 5y ago
My hand-coded-in-vim pages have always had height and width attributes, going back to the 90s. It's just become fashionable again.
pradn 5y ago
I had no idea about this, thanks! It's surprisingly hard to set up good images in a hand-coded-in-vim website. You're supposed to include multiple image sizes and set up the code for loading each in HTML. So what could have been simply adding an <img> tag now turns into a chore involving ImageMagick.
jwommack 5y ago
Don’t even need the exact number just the aspect ratio.

thehappypm 5y ago

I would imagine it's best practice to define height and width attributes for <img> tags, no?

klodolph 5y ago
Yes, it's just tedious to do by hand, which is why, in practice, people who write HTML by hand often don't do it.
- thehappypm 5y ago
  I think it's one of the more elegant styling things in HTML, you don't need to use the more verbose style=, it's just plain Jane height= and width=. I've never left it out, and I've written a few HTML pages by hand.

Tomte 5y ago

Include height and width attributes to your <img> tag and the layout shift problem is solved. Those are used to determine the aspect ratio, so even when resized via CSS the browser knows how much space to reserve in the layout.

klodolph 5y ago
They are used to determine the intrinsic size. The aspect ratio is also affected by the CSS rules, and doesn't necessarily equal the aspect ratio of the intrinsic size.
- jacobr 5y ago
  The width and height attributes are used by the browser to determine the aspect ratio https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ https://www.smashingmagazine.com/2020/03/setting-height-widt...
  - klodolph 5y ago
    That's a simplification--they determine the intrinsic size. The aspect ratio is determined by a combination of CSS rules and the intrinsic size.

eli 5y ago

Tip: Add "height" and "width" attributes even if the rendered size will be different because of CSS. The CSS sizing will still take precedence but the height/width attributes let the browser know the aspect ratio without having to download the image so it can layout the page faster.

swiley 5y ago

Having two CSS rules in a single selector is something you absolutely can do in vim. You can even chuck it in a one line style tag. IMO cumulative layout shift should be ranked down, it's extremely frustrating.

DamonHD 5y ago

My hand-coded-in-vim pages have always had height and width attributes, going back to the 90s. It's just become fashionable again.

pradn 5y ago

I had no idea about this, thanks! It's surprisingly hard to set up good images in a hand-coded-in-vim website. You're supposed to include multiple image sizes and set up the code for loading each in HTML. So what could have been simply adding an <img> tag now turns into a chore involving ImageMagick.

jwommack 5y ago

Don’t even need the exact number just the aspect ratio.