Spring cleaning, planning, and youth teams

It's time for an update from the development department.

After we completed the server move, which we unfortunately had to spend all of our time on in January, we began to design and implement the many new pages we need for the Youth Teams feature.

As this work progressed, it became evident that we had to take a step back perform a thorough analysis and take stock of all the 3rd party software, web technologies and practices we use, as well as all the old code, that's gathering dust in the corners of the game.

But why spend time on that now and delay youth teams?

Well, we have an ambition that, after releasing youth teams, we will finally start work on making Virtual Manager properly playable on mobile. Because the game has so many years under its belt, before we can do that, it will be necessary to do a thorough clean up, upgrade, and optimisation of our whole platform - not least for security reasons.

It would be silly if we implemented all of the new youth team pages and features using our usual old techniques and tools, and then had do it all over again this summer. We definitely don't have the luxury of wasting time implementing the same things twice over.

Therefore, it was important that we spent some time exploring, testing and selecting the techniques and tools that will become part of Virtual Manager's future development - as well as identifying the many places where we need to delete or update old code and 3rd party software libraries.

During this exploration, we decided to pick some of the lowest-hanging fruits in terms of cleanup, upgrade, and optimization. So for the last month or so we have been deep in the engine room implementing and experimenting with some of these things, in order to test their feasibility and gain experience.

Cleanup

We've gone through our Javascript and CSS and deleted large amounts of code that is no longer necessary - especially lots of old compatibility code that was used to support Internet Explorer's many flaws and shortcomings. Thankfully, most of that isn't necessary anymore, which means that you don't need to download as much code when you visit the site.

Upgrades

Furthermore, we have upgraded the software on our web server and configured it to use HTTP/2, which is the first update to the HTTP protocol for 18 years. The main advantages to Virtual Manager, initially, are header compression and multiplexing.

Each time your browser asks our server to send a particular file, it sends a number of headers with additional information to coordinate the request. When the server answers, it also sends quite a few header back in addition to the actual file. Even though headers don't take up that much room, it still adds up, especially when we transfer lots of tiny files, such as our icons. Previously, these headers could not be compressed, but HTTP/2 solves that problem.

Multiplexing solves another old problem in HTTP when sending a large number of files, such as images, stylesheets and scripts. With HTTP 1.1, the browser will normally open 6 separate connections to the server, each downloading one file at a time. The browser has to wait for the server to complete sending a file before it can ask for the next one and the many small files will queue up and wait for each other. This results in a lot of wasted time and poor utilisation of your bandwidth.

With HTTP/2, only a single connection is opened, and the browser doesn't have to wait to receive a file before it can ask for the next one. All of the files are transmitted over the same connection in one uninterrupted stream, making full use of the bandwidth.

If you're interested in the tech, you can read more about HTTP/2 here: https://developers.google.com/web/fundamentals/performance/http2

Optimisations

We have also gone through and optimised all of the graphics on the site. Overall, the total size of our image material has been reduced by over 30% without compromising quality.

When we were reviewing our server configuration, we also found an error that resulted in our javascript files not being compressed before they were transmitted. This has been fixed and it has resulted in a further reduction in the amount of data that needs to be downloaded when you visit the site for the first time or when we have made changes.

The result

All of these changes have been introduced one at a time over the past month or so. Together they have resulted in a significant improvement in the response time of the site, especially over mobile connections. We have used an automated test tool from Google that simulates a mediocre mobile phone over a slow 3G connection. For example, the time to show the front page of the forum with this simulated mobile phone decreased from 7 seconds to 3.5.

We saw the biggest improvement in the stadium editor, which downloads a very large number of images and scripts. We have decreased the total file size of that page by over 4MB, and HTTP/2 really shines here because of the very large number of file transfers.

On most pages, our performance score in the test tool has doubled or tripled, but there are still many things we can optimize. The whole process has been a great learning experience, and has resulted in huge todo-list, which we will tackle after the release of youth teams.

What about youth teams?

Of course, I'm not going to leave you without a sneak peak at Youth Teams.

Below is our first version of what we've been calling our youth dashboard.

It quickly became apparent that it would be too messy if the matches, players, tactics, etc. of the youth teams had be shoehorned onto the same pages as those of the senior squad. That's why everything related to youth players now gets its very own section.

The point of the youth dashboard is to provide you with the most important information about your youth team at single glance. We will continue to reevaluate this page as we all get to test out the game play and if some of you have a brilliant idea for an info panel that definitely needs to be there.

The "Interesting Players" section is probably the most important part. The purpose of it is to bring your attention to youth players who stand out for one reason or another.

For example, players who are getting particularly good or bad training results, whom you might consider selling or firing. The panel also shows players who are angry because they haven't been getting enough time on the pitch. Also, if another club adds one of your players to their wish list, they will also appear here.

We are also considering allowing you to configure and customize the content on the page itself. However, this won't make it into the first version, but if there's enough interest in something like that, we will look at it later. As I have mentioned, our plan is to first publish a version that contains just enough to make youth teams useful. After that, we will spend a couple of months on fine-tuning and adding new bits as both you and we really get a chance to play test the feature.

In my next blog post, I will tell you how we intend to perform the huge data migration needed to support youth teams.