Speedier Site – faster downloads!

We’ve been working behind the scenes to improve how the pictures work here!

Some of the pages on the site (for instance the technique pages) have multiple Sudoku images showing, as they explain how to apply a technique. Some pages (for instance one of the Step-By-Step guides for one of the daily puzzles) can have over a hundred images, showing in detail how to solve one of our daily sudoku puzzles.

Those images are fairly small – perhaps 10-15kb each, but when you have a hundred, that’s over a megabyte of data our server has to send out, and your computer has to receive and store, and that’s all a slow process, especially if you’re on shared WiFi!

So we’ve been trying out Canvas and Javascript to send the puzzle and layout information in a condensed form in the pages, which asks your browser to paint the picture itself, rather than downloading it.  Our experiments here are that it saves anywhere from 100kb to 1Mb per page, and even on a fast connection that’s anything up to 10 seconds of saving!  It helps our server keep cool and mellow in the summer, and it means you don’t chew through quite so much data from your allowance!

Another bonus is that because it uses the nice fonts and technology in your computer, it will render the puzzles more sharply and clearly than before – so it should be good for readability.

We’ve tried to make it fall-back gracefully if you’re using a much older browser, so it’ll go back to the old image method if it needs to. We’ve tried on a number of mobile devices too and it seems to help them a bit, but we can see we still have layout/css problems all over the place to fix!

We’ve tested that printing still works, so hopefully everyone should be able to keep doing things the way they prefer.

Please let us know if you come across any problems!


For the techies:

We use a wordpress shortcode in our page to query our database for the appropriate puzzle information. This returns a puzzle ‘string’ (a sequence of usually 81 characters, to make up the 9×9 cells, sometimes more if there are pencilmarks to include or things like background shades and arrows).  The PHP that processes the shortcode writes this out as a small piece of javascript in the page. As your browser renders the page, it runs the javascript, and expands it out into either a canvas, or if the browser can’t handle a canvas, includes the good old img src for the puzzle from our server the old way.

If it’s running a canvas, it then runs a function to draw in the grid, numbers, pencilmarks, shading, and everything else, directly onto that canvas. All in far less time than it takes to request the equivalent picture from our server!  As a result the server is processing a single page, as the browser creates all of the images directly, rather than a page resulting in 50-100 different requests. The reduced load on the server means that everyone gets pages more quickly when lots of people are accessing at once!

More than 99% of the visitors to our site are using a modern browser so should get all of the benefits!