Hacker News Reader

Comment by swiley | Hacker News Reader

The replacement they're whining about is "core web vitals" IE the metric you can view at[1]. This is what AMP should have been in the beginning and I was surprised they did something else, it made Google search unusable on mobile.

[1] https://support.google.com/webmasters/answer/9205520?hl=en

This means that your hand-coded-in-vim static pages will rank near the top.

View on HN

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.

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

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.

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.

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.

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.

The width and height attributes are used by the browser to determine the aspect ratio https://www.smashingmagazine.com/2020/03/setting-height-widt...

That's a simplification--they determine the intrinsic size.

The aspect ratio is determined by a combination of CSS rules and the intrinsic size.

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.

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.

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

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.

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

That’s an extreme claim that requires some backing evidence. Mobile search quality is the main metric google uses to judge its search products. The idea that google search is “unusable on mobile” is pretty silly, if you’re literally the only person who ever noticed.

You probably did what I did and mostly missed what was happening the past couple years by using duckduckgo the whole time. I formatted my phone at some point last year and the search engine reverted to google, it really was unusable but not something people who wouldn't know better would get too upset about.

(by last year I mean 2019.)

I also don't understand why more people aren't making a firestorm over how user-hostile Google search is at times. They don't even follow their own rules. The "People also searched for" popup causes layout shifts nearly every time you go back to the search page. It's infuriating.

I know this is only orthogonal to AMP, but it sounds like the kind of thing Core Web Vitals was meant to disincentivize.

> The "People also searched for" popup causes layout shifts nearly every time you go back to the search page

I've also noticed that particular bit of irony. In fact it's the longest-running CLS issue I've seen anywhere.

When Google first announced their metrics, people showed how most Google sites failed pretty hard.

Reply on news.ycombinator.com