A Lack of Optimization
Throughout my time on the site, I've noticed that there has been a lack of optimization in many areas, reducing my computer's performance and slowing down processes, or even making my tabs/the whole browser crash. This isn't just a “me” issue, as my friends have also talked about this happening to them, and as you'll see in the posts below, many others have been experiencing this with overheating, loud noises of computer agony, and crashing.
For me, I run on an 8GB gaming laptop. I'm able to run games such as Subnautica, Genshin Impact, and even games like Monster Hunter World on good graphical settings without issue. However, when it comes to Lorwolf, my computer doesn't seem to handle it very well. To put it simply, this petsite browser game is more intense on my computer than Genshin Impact. That's not good.
I believe I've found some of the sources of this problem with the help of UwU, and I'm going to explain them below.
HTML5 Canvassing
HTML5 Canvassing is when you draw elements using JavaScript, such as shapes and text. However, this process is prone to memory leaks, which if left to leak for a long time, your computer will run out of memory and probably abort the process that was causing that leak, hence crashing. Otherwise, it will probably just heat up and start to get loud. Still, both are not good. And HTML5 canvassing is everywhere on this site.
A good example of this is the clouds that are slowly moving across the top of the webpage in light mode. You would think that this would be a GIF or CSS animation (as the stars in the dark mode version are!) but instead, this is an HTML5 canvas. And it's a big one. It's 300 lines of code that you the user have to run every single webpage of Lorwolf you're on if you're using light mode, and as you may guess, this can cause a bit of a workload on your computer. If you'd like to see for yourself, here's a pastebin of the cloud script. This is very unoptimized, as with the stars in dark mode, this could just be a CSS animation and there would be no issue.
Furthermore, other elements of the site use HTML5 canvassing as well, such as Campaign. The battle animations use HTML5 canvassing, but not only that, but the landscape/environment image is an HTML5 canvas as well. It's not animated, but it's still using an HTML5 canvas. Mining, too, has HTML5 canvassing. The picture of your wolf moving a cart in the mines is a canvas. All of these are generally something users would have in a window for a long period of time - Mining to check in on every now and again, and Campaign to grind. Being on a page with elements prone to memory leaks for long periods of time leads to disaster. They don't have to be an HTML5 canvas, though! In fact, Fishing doesn't have HTML5 canvassing. It's raw JavaScript, which is perfectly fine!
Wolf Images (and Image Layering)
Something users might not be aware of is that your wolf isn't a compiled image. It's a series of layers being shown to you, but each individual layer is something you have to load to see the wolf in full. These layers are the eyes, top coat, under coat, base coat, accent coat, lineart, and any apparel you might have applied to the wolf. All of these are 800x640 images, all of which you have to load yourself. If you're low on bandwidth, sometimes the process just gives up and the wolf can't load at all. This might be the reason some people see their wolves go invisible every now and again.
These images aren't compiled on the servers end, and are left to the user to compile them themselves. This is also the reason why we can't just directly copy the image of our wolves. The layer images are hosted on the site's end, but since it's not compiled, if we were to try to copy the wolf, we'd most likely only just copy the lineart layer, since that's the layer that's on top of everything. Saving the image by the “save image” button on the top right of the wolf is what compiles it and allows us to send the full wolf image. This image layering system puts a lot of strain on the user due to how many images they have to load let alone how big each one is. When I looked at my data usage for my phone in May, I was shocked at how much my browser had ate up until I realized that's when I started using LW on my phone, and I thought about all of those large images it had to load.
This lack of compiling isn't just isolated to wolf images, as Kolo on the 2nd page had pointed out, this also applies to Mining, as all of the images for the full minecart image are on different layers that the user has to load, which means the code looks like this.
While we're on the topic of wolf images though, let's talk about our avatars. You're not being shown a cropped version of the wolf to fit the avatar box. You're actually still being shown the full image of the wolf, it's just that a lot of it is hidden behind the avatar box. Meaning that at any point on the webpage, you're still loading up a minimum of six 800x640 images at any time, since the avatar is always displayed at the top right of the webpage. This gets worse if you're browsing the forums on a thread with a lot of posts, since you'd be loading each user's avatar, which also has a minimum of six 800x640 images each. For example, this is how many images you have to load just to see my avatar. This is useless, as I'm only able to see a fraction of what is actually being loaded. This is unnecessary and hinders performance.
Image Sizing
The images themselves are way bigger than necessary, which also causes a bigger workload on the user's end. You may have noticed that I've pointed out how the wolf image layers are 800x640, but did you know that the wolf images themselves are actually 750x600 when we save them? I'm genuinely confused by this discrepancy and I can't offer any explanation for it. Either way though, that's not good either…
As another example, custom apparel model/preview images are 3000x2400 on the custom apparel shop, but obviously, you're not seeing it at that size, meaning it's another unnecessarily massive workload that you have to deal with. As users have pointed out below this OP, NPC images too are way too big, as they are 3000x2400 images as well. But again, you're not loading them at this size, which causes more unnecessary workload as well as making the image sometimes turn “crunchy”, or very pixelated, to some users.
Timers
This is getting into smaller territory (in the literal sense), but I think it's still something worth talking about. There are timers on this site everywhere that are constantly ticking down in seconds. There's a minimum of three timers at any point of you browsing the site: The two activity timers and the LW clock. They are constantly working, which again may begin to hinder performance. But that's only the minimum amount of timers you could see. There are also stamina timers, farming timers, cooldown timers (for breeding, nesting, and when you can breed again), puppy timers, all working to tick down every single second. On top of everything I've already outlined, this is the icing on the overheated cake.
So What Am I Asking?
As a dev, one of the most important things that should be on your mind is, “is my code efficient?” It doesn't matter if it's technically working or correct, but that it is the most efficient it can be for processing (generally speaking) and for the user. As of right now, this is not being done. The code for Lorwolf as well as its image systems are very unoptimized and are harmful to the user, as a lot of its code/systems force the user to shoulder a lot of responsibilities that should be the site's job. Lorwolf is the only pet site (with a gene layering system) that I've seen to not compile its images, and it's a detriment to the user's performance.
A user should be able to access something like a pet site no matter the hardware, but with the constant crashing, freezing, overheating, and loud noises, people will get fed up and leave the site. I should not be saying to myself, “I wish I had more RAM so I could load up this site better!”
I implore the Lorwolf devs to work towards better site optimization and to let go of this habit of letting users shoulder a lot of this workload/processing responsibility. This is your site, it should be your responsibility.
