35 ms·

I am a fast webpage

621 points by capocannoniere 10y ago

paulpauper 10y ago
looks like this whole thing is a scheme to promote his webhsting affiliate link: http://www.knownhost.com/affiliate/idevaffiliate.php?id=1136_0_3_1 http://www.knownhost.com/affiliate/idevaffiliate.php?id=1136... The fastest and most reliable hosting is, by far, based on my own experience is amazon's e2 cloud and S3 bucket services.
- Mao_Zedang 10y ago
  I picture him coding this in vi with a maniacal evil laugh, thinking of all the money his scheme will make
  - Annatar 10y ago
    Nothing wrong with that; Smarts should be rewarded.
- Annatar 10y ago
  Have you tried Joyent or AnyCity?
silverwind 10y ago
Few more possible optimizations: - Brotli instead of Gzip. Likely saves around 10% size. - Minify everything, including HTML. Could save around 3% size on that page.
- legion050 10y ago
  Another optimization: - zopfli for PNG via advanceCOMP
bobabobabob 10y ago
A couple of problems rendering on iPhone 6s http://i.imgur.com/EpoC9lG.jpg http://i.imgur.com/EpoC9lG.jpg http://i.imgur.com/qHS5v2H.jpg http://i.imgur.com/qHS5v2H.jpg
jschwartzi 10y ago
Yes you are. You're so fast I don't even see you refresh.
nathancahill 10y ago
Submit to 10k Apart: https://a-k-apart.com/ https://a-k-apart.com/
zackbloom 10y ago
Just to point out, there's no particular reason to host a page like this on a VPS at all. You could just throw it on S3. Even better, you could put it behind a CDN like Cloudfront and the total cost would be a dollar or two a month, not $25+ and it would be significantly faster.
- niutech 10y ago
  Or you can use a free hosting: Firebase, Github Pages, Dropbox.
- matt_wulfeck 10y ago
  Yeah I notice that was weird too. The creator speaks a lot about about html optimizations but one of the most widely-used methods of page speed increases are global CDN distribution. The SSD is really meaningless in this context. The website is so small that it will be loaded almost 100% from the filesystem cache. As long as it has more than 512 MB of ram... If I wanted my website to load incredibly fast, I would absolutely not put it on an obscure VPS. Not that there's anything inherently wrong with it, but it's generally not going to make your site faster.
  - paulpauper 10y ago
    the whole thing was obv. created with the intent to promote his affiliate link
  - wruza 10y ago
    Meaningless-weaningless, but that site loaded instantly on my iphone 4-without-s and did not lag, unlike all others (except hn ofc). No CDN can hide modern js freezotrons.
    - runeks 10y ago
      Regardless of where on this globe you put your VPS, someone will be accessing it at 1000 ms latency. It doesn't make sense to optimize the browser page load speed to 10 ms, and forget that it takes 600 ms to fetch the data from Asia.
neoCrimeLabs 10y ago
> "I am not on a shared host, I am hosted on a VPS" Hate to break it to you, but your virtual private server (VPS) is likely sharing a bare-metal server with other VPS. ;-) Also, you can look into content delivery networks (aka CDN), which will most likely deliver this page faster to clients than your VPS especially when you consider your VPS is in Dallas and CDN's have nodes located around the world.
- devnull42 10y ago
  Absolutely. Yeah that is kind of silly.
- ajosh 10y ago
  I think he is contrasting VPS service to shared hosting services like Go Daddy or one of the many cPanel providers. Unless a VPS is using OpenVZ, the box isn't over provisioned. A cPanel host is usually very over provisioned. 500 customers per server wss not uncommon 10 years ago.
  - neoCrimeLabs 10y ago
    With a Linux host, you can oversubscribe KVM guests, and I'm starting to see it more frequently. Still haven't seen as bad as shared hosts, however. Kernel Same-Page Merging allows you to de-dup common pages across virtual hosts (such as kernel) for example. http://www.linux-kvm.org/page/KSM http://www.linux-kvm.org/page/KSM
- rospaya 10y ago
  > Hate to break it to you, but your virtual private server (VPS) is likely sharing a bare-metal server with other VPS. ;-) Likely? Isn't that the point of a VPS?
  - neoCrimeLabs 10y ago
    You can reserve entire machines, even using VPS. Heck, you can even luck out and be the first VPS on a newly provision host. Chances of either, slim. Still I try not to assume when I don't have the data.
bobfunk 10y ago
Not that wickedly fast unless you're really near Dallas where the server is: https://performance.sucuri.net/domain/varvy.com https://performance.sucuri.net/domain/varvy.com Hosting on a single VPS is never gonna be very fast globally no matter what you pay your hosting. In fact our free plan on netlify would make this a whole lot faster...
- Frye 10y ago
  Or a content delivery network containing only SSDs but this guy couldn't afford that.
- deleted 10y ago
  [deleted]
- metafunctor 10y ago
  It's still pretty fast all over the world, because that total time is all you need. For most sites, that three seconds is just the start, ensued by several more seconds of downloading CSS, JavaScript, images, analytics, widgets, and whatnot.
- cperciva 10y ago
  Off topic, but is that service showing crazy slow numbers for "USA, Atlanta" for anyone else?
  - apocalyptic0n3 10y ago
    It is. Linode's Atlanta data center has been getting DDoS'd on and off since Sunday. This site isn't hosted on Linode, but could there perhaps be congestion in Atlanta from that attack causing general slowness?
  - userhacker 10y ago
    yup Atlanta is slow for me too
  - r3bl 10y ago
    Same thing here. Under half a second from every other location, 2.5 seconds from Atlanta.
kovrik 10y ago
Really cool! Almost instant even here in New Zealand!
bennettfeely 10y ago
Probably wouldn't make much of a difference, but there is still room for performance improvement by minifying the HTML page.
smoyer 10y ago
"Look amazing on any device" ... The right edge of your text is coiled on my phone (not so amazing).
- Frye 10y ago
  Same here.
quinndupont 10y ago
Is this image inlining thing something new? Am I reading it correctly that the images are encoded in base64 and delivered as html? Surely this is a bad idea... no?
- Sirikon 10y ago
  base64 encoding increases the size of the file. For that image I would prefer to use inline SVG...
  - dahart 10y ago
    Indeed, this particular image is 3.5k of PNG, I'm certain it could easily be well under 1k as SVG.
    - Eric_WVGG 10y ago
      not to mention retina-smoove
- chriswarbo 10y ago
  Other reasons to embed images using base64 are to have pages work standalone, to reduce complexity (no need to keep pages and associated resources in sync) and increase locality (things are defined where they're used). These probably aren't particularly important for most sites, but it's something I do on my personal site ( chriswarbo.net ) since I care more about ease of maintenance than load times.
- draw_down 10y ago
  Bad why?
  - pmarreck 10y ago
    because base64 encoding expands the size of a binary, presumably
- creshal 10y ago
clessg 10y ago
How much does HTTP/2 mitigate the need for such techniques, if at all?
- creshal 10y ago
  HTTP/2 with server push will eliminate the inlining hacks, and automatically compress content. But the other points remain: No Javascript is still the fastest Javascript framework, and while you can do lots of crazy hacks with CSS, maybe you shouldn't.
josephjrobison 10y ago
Pretty good at 97/100 on Google's PageSpeed Insights - https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fvarvy.com%2Fpagespeed%2Fwicked-fast.html&tab=desktop https://developers.google.com/speed/pagespeed/insights/?url=...
- vincentriemer 10y ago
  Don't really think PageSpeed score really accurately reflects page loading speed (maybe initial page loading speed). It seems to not really care about lazy loaded resources as one of my JS heavy webapps I made (around 200KB) actually scores higher than this one https://developers.google.com/speed/pagespeed/insights/?url=io808.com&tab=desktop https://developers.google.com/speed/pagespeed/insights/?url=.... Funnily enough the screenshot on the test only shows the loading spinner.
vonseel 10y ago
Cool... Unfortunately in practice it's easy to find a list of best practices, much harder to implement in a scalable and durable manner on any project of sufficient size, especially if working with a legacy codebase.
ksubedi 10y ago
Took me almost 30 seconds to load, maybe because the server is being hammered by HN traffic right now? Also like others here were saying, using a CDN would definitely help with the initial latency.
- dmlittle 10y ago
  Weird, it took me just 194ms.
- turtlebits 10y ago
  Yep, I thought this was a joke at first because it took 10+ seconds to connect.
- PunchTornado 10y ago
  I guess it depends on traffic and wherever you are. it took me about 4 seconds on first load.
- AOsborn 10y ago
  I think this is the ironic lesson: for many sites, optimizing for consistent performance (i.e. CDN, geographic caching) is a more important objective than prematurely optimizing for a subset of users. Example: Business A - average render time 0.3s, but under load 5-10s Business B - average render time 0.8s, but under load 1-2s. Subjectively, around ~10s response time is the point I would close the tab and look for another business if I was trying to do shopping online, anything involving a credit card etc.
ksubedi 10y ago
Took me almost 30 seconds to load, maybe because the server is being hammered by HN traffic right now? Also like others here were saying, using a CDN would definitely help with the initial latency.
honkhonkpants 10y ago
The bit about being hosted on SSDs is silly. I could host that site in unused registers of my CPU.
- CorvusCrypto 10y ago
  was thinking exactly this, keep loaded in mem for the duration of the server's lifetime. Not too familiar with HTTP2 but could you cache the compressed packet and reuse with minor modification to the headers when needed to speed up the communication?
  - andai 10y ago
    Not familiar either, but that's an amazing idea
  - honkhonkpants 10y ago
    Preformatted payload can be a big win for page speed, especially if your payload cannot vary based on request headers, or has only a few variants. A special case of preformatted response used to be baked into microsoft IIS. If you connected to an address that could only redirect to another address, IIS wouldn't even wait for the request, it would just send the 302 response and hang up. This, it turns out, was not really compatible with Mozilla at the time, and may have violated some RFCs, but I kind of liked it as a hack.
- tbirdz 10y ago
  What? No you couldn't. The site html is 11092 bytes, so you'd need to have 1,387 unused 64-bit registers to host the site.
- SquareWheel 10y ago
  Oh, I think he just added that one so he could sneak in his affiliate link.
outworlder 10y ago
Well, many of these points make sense. If I'm doing a single page application, surely I'll have infrastructure in place already to compile, minify and do whatever I need to. So I could just serve the monolithic page and be done with it. Much like desktop applications used to do.
exabrial 10y ago
"No Javascript" Amen.
- faragon 10y ago
  It reminds me the "no synthesizers" used in the 80's by some musicians :-)
  - deleted 10y ago
    [deleted]
  - exabrial 10y ago
    I know right? I cannot really for the super-cool bloatware fashion craze JS frameworks to die. Here's an idea: WebAssembly, but use existing Opcodes from the JVM.
    - boubiyeah 10y ago
      JS bloat is not gonna go away
calebgilbert 10y ago
The whole hosting issue seems to open a can of worm, at least if this comment stream is any indication. I think it probably would have been better if they stated something more along the lines of, 'Choose (and likely expect to pay) for some sort of superior hosting solution which will prioritize allocating resources to your site(s)'. The general point could be made without leaving so much room for everyone to argue over specifics.
kazinator 10y ago
The best "Shift+Reload" refresh I've managed to get out of this page from where I'm sitting, in Firefox 48.0.x, according to its Network Console, is around 360 ms. It doesn't beat this HN discussion page by a whole lot, and this has actual content, which is dynamic.
adrianpike 10y ago
2.43s TTFB for me - nice and fast once that happened, but that TTFB is a killer.
disruptalot 10y ago
Interestingly, Google has been going after this with AMP (accelerated mobile pages): https://www.ampproject.org/ https://www.ampproject.org/ It enforces a set of rules to accelerate web pages. These rules can be used to validate your pages.
traviswingo 10y ago
This took almost 10 seconds to load for me...
- AOsborn 10y ago
  Around the same for me, running fibre in New Zealand. Long delay before content even began loading - as mentioned in other comments, would likely have been a non-issue if a decent CDN was used.
  - andai 10y ago
    I'm curious, how much benefit is there to having a fibre connection in NZ except for NZ websites? What's the max speed?
traviswingo 10y ago
This took almost 10 seconds to load for me...
edpichler 10y ago
All being on the html, and doing less external css improve speed? How much? Is it worthwhile?
cyberferret 10y ago
Interesting exercise, in an age where web pages are now bigger than most business applications I used to use in the early days of DOS/Windows. Note: Just checked, and even a simple Medium blog post page won't fit on one those old 3.5" floppy disks.. EDIT: To stay on topic - the OP's page loaded instantly for me here in outback Australia...
leesalminen 10y ago
Ehh, I just got 10.91s load time in Chrome 53 from Colorado, USA. Image of Chrome Dev Tools: https://reportcards.scdn3.secure.raxcdn.com/assets/uploads/files/company/452e0fdee5904b10046de11c0f7bfccb.png https://reportcards.scdn3.secure.raxcdn.com/assets/uploads/f... As an aside, does HTTP/2 provide any benefit for a single HTML file with no external assets?
- niftich 10y ago
  Nope. If you're done in one HTTP round-trip, your HPACK state has to push brand-new headers, you benefit nothing from server-side push (if it's even enabled), there's nothing to pipeline, so don't benefit from multiplexing and head-of-line blocking is a non-issue.
- PunchTornado 10y ago
  nope, it doesn't
- toast0 10y ago
  http/2 implies ALPN (but you can also do ALPN with http 1.x), which many browsers use as a flag to enable TLS Fast Start, and save one round trip.
- mrb 10y ago
  HTTP/2 header compression is one benefit that helps even it you have just 1 request.
  - niftich 10y ago
    I want to benchmark this, because intuitively I disagree. The HPACK spec is a pretty easy read [1]. There is a static, hardcoded table that contains most of the HTTP header names, and even some common predefined KV pairs. You save some bytes on the wire if your header's name or value is one of these entries; the header name will essentially always will be in the static table. But for names and values that aren't in the static table, you have to put them into the dynamic table and encode them using either the integer packing or the huffman code. The client has to decompress these, of course. On future requests, you have some leftover state in your dynamic table so future 'duplicate' headers are packed, and take up very little space. But for the first (ever) HTTP request-response pair, you have to trade ALL the headers in "full". So the true benefits of the dynamic table don't kick in. [1] https://http2.github.io/http2-spec/compression.html#header.encoding https://http2.github.io/http2-spec/compression.html#header.e...
baristaGeek 10y ago
I can see in the source code that you're expressing all dimensions in terms of ems and %s. A technology such as Bootstrap will always be the way to go; however, could you tell us a little bit more about how you did this? How did you ensure that it looks good not only on your screen but on any screen? I know people are saying it has some errors on certain mobile devices, but that's still some pretty good job manipulating CSS properties.
- Scarbutt 10y ago
  A technology such as Bootstrap will always be the way to go What? Why?
  - baristaGeek 10y ago
    Bootstrap was just an example. It could Bootstrap, Materialize, W3.CSS, etc. The point is that it's much more convenient to reuse code from a framework, because it's better to sacrifice file size for fast iteration and functionality.
    - mikekchar 10y ago
      There is always a tipping point. We tend to use Bootstrap a lot at work for the reasons you mention, but you can pretty quickly get to the point where your CSS is complex enough that you would have been better off doing it from scratch. All frameworks are like that -- you trade off initial convenience for design constraints. When I'm doing my own projects I always write my CSS by hand because it ends up less complex in the end. I don't need to see pretty things up front like my corporate customers do.
jlmorton 10y ago
I hate to be negative, but what really is the point of this? That a simple webpage without any content can be fast? Of course it can. Is it desirable to inline your CSS, "like a boss?" Maybe if you have one single web page. What if you have dynamic content and your users intend to browse more than one page? With externalized CSS, that is all cached. Same with images. If I'm building a web application, I certainly do not want inlined images. I want those on a CDN, cached, and I want the page to load before the images. Not only is this not particularly useful advice, it's bad advice.
- KirinDave 10y ago
  It also seems somewhat antiquated. As service-worker comes online we can... do a lot more with a more naive <link> method.
  - bmon 10y ago
    Not to mention the improvements in http2.
  - kevin_thibedeau 10y ago
    It is relevant for resource limited IoT devices. It can be a struggle to get embedded web sites running fast using modern frameworks. Throw in TLS with large keys and you enter a whole new world of slow where it pays to shave off every byte possible.
- simbalion 10y ago
  the guy says he's not an idiot then brags about spending $30 per month on a VPS (idiot), for a single-page static HTML website with all inline-code (idiot+1). It's not being negative to point out the glaring flaws in a person's statements. My assumption is the entire thing is an advertisement for that hosting service.
  - mikepurvis 10y ago
    Also, whether the VPS has an SSD or not is totally irrelevant— if you really were serving a single page it would be cached in the memory of your webserver. (Or better yet, serve the thing off S3 and let Amazon be your CDN.)
patmcguire 10y ago
Took about 15 seconds to load for me...
idlewords 10y ago
I was a fast webpage.
- dredmorbius 10y ago
  Did you play tag as a kid?
codygman 10y ago
Maybe a lot of people are hitting it, but this webpage loaded slowly for me.
fsiefken 10y ago
What an arrogance, the page is done with me? I done with the page yet. I can get the same page much faster by putting the png in an inline svg, strip the source of unnecessary whitespace and returns, serve brotli (or sdhc compressed pages) with firefox, chrome and opera dynamically... or even just do the decompression inline with javascript. Might save another 20% https://github.com/cscott/compressjs https://github.com/cscott/compressjs
- mbrock 10y ago
  ... With what are you going to compress the compression library?
  - fsiefken 10y ago
    Brotli or Gzip on server. But you are right, in my enthousiasm I overlooked those bits!
jayess 10y ago
His affiliate link for VPS service has its cheapest option priced at $25 a month. You can get a nice little VPS for static hosting on SSD from digital ocean for $5 a month. $6 a month with backup.
- r3bl 10y ago
  You can go even cheaper. Time4VPS offers you 2 cores (compared to one on DO), 80 GB SSD (compared to 20 on DO), 2 TB bandwidth (compared to one on DO), and 2 GB of RAM (compared to 512 MB on DO) for 3 euros (3.36 dollars). 1 additional euro for daily and weekly backups. Started renting one just two days ago, so I can't really guarantee that it's reliable, but it was recommended to me by a friend who's renting it for over 100 days now without any downtime. [1] https://www.time4vps.eu/pricing/ https://www.time4vps.eu/pricing/ (or, if it sounds good and you want to use my referral link: https://billing.time4vps.eu/?affid=992 https://billing.time4vps.eu/?affid=992)
  - rocky1138 10y ago
    CloudAtCost works perfectly for me. It's a one-time fee for VPS' and they're always having sales. Use my coupon code to get 50% off any CloudPRO hosting: e6a8yWuhA4 https://cloudatcost.com https://cloudatcost.com
  - time4vps 10y ago
    Actually for VPS nodes we use SSD cached 6 x 1200 GB 10k RPM SAS RAID6 storage.
halayli 10y ago
Your page can be very fast and uses minimal resources and is hosted in a good place. But you always gotta watch out for proximity to user, time to first byte and dns resolution time. Perceived speed is highly affected by those. It took 2 seconds to load the page on a fresh ec2 box: time_namelookup: 0.061 time_connect: 0.100 time_appconnect: 0.223 time_pretransfer: 0.223 time_redirect: 0.000 time_starttransfer: 1.935 ---------- time_total: 2.066
smegel 10y ago
> I make no external calls, everything needed to load this page is contained in the HTML. Wont that make your webpage load slower?
- bdcravens 10y ago
  That one file, but presumably it's loading assets that would be the same total size if they were split. Loading 100k from one source is faster than the same aggregate size from multiple connections.
  - smegel 10y ago
    Except if you only need the first 50k to render the page, and can wait for 50k of Javascript to come later, your page is going to display a lot faster. Standard technique. > Loading 100k from one source is faster than the same aggregate size from multiple connections. Usually doing things in parallel is faster than doing them serial. That's why HTTP2 loads slower than HTTP1 - you are sucking everything through single TCP pipe, even though it is multiplexing within.
KerryJones 10y ago
"Faster than 100% of tested sites" https://tools.pingdom.com/#!/ehdlhb/https://varvy.com/pagespeed/wicked-fast.html https://tools.pingdom.com/#!/ehdlhb/https://varvy.com/pagesp...
ivanhoe 10y ago
For speed optimization it's really important to always fine-tune for you particular use case and apply some common sense. For instance, inlining everything as suggested here is faster only if you expect visitors to open just that one page and bounce away, so browser caching is not helpful. Consequently, it's a very good tip for e.g. landing pages, but it makes no sense at all to serve pages that way to your logged-in users.
cm3 10y ago
If it's really all static, you can bundle it into a static Mirage unikernel image with https://github.com/mirage/mirage-seal https://github.com/mirage/mirage-seal
gravypod 10y ago
I've always wanted to play with putting /var/www into a ramdisk for PHP/html stuff. Would be much faster loading since it's all just text in the end of the day. Completely cut out the bottleneck of SSd/HDD
- riboflava 10y ago
  If you own the hardware I imagine much of your PHP/html stuff will be served from the file system cache much of the time so you probably wouldn't see much benefit...
  - gravypod 10y ago
    The idea would be to do it in an ultra-minimalist setting on a VPS (something under 256MB of ram).
    - detaro 10y ago
      I don't think it would do much there either: If it fits in your left-over RAM, then it's probably in the disk cache. If it doesn't, then you can't create a RAM disk large enough. It might help with latency for the long-tail of data that isn't used very often and thus maybe replaced in the cache by other data, but on the other hand the OS probably had a reason to replace it and forcing it to stay in RAM might slow everything down.
- girvo 10y ago
  You'll likely have better luck configuring php-fpm and the OpCache properly, as they are going to be doing basically what you're proposing anyway, and for the OpCache it's even nicer as it avoids reparsing the code
  - gravypod 10y ago
    Yea I've already set those up but I don't think opcache handles random text/html/js files. Only php files. I could be wrong.
matt_wulfeck 10y ago
I think it feels fast because it loads at once, but I'm actually not getting very impressive results programmatically if you measure how long the entire TCP transaction takes (which is what I consider page loading): # Both DNS records are cached before request >>> print requests.get('https://varvy.com/pagespeed/wicked-fast.html').elapsed.microseconds 226515 >>> print requests.get('http://www.google.com').elapsed.microseconds 92027 Even google.com (92 ms) is about 250% faster than OP (226 ms) to establish connection, read all of the data, and close.
- paulddraper 10y ago
  But what's 130ms? Okay, okay, it "matters". But it's nothing compared with the 3s to load all the JS and CSS and the subsequent sluggishness as 20 analytics scripts are loaded and processed.
- kalden_ 10y ago
  Where the time goes is the TLS handshake, which is not here when loading cleartext Google.
usaphp 10y ago
> "My images are inlined into the HTML using the base64 image tool, so there is no need for the browser to go looking for some image linked to as an external file." This does not work in most cases when you use big images. From StackOverflow answer [1]: "It's only useful for very tiny images. Base64 encoded files are larger than the original. The advantage lies in not having to open another connection and make a HTTP request to the server for the image. This benefit is lost very quickly so there's only an advantage for large numbers of very tiny individual images. " [1] - http://stackoverflow.com/questions/11736159/advantages-and-disadvantages-base64-image-encode http://stackoverflow.com/questions/11736159/advantages-and-d...
- combatentropy 10y ago
  > This benefit is lost very quickly so there's only an advantage > for large numbers of very tiny individual images. In which case maybe it would be better to use sprites?
  - usaphp 10y ago
    I don't know, I hate dealing with sprites, it just not worth it in my opinion, the time you spent on every edit...
    - brazzledazzle 10y ago
      If you're using photoshop you can create a PSD that sources other PSDs and if I remember right create an action that generates the exported image so you could automate things quite a bit if not entirely.
- 0xcde4c3db 10y ago
  Furthermore the image used is one that compresses uncommonly well with PNG (small palette, large chunks of solid color). I think the vast majority of 350x400 images would be at least 10x larger unless they're deliberately composed in a similar style or are JPEGs with the quality turned way down. I tried to create an SVG version to see how an SVGZ would compare, but evidently I'm too crap at Inkscape and kept screwing it up.
jordache 10y ago
This simple webpage was barely faster than hacker news' list view...
kelvin0 10y ago
Examples of fast pages: http://www.3riversstadium.com/index2.html http://www.3riversstadium.com/index2.html http://www.pmichaud.com/toast/ http://www.pmichaud.com/toast/ http://home.mcom.com/home/welcome.html http://home.mcom.com/home/welcome.html
- tonybaroneee 10y ago
  Lol, thanks for the Three Rivers throwback! (Pittsburgh native here)
deleted 10y ago
[deleted]
debacle 10y ago
In an ad-free Internet, many more pages would be this fast. Alas.
userbinator 10y ago
A good sequel to http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ , which is probably too understyled for most people.
- unexistance 10y ago
  it's the perfect style for a wall of text tho :D
- wingless 10y ago
  I prefer http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
  - dredmorbius 10y ago
    For some reason, I'm a fan of this one: http://codepen.io/dredmorbius/full/KpMqqB/ http://codepen.io/dredmorbius/full/KpMqqB/
  - Retr0spectrum 10y ago
    https://bestmotherfucking.website/ https://bestmotherfucking.website/
- danneu 10y ago
  http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
- erichocean 10y ago
  Ah, the DJB[0] look. Good times, good times. [0] Example: https://cr.yp.to/highspeed.html https://cr.yp.to/highspeed.html
  - Annatar 10y ago
    Indeed. Back to the roots!
- mrweasel 10y ago
begriffs 10y ago
OP has certainly nailed Hacker News psychology. My old coworker called the technique "inferiority porn." Titles like "the secretly terrible developer" or the closing statement of this particular article: "Go away from me, I am too far beyond your ability to comprehend." As many people have pointed out there are faster methods of static hosting through a CDN, and many of the techniques of this site are inapplicable for larger sites. But A+ on the marketing.
- brazzledazzle 10y ago
  I probably sound like I'm tooting my own horn but it definitely felt really contrived to me. I upvoted it because of the comments containing better tips or caveats provided for the good ones.
- trymas 10y ago
  I hate this trend. IMHO there is mainly one way to get attention - it's to get (great and instant) emotion from the user. You can give good emotions or bad emotions. Personally, I think, that to create a good emotion takes much more effort than to create a bad one. The website/product can say how great am I, but it will not 'click' as instantly as someone telling me I am a dumb baby and I suck [0][1] or I am not superior mere mortal baboon [2], for which most people will get instant rage and will start flame wars in whatever comment section, as there "is no such thing as bad PR". Most popular writer/bloggers in my country have created these dipshit arogant characters (I tend to believe that they are "normal" people, but they clearly know what sells) who always say that they are richer, smarter and better than you. They create stories about "cheap restaurant breakfast for 60€" and so on, though the most interesting thing is that people buy their shit and then rage on whatever websites about how dared the writer call them a dumbass homeless bum. [0] https://www.youtube.com/watch?v=0nbkaYsR94c https://www.youtube.com/watch?v=0nbkaYsR94c [1] https://news.ycombinator.com/item?id=12448545 https://news.ycombinator.com/item?id=12448545 [2] https://varvy.com/pagespeed/wicked-fast.html https://varvy.com/pagespeed/wicked-fast.html
- andreareina 10y ago
  I'd say that the general idea of watching out for external and/or bloated resources is absolutely applicable for larger sites. Media sites are particularly egregious: not only does the js take the lion's share of what's transferred, rendering of the content I'm interested in typically blocks until everything is downloaded and processed.
natmaster 10y ago
A lot of this stuff is outdated now: https://news.ycombinator.com/item?id=12448539 https://news.ycombinator.com/item?id=12448539 For instance, delivery one giant JS/CSS file is now bad because it is harder to cache, since HTTP/2 removes the overhead of multiple requests there is no downside for many files.
heavymark 10y ago
This is odd. Clearly anyone can make a lighting fast page by making a single page since then you can have css inlined versus needing to link to css style sheets with multiple pages, and of course not having javascript would make it faster, but thats a requirement for most all typical sites these days, and loading images that way is nice for hackers but not for real people using cms's by common people and clients. Also paying $25-35 for hosting is not very bright since you can get a $5 digital ocean server ssd, not shared, that would load this particular page just as fast if not faster.
zodvik 10y ago
Dlang forum (with dynamic content) is insanely fast! https://forum.dlang.org/group/general https://forum.dlang.org/group/general
- jbb555 10y ago
  Yeah, this is the site that made me realize just how awful so many other sites are. It's very fast indeed, and has no useless graphics or javascript effects, but is 100% functional and looks great.
- Shorel 10y ago
  I was thinking of exactly the same website. That's a very fast page, that actually does something.
DigitalSea 10y ago
Easy to make a website fast when it has nothing on it. In the real world a site isn't this light. It has images, analytic scripts, stylesheets, fonts, Javascript (jQuery at the least). Using a combination of a CDN and realistic caching, I can make a fast website as well.
- mbrock 10y ago
  Real world sites don't need all that stuff.
  - mxuribe 10y ago
    Many real world sites have strategic/marketing partners who ask to add analytics scripts so that they can capture metrics for their partnerships with you/your real world site...And if your site has been optimized, but their servers (which serve up these 3rd-party/analytics scripts) aren't as optimized, guess where the slow down comes from? And senior leaders don't always enforce these partners to confirm to internal performance standards. So, yes, unfortunately real world sites DO have - or at least are forced to have - stuff like that.
nine_k 10y ago
I make my personal pages fast this way since last century. Probably a huge amount of people did the same. It's pretty obvious. When you need fancy graphics (a static photo album), things become less easy: you e.g. may want to preload prev / next images in your album to make navigation feel fast. Things become really tricky when you want interactivity, and in many cases users just expect interactivity from a certain page. But client-side JS is a whole another kettle of fish. When things become ugly is when you want to extract some money from page's popularity. You need to add trackers for statistics, ad networks' code to display the ads, and complicate the layout to make room for the ads, placing them somehow inobtrusively but prominently. This is going to be slow at worst, resource-hungry at best. (Corollary from the above: subscription is more battery-friendly than an ad-infested freebie.)
Cozumel 10y ago
Inline CSS shudder
philip1209 10y ago
I'm curious - would this page see any speed improvement with HTTP2? I ask because the new protocol seems optimized for the exact opposite of this - many asynchronous fetches.
- guidedlight 10y ago
  It's already using HTTP/2.
HugoDaniel 10y ago
Inline all your CSS and you are forcing all your users a full reload whenever you need to change/add something. This can be tricky if your page grows in complexity/size and you need to change something. Please, when is more appropriate don't inline your CSS and prefer to take advantage of cache.
- mbrock 10y ago
  Well, the entire page is 7 KB.
stretchwithme 10y ago
Some pages have big egos.
padmabushan 10y ago
By the site's own admission, this page's visible content not prioritized. I would have knelt before it if not for that flaw!!
caub 10y ago
what is that `.unit{display:inline-block;display:inline;zoom:1` (the stars..)
brainless 10y ago
Honestly? I am surprised to see this page with such high vote on the first page. If you really wanted a fast "static" page, you would put it on a CDN. All you wanted to do is put a marketing link in your last paragraph.
sigi45 10y ago
Simple text, few links to 'tipps', a little bit of base64 images without any deeper knowledge. For example there was a website which showed the impact of base64 images just a few weeks ago (when i remember correctly) But it has a referral link. Thats probably the point of this page.
spion 10y ago
I can't wait for half of this advice to become obsolete with HTTP2
jlebrech 10y ago
now we need a framework that targets that standard. as very fast dumb client.
boubiyeah 10y ago
Well, not including any javascript was one massive shortcut :)
GrumpyNl 10y ago
Its back to 1985
pilif 10y ago
> my hard drives are SSD Of course that's entirely irrelevant as the page completely fits into the ram of the server (or even the CPUs cache for that matter)
pikzel 10y ago
Loaded in about 15-20 seconds for me. Even if you think medium.com is slow, they can handle the sudden extra load that your site couldn't.
pacnw 10y ago
Ok I'll bite as this is near and dear to my heart. Instead of showing me a fast webpage with a minimal content, tell me how to make my tons of css and js load fast! That's a real problem.I deliver web apps, and interactivity is a must. IMO, the real problem with the web is the horrendous design choices and delivery of very popular news and daily reading sites (ahem cnn) where subsequent loads of ads and videos start shifting the page up and down even when you have started reading something. Let's address that problem first!
- hasenj 10y ago
  > tell me how to make my tons of css and js load fast I went to the doctor and he told me to lose weight. What a fatphobe! He should have told me how to eat everything I desire without any bad side effects! /s
INTPenis 10y ago
A VPS is shared hosting to me, it's just an instance on a shared system. Shared hosting used to mean a folder on a shared web server but I consider sharing resources in a hypervisor equally shared. ;) If they truly wanted speed through control of resources they would have used bare metal. But yeah, the website is easy to optimize when it's simple, the hard part, often outside of your control, is DNS and actual connection handling. Many have already mentioned CDN so there's that. But you also don't know what kind of firewalls are being used, or switches, or whatever else may impact your site. Why not just do what others have suggested and put it all in the cloud so that Amazon can worry about balancing your load.
mxuribe 10y ago
Ego aside, this kind of site (and associated commentary on the suggested tactics) i feel is helpful.
xiaoma 10y ago
It took me several seconds to load (compared to about 1-1.5 for HN)... this page needs better hosting for Asian users.
SunnyDoll 10y ago
Here lonely girl looking for fun with the guys http://bit.ly/2cl5OQg http://bit.ly/2cl5OQg
mashedcode 10y ago
You can do much better! What's about html-muncher for css class minification? Those png are not fully optimized and an SVG would probably even be smaller too and even if it isn't in the case of the orange one it would have could be compressed much better. Making use of data: urls might look good on first visit but honestly with HTTP/2 just push in the resources and externalize them. Because seriously cache for 300 seconds? How about offline support anyways? It's 2016. Furthermore where's my beloved Brotli support? By the what's about WebP support? Ok TBH if the PNG would be properly optimized WebP would actually not beat the file size but hey: "It isn't" So even though it's only this tiny static page there's still so much wrong with it. Please improve! By the way what's about QUIC?
mashedcode 10y ago
You can do much better! What's about html-muncher for css class minification? Those png are not fully optimized and an SVG would probably even be smaller too and even if it isn't in the case of the orange one it could be compressed much better than a PNG. Making use of data urls might look good on first visit but honestly with HTTP/2 just push in the resources and externalize them. Because seriously cache for 300 seconds? How about offline support anyways? It's 2016. Furthermore where's my beloved Brotli support? By the what's about WebP support? Ok TBH if the PNG would be properly optimized WebP would actually not beat the file size but hey: "It isn't" So even though it's only this tiny static page there's still so much wrong with it. Please improve! By the way what's about QUIC?
jrmacmillan 10y ago
How dare HN spread this kind of speed-shaming hate slander! ;) We need to see the bloaty-positive alternative, not all websites have to be Google models.

621 points by capocannoniere 10y ago

looks like this whole thing is a scheme to promote his webhsting affiliate link: http://www.knownhost.com/affiliate/idevaffiliate.php?id=1136_0_3_1 http://www.knownhost.com/affiliate/idevaffiliate.php?id=1136... The fastest and most reliable hosting is, by far, based on my own experience is amazon's e2 cloud and S3 bucket services.

Mao_Zedang 10y ago
I picture him coding this in vi with a maniacal evil laugh, thinking of all the money his scheme will make
- Annatar 10y ago
  Nothing wrong with that; Smarts should be rewarded.
Annatar 10y ago
Have you tried Joyent or AnyCity?

silverwind 10y ago

Few more possible optimizations: - Brotli instead of Gzip. Likely saves around 10% size. - Minify everything, including HTML. Could save around 3% size on that page.

legion050 10y ago
Another optimization: - zopfli for PNG via advanceCOMP

bobabobabob 10y ago

A couple of problems rendering on iPhone 6s http://i.imgur.com/EpoC9lG.jpg http://i.imgur.com/EpoC9lG.jpg http://i.imgur.com/qHS5v2H.jpg http://i.imgur.com/qHS5v2H.jpg

jschwartzi 10y ago

Yes you are. You're so fast I don't even see you refresh.

nathancahill 10y ago

Submit to 10k Apart: https://a-k-apart.com/ https://a-k-apart.com/

zackbloom 10y ago

Just to point out, there's no particular reason to host a page like this on a VPS at all. You could just throw it on S3. Even better, you could put it behind a CDN like Cloudfront and the total cost would be a dollar or two a month, not $25+ and it would be significantly faster.

niutech 10y ago
Or you can use a free hosting: Firebase, Github Pages, Dropbox.
matt_wulfeck 10y ago
Yeah I notice that was weird too. The creator speaks a lot about about html optimizations but one of the most widely-used methods of page speed increases are global CDN distribution. The SSD is really meaningless in this context. The website is so small that it will be loaded almost 100% from the filesystem cache. As long as it has more than 512 MB of ram... If I wanted my website to load incredibly fast, I would absolutely not put it on an obscure VPS. Not that there's anything inherently wrong with it, but it's generally not going to make your site faster.
- paulpauper 10y ago
  the whole thing was obv. created with the intent to promote his affiliate link
- wruza 10y ago
  Meaningless-weaningless, but that site loaded instantly on my iphone 4-without-s and did not lag, unlike all others (except hn ofc). No CDN can hide modern js freezotrons.
  - runeks 10y ago
    Regardless of where on this globe you put your VPS, someone will be accessing it at 1000 ms latency. It doesn't make sense to optimize the browser page load speed to 10 ms, and forget that it takes 600 ms to fetch the data from Asia.

neoCrimeLabs 10y ago

> "I am not on a shared host, I am hosted on a VPS" Hate to break it to you, but your virtual private server (VPS) is likely sharing a bare-metal server with other VPS. ;-) Also, you can look into content delivery networks (aka CDN), which will most likely deliver this page faster to clients than your VPS especially when you consider your VPS is in Dallas and CDN's have nodes located around the world.

devnull42 10y ago
Absolutely. Yeah that is kind of silly.
ajosh 10y ago
I think he is contrasting VPS service to shared hosting services like Go Daddy or one of the many cPanel providers. Unless a VPS is using OpenVZ, the box isn't over provisioned. A cPanel host is usually very over provisioned. 500 customers per server wss not uncommon 10 years ago.
- neoCrimeLabs 10y ago
  With a Linux host, you can oversubscribe KVM guests, and I'm starting to see it more frequently. Still haven't seen as bad as shared hosts, however. Kernel Same-Page Merging allows you to de-dup common pages across virtual hosts (such as kernel) for example. http://www.linux-kvm.org/page/KSM http://www.linux-kvm.org/page/KSM
rospaya 10y ago
> Hate to break it to you, but your virtual private server (VPS) is likely sharing a bare-metal server with other VPS. ;-) Likely? Isn't that the point of a VPS?
- neoCrimeLabs 10y ago
  You can reserve entire machines, even using VPS. Heck, you can even luck out and be the first VPS on a newly provision host. Chances of either, slim. Still I try not to assume when I don't have the data.

bobfunk 10y ago

Not that wickedly fast unless you're really near Dallas where the server is: https://performance.sucuri.net/domain/varvy.com https://performance.sucuri.net/domain/varvy.com Hosting on a single VPS is never gonna be very fast globally no matter what you pay your hosting. In fact our free plan on netlify would make this a whole lot faster...

Frye 10y ago
Or a content delivery network containing only SSDs but this guy couldn't afford that.
deleted 10y ago
[deleted]
metafunctor 10y ago
It's still pretty fast all over the world, because that total time is all you need. For most sites, that three seconds is just the start, ensued by several more seconds of downloading CSS, JavaScript, images, analytics, widgets, and whatnot.
cperciva 10y ago
Off topic, but is that service showing crazy slow numbers for "USA, Atlanta" for anyone else?
- apocalyptic0n3 10y ago
  It is. Linode's Atlanta data center has been getting DDoS'd on and off since Sunday. This site isn't hosted on Linode, but could there perhaps be congestion in Atlanta from that attack causing general slowness?
- userhacker 10y ago
  yup Atlanta is slow for me too
- r3bl 10y ago
  Same thing here. Under half a second from every other location, 2.5 seconds from Atlanta.

kovrik 10y ago

Really cool! Almost instant even here in New Zealand!

bennettfeely 10y ago

Probably wouldn't make much of a difference, but there is still room for performance improvement by minifying the HTML page.

smoyer 10y ago

"Look amazing on any device" ... The right edge of your text is coiled on my phone (not so amazing).

Frye 10y ago
Same here.

quinndupont 10y ago

Is this image inlining thing something new? Am I reading it correctly that the images are encoded in base64 and delivered as html? Surely this is a bad idea... no?

Sirikon 10y ago
base64 encoding increases the size of the file. For that image I would prefer to use inline SVG...
- dahart 10y ago
  Indeed, this particular image is 3.5k of PNG, I'm certain it could easily be well under 1k as SVG.
  - Eric_WVGG 10y ago
    not to mention retina-smoove
chriswarbo 10y ago
Other reasons to embed images using base64 are to have pages work standalone, to reduce complexity (no need to keep pages and associated resources in sync) and increase locality (things are defined where they're used). These probably aren't particularly important for most sites, but it's something I do on my personal site ( chriswarbo.net ) since I care more about ease of maintenance than load times.
draw_down 10y ago
Bad why?
- pmarreck 10y ago
  because base64 encoding expands the size of a binary, presumably
creshal 10y ago

clessg 10y ago

How much does HTTP/2 mitigate the need for such techniques, if at all?

creshal 10y ago
HTTP/2 with server push will eliminate the inlining hacks, and automatically compress content. But the other points remain: No Javascript is still the fastest Javascript framework, and while you can do lots of crazy hacks with CSS, maybe you shouldn't.

josephjrobison 10y ago

Pretty good at 97/100 on Google's PageSpeed Insights - https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fvarvy.com%2Fpagespeed%2Fwicked-fast.html&tab=desktop https://developers.google.com/speed/pagespeed/insights/?url=...

vincentriemer 10y ago
Don't really think PageSpeed score really accurately reflects page loading speed (maybe initial page loading speed). It seems to not really care about lazy loaded resources as one of my JS heavy webapps I made (around 200KB) actually scores higher than this one https://developers.google.com/speed/pagespeed/insights/?url=io808.com&tab=desktop https://developers.google.com/speed/pagespeed/insights/?url=.... Funnily enough the screenshot on the test only shows the loading spinner.

vonseel 10y ago

Cool... Unfortunately in practice it's easy to find a list of best practices, much harder to implement in a scalable and durable manner on any project of sufficient size, especially if working with a legacy codebase.

ksubedi 10y ago

Took me almost 30 seconds to load, maybe because the server is being hammered by HN traffic right now? Also like others here were saying, using a CDN would definitely help with the initial latency.

dmlittle 10y ago
Weird, it took me just 194ms.
turtlebits 10y ago
Yep, I thought this was a joke at first because it took 10+ seconds to connect.
PunchTornado 10y ago
I guess it depends on traffic and wherever you are. it took me about 4 seconds on first load.
AOsborn 10y ago
I think this is the ironic lesson: for many sites, optimizing for consistent performance (i.e. CDN, geographic caching) is a more important objective than prematurely optimizing for a subset of users. Example: Business A - average render time 0.3s, but under load 5-10s Business B - average render time 0.8s, but under load 1-2s. Subjectively, around ~10s response time is the point I would close the tab and look for another business if I was trying to do shopping online, anything involving a credit card etc.

ksubedi 10y ago

Took me almost 30 seconds to load, maybe because the server is being hammered by HN traffic right now? Also like others here were saying, using a CDN would definitely help with the initial latency.

honkhonkpants 10y ago

The bit about being hosted on SSDs is silly. I could host that site in unused registers of my CPU.

CorvusCrypto 10y ago
was thinking exactly this, keep loaded in mem for the duration of the server's lifetime. Not too familiar with HTTP2 but could you cache the compressed packet and reuse with minor modification to the headers when needed to speed up the communication?
- andai 10y ago
  Not familiar either, but that's an amazing idea
- honkhonkpants 10y ago
  Preformatted payload can be a big win for page speed, especially if your payload cannot vary based on request headers, or has only a few variants. A special case of preformatted response used to be baked into microsoft IIS. If you connected to an address that could only redirect to another address, IIS wouldn't even wait for the request, it would just send the 302 response and hang up. This, it turns out, was not really compatible with Mozilla at the time, and may have violated some RFCs, but I kind of liked it as a hack.
tbirdz 10y ago
What? No you couldn't. The site html is 11092 bytes, so you'd need to have 1,387 unused 64-bit registers to host the site.
SquareWheel 10y ago
Oh, I think he just added that one so he could sneak in his affiliate link.

outworlder 10y ago

Well, many of these points make sense. If I'm doing a single page application, surely I'll have infrastructure in place already to compile, minify and do whatever I need to. So I could just serve the monolithic page and be done with it. Much like desktop applications used to do.

exabrial 10y ago

"No Javascript" Amen.

faragon 10y ago
It reminds me the "no synthesizers" used in the 80's by some musicians :-)
- deleted 10y ago
  [deleted]
- exabrial 10y ago
  I know right? I cannot really for the super-cool bloatware fashion craze JS frameworks to die. Here's an idea: WebAssembly, but use existing Opcodes from the JVM.
  - boubiyeah 10y ago
    JS bloat is not gonna go away

calebgilbert 10y ago

The whole hosting issue seems to open a can of worm, at least if this comment stream is any indication. I think it probably would have been better if they stated something more along the lines of, 'Choose (and likely expect to pay) for some sort of superior hosting solution which will prioritize allocating resources to your site(s)'. The general point could be made without leaving so much room for everyone to argue over specifics.

kazinator 10y ago

The best "Shift+Reload" refresh I've managed to get out of this page from where I'm sitting, in Firefox 48.0.x, according to its Network Console, is around 360 ms. It doesn't beat this HN discussion page by a whole lot, and this has actual content, which is dynamic.

adrianpike 10y ago

2.43s TTFB for me - nice and fast once that happened, but that TTFB is a killer.

disruptalot 10y ago

Interestingly, Google has been going after this with AMP (accelerated mobile pages): https://www.ampproject.org/ https://www.ampproject.org/ It enforces a set of rules to accelerate web pages. These rules can be used to validate your pages.

traviswingo 10y ago

This took almost 10 seconds to load for me...

AOsborn 10y ago
Around the same for me, running fibre in New Zealand. Long delay before content even began loading - as mentioned in other comments, would likely have been a non-issue if a decent CDN was used.
- andai 10y ago
  I'm curious, how much benefit is there to having a fibre connection in NZ except for NZ websites? What's the max speed?

traviswingo 10y ago

This took almost 10 seconds to load for me...

edpichler 10y ago

All being on the html, and doing less external css improve speed? How much? Is it worthwhile?

cyberferret 10y ago

Interesting exercise, in an age where web pages are now bigger than most business applications I used to use in the early days of DOS/Windows. Note: Just checked, and even a simple Medium blog post page won't fit on one those old 3.5" floppy disks.. EDIT: To stay on topic - the OP's page loaded instantly for me here in outback Australia...

leesalminen 10y ago

Ehh, I just got 10.91s load time in Chrome 53 from Colorado, USA. Image of Chrome Dev Tools: https://reportcards.scdn3.secure.raxcdn.com/assets/uploads/files/company/452e0fdee5904b10046de11c0f7bfccb.png https://reportcards.scdn3.secure.raxcdn.com/assets/uploads/f... As an aside, does HTTP/2 provide any benefit for a single HTML file with no external assets?

niftich 10y ago
Nope. If you're done in one HTTP round-trip, your HPACK state has to push brand-new headers, you benefit nothing from server-side push (if it's even enabled), there's nothing to pipeline, so don't benefit from multiplexing and head-of-line blocking is a non-issue.
PunchTornado 10y ago
nope, it doesn't
toast0 10y ago
http/2 implies ALPN (but you can also do ALPN with http 1.x), which many browsers use as a flag to enable TLS Fast Start, and save one round trip.
mrb 10y ago
HTTP/2 header compression is one benefit that helps even it you have just 1 request.
- niftich 10y ago
  I want to benchmark this, because intuitively I disagree. The HPACK spec is a pretty easy read [1]. There is a static, hardcoded table that contains most of the HTTP header names, and even some common predefined KV pairs. You save some bytes on the wire if your header's name or value is one of these entries; the header name will essentially always will be in the static table. But for names and values that aren't in the static table, you have to put them into the dynamic table and encode them using either the integer packing or the huffman code. The client has to decompress these, of course. On future requests, you have some leftover state in your dynamic table so future 'duplicate' headers are packed, and take up very little space. But for the first (ever) HTTP request-response pair, you have to trade ALL the headers in "full". So the true benefits of the dynamic table don't kick in. [1] https://http2.github.io/http2-spec/compression.html#header.encoding https://http2.github.io/http2-spec/compression.html#header.e...

baristaGeek 10y ago

I can see in the source code that you're expressing all dimensions in terms of ems and %s. A technology such as Bootstrap will always be the way to go; however, could you tell us a little bit more about how you did this? How did you ensure that it looks good not only on your screen but on any screen? I know people are saying it has some errors on certain mobile devices, but that's still some pretty good job manipulating CSS properties.

Scarbutt 10y ago
A technology such as Bootstrap will always be the way to go What? Why?
- baristaGeek 10y ago
  Bootstrap was just an example. It could Bootstrap, Materialize, W3.CSS, etc. The point is that it's much more convenient to reuse code from a framework, because it's better to sacrifice file size for fast iteration and functionality.
  - mikekchar 10y ago
    There is always a tipping point. We tend to use Bootstrap a lot at work for the reasons you mention, but you can pretty quickly get to the point where your CSS is complex enough that you would have been better off doing it from scratch. All frameworks are like that -- you trade off initial convenience for design constraints. When I'm doing my own projects I always write my CSS by hand because it ends up less complex in the end. I don't need to see pretty things up front like my corporate customers do.

jlmorton 10y ago

I hate to be negative, but what really is the point of this? That a simple webpage without any content can be fast? Of course it can. Is it desirable to inline your CSS, "like a boss?" Maybe if you have one single web page. What if you have dynamic content and your users intend to browse more than one page? With externalized CSS, that is all cached. Same with images. If I'm building a web application, I certainly do not want inlined images. I want those on a CDN, cached, and I want the page to load before the images. Not only is this not particularly useful advice, it's bad advice.

KirinDave 10y ago
It also seems somewhat antiquated. As service-worker comes online we can... do a lot more with a more naive <link> method.
- bmon 10y ago
  Not to mention the improvements in http2.
- kevin_thibedeau 10y ago
  It is relevant for resource limited IoT devices. It can be a struggle to get embedded web sites running fast using modern frameworks. Throw in TLS with large keys and you enter a whole new world of slow where it pays to shave off every byte possible.
simbalion 10y ago
the guy says he's not an idiot then brags about spending $30 per month on a VPS (idiot), for a single-page static HTML website with all inline-code (idiot+1). It's not being negative to point out the glaring flaws in a person's statements. My assumption is the entire thing is an advertisement for that hosting service.
- mikepurvis 10y ago
  Also, whether the VPS has an SSD or not is totally irrelevant— if you really were serving a single page it would be cached in the memory of your webserver. (Or better yet, serve the thing off S3 and let Amazon be your CDN.)

patmcguire 10y ago

Took about 15 seconds to load for me...

idlewords 10y ago

I was a fast webpage.

dredmorbius 10y ago
Did you play tag as a kid?

codygman 10y ago

Maybe a lot of people are hitting it, but this webpage loaded slowly for me.

fsiefken 10y ago

What an arrogance, the page is done with me? I done with the page yet. I can get the same page much faster by putting the png in an inline svg, strip the source of unnecessary whitespace and returns, serve brotli (or sdhc compressed pages) with firefox, chrome and opera dynamically... or even just do the decompression inline with javascript. Might save another 20% https://github.com/cscott/compressjs https://github.com/cscott/compressjs

mbrock 10y ago
... With what are you going to compress the compression library?
- fsiefken 10y ago
  Brotli or Gzip on server. But you are right, in my enthousiasm I overlooked those bits!

jayess 10y ago

His affiliate link for VPS service has its cheapest option priced at $25 a month. You can get a nice little VPS for static hosting on SSD from digital ocean for $5 a month. $6 a month with backup.

r3bl 10y ago
You can go even cheaper. Time4VPS offers you 2 cores (compared to one on DO), 80 GB SSD (compared to 20 on DO), 2 TB bandwidth (compared to one on DO), and 2 GB of RAM (compared to 512 MB on DO) for 3 euros (3.36 dollars). 1 additional euro for daily and weekly backups. Started renting one just two days ago, so I can't really guarantee that it's reliable, but it was recommended to me by a friend who's renting it for over 100 days now without any downtime. [1] https://www.time4vps.eu/pricing/ https://www.time4vps.eu/pricing/ (or, if it sounds good and you want to use my referral link: https://billing.time4vps.eu/?affid=992 https://billing.time4vps.eu/?affid=992)
- rocky1138 10y ago
  CloudAtCost works perfectly for me. It's a one-time fee for VPS' and they're always having sales. Use my coupon code to get 50% off any CloudPRO hosting: e6a8yWuhA4 https://cloudatcost.com https://cloudatcost.com
- time4vps 10y ago
  Actually for VPS nodes we use SSD cached 6 x 1200 GB 10k RPM SAS RAID6 storage.

halayli 10y ago

Your page can be very fast and uses minimal resources and is hosted in a good place. But you always gotta watch out for proximity to user, time to first byte and dns resolution time. Perceived speed is highly affected by those. It took 2 seconds to load the page on a fresh ec2 box: time_namelookup: 0.061 time_connect: 0.100 time_appconnect: 0.223 time_pretransfer: 0.223 time_redirect: 0.000 time_starttransfer: 1.935 ---------- time_total: 2.066

smegel 10y ago

> I make no external calls, everything needed to load this page is contained in the HTML. Wont that make your webpage load slower?

bdcravens 10y ago
That one file, but presumably it's loading assets that would be the same total size if they were split. Loading 100k from one source is faster than the same aggregate size from multiple connections.
- smegel 10y ago
  Except if you only need the first 50k to render the page, and can wait for 50k of Javascript to come later, your page is going to display a lot faster. Standard technique. > Loading 100k from one source is faster than the same aggregate size from multiple connections. Usually doing things in parallel is faster than doing them serial. That's why HTTP2 loads slower than HTTP1 - you are sucking everything through single TCP pipe, even though it is multiplexing within.

KerryJones 10y ago

"Faster than 100% of tested sites" https://tools.pingdom.com/#!/ehdlhb/https://varvy.com/pagespeed/wicked-fast.html https://tools.pingdom.com/#!/ehdlhb/https://varvy.com/pagesp...

ivanhoe 10y ago

For speed optimization it's really important to always fine-tune for you particular use case and apply some common sense. For instance, inlining everything as suggested here is faster only if you expect visitors to open just that one page and bounce away, so browser caching is not helpful. Consequently, it's a very good tip for e.g. landing pages, but it makes no sense at all to serve pages that way to your logged-in users.

cm3 10y ago

If it's really all static, you can bundle it into a static Mirage unikernel image with https://github.com/mirage/mirage-seal https://github.com/mirage/mirage-seal

gravypod 10y ago

I've always wanted to play with putting /var/www into a ramdisk for PHP/html stuff. Would be much faster loading since it's all just text in the end of the day. Completely cut out the bottleneck of SSd/HDD

riboflava 10y ago
If you own the hardware I imagine much of your PHP/html stuff will be served from the file system cache much of the time so you probably wouldn't see much benefit...
- gravypod 10y ago
  The idea would be to do it in an ultra-minimalist setting on a VPS (something under 256MB of ram).
  - detaro 10y ago
    I don't think it would do much there either: If it fits in your left-over RAM, then it's probably in the disk cache. If it doesn't, then you can't create a RAM disk large enough. It might help with latency for the long-tail of data that isn't used very often and thus maybe replaced in the cache by other data, but on the other hand the OS probably had a reason to replace it and forcing it to stay in RAM might slow everything down.
girvo 10y ago
You'll likely have better luck configuring php-fpm and the OpCache properly, as they are going to be doing basically what you're proposing anyway, and for the OpCache it's even nicer as it avoids reparsing the code
- gravypod 10y ago
  Yea I've already set those up but I don't think opcache handles random text/html/js files. Only php files. I could be wrong.

matt_wulfeck 10y ago

I think it feels fast because it loads at once, but I'm actually not getting very impressive results programmatically if you measure how long the entire TCP transaction takes (which is what I consider page loading): # Both DNS records are cached before request >>> print requests.get('https://varvy.com/pagespeed/wicked-fast.html').elapsed.microseconds 226515 >>> print requests.get('http://www.google.com').elapsed.microseconds 92027 Even google.com (92 ms) is about 250% faster than OP (226 ms) to establish connection, read all of the data, and close.

paulddraper 10y ago
But what's 130ms? Okay, okay, it "matters". But it's nothing compared with the 3s to load all the JS and CSS and the subsequent sluggishness as 20 analytics scripts are loaded and processed.
kalden_ 10y ago
Where the time goes is the TLS handshake, which is not here when loading cleartext Google.

usaphp 10y ago

> "My images are inlined into the HTML using the base64 image tool, so there is no need for the browser to go looking for some image linked to as an external file." This does not work in most cases when you use big images. From StackOverflow answer [1]: "It's only useful for very tiny images. Base64 encoded files are larger than the original. The advantage lies in not having to open another connection and make a HTTP request to the server for the image. This benefit is lost very quickly so there's only an advantage for large numbers of very tiny individual images. " [1] - http://stackoverflow.com/questions/11736159/advantages-and-disadvantages-base64-image-encode http://stackoverflow.com/questions/11736159/advantages-and-d...

combatentropy 10y ago
> This benefit is lost very quickly so there's only an advantage > for large numbers of very tiny individual images. In which case maybe it would be better to use sprites?
- usaphp 10y ago
  I don't know, I hate dealing with sprites, it just not worth it in my opinion, the time you spent on every edit...
  - brazzledazzle 10y ago
    If you're using photoshop you can create a PSD that sources other PSDs and if I remember right create an action that generates the exported image so you could automate things quite a bit if not entirely.
0xcde4c3db 10y ago
Furthermore the image used is one that compresses uncommonly well with PNG (small palette, large chunks of solid color). I think the vast majority of 350x400 images would be at least 10x larger unless they're deliberately composed in a similar style or are JPEGs with the quality turned way down. I tried to create an SVG version to see how an SVGZ would compare, but evidently I'm too crap at Inkscape and kept screwing it up.

jordache 10y ago

This simple webpage was barely faster than hacker news' list view...

kelvin0 10y ago

Examples of fast pages: http://www.3riversstadium.com/index2.html http://www.3riversstadium.com/index2.html http://www.pmichaud.com/toast/ http://www.pmichaud.com/toast/ http://home.mcom.com/home/welcome.html http://home.mcom.com/home/welcome.html

tonybaroneee 10y ago
Lol, thanks for the Three Rivers throwback! (Pittsburgh native here)

deleted 10y ago

[deleted]

debacle 10y ago

In an ad-free Internet, many more pages would be this fast. Alas.

userbinator 10y ago

A good sequel to http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ , which is probably too understyled for most people.

unexistance 10y ago
it's the perfect style for a wall of text tho :D
wingless 10y ago
I prefer http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
- dredmorbius 10y ago
  For some reason, I'm a fan of this one: http://codepen.io/dredmorbius/full/KpMqqB/ http://codepen.io/dredmorbius/full/KpMqqB/
- Retr0spectrum 10y ago
  https://bestmotherfucking.website/ https://bestmotherfucking.website/
danneu 10y ago
http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
erichocean 10y ago
Ah, the DJB[0] look. Good times, good times. [0] Example: https://cr.yp.to/highspeed.html https://cr.yp.to/highspeed.html
- Annatar 10y ago
  Indeed. Back to the roots!
mrweasel 10y ago

begriffs 10y ago

OP has certainly nailed Hacker News psychology. My old coworker called the technique "inferiority porn." Titles like "the secretly terrible developer" or the closing statement of this particular article: "Go away from me, I am too far beyond your ability to comprehend." As many people have pointed out there are faster methods of static hosting through a CDN, and many of the techniques of this site are inapplicable for larger sites. But A+ on the marketing.

brazzledazzle 10y ago
I probably sound like I'm tooting my own horn but it definitely felt really contrived to me. I upvoted it because of the comments containing better tips or caveats provided for the good ones.
trymas 10y ago
I hate this trend. IMHO there is mainly one way to get attention - it's to get (great and instant) emotion from the user. You can give good emotions or bad emotions. Personally, I think, that to create a good emotion takes much more effort than to create a bad one. The website/product can say how great am I, but it will not 'click' as instantly as someone telling me I am a dumb baby and I suck [0][1] or I am not superior mere mortal baboon [2], for which most people will get instant rage and will start flame wars in whatever comment section, as there "is no such thing as bad PR". Most popular writer/bloggers in my country have created these dipshit arogant characters (I tend to believe that they are "normal" people, but they clearly know what sells) who always say that they are richer, smarter and better than you. They create stories about "cheap restaurant breakfast for 60€" and so on, though the most interesting thing is that people buy their shit and then rage on whatever websites about how dared the writer call them a dumbass homeless bum. [0] https://www.youtube.com/watch?v=0nbkaYsR94c https://www.youtube.com/watch?v=0nbkaYsR94c [1] https://news.ycombinator.com/item?id=12448545 https://news.ycombinator.com/item?id=12448545 [2] https://varvy.com/pagespeed/wicked-fast.html https://varvy.com/pagespeed/wicked-fast.html
andreareina 10y ago
I'd say that the general idea of watching out for external and/or bloated resources is absolutely applicable for larger sites. Media sites are particularly egregious: not only does the js take the lion's share of what's transferred, rendering of the content I'm interested in typically blocks until everything is downloaded and processed.

natmaster 10y ago

A lot of this stuff is outdated now: https://news.ycombinator.com/item?id=12448539 https://news.ycombinator.com/item?id=12448539 For instance, delivery one giant JS/CSS file is now bad because it is harder to cache, since HTTP/2 removes the overhead of multiple requests there is no downside for many files.

heavymark 10y ago

This is odd. Clearly anyone can make a lighting fast page by making a single page since then you can have css inlined versus needing to link to css style sheets with multiple pages, and of course not having javascript would make it faster, but thats a requirement for most all typical sites these days, and loading images that way is nice for hackers but not for real people using cms's by common people and clients. Also paying $25-35 for hosting is not very bright since you can get a $5 digital ocean server ssd, not shared, that would load this particular page just as fast if not faster.

zodvik 10y ago

Dlang forum (with dynamic content) is insanely fast! https://forum.dlang.org/group/general https://forum.dlang.org/group/general

jbb555 10y ago
Yeah, this is the site that made me realize just how awful so many other sites are. It's very fast indeed, and has no useless graphics or javascript effects, but is 100% functional and looks great.
Shorel 10y ago
I was thinking of exactly the same website. That's a very fast page, that actually does something.

DigitalSea 10y ago

Easy to make a website fast when it has nothing on it. In the real world a site isn't this light. It has images, analytic scripts, stylesheets, fonts, Javascript (jQuery at the least). Using a combination of a CDN and realistic caching, I can make a fast website as well.

mbrock 10y ago
Real world sites don't need all that stuff.
- mxuribe 10y ago
  Many real world sites have strategic/marketing partners who ask to add analytics scripts so that they can capture metrics for their partnerships with you/your real world site...And if your site has been optimized, but their servers (which serve up these 3rd-party/analytics scripts) aren't as optimized, guess where the slow down comes from? And senior leaders don't always enforce these partners to confirm to internal performance standards. So, yes, unfortunately real world sites DO have - or at least are forced to have - stuff like that.

nine_k 10y ago

I make my personal pages fast this way since last century. Probably a huge amount of people did the same. It's pretty obvious. When you need fancy graphics (a static photo album), things become less easy: you e.g. may want to preload prev / next images in your album to make navigation feel fast. Things become really tricky when you want interactivity, and in many cases users just expect interactivity from a certain page. But client-side JS is a whole another kettle of fish. When things become ugly is when you want to extract some money from page's popularity. You need to add trackers for statistics, ad networks' code to display the ads, and complicate the layout to make room for the ads, placing them somehow inobtrusively but prominently. This is going to be slow at worst, resource-hungry at best. (Corollary from the above: subscription is more battery-friendly than an ad-infested freebie.)

Cozumel 10y ago

Inline CSS shudder

philip1209 10y ago

I'm curious - would this page see any speed improvement with HTTP2? I ask because the new protocol seems optimized for the exact opposite of this - many asynchronous fetches.

guidedlight 10y ago
It's already using HTTP/2.

HugoDaniel 10y ago

Inline all your CSS and you are forcing all your users a full reload whenever you need to change/add something. This can be tricky if your page grows in complexity/size and you need to change something. Please, when is more appropriate don't inline your CSS and prefer to take advantage of cache.

mbrock 10y ago
Well, the entire page is 7 KB.

stretchwithme 10y ago

Some pages have big egos.

padmabushan 10y ago

By the site's own admission, this page's visible content not prioritized. I would have knelt before it if not for that flaw!!

caub 10y ago

what is that `.unit{display:inline-block;display:inline;zoom:1` (the stars..)

brainless 10y ago

Honestly? I am surprised to see this page with such high vote on the first page. If you really wanted a fast "static" page, you would put it on a CDN. All you wanted to do is put a marketing link in your last paragraph.

sigi45 10y ago

Simple text, few links to 'tipps', a little bit of base64 images without any deeper knowledge. For example there was a website which showed the impact of base64 images just a few weeks ago (when i remember correctly) But it has a referral link. Thats probably the point of this page.

spion 10y ago

I can't wait for half of this advice to become obsolete with HTTP2

jlebrech 10y ago

now we need a framework that targets that standard. as very fast dumb client.

boubiyeah 10y ago

Well, not including any javascript was one massive shortcut :)

GrumpyNl 10y ago

Its back to 1985

pilif 10y ago

> my hard drives are SSD Of course that's entirely irrelevant as the page completely fits into the ram of the server (or even the CPUs cache for that matter)

pikzel 10y ago

Loaded in about 15-20 seconds for me. Even if you think medium.com is slow, they can handle the sudden extra load that your site couldn't.

pacnw 10y ago

Ok I'll bite as this is near and dear to my heart. Instead of showing me a fast webpage with a minimal content, tell me how to make my tons of css and js load fast! That's a real problem.I deliver web apps, and interactivity is a must. IMO, the real problem with the web is the horrendous design choices and delivery of very popular news and daily reading sites (ahem cnn) where subsequent loads of ads and videos start shifting the page up and down even when you have started reading something. Let's address that problem first!

hasenj 10y ago
> tell me how to make my tons of css and js load fast I went to the doctor and he told me to lose weight. What a fatphobe! He should have told me how to eat everything I desire without any bad side effects! /s

INTPenis 10y ago

A VPS is shared hosting to me, it's just an instance on a shared system. Shared hosting used to mean a folder on a shared web server but I consider sharing resources in a hypervisor equally shared. ;) If they truly wanted speed through control of resources they would have used bare metal. But yeah, the website is easy to optimize when it's simple, the hard part, often outside of your control, is DNS and actual connection handling. Many have already mentioned CDN so there's that. But you also don't know what kind of firewalls are being used, or switches, or whatever else may impact your site. Why not just do what others have suggested and put it all in the cloud so that Amazon can worry about balancing your load.

mxuribe 10y ago

Ego aside, this kind of site (and associated commentary on the suggested tactics) i feel is helpful.

xiaoma 10y ago

It took me several seconds to load (compared to about 1-1.5 for HN)... this page needs better hosting for Asian users.

SunnyDoll 10y ago

Here lonely girl looking for fun with the guys http://bit.ly/2cl5OQg http://bit.ly/2cl5OQg

mashedcode 10y ago

You can do much better! What's about html-muncher for css class minification? Those png are not fully optimized and an SVG would probably even be smaller too and even if it isn't in the case of the orange one it would have could be compressed much better. Making use of data: urls might look good on first visit but honestly with HTTP/2 just push in the resources and externalize them. Because seriously cache for 300 seconds? How about offline support anyways? It's 2016. Furthermore where's my beloved Brotli support? By the what's about WebP support? Ok TBH if the PNG would be properly optimized WebP would actually not beat the file size but hey: "It isn't" So even though it's only this tiny static page there's still so much wrong with it. Please improve! By the way what's about QUIC?

mashedcode 10y ago

You can do much better! What's about html-muncher for css class minification? Those png are not fully optimized and an SVG would probably even be smaller too and even if it isn't in the case of the orange one it could be compressed much better than a PNG. Making use of data urls might look good on first visit but honestly with HTTP/2 just push in the resources and externalize them. Because seriously cache for 300 seconds? How about offline support anyways? It's 2016. Furthermore where's my beloved Brotli support? By the what's about WebP support? Ok TBH if the PNG would be properly optimized WebP would actually not beat the file size but hey: "It isn't" So even though it's only this tiny static page there's still so much wrong with it. Please improve! By the way what's about QUIC?

jrmacmillan 10y ago

How dare HN spread this kind of speed-shaming hate slander! ;) We need to see the bloaty-positive alternative, not all websites have to be Google models.