reworked OP 6/4/2023 for readability and more details

UPDATE 6/6/2023: The clouds in day mode are no longer an HTML5 canvas, and are instead CSS animations. This is a really great step forward, though I really wish this was disclosed in the patch notes.

UPDATE 6/18/2023: The patch notes say "Optimized Image File Sizes to improve performance" but I genuinely cannot tell what this is referring to or what has changed. Wolf images are still the same, and as far as I can see, so are NPC images. If anyone knows if anything I've stated below has been fixed, please let me know.

The Problem: 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.

Update 6/6/2023: Clouds are no longer an HTML5 canvas, and are CSS animations instead just like the dark mode stars! Woo!

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 users have pointed out below this OP, NPC images too are way too big, as they are 3000x2400 images. But 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's not enough 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 is 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.

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.

My laptop wheezes and gets overheated when I'm on LW for an extended period. This explains so much! Big support!

I do believe that Pixel Cat's End uses the load up the smaller image and layer it system as well. Just as a tangent on topic. Loading that way is a bit easier on site resources as far as images go, so they are able to host more of them. I also believe FR does, since if you load a gene that's broken it just breaks the entire dragon.

I would be in favor of a toggle that disables the cloud movement. That can be trippy for some users, as subtle as it is.

Memory leaks should be looked into because those can and will cause massive problems in a game. IE, Pokemon Scarlet and Violet, where some cities were just waiting to crash your game.

The images for the various NPCs are humongous too. I've accepted that they will look beyond crunchy on my PC. I opened Lorwolf on my phone and was surprised how everything looks laugh

Enjoy this crunchy bear.

That's at 100%

At 125% you get only bear. Smooth bear, but only bear. I think it jumps into mobile mode at that point.

Support! I honestly don't have any problems, but all of this sounds like a major problem waiting to happen and it'd make the site run faster.

Yes! My laptop gets so heated when on this site, I never leave it on here idle, because I don't want to put more wear on the poor thing.

And yet I can play Skyrim with 300+ mods on the same laptop, and it is probably pulling just as much resources.

I agree! I have a computer that can handle it just fine, but the site should not be as taxing as a video game. The crunchy images only look ok on mobile. On PC, the NPCs and pack banners are all crunchy. The pixel forum rank icons are also enlarged for some reason so the pixels are blurry.

I also have a (pretty new) gaming PC and my fans automatically go in to high power mode whenever I grind WWs for longer than 10 minutes. I think this is quite literally the only website where my PC behaves this way. It's slightly off-putting when all I'm technically doing is just refreshing one page and that simple task is somehow enough to make my laptop want extra cooling.

The first time this happened I tried to troubleshoot it by checking if lorwolf had some sort of low performance mode available and I was surprised when there was no way for me to optimize the site. I actually remember even searching for a toggle specifically for the clouds since I noticed they were animated.

I think a low performance mode would be the bare minimum thing to implement here. No animations and slightly crustier wolf graphics wouldn't be that big of an issue if it meant I felt less like I'm choking my poor computer during WW hunts.

I had no idea avatars load the entire wolf, whoa. I dont use lightmode so I never see the clouds, but i always was wondering if it was just a looping gif.

these optimization issues need to be looked into deeply. I have a computer that can handle the site, but i had no idea how… unoptimized a lot of the code is. Im aware changing code isnt the easiest thing in the world, but anyone should be able to play on a browser-based pet site regardless of their hardware. frequent crashes and memory leaks will drive people away, you don't really want that happening. support!

I'm constantly having memory leaks on this site that eventually leads to my tab crashing. Please please please optimize the site better. A simple animation does not need that much code and LW's images are unnecessarily massive.

Oh man I actually asked some people before if they had issues but they admittedly have actual desktop computers while I just have a gaming laptop, which can get overheated if I play Minecraft at low settings for the entire day. It seems that since I started playing Lorwolf my fan has been a lot more loud but I wasn't sure what it was. The page I idle on the most is my profile, so I wouldn't be surprised if it was the clouds doing that since I use light mode.