Huge Performance Improvements In Latest Translate This Button

A few days ago I released a new version of the Translate This Button, a free JavaScript translation widget. Of the sites I tested, the translation operation now runs an average of 70% faster. This performance increase adds to several layers of speed improvements made in previous versions.

Additionally, this release includes other enhancements, such as a reduction in HTTP requests and the preservation of DOM-based JavaScript events. Let’s walk through the changes I made; hopefully some of the optimization techniques can be reused in other projects.

Reducing Calls To The Language API

When a translation occurs, the TranslateThis Button parses the DOM, and passes the data to the Google Language API. Google’s JavaScript API imposes a limit of 500 characters per call, so previously the widget chunked out portions of the DOM that were under this limit, then passed them to Google asynchronously.

Although fairly quick, the old technique often resulted in strings that were much lower than the API limit. This left a lot of room for improvement, which has been addressed by the latest release.

Now the TranslateThis Button only pulls in text nodes, which preserves any DOM-based JavaScript. Unfortunately, simply passing these text nodes to Google is a performance dead-end (that’s a lot of HTTP requests). So the “secret sauce” is to concatenate the text nodes into a single larger request to pass to Google.

Basically, all the text nodes are appended to a single element, with each node wrapped in a <p>. Once this element reaches the character limit, it is passed to Google, which returns a translated version. The script then parses this translation back into the individual text nodes and makes the appropriate adjustments on the page.

All in all it drastically reduces the translation time on most websites, and has the added benefit of preserving DOM-based JavaScript. In previous versions, any JavaScript that was attached to DOM elements broke after translation, since the widget replaced those nodes.

Reducing HTTP Requests to my CDN

The Translate This Button is hosted on Amazon Web Services, and with its hundreds of thousands of users, hosting costs do become an issue. The script itself is very lightweight, weighing in at just over 5kb after gzipping, however it makes a couple extra requests for UI imagery.

In this release I added a data URI for the main button image, which works in all browsers except IE7 and below. This removes the main image request by embedding the image data within the JavaScript instead.

This is a somewhat mixed bag, since IE6+7 users not only download the data in the JavaScript, but also the image itself. However the performance increase for most users (as well as cost benefits for me) make it worthwhile to employ across the board. Additionally, the market share of older IE versions will decrease over time, making this technique more and more effective.

Performance Improvements In The Future

Although the core JavaScript has been pretty well optimized, there are some additional improvements to be made in the future. In terms of performance, the remaining loose-end is the relatively short character limit imposed by the Google Language API. However, this limit only pertains to the JavaScript API, and the standard API can accept much longer strings, up to 5000 characters.

A future version of the TranslateThis Button will take advantage of these longer strings, which will cut requests to the Language API down by another 90%. As an added bonus, it will no longer require Google’s jsapi JavaScript, which will further decrease requests, shorten the embed code and reduce the widget’s instantiation time.

• Retweet
• Share

---

---

Tags: AJAX, APIs, DOM, HTTP requests, javascript, performance, translation, widgets

This entry was posted on Thursday, October 21st, 2010 at 9:07 am in the category performance.

---

You Might Also Like:

• TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike
• 10 Javascript Performance Boosting Tips from Nicholas Zakas
• CSS Data URIs – Use Them In All Browsers Now!
• Appending Style Nodes with Javascript
• 10 Advanced jQuery Performance Tuning Tips from Paul Irish
• QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler
• Scrolling Parallax: A jQuery Plugin

---