The latest Shenmue 3 update reveals a completely redesigned website, but people quickly reported problems trying to view it. While one may expect that this was due to the amount of people visiting it, that’s not actually the main reason. In fact, the website just hasn’t been properly optimized. I’m pointing this out in the hopes that someone working on the website can make the necessary changes to address some of the main issues. As we’ve seen with the initial reveal, a major news update that draws a lot of traffic could lead to the server being unable to manage all the incoming requests. Below, I’ll go into more detail on the exact issues with the website. The following explanation may get a bit technical at times!
First of all, let’s look at the score the website gets from Google PageSpeed.
Google PageSpeed, which calculates how well a website is optimized, shows a total score of 0/100 for the new website. This is the first time I’ve seen a website actually score 0. The most obvious problem is that they used PNG files instead of JPEG files for their images. PNG is a file format designed to store images without any quality loss, and it’s therefore not a file format typically suited for websites. One of the files loaded on the home page is no less than 6Mb. Where exactly can this image in question be seen? Here:
Indeed, that tiny thumbnail in the top right corner is the entire 6MB image. Instead of serving a thumbnail, the website loads the entire image, and then lets the browser resize it. This isn’t a good practice. WordPress, which they’re using for their website, automatically creates thumbnails whenever you upload an image. So there’s simply no reason that they shouldn’t be showing the thumbnail instead. Doing so would dramatically reduce the total download size of the page. For the image in question, you can actually view the thumbnail here. It’s only 36kB. Had it been a JPEG file, it would be even smaller, and you’d hardly notice the difference in quality.
Using a 10MB background video looping in the background may also not be the best decision. While visually impressive, it’s not beneficial to loading speeds. Here in particular, sending an expiry header helps make sure the video is fetched from the browser’s cache instead of the server on follow-up requests. Otherwise, with a big update like the one today, you can expect a lot of requests to download the video at the same time.
Using a CDN to distribute images and videos would also have helped, although that’s not exactly the core issue here. So if anyone working on the Shenmue 3 project is reading this, may I suggest the following:
- Replace all the PNG files with JPEG files
- Change whatever code is loading the full-size images, and have it load the thumbnails instead.
- Set an expiry date for your static content, such as images, videos, scripts, stylesheets,
With those fixes the browsing experience will be notably better, and more importantly you reduce the risk of running into problems later on.