You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 line
8.6 KiB
HTML

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!doctype html><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>The 250kb Club</title><meta content="An exclusive membership for web pages presenting themselves in no more than 250kb." name=description><meta content="Norman Köhring" name=author><meta content="The 250kb Club" name=DC.title><link href=https://koehr.in rel=author><link href=/favicon.png rel=icon type=image/x-icon><link href=https://250kb.club/rss.xml rel=alternate title=RSS type=application/rss+xml><style>body{font:16px/1.4 sans-serif;margin:0;padding:0;background:white;color:#333}body>footer,body>header,main{max-width:calc(720px - 2em);width:calc(100% - 2em);margin:0 auto;padding:0 1em}#main-footer{border-top:1px solid lightgrey;margin:3rem auto 0;font-size:85%}main{margin:3em auto}h1{font:small-caps 700 2.2em/1.4 sans-serif;letter-spacing:6px;text-align:center;margin-top:1.2em}h2{font:small-caps 700 2.0em/1.4 sans-serif;letter-spacing:5px;text-align:center}p{text-align:justify}a,a:visited {color:currentColor;text-decoration:underline}#donate,label,select{padding:.25em .5em;border:2px solid gray;background:none;color:currentColor;font:inherit}ol{list-style:none;padding:0}li{margin-bottom:1em;background:#0002}aside{position:relative;display:flex;flex-flow:row wrap;justify-content:flex-end;gap:.5em}.hidden{visibility:hidden}.big{font-size:1.5em}.center{text-align:center}#info-toggle{display:none}#info-toggle ~ label{text-align:center}#info-toggle ~ label > .info-close{display:none}#info-toggle:checked ~ label > .info-close {display:inline}#info-toggle:checked ~ label > .info-text {display:none}#info-popup{display:none;position:absolute;top:2.5em;left:-1em;width:calc(720px - 2em - 6px);max-width:calc(100vw - 2em - 6px);padding:0 1em;background:#fff;border:3px solid #DDD}#info-toggle:checked ~ #info-popup {display:block}.entry{display:flex;flex-flow:row nowrap;justify-content:space-between;padding:.5em .5em 0;height:2em;line-height:2em;font-size:1.3em}.entry > .url{flex:1 1 auto;width:70%;overflow:hidden;text-overflow:ellipsis}.entry > .open-page,.entry > .ratio,.entry > .size{flex:0 0 auto;width:10%;text-align:right}.entry > .open-page img{max-height:32px;margin-top:4px}.entry-ratio-bar,.entry-size-bar{height:0;margin-bottom:2px;border-bottom:2px solid}.entry-ratio-bar.highlighted,.entry-size-bar.highlighted{border-bottom-width:4px}.entry-size-bar{border-bottom-color:#e44;width:calc(var(--size)/256 * 100%)}.entry-ratio-bar{border-bottom-color:#56b;width:var(--ratio)}#pager{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center}.badges > img{margin-bottom:-5px}pre{display:block;height:11em;background:#8885}@media (prefers-color-scheme:dark){body{background:#222;color:white}#info-popup{background:#000;border:#444}}</style><body><header><h1>The 250KB Club</h1><h2><a rel="noopener nofollow" href=https://mobiforge.com/research-analysis/the-web-is-doom target=_blank> The Web Is Doom </a></h2><p>Lets do something about it!<p>The <em>250KB Club</em> is a collection of web pages that focus on performance, efficiency and accessibility.<p class=big>Websites in this list must not exceed 256KB <em>compressed</em> size!<p>Yes, compressed size. It makes much more sense because it allows for a lot of text to be transferred without having a big impact on the total size, while the impact of media is basically unaffected.<p>If your pages exceeds 250KB, you might consider <a rel="noopener nofollow" href=https://512kb.club target=_blank>512kB.club</a> or <a rel="noopener nofollow" href=https://1MB.club target=_blank>1MB.club</a>.<p>You can suggest a web page for this collection <a rel="noopener nofollow" href=https://todo.sr.ht/~koehr/the-250kb-club/ target=_blank>via Sourcehut</a> or <a rel="noopener nofollow" href=https://github.com/nkoehring/250kb-club/issues/new target=_blank>via Github</a>. The site will be reviewed and, if applicable, added to the list below. Pages are checked again every week.<p>All entries have their own sub page with additional information. If you want, youcan directly link to it from your page.</header><main id=members-table><aside><div></div><a href=https://ko-fi.com/koehr id=donate rel=noopener target=_blank>Buy me a coffee ☕</a><input id=info-toggle type=checkbox><label for=info-toggle><span class=info-text>How does this work?</span> <span class=info-close>  x  </span></label><article id=info-popup><header><h1>Technical Details</h1></header><p>The values shown in the list are URL, Total Weight, Content Ratio and are updated weekly.<p>Websites listed here are downloaded and analyzed with <link href=https://github.com/macbre/phantomas>Phantomas. The total weight is counted and then the size of actual content is measured and shown as a ratio.<p>For example: If a website has a total weight of 100kb and 60kb are the documents structure, text, images, videos and so on, then the content ratio is 60%. The rest are extras like CSS, JavaScript and so on. It is hard to say what a good ratio is but my gut feeling is that everything above 20% is pretty good already.<p><strong>Disclaimer:</strong> Currently, inline scripts and styles are measured as content due to technical limitations of Phantomas. This will hopefully be fixed soon.</article></aside><ol><li style=--size:222;--ratio:3%><div class=entry><span class=url> <a href=/wondroushealing-com>wondroushealing.com</a> </span><span class=size>222kb</span><span class=ratio>3%</span><span class=open-page> <a href=https://wondroushealing.com rel=noopener target=_blank> <img alt="open wondroushealing.com in a new tab or window" src=/export.png> </a> </span></div> <div class="entry-size-bar highlighted"></div> <div class="entry-ratio-bar yellow red"></div><li style=--size:222;--ratio:1%><div class=entry><span class=url> <a href=/chrisportela-com>chrisportela.com</a> </span><span class=size>222kb</span><span class=ratio>1%</span><span class=open-page> <a href=https://chrisportela.com rel=noopener target=_blank> <img alt="open chrisportela.com in a new tab or window" src=/export.png> </a> </span></div> <div class="entry-size-bar highlighted"></div> <div class="entry-ratio-bar yellow red"></div><li style=--size:236;--ratio:1%><div class=entry><span class=url> <a href=/iain-in>iain.in</a> </span><span class=size>236kb</span><span class=ratio>1%</span><span class=open-page> <a href=https://iain.in/ rel=noopener target=_blank> <img alt="open iain.in in a new tab or window" src=/export.png> </a> </span></div> <div class="entry-size-bar highlighted"></div> <div class="entry-ratio-bar yellow red"></div><li style=--size:239;--ratio:1%><div class=entry><span class=url> <a href=/www-vmaxleclub-com>www.vmaxleclub.com</a> </span><span class=size>239kb</span><span class=ratio>1%</span><span class=open-page> <a href=https://www.vmaxleclub.com/ rel=noopener target=_blank> <img alt="open www.vmaxleclub.com in a new tab or window" src=/export.png> </a> </span></div> <div class="entry-size-bar highlighted"></div> <div class="entry-ratio-bar yellow red"></div><li style=--size:242;--ratio:2%><div class=entry><span class=url> <a href=/cronokirby-com>cronokirby.com</a> </span><span class=size>242kb</span><span class=ratio>2%</span><span class=open-page> <a href=https://cronokirby.com rel=noopener target=_blank> <img alt="open cronokirby.com in a new tab or window" src=/export.png> </a> </span></div> <div class="entry-size-bar highlighted"></div> <div class="entry-ratio-bar yellow red"></div><li style=--size:250;--ratio:1%><div class=entry><span class=url> <a href=/emman-dev>emman.dev</a> </span><span class=size>250kb</span><span class=ratio>1%</span><span class=open-page> <a href=https://emman.dev rel=noopener target=_blank> <img alt="open emman.dev in a new tab or window" src=/export.png> </a> </span></div> <div class="entry-size-bar highlighted"></div> <div class="entry-ratio-bar yellow red"></div></ol><nav id=pager itemscope itemtype=http://schema.org/SiteNavigationElement><span> <a title="previous page" href=https://250kb.club/page/4/>🠔 prev</a> </span><span> — 5 / 5 — </span><span> </span></nav></main><footer id=main-footer><p>Made with ♥ for a performant web by <a rel="noopener nofollow" href=https://koehr.in target=_blank>Norman Köhring</a>. Inspired by <a rel="noopener nofollow" href=https://uglyduck.ca target=_blank>Bradley Taunt</a>'s <a rel="noopener nofollow" href=https://1MB.club target=_blank>1MB.club</a> <br> The code of this page is open source. You can find it on <a rel="noopener nofollow" href=https://github.com/nkoehring/250kb-club target=_blank>Github</a> and <a rel="noopener nofollow" href=https://sr.ht/~koehr/the-250kb-club/ target=_blank>Sourcehut</a>.</footer></body><script async data-goatcounter=https://250kb-club.goatcounter.com/count src=//gc.zgo.at/count.js></script>