Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

My stack is HTML+CSS

blog.steren.fr

Post reply on HN
Print view View original

21–30 of 194 posts

Re: My stack is HTML+CSS

#21

Post by Rauchg »

This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla `` will ship the same image to every device, regardless of viewport size. Vanilla `` doesn't enforce setting `width` and `height`, which makes your layouts shift. Slow-loading images and layout shifts are the very things that will downgrade the "100" score he's currently proud of.

Frontend performance is basically an iceberg[1]. We tend to look at the top and that's where the fashionable "silver bullet" currently is (whether Rust+wasm or HTML+CSS or a JS framework). Then we find deeper in the iceberg that even a `box-shadow` property[2] can ruin our day, and let alone images, YouTube and Twitter embeds, and all the things that make the web more interesting and powerful than a black page with white text.

Oh and it gets even more fun! A Lighthouse score in itself is an over-simplification. There's more to a great experience than the initial impression the site makes, like what happens to FPS when you scroll or click around[2]

[1] https://rauchg.com/2020/next-for-vercel#realistic

[2] https://ishadeed.com/article/new-facebook-css#using-an-image...

Re: My stack is HTML+CSS

#22

Post by Tomte »

My Wordpress blog has a system font stack (that's vanilla Wordpress with the current theme Twenty Twenty One), and a Lighthouse score of 100 Performance, 100 Accessibility, 100 Best Practices, and 98 SEO.

The only plugin that's relevant for that is WP Super Cache.

I don't know what the author did with his Wordpress, but even the awful Twenty Twenty theme with the broken fonts wouldn't give you a 19 score in Performance.

Re: My stack is HTML+CSS

#24

Post by Tomte »

dceddia wrote: post #16

While I really like the idea of serving raw HTML and CSS, I think that on the authoring side, a static site generator that ingests Markdown and generates HTML is a more practical way to go. I think writing raw HTML can work fine for small pages, and arguably it can be better than Markdown for pages with a lot of design elements, like landing pages. But for the typical blog post, or especially if the blog post has cod…

There are lots of different MD flavours, though.

And even with Pandoc extensions you cannot really have an image inside with and alt text and title text.

Re: My stack is HTML+CSS

#25

Post by greggturkington »

Writing HTML and CSS by hand?! Those are just the output. OOTB Wordpress didn't have a perfect Lighthouse score, so it's worthless?

> I didn’t need 99% of its features anyway

Oh, then it was already a terrible fit. So why are you advising people on how to replace Wordpress?

Re: My stack is HTML+CSS

#27

Post by dceddia »

Rauchg wrote: post #21

This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla ` ` will ship the same image to every device, regardless of viewport size. Vanilla ` ` doesn't enforce setting `width` and `height`, which makes your layouts shift. Slow-loading images and layout shifts are the very things that will downgrade the "100" score he's currently prou…

Oh boy, YouTube embeds! I went through checking the Lighthouse score on a few of my pages a while back, and the ones that had videos were performing pretty badly.

It turned out that embedded YouTube videos were pulling down something like 1mb of JS, just to show the thumbnail, before the user even clicked Play.

I ended up making a static thumbnail with a hover-over "play" icon that would replace itself with the real embed when it was clicked. Got the Lighthouse score up and saved all those unnecessary downloads. But it was pretty amazing to me that while one arm of Google is pushing for web performance, another is building this YouTube player that auto-downloads a megabyte of JS just to show a thumbnail.

Re: My stack is HTML+CSS

#28

Post by leerob »

dceddia wrote: post #27
Rauchg wrote: post #21

This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla ` ` will ship the same image to every device, regardless of viewport size. Vanilla ` ` doesn't enforce setting `width` and `height`, which makes your layouts shift. Slow-loading images and layout shifts are the very things that will downgrade the "100" score he's currently prou…

Oh boy, YouTube embeds! I went through checking the Lighthouse score on a few of my pages a while back, and the ones that had videos were performing pretty badly. It turned out that embedded YouTube videos were pulling down something like 1mb of JS, just to show the thumbnail , before the user even clicked Play. I ended up making a static thumbnail with a hover-over "play" icon that would replace itself with the real…

Twitter embeds are equally bad. Ended up remaking them to output static HTML + CSS to improve perf (https://leerob.io/tweets).

Re: My stack is HTML+CSS

#29

Post by esperent »

Tomte wrote: post #24
dceddia wrote: post #16

While I really like the idea of serving raw HTML and CSS, I think that on the authoring side, a static site generator that ingests Markdown and generates HTML is a more practical way to go. I think writing raw HTML can work fine for small pages, and arguably it can be better than Markdown for pages with a lot of design elements, like landing pages. But for the typical blog post, or especially if the blog post has cod…

There are lots of different MD flavours, though. And even with Pandoc extensions you cannot really have an image inside with and alt text and title text.

Easy enough to do that with a static site generator like Hugo/Jekyll though.
Post reply on HN