Slow Loading Observation Pages due to AJAX

When I’m on the page for an observation, on the website, I notice that the content of the page doesn’t fully load on page load, and that some sort of AJAX is used to dynamically load content below the fold when I scroll down.

The most frequent time this comes up is when I’m on an observation and I’ve already read and contributed what I want to the ID and comments section, and then I want to scroll down to look at and/or contribute to the Data Quality Assessment. Sometimes it loads instantly, but other times it is much slower, taking 1-2 seconds, sometimes more, to load.

However the wait for the main content of the page itself is often much, much longer, typically 5-7 pages and I’ve had instances where it is even longer than that. This is all after the browser tells me that the page is fully loaded.

I dislike this. It’s annoying. And it’s counterintuitive to the way the web is designed to work. Browsers have built-in tools to show when a page is fully loaded, and they display it in the tab so that a user can open a tab in the background and wait for the page to fully load before switching to the tab. I already waited for the page to load, and the browser has told me that the page is fully loaded, but then I have to wait again. It slows down my use of the site. This is a nontrivial amount of time because I often click quickly through a lot of records and because the fact that the wait is triggered by me scrolling down on the page, makes it unavoidable, like there is no way for me to load a bunch of page in the background in tabs, and see in the browser when the various pages are loaded, because there is additional in-page loading.

Because of how it is undermining the browser’s default or expected behavior, it feels to me like a “microaggression”…it’s a little annoyance, the site has lied to me telling me the page has loaded but it’s not fully loaded, and it wastes my time when I’m doing something I see as a public service activity, like going through records and viewing and marking fields in the DQA to try to improve the quality or integrity of the site’s data. It feels sort of like a person walking ahead of me letting a door slam shut in my face in a circumstance where most people would hold the door. Or when a company calls me to tell me that something is ready, and then makes me wait anyway.

Little things like this make the world a worse place. They erode people’s trust in society. They send the message: “Your time is not important to us.”

I have a very fast computer, quad core with hyperthreading, and I very fast internet connection. If it’s slow for me, it’s probably much slower for others, and if it’s annoying me, it’s probably annoying others too. If it’s slowing down my ability to review records, it’s probably slowing down others too.

Part of me wonders, when the content itself is not being updated frequently, why can’t it just be loaded up-front, with no AJAX? If you’re gonna do AJAX though, at least do it in such a way that doesn’t override the browsers’ built-in behavior to notify the user when the page load is complete. Showing a spinning wheel on the page itself is fine if it’s a single tab, but it’s useless if opening tabs in the background because you can’t tell when the page is done loading.

In general, I think it is best practice to be as sparing as possible in the use of AJAX to load stuff on-demand, and to only do it when there is a significant load being placed by loading a particular resource.

So like…I would really love for this to be fixed, but perhaps more importantly I would really love for the people who design this site to reflect on their philosophy of design so that this sort of thing is not done in the first place. Yes, I realize I’m advocating making things more “Web 1.0” again, but this is one aspect of modern web programming that I find really reprehensible and I would really like us to move beyond.

1 Like

i think you’re misdiagnosing the problem. as far as i can tell, the fact that the page doesn’t automatically render the stuff at the bottom of the page is mostly saving the time it takes to lay out the bottom of the page and also to download all the images in the “More from XXX”, “Nearby Observations”, and “Observations of relatives” sections at the very bottom.

here’s a shot of what’s happening on the network side that shows that the only additional network activity that happens when rendering the bottom of the page is related to the load of the images:

all the data that’s displayed in the “Data Quality Assessment” section is already included in the JSON file that contains all the other information that’s included on the page (which is loaded when the page is loaded initially). (you can confirm this by loading the page, turning off your internet connection on your computer, and then scrolling down. the page will still render the rest of the page, except that the images will be missing.) so any extra time it takes to take to display that section once you scroll down is likely going to be related primarily to the time it takes your own machine to lay everything out (and to also download and render those additional images).

in other words, you could frame the lazy loading of the page as a problem, but it’s not an AJAX problem, and it’s definitely a deliberate design choice, not a bug.

3 Likes

I’ll note as an addon to @pisum’s post that this seems to only have started happening within the last month or so, before that it would load as normal, however it seems to be a consistent thing that is meant to happen.

As you said, this is a little thing. Something we, as humans, are well-equipped to deal with. The world doesn’t change much in the time it takes for me to wait. My “trust in society” has not been eroded by having to wait 2 extra seconds to see a box on a screen, nor has any hypothetical message been sent to me.

I’m not sure why you’re going after the people who code the website, I think their “philosophy of design” is great, and a minor annoyance like this really is, just, minor.

I don’t think it says anywhere that it has loaded yet, until you scroll down and it does load. Nowhere does it lie, and if you think the website is wasting your time or that you deserve special treatment because you are doing a “public service activity”… well, I don’t know man, might want to rethink that.

No one is forcing you to go on the website, but your contributions are appreciated by all.

There have been bug reports about this topic before, I believe; if you search around you should be able to find it. If this is a big deal for you and you really can’t stand waiting, you can always just use the Identify page to mark the DQA instead of opening the observation page, or just kindly report this, and wait for a fix.

4 Likes

Wasn’t it a part of a slow mode?

Anyway, with so many contributions and users at 1 moment it’s understandable why something is loading slower, and bottom part of page is used much less often. No aggression in trying to make it all work!

1 Like

I’m not sure what you’re referring to…

@bouteloua mentioned it after first time website crashed like a month ago.

1 Like

Can you link the comment so I have context?

I hope she will explain it the way it is/was better, I have no pc now to find it fast.

3 Likes

i wanted to revisit this to address a couple of things.

first, i’ve been paying attention to the lazy loading of the bottom of the page, and one thing that i notice is that the page seems to only start rendering the bottom of the page once you scroll past a certain point on the page and stop scrolling. in other words, if you scroll very slowly past the point and then continue to scroll very slowly another 5 seconds before you stop scrolling, then the bottom of the page won’t start rendering until at least 5 seconds after you scroll past the point (after you stop scrolling).

so (@tiwane) i wonder if this could be tightened up so that the page starts rendering its bottom half as soon as you scroll past the point instead of waiting for scrolling to stop? i think that will help make the page seem more responsive. (this might be related / relevant to https://forum.inaturalist.org/t/something-going-on-with-the-website/20270. )

second, i failed to earlier address cazort’s complaint that the page is using AJAX at all – unrelated to the lazy loading of the bottom of the page (which is not really AJAX, AJ at best). this is just the way modular API programming works. the same API used by the web to deliver data is also being used for the Android and iOS apps. so if you want to take advantage of that modularity, you’re going to use some basic AJAX when coding the web page. there’s little reason to deviate from this, just to have your browser tab show a loading indicator until all content on the page is delivered.

2 Likes

Apologies, I must have wrongly assumed something about the design.

I have not seen “lazy” design like this that does not use AJAX, that was the only motivation I was aware of behind such loading practices, so I must have just assumed that that was how it was designed. I did not actually look into it!!!

Still, I don’t like it, it’s jarring to me, especially given that I have a fast computer and it’s sometimes hanging for a matter of several seconds, and that it’s overriding the default “page is fully loaded” signal to the browser.

In the end, I don’t really care how it’s implemented, I just want to be able to open tabs in the background and wait to open them until they’re fully loaded. I don’t want to have to wait again on the page itself, once I’ve been notified.

It just did it again to me today. Some days it seems to be worse than others. It’s an issue to me because I sometimes will go through dozens of records at once and want to look at the DQA on each one of them.

Most modern browsers have built-in signals (animated icon in each tab, which displays whether or not it is the current tab, I’m currently using Chromium and also use Firefox and Chrome and they are similar) to show when a page is finished loading. Older browsers often changed the mouse cursor to denote this.

Overriding this behavior wastes’ users time because normally, if the user is having an issue with pages loading slow, the user can open the tabs in the background ahead of time so that they don’t have to wait.

With “lazy” loading, it makes it so the user has no way around the wait.

This is why I perceive it as a microaggression. It is a design choice that takes control away from the user in a way that reduces their ability to use their time effectively.

Haha story of my life. So many of the things I hate most in life, from the loud leaf blowers the landscapers use, to regressive tax policies that tax income from working at a higher rate than passive income, to the annoying pop-ups littering 90% of websites nowadays, are “deliberate design choices”.

I’m just frustrated. I was born in 1980, and I’ve seen technology, as measured by CPU speed, number of CPU’s, bandwidth and reliability of our internet connections, increase in unfathomable ways. I’ve seen hosting get incredibly cheap. I used to pay $10 for a couple MB of space on a shared hosting plan, now I can pay $10 for a two-core CPU and 50GB space and more bandwidth than I know what to do with.

And yet in many respects I’m still just waiting for stuff to load. Back when I was 15 it was waiting for that 4.0kB image to load over my miserably slow dial-up connection. Now I’m waiting due to “lazy” loading because web design has gotten so much more complex.

Surely there is a way to use modular design without inconveniencing the user and slowing down the site? If you were talking about loading a huge amount of high-bandwidth images, or complex database queries, then I’d be more understanding. But the DQA is extremely simple. There’s no absolute technological barrier here.

I’m just wanting to see things actually get better over time instead of having the programming behind things get progressively more bloated to where we’re eating up all the technological gains.

1 Like

i think you’re still mixing things up. it’s not the modular design itself that’s slowing things down, and it’s not AJAX.

if you’re talking about the lazy loading – the need to scroll before the bottom half of the page is rendered – i’ve already discussed a thing that will potentially make it more responsive. (re-read my previous post, if you missed it.)

if you’re talking about slowness in the loading of stuff at the top of the page, that’s likely going to be more of a general infrastructure issue. the database is probably just massive enough at this point that you need a lot of horsepower to retrieve data in the first place, and then you have a large enough user base hitting the system with lots of different kinds of requests that the servers that need to respond to that activity and also feed stuff back and forth to the database may be occasionally overloaded or maybe have to wait for other activity to finish. this kind of problem probably is going to be less related to how the observation page is coded than how the database and other back end infrastructure works in general.

they are already working on v2 of the API, which should provide the ability to be more selective about what is returned when retrieving data. so that may help to reduce the amount of data that is retrieved and delivered with each request. but that kind of thing takes time to implement. they’re probably also tuning their indexing as they roll out API v2 – so kind of thing could help certain kinds of queries run faster, too. but again, these and other similar kinds of things are larger than just how a single web page is coded.

i’m sure the staff share this goal, although they may have a slightly different perspective on what better means and how to get there.

it’s fine to express general frustration to an extent, and it’s fine your provide your opinion on things like what is “counterintuitive” and how a particular page should function (as long as you realize that at the end of the day others may not agree with your opinion), but i don’t think it helps your case if you misdiagnose issues without doing some basic legwork, and it probably doesn’t help your case to use antagonistic language and suggest nefarious motives / incompetence (ex. “your time is not important to us”, “erode trust”, “progressively more bloated”, etc.)

i think you are more likely to get others to see and prioritize a problem in the same way as you do when you can provide some insights into how others can see the problems you see. for example, you say that sometimes the page loads slowly, but sometimes it doesn’t. it’s really hard to do anything about that without some more information. so if you can note specific times when things load slowly, or if you note specific observations that load consistently slowly, etc., then that’s more likely to lead to something better from everyone’s perspective.

5 Likes

Thanks for the diagnosis and suggestion @pisum. We released an update today that should start loading page elements while scrolling, not just after scrolling has stopped. Seems a bit snappier to me.

5 Likes

Thanks. I just came back to this thread though, because over the past week I’ve been having a worse problem with this same issue, than ever before.

Earlier today I opened I think three tabs, and I had them sit there for minutes, and by the time I finally changed to them, they were still completely blank. I then had to sit there on each tab for several seconds before they loaded.

As far as I am concerned I have seen no improvement and the problem, if anything, seems much worse.

I can get specific if this would help to troubleshoot the problem. It is primarily happening on the “Photos of (taxon)” page, such as this one:

https://www.inaturalist.org/taxa/47851-Quercus/browse_photos

In the browser tab it shows fully loaded, i.e. the loading animation stops, but when I click over to the tab (even after waiting for an extended period of time) it still shows not loaded, and furthermore, it displays the misleading text: “No observations from this place yet.”

It is frustrating and leads to bad user experience, for many reasons, not the least of which is the fact that there are many times when there are legitimately no observations from this place yet (subject to whatever constraints you have selected), and the UI makes no distinction to the user between “this is still loading” and “this has still loaded and there are no observations.”

And here is the screenshot after it finished loading, showing that there actually were observations, and it just hadn’t loaded:

I’m back today and the problem is just the same as when I uploaded these photos.

I would really appreciate it if someone could look into this.

I understand that fixing the deeper issue (i.e. making the tab not display to the user in the browser, that it is fully loaded) may be difficult, but in the meantime would it be too much to ask for for you to update this to display a sign to the user that something is still loading, i.e. make it so that it doesn’t say the misleading and inaccurate “No observations from this place yet.” in place of “(Something) loading…please wait…”

I.e. distinguishing these two things seems critically important, especially on the days when the site is running very slow, and I am looking through photos of a more esoteric species and perhaps selecting the other drop-downs such that it is highly likely that, legitimately, no photos or observations were found…but in other cases it is still loading, so there is no way to distinguish between those things.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.