Posts Tagged ‘performance’
November 10th, 2010
Data URIs are one of the best techniques in CSS, allowing developers to avoid referencing external images and instead embed them directly into a stylesheet. The main advantage of this approach is to save HTTP requests.
HTTP requests are a huge performance bottleneck, and the reason techniques such as CSS image sprites have been popular for some time. Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. In fact, HTTP request management is so important, that it is the top issue in the Yahoo Performance Rules.
Data URIs are an excellent way to reduce HTTP requests and speed up your pages, so let’s walk through how to use them in all major browsers.
Tags: cross-browser, CSS, data URIs, front-end, HTTP requests, performance
Posted in CSS | 21 Comments
October 21st, 2010
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 … Read more…
Tags: AJAX, APIs, DOM, HTTP requests, javascript, performance, translation, widgets
Posted in performance | 6 Comments
February 10th, 2010
Nicholas Zakas is a Javascript guru and principle front-end engineer for the Yahoo! homepage. Zakas just announced his new book High Performance JavaScript, which you should order today.
Zakas is pretty much the man when it comes to Javascript performance, and in June he gave a Google Tech Talk entitled Speed Up Your Javascript.
While Javascript optimization is by no means black-and-white, here’s a list of 10 tips from Nicholas’ talk that will help you write Javascript that really flies.
1. Define local variables
When a variable is referenced, Javascript hunts it down by looping through the different members of the scope chain. This scope chain is the set of variables available within the current scope, and across all major browsers it has at least two items: a set of local variables and a set of global variables.
Simply put, the deeper the engine has to dig into this … Read more…
Tags: 10 tips, best practices, DOM, front-end, javascript, jQuery, loops, optimization, performance, scope, webdev
Posted in 10 Javascript Performance Tips, javascript | 21 Comments
December 8th, 2009
TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.
Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.
Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.
What can you customize in TranslateThis?
Tags: AJAX, analytics, cross-browser, customization, downloads, front-end, javascript, performance, plugins, translation, web design, webdev, widgets
Posted in front-end, webdev | 3 Comments
November 19th, 2009
There were a lot of good speakers at today’s jQuery Summit, but Paul Irish‘s talk on jQuery Anti-Patterns for Performance & Compression was my stand-out favorite. Covering a number of advanced jQuery performance optimization techniques, this speech put my knowledge of jQuery optimization to shame.
Before Paul’s talk my understanding of jQuery performance tuning was fairly simplistic:
- Optimize selectors to descend from an id if possible.
- Use tag names when selecting classes and don’t use an excessive number of selectors.
- Define variables instead of selecting the same object repeatedly.
- Optimize your code replacing repetition with object oriented functions.
But the information Paul presented blew all that out of the water. Here are 10 jQuery performance rules I gathered from his presentation:
1. Optimize selectors for Sizzle’s ‘right to left’ model
As of version 1.3, jQuery has been using the Sizzle Javascript Selector Library which works a bit differently from the … Read more…
Tags: front-end, javascript, jQuery, performance, selectors, webdev
Posted in webdev | 25 Comments
July 13th, 2009
I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back. The flip effect is similar to the UI animation on the iPhone
Download QuickFlip 2 for jQuery
Read the QuickFlip documentation
QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.
It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with … Read more…
Tags: animation, front-end, javascript, jQuery, performance, plugins, UI, web design, web2.0, webdev
Posted in webdev | 144 Comments
June 2nd, 2009
Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.
Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.
The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the … Read more…
Tags: animation, downloads, front-end, javascript, jQuery, open source, parallax, performance, plugins, web design, webdev
Posted in webdev | 81 Comments
August 18th, 2008
When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.
Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump
After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).
I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use … Read more…
Tags: cross-browser, CSS, javascript, jQuery, old school, performance, unobtrusive, video games
Posted in webdev | 23 Comments
July 10th, 2008
In a recent post, I wrote that developers should better optimize their JavaScript. Well, that’s easier said than done, so I’d like to get down to the nitty-gritty and talk specifically about optimizing jQuery. Please note that this is not about performance tuning of the jQuery library, rather it is about better engineering the code we use to interact with it. If you’re not a jQuery programmer, and you have no interest in joining the fad, don’t worry—most of the concepts here apply to JavaScript and general programming as well.
1. Beware of class-only selectors
A great part about using a JavaScript library like jQuery is its selectors. But before you use them all over the place, stop to think: what are the processing costs?
Basically, jQuery defines all the elements on a page as a huge JavaScript object, … Read more…
Tags: javascript, jQuery, object oriented, performance, webdev
Posted in webdev | 16 Comments
June 13th, 2008
Let it not be said that I never fall victim to a web fad: AJAX, jQuery, SEO‚ I was there with bells on. So when everyone started hating Flash and doing all web animation with HTML/Javascript, I jumped right on board. I thought it was just great! You didn’t have to lose any SEO, and most importantly you never had to open that awful Flash GUI.
But have you noticed? EVERYONE ELSE IS DOING IT! There’s just too much Javascript on the internet these days, and it is bringing many browsers to a halt. My MacBook is less than a year old (2.1GHz, 1GB mem) and Safari has been crashing frequently. In Firefox I can only have three or so tabs open before serious lag1. While I don’t have a super gaming computer, my computer is better than the average user’s, and I … Read more…
Tags: apple, flash, javascript, jQuery, open source, performance, SEO, web2.0, webdev
Posted in general web, SEO, webdev | 4 Comments
