Touhou-Project.com
patreon
Optimized Consistency
🕑 Added 2020-05-09 15:35:31 +0000 UTCIn the last one of these I said I would be working on the story list. I lied. Sort of. I’ll have more on that in a week or two but for now I wanted to talk about some other optimizations I’ve been up to.
Over the past year especially, I’ve tried to make THP more responsive and more uniform no matter what device you’re browsing from. This has resulted in restructuring old code and some of the other things I’ve talked about in the past. Still, it’s an ongoing development and one that’s never likely to be completely “done”.
I’ll offer a quick explanation as to the main things that may slow down a page.
For starters too much content can have a large impact; too many scripts, large images and the rest that are loaded and executed. Obviously, the most effective fix is only having the minimum amount of output you need.
Once that’s done, there are a few tricks that you can do to affect the loading process. With newer versions of the HTML spec, scripts and other things can be deferred or told to run asynchronously, shortening load times as code is executed in parallel. As of a few months ago, all of THP benefits as much as it can from this, as opposed to only parts of the site.
Still, there will be blockers—elements that need to be rendered before the page is more or less ready and recognizable (and usable!). User-side scripting that moves around elements, like the postbox, can’t be initialized without the DOM being ready. So there’s always going to be an inherent delay. Again, newer versions of HTML and other protocols help mitigate this.
One of the recent changes has been to make images load lazily. What this means—at its most basic—is that your browser doesn’t load and render an image until you scroll it into view. THP is an imageboard and the average thread can have dozens of images. Even if they’re just thumbnails, and “small” in size, this can easily total hundreds of KBs when summed up. And since the page is only “ready” when they’re normally loaded, they’re very much the definition of blockers!
Yes, it can be somewhat jarring to have an image “pop” into existence as you’re scrolling but I think it’s an acceptable trade off for initial load speed. I’ve made it so that images are only marked as “lazy” when there’s more than 5 images in a thread or past the first thread on a board page. Those conditions aren’t set in stone but I felt that it was a good initial compromise to try out. I’ve also touched up the archives to follow this new behavior.
I leaned on several tools to continue optimizing THP, chiefly the in-built developer tools in modern web browsers that show loading times and order. There’s stuff like HTML validators, minifiers and what have you. For this last batch of changes I also used this tool heavily to test various pages. Highlighting average times for content to be loaded and where there’s room for improvement made me change quite a few things. There’s still more to come, especially in regard to server caching but that’s a longer term thing.
What’s worth mentioning is that the banner system also got an overhaul. I standardized all the various board banners into a common format (jpg) and overhauled the script that loads them. Some of them have slight artifacting as a result of quality settings and conversion but it isn’t really visible at the size they’re normally displayed. They’ve generally decreased in size (in some cases, by over 100KB) and should, therefore, also load faster.
The script that rotated them was made more generic; it previously was a bunch of switch statements with a manually inputted array of banners. Now there’s an optimized array with the number of banners for each board and a random number is picked from the maximum value. That number is appended to the file name and the banner is loaded. Code-wise this is a change of a 4kb script to 522 bytes with a corresponding reduction in lines of code. The old code was also something that I hadn’t written myself, so it’s also a net plus to have something that I did from start to finish.
There’s other optimizations, like loading a webp banner on the front page if your device supports it (fuck Apple for being special snowflakes, btw). A nice side effect to some of the reworked stuff is that I’m closer to having no special rules for mobile devices in scripts. It’s my hope that it’ll be easier to unify mobile and desktop sites whenever I am done with the story list.
Still, that’s in the future. There’s one more noticeable thing that also broadly falls under optimization but can probably be better called standardization. Or, at least, ensuring consistency. There should be virtually no “jumps” in content moving around whenever you load a page on THP now. No matter if you’re on a small screen or a desktop, elements now appear where they’ll be even if the page has not finished fully loading.
There were many small things that were previously off: navigation bar on top expanding in size slightly at times, the logo/banner image moving other content around, replying to thread button moving around. All that has been systematically dealt with. At least the vast majority. I know it’s the sort of stuff most people ignore if not fail to notice but it’s something of a point of pride to avoid any source of jankiness. Sure, it’s a continual struggle and something that I have to mind whenever changing any aspect of the site. But, for the time being, you can load up and switch to a board page to a thread and whatever without even the tiniest bit of disorientation or annoyance.
I fear that writing any more will make for even more uninteresting reading. Pedantry and an overly technical focus is not everyone’s cup of tea. So I’ll leave things here. I super double pinkie swear that next time I write one of these I’ll be talking about the story list. It’s a very complicated subject and there’s loads to say.
Until next time, stay healthy and take it easy!
Comments
Benjamin Oist
Probably repeating myself as always, but I like hearing about the sausage-making, so to speak. Looking forward to whatever's in store for the story list!
