15 ms·
After 1 minute on my modem (2016)
- waterhouse23 10y agoThis is awesome, and actually a pretty neat way of evaluating websites. A surprising number of people are still on low bandwidth connections, while it's probably not reasonable to optimize for them, it's at least worth considering that market occasionally.
- adrianN 10y agoIf you optimize for people on low bandwidth connections, you automatically also optimize for those with limited mobile data. And as a bonus, your website becomes faster for everybody with a fat pipe too.
- vortico 10y ago"Optimize" is somewhat the wrong word. "Straying from temptation" would be more accurate, since all garbage on webpages is placed there by a website manager's overzealous want to increase popularity or profit.
- rtpg 10y agoI understand some people don't use things like cloud software, but the internet isn't just blogs and newspaper websites. Sometimes styling is added to make web app UX better. Sometimes Javascript is used so that, even if the first load takes more time, subsequent actions will use less bandwidth. Sometimes more stuff is put on the page because 95% of users want that information to also show up. This is obvious and pedantic, but also counters half of the comments on these sorts of these stories
- vortico 10y agoMy point especially applies to web apps. I just loaded facebook.com, and it took 228 requests, 8,825 KB, and 17.0 s. Scrolling through the page is laggy while a stressful amount of muted videos start playing and mouse-hover events start firing. Compare this with mbasic.facebook.com, which is 22 requests, 107 KB, and 1.48 s. There are some small UX problems with basic HTML Facebook that I would recommend they improve on (placement of links/buttons, omnipresent header), but overall it is a much better experience for me since I feel much more in control. Same with basic HTML Gmail vs full Gmail. My point is that it is absolutely possible to not give in to shitty bloated web trends driven by the expectation to increase popularity, while making a quality, profitable website.
- semi-extrinsic 10y ago> mbasic.facebook.com Mind blown. It even has messaging that works without having to install privacy-invading Messenger. You have just improved my facebook UX by a country mile.
- Nexxxeh 10y agoThe combination of mbasic for Messenger, and m for normal Facebook browsing, is fine on Android. I don't install the awful FB apps on my phone any more, and I'm a fairly heavy Facebook user.
- rtpg 10y agombasic.facebook.com is nice for when you want to save the bandwidth, but the experience is nowhere near as nice as the main website. It only loads the first 2 stories or so, requiring you to click forward many times. It also downscales all the media down, making it hard to appreciate a lot of things. The main facebook site makes a lot of media requests to preload the things you're going to start reading immediately. the main facebook site doesn't attempt to scale to the connection speed, which is unfortunate, but it offers a much better experience for those who have the bandwidth to pull in the pictures. Especially for the primary use case (scroll a bunch to see a bunch of people's stuff)
- vortico 10y agoI can see 8 stories on each page on mine, but I agree the images are smaller than I'd like. You have to click the image to get to the image page and then click "View Full Size" to see the full image. But with vimperator, it's much faster to get to that point than it sounds. On the other hand, simply clicking on videos delivers the full raw video, no slow Facebook video player/wrapper needed. I wouldn't want Facebook to scale things to my bandwidth. That gives me less control over what I see because the system is making mostly arbitrary decisions for me.
- ioquatix 10y agoI fought so hard for this at one of my current customers. But, no, we have Mbyte+ image maps for our pricing plan selection pages.
- tribby 10y ago>while it's probably not reasonable to optimize for them it's not an optimization, it's a best practice on the web. server side render and use javascript for progressive enhancement.
- BuuQu9hu 10y agoThe web has moved on from progressive enhancement. Current practise is client-side HTML rendering.
- zacmps 10y agoUnfortunately.
- chalupa-man 10y agoI find it really fortunate. SPAs can use much much less data for the same content, which is a big plus when you're on a data-limited connection, as most users in the developing world are. If you spend much time on a site they also demand less CPU and thus less battery life (vdom updates are less intense than new page renders), which helps when you're on a mobile connection, and they feel much more responsive when you're on a high-latency connection, which you are again if you're in the developing world or on mobile. Server-side rendering feels like getting a faster and lighter initial load in exchange for heavier, slower, more battery-draining usage overall.
- Gracana 10y agoThat's fine for SPAs, what sucks is how many other sites are built that way. :/
- minitech 10y ago> Server-side rendering feels like getting a faster and lighter initial load in exchange for heavier, slower, more battery-draining usage overall. If and only if you do the SPA right. Compare Twitter (slow to load, slow to interact with, battery-draining, issues with maintaining scroll position, and all of these get worse the farther you scroll down) to the SPA version of https://mobile.twitter.com/ https://mobile.twitter.com/ (fast to load and interact with) to the static version of Mobile Twitter (even faster, no infinite scroll, works on Dillo).
- superflyguy 10y agoTo be fair, the market is considered occasionally but a for-profit site isn't going to go out of its way to cater for those people with little money.
- masklinn 10y agoLow bandwidth is but one component, the other two are delay and packet loss. I spent the holidays at my parents's, they're hooked to 1024kbps ADSL[0], so theoretical 128kB/s. Effectively it hovers between 80k and 120k which is fine…-ish: the connection will regularly jump to ~7% packet loss and 2000±1000ms ping. Downloading at 80k is one thing, downloading at 80k with 3s round-trip and 1 packet in 15 missing things get much trickier, especially when most pages have a really high number of resources. [0] and nothing better is currently available short of cellular (they do get ok 4G, at least when the weather doesn't screw with it), though they're supposed to get fibre a year or two down the line
- trevyn 10y agoWhat browser is this?
- deathanatos 10y agoThe first few screenshots appear to be Firefox; further down the page is Chrome.
- lokedhs 10y agoThat looks like Firefox.
- truncheon 10y agoUh, the point is that, on a slow connection, everything is going to suck in unpredictable ways, because of server-side bloat, and the trendiness of developers deploying 5MB js libraries. Worrying about whether the browser was recent or supported misses the point. Any browser can suffer these sorts of problems on a 56KB dial-up connection. (3G mobile data is frequently throttled at 128KB by popular ISP's, btw)
- frumiousirc 10y agoUh, reading in a whole slew of things into a simple question is missing the point.
- 2bluesc 10y agoCould probably automate this on a Linux VM using netem[0] [0] https://wiki.linuxfoundation.org/networking/netem https://wiki.linuxfoundation.org/networking/netem
- vortico 10y agoIf you use vimperator (http://www.vimperator.org/ http://www.vimperator.org/) on Firefox, put this in your ~/.vimperatorrc so you can disable CSS with the "s" character (and re-enable it with Shift-S). It removes 99% of bullshit from web pages and allows you to read articles the way Tim Berners-Lee intended, guaranteed! nmap s :emenu View.Page Style.No Style<CR> nmap <S-s> :emenu View.Page Style.Basic Page Style<CR>
- kqr 10y agoThanks. This is actually really great. Not only for testing my own web sites, but also for getting rid of a lot of the bullshit on other sites. I'll try to remember I have this shortcut now!
- hf 10y agoNeat, thanks. Works identically with the slightly smaller fork called Pentadactyl (http://5digits.org/pentadactyl/ http://5digits.org/pentadactyl/).
- necessity 10y agoFor me it turns every page completely blank.
- Santosh83 10y agoIs there a significant difference between this function and simply hitting the standard View -> Page Style -> No Page Style menu?
- suhith 10y agoThis is gold. I've seen so many of these, even on websites with lots of traffic. Websites have to be written taking into consideration the way it loads too, especially on mobile data. I've found the Chrome DevTools feature where you can throttle bandwidth comes in super handy for this.
- Laforet 10y agoFor resilience testing I highly recommend Clumsy even if it only runs on Windows: https://jagt.github.io/clumsy/ https://jagt.github.io/clumsy/
- krylon 10y agoWhen I went online for the first time (nearly twenty years ago - time goes by pretty fast!), I did so on 14.4 kbit modem. That was no fun even back then. After a year, I upgraded to ISDN, which was a lot faster (64kbit), but once I got to use a faster line, even ISDN seemed awfully slow. And the trend continues to this day. Once one has a faster connection, one gets used to it in no time. And just like many companies and individuals have solved problems with slow software by throwing more/faster hardware at it, these days we solve the problem of web sites making inefficient use of bandwidth by throwing more bandwidth at it. Which might not even be such a bad thing - I would not like going back to programming in an environment where I have to triple-check every variable to see if I can shave off a couple of kilobytes, either. But even a fast connection gets clogged at times, and even on a 16MBit DSL line, I have seen pages looking broken because the request for getting the CSS timed out or something like that. Maybe taking more care not to waste bandwidth should be considered a form of courtesy. People on slow/saturated lines will thank you for it, and people on fast lines will be amazed at how snappy that website loads. (And of course, there's always trade-offs involved; I do not demand web developers sacrifice everything else to efficient bandwidth usage; but it should not be ignored, either.)
- SubiculumCode 10y agoI remember when I upgraded to a 14.4k modem and boy was I pleased after dialing with a 9600 baud for years.
- keithnz 10y agoI remember 300 baud connections! :) because the "fast" 2400 ones were all in use. Nothing quite like watching characters being drawn at typing speed :) least on IRC it wasn't too bad unless it was a busy channel
- lozf 10y agoBrendan Gregg's "baud.pl" script[0] is great for re-living those nostalgic moments. e.g. find ~ | baud.pl -300 [0]: http://www.brendangregg.com/Specials/baud http://www.brendangregg.com/Specials/baud
- cyrusmg 10y agoI have seen something similar on Ryanair.com - this is why I chose React instead of Angular when I was looking for a new frontend framework
- andygambles 10y agoCurrently only have a 1.2M connection at home. Reveals how bandwidth intensive many website are that simply do not need to be. Ad Blocker is a must.
- jackmoore 10y agoCan someone tell me why SVGs are gigantic while first loading? I often see this even at modern connection speeds.
- vortico 10y agoTwo reasons come to mind: It's likely that the designer providing the SVG logo scales the logo completely arbitrarily, which might be 1000 pixels wide. The CSS `width:10px` in another file hasn't loaded yet, so the <img> tag holding the SVG uses the absolute size of the SVG file. Another possibility is that a flexbox or similar grid system is used, and the container holding the <img> tag is told to stretch its contents to the full width of the flex item. If the content in the following flex item is very large, the SVG will be compressed to the proper small size, but if there is no content loaded yet in the following flex item, the flexbox will stretch just the first item.
- jackmoore 10y agoThanks, looked into it further on my own project and found my specific issue. The svg width and height attributes were missing from my webpack-built bundle even though they were part of the source svg file. The svg loader I was using (svg-inline-loader) was stripping with and height by default.
- shakna 10y agoThey really don't have to be [0]. Usually happens with SVGs whose internal dimensions differ wildly from the display dimensions. e.g. Internal canvas of 1000px x 1000px, display size of 10px. [0] https://oddsquare.surge.sh/10/ https://oddsquare.surge.sh/10/
- HugoDaniel 10y agoBecause people who write SVG's usually don't know about the viewBox property[0]. They just use illustrator to draw the shape and then export it. [0]https://sarasoueidan.com/blog/svg-coordinate-systems/ https://sarasoueidan.com/blog/svg-coordinate-systems/
- therealmarv 10y agoGoogle Data Compression on Chrome helps a lot. At least on HTTP connections. Too bad this does not work for HTTPS sites were the web designers do not test and optimize enough for low bandwidth.
- kalleboo 10y agoOr Opera Mini, which renders pages server-side and sends a minimal representation to your phone. They even managed to convince Apple they're not a browser, so there's an iOS version. In my 56K days, the regular Opera was my browser of choice since it had a very useful toggle for loading images or not (or showing only cached ones, or letting you load them in afterwards without a painful page refresh cycle)
- tracker1 10y agoYou can have a browser, you just can't use your own JS engine for it, only safari's, it also proxies everything through Opera, and delivers a better mobile representation.
- kalleboo 10y agohttps://developer.apple.com/app-store/review/guidelines/ https://developer.apple.com/app-store/review/guidelines/ > 2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript. It reads to me like you're not allowed to use your own HTML renderer either.
- therealmarv 10y agoInteresting. I tested Opera Mini after your comment and it seems kind of "dangerous" for me. It also saves a lot of bandwidth on HTTPS connections so I assume it intercepts and also server rendering those connections. Saves a lot of bandwidth for sure but this is a privacy nightmare.
- jasonlfunk 10y agoI understand the concern. Websites can become too bloated. They can require too many resources or be poorly optimized to reduce bandwidth. But this also seems like complaining about the trouble with driving a horse-drawn carriage on the interstate. Sure, there are lots of people around the world still on low speed networks - just like there are people who still use horses are their primary mode of travel. And maybe there should be a way to accommodate them, but let's not pretend that the advances in website technology are only a detrimental problem that needs to be solved.
- ivan_gammel 10y agoSignificant amount of web requests is now performed via mobile connections, which, depending on a lot of factors, can be as bad as 2G. We don't use modems, of course, but we still need web sites that work on low bandwidth.
- abpavel 10y agotwitter/fb logos are svg, and are rendered at whatever resolution needed. I.E. svg does not have "full scale"
- mntmn 10y agoThis reminds me: Since a while I'm looking for a good configurable proxy solution to clean up/filter the web on my server especially for browsing via old devices (Amiga and such). So I would like to reduce website to their content, stripping all CSS, background images, scripts and such. Any recommendations?
- corford 10y agoSquid can do this easily. Just setup an acl that blocks requests for file extensions you don't want. acl Blocked_extensions urlpath_regex -i "/etc/squid3/blocked.extensions.acl" http_access deny Blocked_extensions The contents of /etc/squid3/blocked.extensions.acl would be something like: \.css$ \.css\?.*$ \.js$ \.js\?.*$ \.woff$ \.woff\?.*$ \.eot$ \.eot\?.*$ \.svg$ \.svg\?.*$ It's also easy to run squid in transparent proxy mode if you want to support older devices that don't let you manually specify a proxy.
- icomefromreddit 10y agoPrivoxy (https://www.privoxy.org/ https://www.privoxy.org/): > Privoxy is a non-caching web proxy with advanced filtering capabilities for enhancing privacy, modifying web page data and HTTP headers, controlling access, and removing ads and other obnoxious Internet junk. Privoxy has a flexible configuration and can be customized to suit individual needs and tastes. It has application for both stand-alone systems and multi-user networks. > Privoxy is Free Software and licensed under the GNU GPLv2. I'm from Bangladesh, my connection is ~256 kbps and my pc is slow (256 RAM and 1.6 ghz), if not by privoxy, i couldn't browse internet.
- pmontra 10y agoThat exoscale screenshot is very similar to what I see with NoScript on a 100 Mb/s connection before I temporarily allow their JS. What's nice about NoScript is that I can turn on their JS but keep turned off the JS scripts from the other sites. Apparently they only use googletagmanager. Ublock doesn't report any blocked script so it's a rare well behaved site.
- nitrogen 10y agoGoogle tag manager is sometimes (often?) used to load every other third-party script, so if you allow gtm to load you'll probably see a bunch more scripts. As a web developer, gtm was the bane of my existence because marketing could change and break the site significantly, while decreasing user privacy and page speed, and the devs could take the blame.
- joeyh 10y agoSince I temporarily have HN's attention with this side blog of mine, can I suggest one simple tweak: Please, please, if your site requires AJAX to work at all, then retry failed AJAX queries. Use exponential backoff or whatever but don't let the AJAX query fail once and the page be unusable. This happens all the freaking time when I'm on dialup, and there's nothing more annoying than having filled out a form or series of forms only to have the submit button break because it used AJAX to do a sanity check and threw an exception because the server timed out after some absurdly short (dialup-wise) period of time while the client was sending the request.
- izacus 10y agoAnd doesn't happen only on dialup either, but tethered and mobile connections while commuting - when most people are using their mobile devices to browse around.
- DerfK 10y agoYeah, found this out the hard way with customers complaining that they hit save, get an error code "0", and then couldn't save again because we had disabled the button after submitting. Side rant: can I take a moment to call out WHATWG for deciding to specify that all networking errors in XmlHttpRequest get status: 0 and absolutely no explanation anywhere in the response object ( see https://fetch.spec.whatwg.org/#concept-network-error https://fetch.spec.whatwg.org/#concept-network-error ), making it absolutely a nightmare to diagnose problems and support our users? I suppose in a world of fail whales and cute cat pics, leaving the user in the dark as to why something broke is now standard practice, but at least in those cases there's something server side to let techs know what's going on, but I get random calls from users complaining about this and the best I've got is that they tried to leave the page while the form was still saving (this triggers the error handler too since it's the exact same code) or their internet connection dropped ever so briefly because the next words out of their mouth when they say that is "but I can view other websites".
- eponeponepon 10y ago
- tomrod 10y agoThis is a fantastic way to assess website functionality. It would drive me insane on day to day use. In all reality, I just want to dump the modern web's approach. CSS, Javascript, you name it. Give me simple HTML and text ads, if you need ads. Give me pictures when I want them, with descriptive captions. I agree with the intent of the blog--quit making crappy ads and bloated sites! I use elinks often, and find it's text-based approach easier to comprehend. What are your thoughts?
- tombh 10y agoSince traveling in Asia and getting elinks into muscle memory I now use it even on good connections, it's so much more satisfying to get consistently quickly rendered text into my eyeballs.
- mysterydip 10y agoAgreed! I try to keep my site light. I'd like to see a return of the web to a content layer where the browser can choose how to present it. In the end we want to read content. We don't care about someone's favorite scrolling method or menu system. Why can't I set up my browser preferences to be "show me websites with a light blue background, navigate through a menu bar horizontally across the top," etc. I don't think it would happen with current inertia, but maybe that's an area for a niche browser.
- jff 10y agoAs I understand it, early on there was sort of an expectation that users would be defining stylesheets and applying them to websites, exactly like you said: "use light blue background, menu bar horizontally across the top, paragraph text should be 16 pt." etc. There's nothing wrong with site-provided CSS, but I strive to make my own stuff work with or without CSS.
- Fifer82 10y agoI don't see the problem. It isn't 1996 and I don't care about people who turn JS off. This tiny percentage of people, are dwarfed by IE9 users, which, I don't support either. What is the moral of the story?
- eponeponepon 10y agoThe moral of the story is that some web people don't care about things which, had they a deeper understanding of what they do, they would intuitively grasp they should care for. QED.
- tracker1 10y agoThere is/was an internet news website 15seconds.com iirc, that was so named because that's how long the average person would wait for a page to load. Back in the 90's when dialup was common. I think people should try setting chrome in devtools to 2g speed now and then, so they know the pain they're causing for a lot of people on wireless without a good/stable connection.
- nandhp 10y agoFor anyone wondering, the spinning Unicode symbol mentioned is F01E, corresponding to fa-repeat in Font Awesome: http://fontawesome.io/icon/repeat/ http://fontawesome.io/icon/repeat/ Font Awesome also has a bunch of spinner icons which OP is probably seeing on other sites: http://fontawesome.io/icons/#spinner http://fontawesome.io/icons/#spinner It really is unfortunate that there is no way to have these widely-used resources (Font Awesome, jQuery, etc.) cached on a long term basis across all sites that use them. (Though arguably this is easily achieved for fonts, which can be installed system-wide.)
- mschuster91 10y ago> It really is unfortunate that there is no way to have these widely-used resources (Font Awesome, jQuery, etc.) cached on a long term basis across all sites that use them. There is - Google, Cloudflare and jQuery offer a CDN. The problem with CDNs is that you then have a SPOF and an external dependency. > Though arguably this is easily achieved for fonts, which can be installed system-wide. Oh please no, this always leads to problems sooner or later - for example, graphics designers tend to have LOTS of fonts installed, from all possible sources. Especially the pirated fonts tend to freak out in lots of different ways, and if there's a local() in the font-face rule, things break and you get weird bug reports...
- jordache 10y agoplease make your site lynx compatible
- gjkood 10y agoIf all the important content of your website can be rendered in a timely fashion through a text browser like Lynx, then you will have catered to the lowest common denominator. Granted that is a very retro concept.
- matt_morgan 10y agoSomewhere between Linux, Firefox, uBlock, etc. I see a lot of this stuff on my fast connection as well. Vox looked liked that to me for a few months, maybe a year or two ago.
- udfalkso 10y agoIf you're on a mac the Network Link Conditioner is a great way to test your stuff on a simulated slow connection. https://medium.com/@YogevSitton/use-network-link-conditioner-when-testing-your-app-bad18ecad877 https://medium.com/@YogevSitton/use-network-link-conditioner...
- siliconwrath 10y agoAnother easy way to play around with network conditions is included in Chrome dev tools: https://developers.google.com/web/tools/chrome-devtools/network-performance/network-conditions https://developers.google.com/web/tools/chrome-devtools/netw...
- dgudkov 10y agoThe developer axiom #1: If it works on my computer then it works for everyone else.
- JustSomeNobody 10y agohttps://rlv.zcache.ca/works_on_my_machine_round_sticker-r56ce1cc314be46efbe749e9c58c761d5_v9waf_8byvr_512.jpg https://rlv.zcache.ca/works_on_my_machine_round_sticker-r56c...
- colanderman 10y agoI don't see a mention of the question of utmost importance – at what baud rate are you connecting?
- robocat 10y ago> Please, please, if your site requires AJAX to work at all, then retry failed AJAX queries. Anyone have data on the best ways to do this? Or information on the implementations used by say Gmail or Facebook?
- lupin_sansei 10y agoI wonder how much difference surfing with Adblock would make while connecting over a modem?
- l0b0 10y agoExcellent site which brings us to an obvious question: At what point should we as developers consider a site good enough? There's an infinite tail of worse and worse speeds and latencies. At some point it makes business sense to stop optimising, and for businesses with lots of users that point is inevitably before supporting 100% of users. So how do I prove to the business where the 90th and 99th percentiles are, within some reasonably scientific measure of uncertainty? Aside: I just checked the site I'm working on. When throttling Chromium to GPRS speeds (500 ms, 50/20 kb/s) the main page has all the text on it by 16 seconds after a hard refresh.
- captn3m0 10y agoIf anyone is actually suffering from dialup speeds and using Chrome, you should try out my extension to disable web fonts: http://github.com/captn3m0/disable-web-fonts http://github.com/captn3m0/disable-web-fonts. It blocks all network requests to font-files. Also has a couple other tips in the README for improving page-load performances over slow networks. I wrote it when i saw suffering terrible speeds over mobile internet (EDGE) a couple years back.