Node.js and Speedtest in 2012

I’m currently learning node.js, I’m planning a multiplayer version of the speedtest and this seems to be the way to go. Node.js might come in handy later on as well.

And here are my plans for the Speedtest in 2012:

  • Implement more typing achievements
  • develop the practice mode to improve your typing speed
  • create a multiplayer version of the typing test. I will probably steal a lot from Starcraft for this one, but we’ll see ๐Ÿ™‚

Speedtest Page Optimization

In the last weeks I optimized the page load speed for the new typing test version and wanted to record my steps.

Using Google Page Speed Addon

I first installed the Google “Page Speed” Addon which analyzes the page and suggests optimizations. Without any optimizations I receive 86 points out of 100, pretty good ๐Ÿ™‚

Using Yahoo’s “Best practices for speeding up your website” article

I’ll also use the Best Practices for Speeding Up Your Web Site article from Yahoo to optimize the Typing Test.

Step 1: Creating a sprite

Before creating the sprite its a good advice to replace your current images with the optimized versions the “Google Page Speed Addon” offers you.

The first thing I will do is create a sprite of all the graphic files (1 sprite contains all the images of the website), therefore reducing the http-hits to a minimum. I will use photoshop to create the sprite, but there are also a few tools out there, which can help you create the sprite (search for “Sprite generator”).

One thing you have to keep in mind while creating your sprite is, that you can’t group “repeatable”-images into the same file with “non-repeatable” images. If you are using “background-repeat” in your CSS you have to create an extra file for every “repeat-direction”, e.g.:

  • one image-sprite for all non repeatable images (like the “logo”, “icons” and “User Interface Elements”)
  • one for “repeat-x” images (these are probably the ones you will use as well for your backgrounds etc.)
  • one for “repeat-y” (sometimes you want to repeat a background vertically, for a specific box which has a fixed width but a dynamical height)

I used the non-repeatable and the repeat-x sprites for the speedtest. But I had a “repeat-x and repeat-y” image as well. Sadly those can’t be combined with the other sprites and have to be loaded separately (one http-hit for every “repeat-all” image).

Step 2: Caching

10-fast-fingers.com has around 58% new visitors and 42% repeating visitors. Caching can therefore reduce the server load significantly. I’m not really familiar about the best approaches to cache static files. I just added this code to my .htaccess and hoped for the best:


# CONFIGURE media caching

ExpiresActive on
ExpiresDefault "access plus 1 year"

seems to do the trick…

One thing you have to keep in mind, using this approach: If you change one of your static files, don’t forget to add a “random parameter” to enforce the client to load the updated file e.g.:
You change your style.css. Some clients won’t load the updated file (because the file hasn’t reached the expiration date). By adding a random parameter like “style.css?version=23423797” the browser is forced to reload the style.css file.

Step 3: combining and minimizing files

To further reduce the number of http-hits, I need to combine as many static files as possible. I could create a big minimized JS-File which would contain all the Javascript-Code and a big minimized CSS-File which would contain all the CSS-Code, but it would be hard to maintain. Everytime I would change something, I would have to recreate these files (and when humans repeat things, errors occur).
Instead I will use a PHP Script which merges and minimizes all the necessary files, and then gzip’s it. If the file already exists (and no files have been changed) it will use the cached one, otherwise it will recreate the file (on the fly).

The whole process is described here: Make your pages load faster by combining and compressing javascript and css files

This method is especially useful if you have a lot of stylesheets and scripts and it even gives you the possibility to split your stylesheets into logical parts. But keep in mind that you probably won’t be able to merge all of your scripts and styles. Especially if you use komplex Jquery Plugins (those with there own file-structure) or IE-fallback-stylesheets it might be tricky to integrate those (but you can still load them the way you used to do it).

There is more to optimizing a website for performance than what I did here. Still, these steps make out at least 50% of the performance gain, if not more. If you have any additional (and easy to implement) suggestions, let me know in the comments ๐Ÿ™‚

Speedtest Redesign: Overview

If you want to read all Speedtest Redesign related articles, check out this list:

Here are a few screenshots from the previous speedtest which was live from around 2007-2011 and which got replaced by the new Typing Speed Test.


The functionality of the previous version was quiet simple:

  • you could type for one minute using the 100-200 most frequent used words of your language
  • at the end you got your result, if you wanted to save it you had to take a screenshot (which a lot of people did and even posting there screenshot on forums etc.)
  • you also got a badge with your WPM count (which wasn’t accurate because I didn’t use the correct WPM-calculation back then)
  • the ranking list was reseted at the start of the month
  • cheating was quiet easy
  • lots of other stuff which got improved by now

A Google Analytics screenshot which shows the growth and reach of the Speedtest:

Screenshots from the new Speedtest

ย 

Speedtest Redesign: the beta is out

Hello my dear followers/readers,
as of today you can check out the speedtest beta version. Currently there are two languages supported:
english speedtest
german speedtest

As you can see there are still a lot of things missing, but you can already create an account and test/improve your typing speed. If you find any mistakes or have suggestions/feedback, please let me know: christianstrang@web.de

More features like the ranking list, badges, additional languages etc. will be implemented in the upcoming days/weeks.

Speedtest Redesign: Work in progress V

A quick update about my progress with the Speedtest Redesign:

The layout which you saw in the previous article Work in progress IV is now implemented and the test already works (currently I’m testing with german words). The next step will be a login system (so that you can login with your twitter or facebook account and track your results).

There are still a lot of things which aren’t implemented yet or need improvement but I will consider your feedback when I release the beta version (which will probably be in a couple of days *fingers crossed*).

Speedtest Redesign: Work in progress IV

I know, this might not seem like a lot of progress but I also worked on the footer of the site (which is not visible on the screen). I also wasted a lot of time struggling with a logo (as you can see on the screenshot I was not successful and had to skip this step for now).

I’m currently implementing the design in HTML & CSS as well as the basic functionality with Jquery/Javascript.

Speedtest Redesign: Work in progress II

I’m currently testing which system I’ll use for displaying and processing the words.

At first I thought about a word slideshow (as you can see in work in progress I – the photoshop screenshot). After Austin mentioned in the comments that this might not be such a good idea, I prototyped this solution and discovered that he was right. You can check the “word slideshow”-approach here: word slideshow


Especially if you are typing fast this gets very irritating.

Another approach is the “line switcher”. You basically have two rows of words. The first row is the one you are currently typing, the second one contains the ensuing ones. After finishing row 1, row 2 will jump one line (now being in row 1) and row 2 will be filled with the next line of words. Check it out here: line switcher

If you have any thoughts on improvements or maybe even a better approach, let me know in the comments.

Speedtest Redesign: Work in progress I

After collecting your feedback and suggestions I created a few paper mockups and arranged the most important elements.
I’m currently working on the design (using Photoshop CS5).

Paper prototyping / Mockups

(the mockups are posted in chronological order)

Photoshop Mockup and Implementation

First I create a mockup in Photoshop (I usually use a dark background and a light color for the main areas).

After creating the mockup I start working on the most important area first (for the speedtest it is the Input field and the words the user has to type).

If you compare the Photoshop Implementation with the last paper mockup you can see a difference in how the words will be displayed. Instead of having a huge word block with 3 rows I now experiment with a “word-slideshow”. This hopefully saves space and will get rid of the irritating “line-switching”.

(Please help me improve my english by telling me my mistakes).

Speedtest Redesign

Update: Work in Progress I

After almost 4 years I finally decided to start redesigning my typing speedtest. Redesign might not be the appropriate word though there will be definitely a new design but I also plan to improve and extend the functionality (without corrupting the core experience).

These are the features/improvements I currently plan on implementing:

  • a new Layout
  • improved WPM calculation – currently I just count the number of words (silly me) which is apparently wrong: Words per minute
  • higher cheat prevention – as for almost every application which runs client-side, its really hard to prevent cheating. I will research possibilities to prevent cheating, maybe we can finally have a nice little ranking list without those pesky cheater ๐Ÿ™‚
  • “smooth” next line – everytime users reach the last word and wait for the next block of words, their typing flow is interrupted. This is bad… really bad! Definitely need to fix that.
  • Increased site speed – the speedtest is quiet optimized already and with the additional features I’m a little bit concerned about the site performance (afterall over 1.000.000 users worldwide use the speedtest every month). A few things I will try to keep the load as small as possible:
  • Login with Facebook or Twitter, save your results and see if you improve over time
  • Gamification/Badges: I might add badges to improve your typing experience like: “typing more than 80 WPM, 10 times in a row” or “typing more than 100 WPM”. This won’t be in the first release but if the login system will be implemented there is a high chance that I add a few game elements
  • I’m not yet a logo designer but I will try to create something sexy and recognizable

But before I start hacking one line of code I need your feedback. If you have any suggestions, things you don’t like with the current version or features you might enjoy, just leave me a comment. Or, and this might be even better, participate on my uservoice forum. You can make suggestions or vote up suggested features from other users. I won’t implement every feature. Actually I will only implement the most requested features, so VOTE!

If you are interested in the current development, just follow me on twitter. If you find a mistake, please let me know in the comments!