That's fantastic - as near to instantaneous as you need, and it's actually slightly odd having a page load as quickly as yours does; we've become programmed to wait, despite all the progress that's happened in hardware and connectivity. The only slightly slow thing was the screenshots on the portfolio page as the images aren't the native resolution they're being displayed at.

Does the minification of the css make a big difference? I just took a look at it using an unminifier, and it was a nice change to see CSS that I feel I actually understand straight away, rather than thousands of lines of impenetrable sub-sub-subclasses.

I just settled on https://oxal.org/projects/sakura/ and added a handful of lines for my grid view widget, that's all.

Maybe it's me, but I originally learned that the concern of CSS is to make a document look pretty. Not magic CSS classes or inline styles (or both, this bugs me on tailwind), so the recent "shift" towards "classless css" is very appealing.

Sidenote: Yes, the screenshots could be way smaller, but originally I had them full-width instead of the current thumbnail, and still thinking about how to present this as lean as possible. Thanks for the feedback, though!

I use the picture tag with a bunch of media queries to deliver optimized images for each resolution in websites that I build, resizing a 1080p image to only 200px width does wonders to mobile performance while keeping it perfect for full HD monitors.

Since Zola has an image resizing feature and shortcode-snippets, this could be a nice way to automate things away (i‘d hate to slice pictures for X sizes by hand).

Will have a look, thanks!

Your pages are excellent by comparison to comparable offerings of similar information density mostly seen.

But there's always room for experimentation.

How about preserving a copy of your portfolio page now (and the PNG files it's now using) and giving it an address like /portfolioOLD?

Then using an image editor, ruthlessly resize/resample-at-lower-bit-depth one of your PNG's so their actual rectangular pixel dimensions are about the same size that they appear on a full-size monitor now.

Then ruthlessly compress it until it looks just a little less high-quality than it does now. Just a little bit, you want to be able to tell the difference but you don't want other people to notice. These are just thumbnails anyway.

Use these editor settings on the rest of the PNGs, renaming them accordingly as you go.

Deploy the new portfolio page linking to the resized renamed thumbnails instead.

Just guessing, but I expect it can bring the load time down to about 10 percent of the old portfolio.

And it would be really easy for anyone to A/B test and get representative numbers.

This is how we used to party like it's 1999.

Thank you for using sakura.css, really appreciate it and glad you enjoyed using it! ^_^

On the other hand, I really enjoy working with tailwind. Having html and css "together" works really well with my mental model, and I can iterate very fast with it.

Though setting up tailwind is a bit of a pain, and I still use sakura + good old css everywhere I possibly can.

Very impressive. One cool thing you can further do to improve perceived speed potentially at the expense of some bandwidth is to begin to preload pages when a link is hovered. There are a couple of libraries that will do this for you.

It can shave 100 - 200 ms off the perceived load time, and since your site is already near or below that threshold it might end up feeling like you showed the page before anyone even asked for it.

I have done the same with Hugo on my blog[0], but actually had to fork an existing theme to remove what I would call bloat.[1]

The interesting thing for me is, while I personally certainly feel the "need for speed" and appreciate pages like yours (nothing blocked, only ~300kb), most people do not. Long loading times, invasive trackers, jumping pages (lazily loading scripts and images), loading fonts from spyware-CDNs - are only things "nerds" like us care about.

The nicest comment on my design I heard was "Well, looks like a developer came up with that" :)

[0] https://chollinger.com/blog/ [1] https://github.com/chollinger93/ink-free

That's perfect! Most pages should load instantaneous, at least those serving text for the most part.

I did the same for my website [1], and I hope this becomes more of a standard for "boring old" personal pages and blogs.

[1] https://marvinblum.de/

Even for most businesses it should be the norm. When you think about it, most businesses have almost no actual dynamic content on their website - other than any login/interactivity features, they might change at most a few times a day...

The businesses with no dynamic content also tend to be the ones who rent a wordpress dev who just finds a bunch of premade plugins and drop 50 script tags in the header for analytics and other random crap.

Interesting. Your site triggered our corporate filter as "Adult/Mature Content". I wonder what tripped it up.

Oh, wow. I have no idea, there is not much content yet, and zero external dependencies... maybe its the "anon" in the name? I mean, I even bought a Dotcom domain to look ok-ish despite my nickname :/

Try looking up 'blum' on urbandictionary :)

Wow, that's unfortunate. Well, I can't do anything about that :)

Major manufacturer of cabinet hardware - seems fine.

And means 'flower' in German.

That's very cool. Nice little project to speed the site. One data point. A cold loading takes about 2.2 seconds; subsequent loads take about 500ms, from a cafe in the Bay Area using a shared wifi.

The cold loading stats:

     Load Time 2.20 s
     Domain Lookup 2 ms
     Connect 1.13 s
     Wait for Response 68 ms
     DOM Processing 743 ms
     Parse 493 ms
     DOMContentLoaded Event 11 ms
     Wait for Sub Resources 239 ms
     Load Event 1 ms

Edit: BTW, the speed is very good. I've tried similar simple websites and got similar result. Facebook login page takes 13.5 seconds.

I do not really understand why it is _that_ slow...

DOM Processing 743 ms Parse 493 ms

... I mean, it is just some quite light HTML and minimal CSS, right? what could possibly make your browser so slow at handling this?

My guess? It's doing streaming parsing/processing, so it's network bound.

It started downloading html, once it got the first byte it started processing it, but then it had to wait for the rest of the bytes (not to mention the css file to download).

The parent comment is clearly using some really slow wifi, so I think it's likely that's what happened.

FWIW, I re-run the test at home. Cold load is about 400ms; repeated loads are about 240ms.

Cold load stats:

    Load Time 409 ms
    Domain Lookup 37 ms
    Connect 135 ms
    Wait for Response 40 ms
    DOM Processing 165 ms
    Parse 123 ms
    DOMContentLoaded Event 8 ms
    Wait for Sub Resources 34 ms

Might be pretty good depending on the specs

The page is 1.03KB of HTML and ~1.5KB of CSS. The HTML has about a dozen lines of Javascript in the footer that, at a glance, seemed only to execute onclick to do something with the menu. I'm pretty sure a 166Mhz (with an M) Pentium could process 1.03KB of HTML and render the page in under 700ish ms, so I agree that that seems oddly slow for any modern device, unless they're browsing on a mid-range Arduino.

The HN effect?

Since this runs solely on Cloudflare workers sites itself (no server behind it), it would be quite funny when HN hugging the site would have any measurable effect :D

I have a similar setup for my personal site, although it's still a work in progress. I've really been interested in JAMstack methods lately. I build the the static site with Eleventy, and have a script to pull in blog posts from my Ghost site. To bad I haven't really written any blog posts though, maybe one day :) Anhhow, I really like Cloudflare workers, would recommend!

There is no support for comments in the blog and no pictures at all. No images, no thumbnails, no banner, no logo, no favicon.

Also, no share button. No top/recommended articles. No view counter.

Once you start adding medias it will be quite a bit slower. Once you start implementing basic features expected by users (comments and related articles for a blog) it's gonna be yet again slower.

I remember when my first article went viral out of the blue, I think have to thank the (useless) share buttons for that. Then it did 1TB of network traffic over the next days, largely due to a pair of GIF. That's how bad pictures can be.

> no banner, no logo, no favicon...Also, no share button. No top/recommended articles. No view counter.

All of which I can live without.

Still the best way of sharing content on the web is via a url, which is handily provided, so most of these aren't even needed. As for recommended and view counts, these don't inherently add a lot of value to users. If anything, it's a nice change to have a page that doesn't try and infer my desires for once.

Should have said stats instead of counter. As the webmaster, you want to know how many visitors there are on which pages?

A simple "last 5 articles" in the corner do add value. Users frequently read more than one article.

You can get that from your logs though?

Usually not, because the hosting doesn't provide access to request logs (consider github pages, heroku, wordpress, LAMP providers).

I agree that the comparison is poor - there are business where those media components are required. But an issue with the modern web is that everything has all those components - nobody[1] cried over the lack of a "Share to Facebook" button on CNN. So, while saying stripping out all those components would solve the problem is inaccurate since those components are part of the business requirement - chances are a lot of those components aren't. Maybe you don't still need that "Share to Digg" button or maybe, as a news site, you don't need a comments section - I think it's a mix of both. Websites are being written unreasonably burdened with unnecessary features and those features are usually implemented with out-of-the-box poorly performing JS.

(As an aside - nobody nobody has ever derived value out of a page counter except the owner of the site - who could just look it up in the logs. This isn't really an argument against anything you mentioned but I found it amusing it was one of the things you brought up)

1. Mostly nobody - sure there were some folks, but then again I'd wager a significant portion of those folks were just loud voices echoing from the marketing department.

>No view counter.

Myspace era wants their featureset back.

More seriously I think for personal sites a JAMstack site is perfectly sufficient

I disabled comments on my websites and it made me a happier person.

The other things you name are present on my other website (which I linked above). The site is still blazing fast.

https://nicolasbouliane.com/blog/no-comments-on-website

Follow up: I just added some social sharing buttons, but without impacting page performance. The snippet is here:

https://anonyfox.com/spells/frontend-social-buttons-without-...

Very basic but does the job I'd say. :)

My own blog is statically generated too. I don’t have most of these either, because as a user I barely care about any of them or even actively dislike them.

Seems mostly good to me after cloudflare caches it, but you have made one annoying mistake: you forgot to set the height of the image, so it results in content shift. Other than that, it's great! :)

Hey brother, I made an account just to reply to your comment, I enjoyed your website and grew my knowledge reading it.

Just wanted to let you know there's a typo @ https://anonyfox.com/tools/savings-calculator/

```Aside from raw luck this ist still the best```

Thanks, didn‘t see it even after you posted it. german autocomplete probably :(

If you would specify the width/height of the image, you could avoid the page reflow that makes the quicklinks jump down.

Alignment of list on https://anonyfox.com/grimoire/elixir/ seems a bit off.

Love the style though. Very crisp, very snappy.

Thanks for The feedback, will have a look!

"Do fellow HNers also feel the need for speed nowadays?"

I stopped using graphical browsers many years ago. I use a text-only browser and a variety of non-browser, open source software as user-agents. Some programs I had to write myself because AFAIK they did not exist.

The only speed variations I can detect with human senses are associated with the server's response, not the browser/user-agent or the contents of the page. Most websites use the same server software and more or less the same "default" configurations so noticeable speed variations are rare in my UX.

Yes, a lot of people are browsing in less-than-ideal conditions. Many apps fall on their face when you try to use them on a German train with spotty reception.

Very interested on how you used Zola. The moment I wanted to customize title bars and side bars and I was basically on my own. Back then I didn't have the desire (or expertise) to reverse-engineer it.

Have you found it easy to customize, or you went with the flow without getting too fancy?

Sometimes a little bit of inline html within the markdown comments will do for me... otherwise: had been a great experience so far.

AFAIK you can set custom variables in the frontmatter of the markdown files, your layout/template html can use them (or use an IF check, or ...).

That's fantastic, all _static_ site need to have this rendering speed, but unfortunately static content applicable to very narrow niche. Most sites have to provide dynamic content to certain range and this is where it becomes incredibly slow

Looks good and loads instantly.

Thank you sensei

zola ?

https://www.getzola.org/ Static site builder written in Rust

tks