7 ms·

I just rewrote my personal website ( https://anonyfox.com https://anonyfox.com ) to become statically generated (zola, runs via github Action) so the result is

I just rewrote my personal website ( https://anonyfox.com https://anonyfox.com ) to become statically generated (zola, runs via github Action) so the result is just plain and speedy HTML. I even used a minimal classless „css framework“ and ontop I am hosting everything via cloudflare workers sites, so visitors should get served right from CDN edge locations. No JS or tracking included. As snappy as I could imagine, and I hope that this will make a perceived difference for visitors. While average internet speed might increase, I still saw plenty of people browsing websites primarily on their phone, with bad cellular connections indoor or via a shared WiFi spot, and it was painful to watch. Hence, my rewrite (still ongoing). Do fellow HNers also feel the „need for speed“ nowadays?

marvinblum 6y ago
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/ https://marvinblum.de/
- jfrunyon 6y ago
  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...
  - Polylactic_acid 6y ago
    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.
- rootusrootus 6y ago
  Interesting. Your site triggered our corporate filter as "Adult/Mature Content". I wonder what tripped it up.
  - anonyfox 6y ago
    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 :/
  - kbr2000 6y ago
    Try looking up 'blum' on urbandictionary :)
    - penneyd 6y ago
      Major manufacturer of cabinet hardware - seems fine.
      - rapnie 6y ago
        And means 'flower' in German.
    - marvinblum 6y ago
      Wow, that's unfortunate. Well, I can't do anything about that :)
ww520 6y ago
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.
- anonyfox 6y ago
  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?
  - throwaway1777 6y ago
    Might be pretty good depending on the specs
    - spanhandler 6y ago
      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.
  - TheDong 6y ago
    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.
djaychela 6y ago
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.
- anonyfox 6y ago
  I just settled on https://oxal.org/projects/sakura/ 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!
  - thomasfortes 6y ago
    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.
    - anonyfox 6y ago
      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!
      - fuzzfactor 6y ago
NorwegianDude 6y ago
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! :)
pdimitar 6y ago
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?
- anonyfox 6y ago
  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 ...).
onemiketwelve 6y ago
Thank you sensei
ntumlin 6y ago
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.
rafaelturk 6y ago
zola ?
- anonyfox 6y ago
  https://www.getzola.org/ https://www.getzola.org/ Static site builder written in Rust
  - rafaelturk 6y ago
    tks
1vuio0pswjnm7 6y ago
"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.
randomguy3344 6y ago
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/ https://anonyfox.com/tools/savings-calculator/ ```Aside from raw luck this ist still the best```
- anonyfox 6y ago
  Thanks, didn‘t see it even after you posted it. german autocomplete probably :(
umyemri 6y ago
Alignment of list on https://anonyfox.com/grimoire/elixir/ https://anonyfox.com/grimoire/elixir/ seems a bit off. Love the style though. Very crisp, very snappy.
- anonyfox 6y ago
  Thanks for The feedback, will have a look!
40four 6y ago
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!
mbar84 6y ago
If you would specify the width/height of the image, you could avoid the page reflow that makes the quicklinks jump down.
otter-in-a-suit 6y ago
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/ https://chollinger.com/blog/ [1] https://github.com/chollinger93/ink-free https://github.com/chollinger93/ink-free
user5994461 6y ago
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.
- munk-a 6y ago
  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.
- Havoc 6y ago
  >No view counter. Myspace era wants their featureset back. More seriously I think for personal sites a JAMstack site is perfectly sufficient
- FridgeSeal 6y ago
  > 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.
jesterson 6y ago
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
astura 6y ago
Looks good and loads instantly.
nicbou 6y ago
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.

marvinblum 6y ago

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/ https://marvinblum.de/

jfrunyon 6y ago
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...
- Polylactic_acid 6y ago
  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.
rootusrootus 6y ago
Interesting. Your site triggered our corporate filter as "Adult/Mature Content". I wonder what tripped it up.
- anonyfox 6y ago
  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 :/
- kbr2000 6y ago
  Try looking up 'blum' on urbandictionary :)
  - penneyd 6y ago
    Major manufacturer of cabinet hardware - seems fine.
    - rapnie 6y ago
      And means 'flower' in German.
  - marvinblum 6y ago
    Wow, that's unfortunate. Well, I can't do anything about that :)

ww520 6y ago

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.

anonyfox 6y ago
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?
- throwaway1777 6y ago
  Might be pretty good depending on the specs
  - spanhandler 6y ago
    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.
- TheDong 6y ago
  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.

djaychela 6y ago

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.

anonyfox 6y ago
I just settled on https://oxal.org/projects/sakura/ 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!
- thomasfortes 6y ago
  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.
  - anonyfox 6y ago
    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!
    - fuzzfactor 6y ago

NorwegianDude 6y ago

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! :)

pdimitar 6y ago

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?

anonyfox 6y ago
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 ...).

onemiketwelve 6y ago

Thank you sensei

ntumlin 6y ago

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.

rafaelturk 6y ago

zola ?

anonyfox 6y ago
https://www.getzola.org/ https://www.getzola.org/ Static site builder written in Rust
- rafaelturk 6y ago
  tks

1vuio0pswjnm7 6y ago

"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.

randomguy3344 6y ago

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/ https://anonyfox.com/tools/savings-calculator/ ```Aside from raw luck this ist still the best```

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

umyemri 6y ago

Alignment of list on https://anonyfox.com/grimoire/elixir/ https://anonyfox.com/grimoire/elixir/ seems a bit off. Love the style though. Very crisp, very snappy.

anonyfox 6y ago
Thanks for The feedback, will have a look!

40four 6y ago

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!

mbar84 6y ago

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

otter-in-a-suit 6y ago

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/ https://chollinger.com/blog/ [1] https://github.com/chollinger93/ink-free https://github.com/chollinger93/ink-free

user5994461 6y ago

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.

munk-a 6y ago
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.
Havoc 6y ago
>No view counter. Myspace era wants their featureset back. More seriously I think for personal sites a JAMstack site is perfectly sufficient
FridgeSeal 6y ago
> 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.

jesterson 6y ago

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

astura 6y ago

Looks good and loads instantly.

nicbou 6y ago

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.