No one likes to wait. Whether it’s in line for coffee, stuck in traffic, or on-line waiting for a web page to load, waiting does not make for a great experience. In fact, performance is such an important ingredient to a user’s experience on a website that the Google User Experience team named “fast” as one of their 10 fundamental design principles for a great experience.
At Meebo we are constantly thinking about performance. We know that our Meebo Bar adds value to any publisher’s web site (sharing, notifications, custom applications, instant messaging, and an engaging advertising platform). But we also know that any third-party plugin will affect page performance.
In the upcoming version 10 of the Meebo Bar we took a step back and looked at our underlying architecture. First, we rebuilt the bar out of smaller components. This led to a simpler, more compartmentalized model. In addition to improving performance, our new architecture ensures additional privacy for our users. Next we went to work applying industry best practices to ensure the best performance possible. In fact along the way we even led the charge on some new emerging standards around third-party plugin performance.
That’s why Martin Hunt and I were recently invited by Steve Souders (Performance Lead at Google) to give a detailed talk on our approach to performance at the Velocity 2010 Web Performance and Operations Conference.
Plugin Performance
So what makes a plugin fast? The performance of a third-party plugin is directly related to how it handles these four concerns:
- Payload size. The amount of code that needs to be downloaded & processed.
- Network requests. The number of additional network requests required to load the plugin.
- Page blocking. Whether the plugin blocks the page from rendering.
- Plugin speed. How fast the plugin can render itself and be ready for activity.
We made version 10 of the Meebo Bar significantly faster by addressing each of the above concerns, implementing five specific performance improvements.
1. Just-in-time code delivery
One secret to making third-party plugins faster is to download the smallest amount of code needed at just the right time. A smaller initial payload means the bar can start up much faster. Deferred loading of functionality means the loading cost of each feature is paid incrementally instead of all at once. As a consequence, the initial JavaScript payload is now just 1/3 of its previous size. Smaller payload size and network requests made just when you need them leads to an overall faster bar.
2. True persistent caching
What if we could take the code that gets loaded for the Meebo Bar during an initial site visit and store all of that code locally? And on subsequent visits to sites with the bar remember the local copy instead of re-downloading it from the network? This is exactly the approach we have taken with our true caching mechanism. Simply put: near zero payload size and fewer network requests results in a faster bar.
3. Smarter image loading
The number of requests a plugin makes to load and render itself is an important factor in its overall performance. Some plugins have small download sizes but then require dozens of additional requests to fetch the necessary images to render themselves. Lots of network requests can really affect page rendering time.
In this version, all of our images (e.g., for buttons) are bundled within our CSS stylesheet as embedded data. Because image download piggybacks on an existing request, the total number of requests is kept low regardless of the number of images required. The end product is a faster overall page experience.
Martin wrote about embedded images back in March, and some of you asked what tools we use to accomplish this. Paul has been working to prepare an open source version of our CSS parser and pre-processor. Make sure to check back for more news about this later!
4. Non-blocking code
Normally when you add JavaScript code to a page the browser will block the rest of the page from rendering while it downloads and processes the recently downloaded JavaScript.
To solve this problem, Martin went to work and pioneered a technique that ensures the browser will never block while loading the Meebo Bar. This approach has garnered interest in the engineering community, leading us to share the mechanism with the rest of the industry. Not blocking the page from rendering is fundamental to performant third party plugins.
5. Faster, more flexible rendering
In previous versions of the bar we took the standard approach of using images to create gradients, drop shadows and rounded corners. Images are static, inflexible and relatively large in payload size.
In the new version of the bar we take a different approach. By rendering a large portion of our graphics using vector drawing technologies (like SVG and VML) we can draw the bar faster without additional HTTP requests and with greater flexibility to customize the look and feel of the bar.
The Result
Shortly we will be releasing version 10 of the Meebo Bar. It is a key step forward in terms of the quality it delivers to the user’s site experience. The good news is it delivers all of the previous Meebo Bar functionality with even greater security and with a significant boost in speed. While we can’t speed up the coffee line or change that traffic light, we can at least reduce the time you spend waiting when using a website on which we’re featured.
Marcus
[ comments ] [ past devblog posts ]
Follow us on Twitter
