← Back to context

Comment by sidewndr46

3 years ago

Even worse is the new trend of web pages optimizing for page load time. You wind up with a page that loads "instantly" but has almost none of the data you need displayed. Instead there are 2 or 3 AJAX requests to load the data & populate the DOM. Each one results in a repaint, wasting CPU and causing the page content to move around.

This drives me crazy, especially because it breaks finding within a page. Eg. if you order food and you already know what you want.

Old days: Cmd + f, type what you want.

New days: first scroll to the end of the page so that all the contents are actually loaded. Cmd + f, type what you want.

Is just a list of dishes, some with small thumbnails, some without any images at all. If you can't load a page with 30 dishes fast enough, you have a serious problem (you could always lazily load the thumbnails if you want to cheat).

  • Well, the tech stack is insane: Some virtual machine running a web browser process running a virtual machine for a html renderer which consumes a document declaration language incorporating a scripting language to overcome the document limitations trying to build interactive programs.

    Actually much worse as Microsoft once did with their COM model, ActiveX based on MFC foundation classes with C++ templates, etc.

    And to build those interactive programs somebody is trained to use React, Vue, etc. using their own eco systems of tools. This is operated by a stack of build tools, a stack of distribution tools, kubernetes for hosting and AWS for managing that whole damn thing.

    Oh - and do not talk even about Dependency Management, Monitoring, Microservices, Authorization and so on...

    But I really wonder - what would be more complex?

    Building interactive programs based on HTML or Logo (if anybody does remember)?

    • Ironically these instant starting NT applications were often using COM.

      As much as I hated developing with COM, the application interoperability and OLE automation is a form 90s tech utopianism that I miss.

      7 replies →

    • Well, the way in which we got there is in adding more features to the "obvious" answer: all any given site necessarily has to do, to have the same presentation as today, is place pixels on the screen, change the pixels when the user clicks or types things, and persist data somewhere as the user does things.

      Except...there's no model of precisely how text is handled or how to re-encode it for e.g. screen reading...the development model lacks the abstraction to do layout...and so on. So we added a longer pipeline with more things to configure, over and over.

      But - the computing environment is also different now. We can say, "aha, but OCR exists, GPT exists" and pursue a completely different way of presenting many of those features, where you leverage a higher grade of computing power to make the architectural line between the presentation layer and the database extremely short and weighted towards "user in control of their data and presentation". That still takes engineering and design, but the order of magnitude goes down, allowing complexity to bottleneck elsewhere.

      That's the kind of conceptual leap computing has made a few times over history - at first the idea of having the computer itself compile your program from a textual form to machine instructions ("auto-coding") was novel and complex. Nowadays we expect our compilers to make coffee for us.

    • And don't forget the UX designers armed with their figmas and alikes. The tech-stack is only one among a number of organizational and cultural issues crippling the field.

      2 replies →

    • > But I really wonder - what would be more complex?

      > Building interactive programs based on HTML or Logo (if anybody does remember)?

      Hold my beer: my Github Actions CI scripts use Logo to generate the bash build scripts as images that are then OCRed and executed by a special terminal that exploits the Turing complete nature of Typescript's type system.

      Turtles all the way down!

    • Here's a fun fact, most fonts have a font program written in a font specific instruction set that requires a virtual machine to run. There is no escaping the VMs!

      4 replies →

  • > New days: first scroll to the end of the page so that all the contents are actually loaded. Cmd + f, type what you want.

    Only to discover that 2/3 of the matches are invisible text that's put there for $deity knows what reason, and the rest only gives you the subset of what you want, as the UI truncates the list of ingredients/toppings and you need to click or hover over it to see it in full.

  • If you think that’s enraging just wait until you get a page that unloads the previous content as you scroll. You can only search the text that’s visible. Maddening.

  • I miss typing / to search on pages. Ctrl-W still messes me up at times when using a terminal in a browser.

  • >If you can't load a page with 30 dishes fast enough, you have a serious problem

    That depends on your scale. If your product is "large enough" it is relatively easy to get into the range of several seconds of response time.

    Here are some of the steps you may want to execute before responding a resquest to your user:

    - Get all the dishes that have the filters the user selected

    - Remove all dishes from restaurants that doen't delivery in the user location

    - Remove all dishes from restaurants that aren't open right now

    - Get all discount campaigns for the user and apply its effects for every dish

    - Reorder the dish list based on the history of the user interactions

    Now imagine that for every step in this list you have, at least, a single team of developers. Add some legacy requirements and a little bit of tech debt... That's it, now you have the perfect stage for a request that takes 5-10 seconds.

    • Dafuq kind of scale could even a service for lots of restaurants have, that that wouldn't be a single query taking milliseconds to execute? I'd maybe split the last bit (user history re-ordering) into another operation, but the rest, nah, not seeing it, one quick query, probably behind a view.

      I mean maybe your DB is a single node running on a potato and your load's very high but you're also somehow never hitting cache, but otherwise... no, there's no good reason for that to be slow.

      [EDIT] Your last paragraph is the reason, though: it's made extremely poorly. That'll do it.

      1 reply →

    • None of the things you said mentioned should be hard. We did complicated things like that and more in the 1990s.

      But it was different...

      Yeah. It was. That's exactly my point.

      A major problem is the number of places in our code stacks where developers think it's perfectly normal for things to take 50ms or 500ms that aren't. I am not a performance maniac but I'm always keeping a mental budget in my head for how long things should take, and if something that should be 50us takes 50ms I generally at some point dig in and figure out why. If you don't even realize that something should be snappy you'll never dig into why your accidentally quadratic code is as slow as it is.

      Another one I think is ever-increasingly to blame is the much celebrated PHP-esque "fully isolated page", where a given request is generated and then everything is thrown away. It was always a performance disaster, but when you go from 1 request to dozens for the simplest page render it becomes extra catastrophic. A lot of my web sites are a lot faster than my fellow developers expect simply because I reject that as a model for page generation. Things are a lot faster if you're only serving what was actually requested and not starting everything up from scratch.

      Relatedly, developers really underestimate precomputation, which is very relevant to your point. Your hypothetical page layout is slow because you waited until the user actually clicked "menu" to start generating all that. Why did you do that? You should have computed that all at login time and have it stored right at your fingertips, because it is a reasonable assumption given the sort of page you're talking about that if the user logged in, they are there to make an order, not to look at their credit card settings. Even if it expensive for reasons out of your control (location API, for instance) if you already did the work you can serve the user instantly.

      Having precomputed all this data, you might as well shove it all down to the client and let them manipulate it there with zero further network requests. A menu is a trivial amount of information.

      It isn't even like precomputation is hard. It's the same code, just running at a different time.

      "But what about when that doesn't work?" Well, you do something else. You've got a huge list of options. I haven't even scratched the surface. This isn't a treatise on how to speed up every conceivable website, this is a cri de coeur to stop making excuses for not even trying, and just try a little.

      And it is SO MUCH FUN. Those of you who don't try you have no idea what you are missing out on. It is completely normal on a code base no one has ever profiled before to find a 50ms process and improve it to 50us with just a handful of lines tweaked. It is completely normal to examine a DB query taking 3 seconds and find that with a single ALTER TABLE ADD INDEX cut that down to 2us. This is the most fun I have at work. Give it a try. It's addictive!

      4 replies →

    • I'm a well constructed system, you could probably get this down to one PostGIS query with some joins and spacial indexes that should run in <100ms.

There was a small accordion in some Google search results that opened around ~1 second after the results page was loaded and I think it was the most infuriating thing ever. And we are talking about Google here.

  • The one where you would go to click on the first result and it would expand seemingly perfectly timed in between and you’d end up somewhere else?

    • My guess for this is that the average user doesn't parse text on pages as fast as more tech-savvy users. That delay is perfectly timed for the average user to grab their attention.

      For me, I use google so often that I can rapidly parse information without really needing to read much of the text, the link just sort of 'looks' right. I've observed my wife reading google results and she is much slower and more methodical, probably because she doesn't google things 20+ times a day every day like I do.

      That's how I end up misclicking, because i'm not working at the speed of a normal googler.

      It is really annoying though, there are some css tweaks you can make using browser extensions to make that disappear if you're so inclined.

    • I really could see Apple adopting an approach from FPS games, where the phone applies a click to what was under your finger 1/4 second-ish instead of what's there when the click is recognized. Time-travel clicking.

      But the real solution is better web page design.

  • Their new AI shit on the top of the sesrch results does this. It's slow AF and I'll sometimes have scrolled partway down the page before it farts a huge blob of text up top and pushes stuff I've already scrolled past back down past my finger.

  • My goodness, that accordion needs to removed from their code base immediately.

    A horrific piece of UI/UX/engineering/whatever.

  • I'm sure the person who wrote that accordion is quite good at solving leetcode tho! (only half joking)

And when you're about to click on something, something new loads and everything jumps unpredictably and you end up accidentally clicking on the wrong thing lol

  • Yes, in Windows 50% of my day is fighting with something obscuring my view or taking focus. Something pops up just as I was clicking or pressing Enter. I have to sign into multiple systems in the morning and sometimes it takes four attempts to enter creds for one login because I keep getting interrupted. It's infuriating.

    • you would think they could figured out that programs not directly opened by the user shouldn't be able to steal focus from the program the user is currently interacting with. seems like basic UX/UI failure

      4 replies →

> You wind up with a page that loads "instantly" but has almost none of the data you need displayed.

Which, in my mind, means it didn't load instantly. The page isn't loaded until all of the data is displayed.

This is called cumulative layout shift (CLS for short) and there’s a push in web dev to work against and around this - it’s recently become part of the performance measurement of googles lighthouse scoring and server side rendering and static site generation metaframeworks like nextjs and Astro allow you to send out the entire static page HTML without having to lazy load any new data.

We also have tech companies that claims sub 300ms request response time is good enough. I wish people look at StackOverflow and understand how they do everything at under 20ms.

  • As a person from New Zealand I am accustomed to every single request taking a minimum of 300ms RTT and sometimes it's shocking when it doesn't.

Adjacent but similar, I am so over all of the animations and corporate bullshit on pages. I run a business making decent and super optimized web pages and people love them. They’re the only website in their town and field that doesn’t take 10 seconds to load and render.

  • Can you link to your website?

    • Unfortunately I don’t have a website for myself and I don’t feel comfortable sharing my client’s websites. I operate purely through word of mouth in my local town, and I don’t have any aspirations to “go big”

      2 replies →

I could kind of understand things moving around back in the 2000s when we were all getting used to AJAX but all these years later can we (at least) have the main navigation links stay still?

> Even worse is the new trend of web pages optimizing for page load time

I don't disagree with your example, but optimising for page load time is as old as the graphical Web.

Even more annoying is when ads pop in a second or so later under the cursor position just before you click, taking you to the ad not what you wanted to click.

  • Ads? I have a solution for ads... ever heard of uBlock Origin? :)

    • I am using uBlock origin, Privacy Badger as well as a PiHole for my personal use.

      That's not always an option for a given work environment, however.

This is so frustrating. Though I recently come across a rare bread, that I thought stood out on load speed. The BBC of all places. While following the sub disaster I was pleasantly surprised at how quick it always loaded. Nearly always it would load near instant after clicking my bookmark. (Definitely not something that is that common when you live in NZ)

Not at all what I expected from a news site. They're usually full of crap and dog slow.

This is the specific URL I experienced this with. Though the whole site seems mostly very quick. https://www.bbc.com/news/live/world-us-canada-65967464

And this is on a 2017 MBP, which some sites are really slow. Nothing crazy like the new silicon CPUs here either.

Google specifically reengineered YT last year to do exactly that! From loading ready to display html with subsequent clicks ajaxing more html to loading 1MB .js library and 400KB of json on first load with every subsequent click requesting anotehr ~400KB of json to be interpreted.

jfyi this is not new - we confronted this in 1996 when the web was very young.