This blog post is so important that it's getting a spot on my main page. Every time someone complains about websites loading forever, and decide to make an article nothing is done. I'm adding to the pile.
According to httparchive (note, javascript required), the average page loaded today is 2126.7 KBs. That's just for mobile users, if you have the unfortunate fate of having a desktop machine, your page load will be 2419.6 KBs. This is obviously too much, just 10 years ago these two numbers 432.3KB, 921.6KB, respectively. Has text content gotten better since then? No. Has it required more resources? Yes!
These sorts of numbers baffle me. The largest text page on my site, guptill89's wiki page, is a mere 150KBs. That's with *2* images, totaling 140KB, and it is perfectly readable on both desktop and mobile. Of course, I don't usually have content on here that requires images. Okay, let's talk images.
As you may know, I do web development for a little webcomic called Tails Gets Trolled. Pages, especially new ones, on this site take quite a bit of time to load. That is something I'm working on, like optimizing PNGs, better transport protocols like QUIC, and other cool stuff. So, let's take a look at the most recent page released as I'm writing this, Chapter 27, Page 13. This is a huge PNG, 7.1MB as it exists on the site right now. There is this excellent utility called pngcrush that, as the name suggests, crushes the size of PNGs. Running pngcrush on a local copy of that PNG, I can pack it down to 5.7MB. This is not a resolution reduction trick, this unpacks into the same image. Same colors, same resolution, same contrast, same everything. That 1.4MBs, 20%, saved just from a simple optimization trick.
Another trick, of course, is to reduce the size of the image. That same image is 1500x4000 pixels. Strictly, you don't need all that detail. Even reducing it to a 1000x2667 image would do wonders. In fact, I just did it on my local machine and it reduced the file size of the optimized version from 5.7MB to 3.0. Oddly, running pngcrush on the resulting file actually increased the size, by 64KB. The image quality obviously suffers from this. A lot of users browse TGT from their phone, where this kinda detail is overkill. We're currently debating whether to serve lower quality page images to mobile users.
So of course, this weekend I'll be putting time into running pngcrush on every PNG on the site. Just because your site needs PNGs for functionality, does not mean that you can't optimize them.
I love myself a good Sonic fan game. I do however hate bloated websites. This is one of the worst I've seen. It's a static site, no real JS needed, yet it loads 2 megs of it. That's not even the worst part. The images on this site are incredibly huge. The two biggest offenders are the rediculously sized "Thank You" and "Album Art" pictures. These two, respectively, are 2500x1250(3.13MB) and 2393x1295(2.95MB). Go to this site. These images DO NOT need to be this damn big. My total amount of transfer, after disabling my adblock extensions (which, thankfully, weren't really used on this site), is 15.81MB. Imagine loading this website on a cell phone in the middle of nowhere. I did this, my father owns a cabin in the woods and the cellular service is very poor. It took me quite a while just to download the HOMEPAGE. This site does not actually hold the game or the soundtrack, you need to go to Google Drive to actually get the content. Holy hell.
Because I'm tired and want to get on to doing this dev work, I'm just gonna link to cool shit.
Talk on web minimalism by Maciej Ceglowski
More links to come as I slowly improve this article and upgrade it to Wiki status.