RSS
 

Posts Tagged ‘performance’

Please welcome YSlow for Chrome

09 Mar

Ever since YSlow for Firefox was first released, it has helped millions of developers analyze web pages and suggested ways for them to improve their websites' performance. YSlow ranks in the Top 25 for Best of 2 Billion Firefox Add-ons downloaded so far. We are very proud of where YSlow stands today and we continue to work hard to take it to the next level.

Today's another "Hello World!" moment for YSlow. We are very excited to announce the beta release of YSlow for Chrome. YSlow looks beautiful inside the Chrome browser.

Image of YSlow running on Yahoo! homepage seen within Chrome

    Here are some of the feature highlights:
  • You'll feel at home here. We kept the user experience consistent with YSlow for Firefox.
  • Added the ability to detect post onload components, including for pages that prevent itself from being embedded and/or iframed. (experimental)
  • Support for 3 main rulesets: Default YSlow V2, Classic V1, and Small Site or Blog as well as the ability to create new ones based on these 3.
  • Offenders in CDN rule are now listed as domains only.
  • Runs multiple YSlow instances (new windows). This feature is excellent for comparing YSlow results for different pages side-by-side as shown below.

Screenshot comparing Amazon and Yahoo! performance w/YSlow  Some caveats: As of today, the current version of Chrome does not provide access to its network panel. As a result, we have relied on Ajax calls to do most of the heavy lifting for us. Hence, some rules might be affected thus, fluctuating the grades a bit if you compare them with the Firefox version.

Special thanks to Marcel Duran, front-end engineering lead for the Exceptional Performance team, who has led all the development efforts for this next-generation YSlow. We would also like to thank Stoyan Stefanov, our YSlow alumnus, for his valuable technical guidance.

If you’re interested in learning some of the “behind-the-scenes” techniques used to build YSlow for Chrome, please join us for a presentation introducing next-gen YSlow on March 15th during the Velocity online conference.

Last but not least, since this is a beta release, so please voice your feedback, report bugs, or request features on the Yahoo! Group for Exceptional Performance.

 
 

Liferay 6 Performance

08 Mar

Liferay has released performance whitepapers for both Liferay 5 and Liferay 6.  I got a chance today to review Liferay 6 specs and it looks like they have made some significant strides in performance.  Before I point you to the white papers or take two diagrams for comparison, keep in mind that performance on any portal is completely dependent on how you are using it.  Cached content on a portal is fast.  Pulling data from back end systems whose latency is not under your control will probably not be as fast.    You can find the white papers here.

The key findings of the study are:
1. As an infrastructure portal, Liferay Portal can support over 11000 virtual concurrent users on a single server with mean login times
under ½ a second and maximum throughput of 300+ logins per second.
2. In collaboration and social networking scenarios, each physical server supports over 5000 virtual concurrent users at average transaction
times of under 800ms.
3. Liferay Portal’s WCM scales to beyond 150,000 concurrent users on a single Liferay Portal server with average transaction times
under 50ms and 35% CPU utilization.
4. Given sufficient database and efficient load balancing, Liferay Portal can scale linearly as one adds additional servers
to a cluster.

The following charts are throughput based on simple content portlets. (e.g. very light)

Login Throughput on Liferay 5

 

 

 

 

 

 

 

 

 

 

 

Login Throughput on Liferay 6

 

 

 
 

Local Storage And How To Use It On Websites

11 Oct


Smashing-magazine-advertisement in Local Storage And How To Use It On WebsitesSpacer in Local Storage And How To Use It On Websites
 in Local Storage And How To Use It On Websites  in Local Storage And How To Use It On Websites  in Local Storage And How To Use It On Websites

Storing information locally on a user’s computer is a powerful strategy for a developer who is creating something for the Web. In this article, we’ll look at how easy it is to store information on a computer to read later and explain what you can use that for.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Adding State To The Web: The “Why” Of Local Storage

The main problem with HTTP as the main transport layer of the Web is that it is stateless. This means that when you use an application and then close it, its state will be reset the next time you open it. If you close an application on your desktop and re-open it, its most recent state is restored.

This is why, as a developer, you need to store the state of your interface somewhere. Normally, this is done server-side, and you would check the user name to know which state to revert to. But what if you don’t want to force people to sign up?

This is where local storage comes in. You would keep a key on the user’s computer and read it out when the user returns.

C Is For Cookie. Is That Good Enough For Me?

The classic way to do this is by using a cookie. A cookie is a text file hosted on the user’s computer and connected to the domain that your website runs on. You can store information in them, read them out and delete them. Cookies have a few limitations though:

  • They add to the load of every document accessed on the domain.
  • They allow up to only 4 KB of data storage.
  • Because cookies have been used to spy on people’s surfing behavior, security-conscious people and companies turn them off or request to be asked every time whether a cookie should be set.

To work around the issue of local storage — with cookies being a rather dated solution to the problem — the WHATWG and W3C came up with a few local storage specs, which were originally a part of HTML5 but then put aside because HTML5 was already big enough.

Using Local Storage In HTML5-Capable Browsers

Using local storage in modern browsers is ridiculously easy. All you have to do is modify the localStorage object in JavaScript. You can do that directly or (and this is probably cleaner) use the setItem() and getItem() method:

localStorage.setItem('favoriteflavor','vanilla');

If you read out the favoriteflavor key, you will get back “vanilla”:

var taste = localStorage.getItem('favoriteflavor');
// -> "vanilla"

To remove the item, you can use — can you guess? — the removeItem() method:

localStorage.removeItem('favoriteflavor');
var taste = localStorage.getItem('favoriteflavor');
// -> null

That’s it! You can also use sessionStorage instead of localStorage if you want the data to be maintained only until the browser window closes.

Working Around The “Strings Only” Issue

One annoying shortcoming of local storage is that you can only store strings in the different keys. This means that when you have an object, it will not be stored the right way.

You can see this when you try the following code:

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', car );
console.log( localStorage.getItem( 'car' ) );

Trying this out in the console shows that the data is stored as [object Object] and not the real object information:

Console-e1285930679229 in Local Storage And How To Use It On Websites

You can work around this by using the native JSON.stringify() and JSON.parse() methods:

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', JSON.stringify(car) );
console.log( JSON.parse( localStorage.getItem( 'car' ) ) );

Console2-e1285930703974 in Local Storage And How To Use It On Websites

Where To Find Local Storage Data And How To Remove It

During development, you might sometimes get stuck and wonder what is going on. Of course, you can always access the data using the right methods, but sometimes you just want to clear the plate. In Opera, you can do this by going to Preferences → Advanced → Storage, where you will see which domains have local data and how much:

Storage-opera in Local Storage And How To Use It On Websites
Large view

Doing this in Chrome is a bit more problematic, which is why we made a screencast:

Mozilla has no menu access so far, but will in future. For now, you can go to the Firebug console and delete storage manually easily enough.

So, that’s how you use local storage. But what can you use it for?

Use Case #1: Local Storage Of Web Service Data

One of the first uses for local storage that I discovered was caching data from the Web when it takes a long time to get it. My World Info entry for the Event Apart 10K challenge shows what I mean by that.

When you call the demo the first time, you have to wait up to 20 seconds to load the names and geographical locations of all the countries in the world from the Yahoo GeoPlanet Web service. If you call the demo a second time, there is no waiting whatsoever because — you guessed it — I’ve cached it on your computer using local storage.

The following code (which uses jQuery) provides the main functionality for this. If local storage is supported and there is a key called thewholefrigginworld, then call the render() method, which displays the information. Otherwise, show a loading message and make the call to the Geo API using getJSON(). Once the data has loaded, store it in thewholefrigginworld and call render() with the same data:

if(localStorage && localStorage.getItem('thewholefrigginworld')){
  render(JSON.parse(localStorage.getItem('thewholefrigginworld')));
} else {
  $('#list').html('

'+loading+' '); var query = 'select centroid,woeid,name,boundingBox'+ ' from geo.places.children(0)'+ ' where parent_woeid=1 and placetype="country"'+ ' | sort(field="name")'; var YQL = 'http://query.yahooapis.com/v1/public/yql?q='+ encodeURIComponent(query)+'&diagnostics=false&format=json'; $.getJSON(YQL,function(data){ if(localStorage){ localStorage.setItem('thewholefrigginworld',JSON.stringify(data)); } render(data); }); }

You can see the difference in loading times in the following screencast:

The code for the world info is available on GitHub.

This can be extremely powerful. If a Web service allows you only a certain number of calls per hour but the data doesn’t change all that often, you could store the information in local storage and thus keep users from using up your quota. A photo badge, for example, could pull new images every six hours, rather than every minute.

This is very common when using Web services server-side. Local caching keeps you from being banned from services, and it also means that when a call to the API fails for some reason, you will still have information to display.

getJSON() in jQuery is especially egregious in accessing services and breaking their cache, as explained in this blog post from the YQL team. Because the request to the service using getJSON() creates a unique URL every time, the service does not deliver its cached version but rather fully accesses the system and databases every time you read data from it. This is not efficient, which is why you should cache locally and use ajax() instead.

Use Case #2: Maintaining The State Of An Interface The Simple Way

Another use case is to store the state of interfaces. This could be as crude as storing the entire HTML or as clever as maintaining an object with the state of all of your widgets. One instance where I am using local storage to cache the HTML of an interface is the Yahoo Firehose research interface (source on GitHub):

The code is very simple — using YUI3 and a test for local storage around the local storage call:

YUI().use('node', function(Y) {
  if(('localStorage' in window) && window['localStorage'] !== null){
    var key = 'lastyahoofirehose';
  
    localStorage.setItem(key,Y.one('form').get('innerHTML'));
  
  if(key in localStorage){
      Y.one('#mainform').set('innerHTML',localStorage.getItem(key));
      Y.one('#hd').append('

Notice: We restored your last search for you - not live data'); } } });

You don’t need YUI at all; it only makes it easier. The logic to generically cache interfaces in local storage is always the same: check if a “Submit” button has been activated (in PHP, Python, Ruby or whatever) and, if so, store the innerHTML of the entire form; otherwise, just read from local storage and override the innerHTML of the form.

The Dark Side Of Local Storage

Of course, any powerful technology comes with the danger of people abusing it for darker purposes. Samy, the man behind the “Samy is my hero” MySpace worm, recently released a rather scary demo called Evercookie, which shows how to exploit all kind of techniques, including local storage, to store information of a user on their computer even when cookies are turned off. This code could be used in all kinds of ways, and to date there is no way around it.

Research like this shows that we need to look at HTML5′s features and add-ons from a security perspective very soon to make sure that people can’t record user actions and information without the user’s knowledge. An opt-in for local storage, much like you have to opt in to share your geographic location, might be in order; but from a UX perspective this is considered clunky and intrusive. Got any good ideas?

(al)


© Christian Heilmann for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,

 
 

5 Things Magicians Can Teach You About Blogging

09 Sep

At some level, blogging is really just a stage show. We, as bloggers, are up on a virtual stage giving a performance that goes on for as long as we run our sites. Whether it is a stand-up comedy routine or a serious academic lecture, we’re talking to the world and hope that our audience, no matter how large or small, will listen.

On that front magicians are masters of the stage show. Using nothing but a few tricks, which can range from very simple to unbelievably complex, their charisma and whatever effects they have at their disposal, they have to keep a difficult audience entertained and enthralled through their entire act.

So maybe magicians can teach us bloggers a few things about showmanship and how to keep our audience glued to the screen, no matter what type of site we are trying to run.

On that front, here are five tips virtually any magician can tell you that can help make your blog a little bit better.

1. Have a Catchy Name

Good marketing starts with a good name and magicians understand this. You can tell a great deal about a magic act based on just the name it goes by and magicians are constantly honing and improving their brand by seeking publicity and getting their well-chosen name out there by any means necessary.

Application: Spend some time coming up with a good name that is easy to spell and pronounce but is also unique and describes what you are trying to do. Then, promote that brand vigorously and stand by it unless you have some urgent need to change.

2. Dress 1 Step Above Your Audience

Magicians have a general rule that one should dress one step above their audience. If you are performing in front of a completely casual audience, they will wear business casual, if the audience is business casual, they will dress in a suit, if the audience is wearing suits, they’ll wear a tux. The reason is that this gives the performer a sense of authority while making them approachable and relatable.

Application: Your dress is your writing and your language. Try writing your content one small step above what your audience would write, making it more authoritative than casual writing but still easily understood and approachable.

3. If You Mess Up, Be Honest, Break the Tension and Move On

Mistakes happen and when a Magician goofs they do so in a very public way. However, magicians rarely try to hide their mistakes, especially if they know their audience has caught on. Instead, they’ll admit to the mistake, go for a joke to break the tension and then move on quickly and confidently.

Application: Going for the joke may not always be appropriate but when you goof on your site you need to acknowledge the error, end the tension quickly (either with an apology, a joke or whatever is appropriate) and then move on. Don’t linger on your mistakes once you’ve dealt with them.

4. Make People Look Where You Want

Half of magic is about diversion and drawing attention where the magician wants it. A majority of magic tricks wouldn’t work at all if the audience was not looking at the right spot while the trick part takes place out of view. Magicians achieve this by using motion, colors, lighting and anything else at their disposal to distract and direct the audience to their will.

Application: Tell the readers what you want to look at, use subheads, lists, tables, images and other things that draw the eye to make them look at the information you deem most important. Use such tools sparingly, otherwise the eye doesn’t know where to go, but don’t force your readers to figure out what’s important on their own.

5. Know Which Secrets to Keep

Magic thrives on secrets. As the TV character Jonathan Creek was fond of saying, once explained what was once magic becomes mundane. Magicians keep their secrets closely guarded to keep the illusion of their tricks being actual magic. Though the illusion is fleeting, most people realize magic is just an illusion, the ability to deceive oneself for a moment is an important part of enjoying the show.

Application: Blogging isn’t nearly as secretive as magic but you do have to think long and hard about what information you want to give away and what you don’t. You need to ask yourself what information will help your readers better enjoy or learn from your site and what will confuse and complicate things needlessly. Keep the secrets that you need to in order to stay on target and be effective, don’t try to throw everything out.

Bottom Line

Though magic and blogging have many differences, blogging involves significantly fewer rabbits for one, there are definitely enough similarities so that we bloggers can pick up a few pointers, especially when it comes to keeping our audience entertained and informed.

It might be easy to not think of blogging as a public performance but, in reality, that’s exactly what it is, the most public kind of performance possible and the fact that it merely writing, audio or video doesn’t mean that many of the same rules don’t apply.

So let’s listen to the magicians, they might have a lesson or two for us.


Copyright © 2010 Blogging Tips. This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact us so we can take legal action immediately.

5 Things Magicians Can Teach You About Blogging

Blogging Tips Books
A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/