{"id":17344856,"url":"https://github.com/meerita/hnredone","last_synced_at":"2026-02-02T07:32:10.619Z","repository":{"id":77241884,"uuid":"205797745","full_name":"meerita/hnredone","owner":"meerita","description":"Hacker News frontpage redone for performance demonstration using UCSS framework","archived":false,"fork":false,"pushed_at":"2019-09-02T15:16:35.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-06T02:12:13.946Z","etag":null,"topics":["functional-css","hacker-news","performance-testing"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meerita.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-02T07:11:59.000Z","updated_at":"2019-09-02T15:17:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"fb19a7e3-4e33-412d-9839-67e7c935806f","html_url":"https://github.com/meerita/hnredone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/meerita/hnredone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Fhnredone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Fhnredone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Fhnredone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Fhnredone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meerita","download_url":"https://codeload.github.com/meerita/hnredone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meerita%2Fhnredone/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263061400,"owners_count":23407604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["functional-css","hacker-news","performance-testing"],"created_at":"2024-10-15T16:27:23.920Z","updated_at":"2026-02-02T07:32:05.598Z","avatar_url":"https://github.com/meerita.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hacker News Redone\n\nThis project was made to demonstrate the power of the functional CSS and proper HTML techniques on Hacker News frontpage.\n\nEverything started with this post: https://news.ycombinator.com/item?id=20854214 that talks about how good is that HN wasn't redesigned due the OP was browsing it with slow connection. I though I could make HN even faster without changing the essence of the design too much. So I decided to re-do Hacker News using the [Utilitarian CSS Framework](https://github.com/meerita/utilcss) to output the minimum CSS and test both performance gains in HN on a local server.\n\n## What we want to test\n\nHere are the things tested:\n\n1. Loading speed of resources\n2. Rendering average\n3. Painting Average\n4. Comparison of sizes\n5. Total build time\n\n### Results\n\nAverage results for 15 tries, same webserver, machine\n\n|   | Original | Hacked |\n|:-:|:-:|:-:|\n| Load | 50,77ms | 17,9ms |\n| Render | 59,3ms  | 22ms |\n| Painting | 14ms | 6ms |\n| Requests | 7 | 2 |\n| Finish | 270,2ms| 83,7ms |\n\nThis by no means is perfect, but the idea is to demonstrate that even no CSS can be slower (the browser uses its own CSS and it's slow by default too).\n\n## Approach\n\nFirst, we will have both projects in different folders and we load them into a webserver, and do several performance tests to get the averages.\n\nThe hacked version will contain these main changes:\n\n1. 0 images used. No blinking effect. We will rely on base64 or embebed SVG when possible.\n2. No external stylesheet. We will print the CSS on the head of the document.\n3. The HTML will be redone using different techniques\n4. We will rely on CSS-grid, Flex and other things. HN audience is l33t.\n5. Must look nice on Lynx.\n\n## Notes\n\nThe usage of images in HN makes the page load and render slower in average. You can see this effect: first paints the entire page, then repaint happens with all the small arrows. The embebed one doesn't have repaints. It's way faster.\n\nSince the stylesheet is less than 1545 bytes, I added it to the HEAD of the document. This increases the loading, rendering time by a lot due the high priority of the queue with tcp connections. The trade off is minimal and you can build the entire HN with that CSS instructions.\n\nCSS grid made the HTML reduced and more readeable, for example, we don't rely anymore on tables under tables. Also, with the CSS at the HEAD, we will always be able to render the page properly. All HN audience has modern updated browsers.\n\nYou can really enjoy HN on Lynx. The [current version is not good on lynx](https://i.imgur.com/giUTzH0.jpg) but [the hacked one looks amazing](https://i.imgur.com/1MTT4wz.jpg).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeerita%2Fhnredone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeerita%2Fhnredone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeerita%2Fhnredone/lists"}